@o3r/components/index.d.ts

This module contains component-related features (Component replacement, CMS compatibility, helpers, pipes, debugging developer tools...) It comes with an integrated ng builder to help you generate components compatible with Otter features (CMS integration

import * as _o3r_core from '@o3r/core';
import { Output, ItemIdentifier, ConfigPropertyWidget, CategoryDescription, AsyncStoreItem, AsyncRequest, FailAsyncStoreItemEntitiesActionPayload, UpdateAsyncStoreItemEntityActionPayloadWithId, UpdateEntityActionPayloadWithId, FromApiActionPayload, asyncEntitySerializer, Serializer, SetEntityActionPayload, DevtoolsCommonOptions, OtterMessageContent, MessageDataTypes, ConnectContentMessage, RequestMessagesContentMessage, DevtoolsServiceInterface, Configuration, ContextInput, BaseContextOutput, Context, Functionify } from '@o3r/core';
export { BaseContextOutput, Context, ContextInput, TemplateContext } from '@o3r/core';
import { Observable, BehaviorSubject } from 'rxjs';
import * as _ngrx_entity from '@ngrx/entity';
import { EntityState } from '@ngrx/entity';
import * as i0 from '@angular/core';
import { InjectionToken, ModuleWithProviders, OnChanges, OnDestroy, Type, ComponentRef, SimpleChanges, PipeTransform, OnInit, AfterViewChecked, Signal } from '@angular/core';
import * as _ngrx_store from '@ngrx/store';
import { ActionReducer, Action, ReducerTypes, ActionCreator } from '@ngrx/store';
import * as _o3r_components from '@o3r/components';
import { FormControl, AbstractControl } from '@angular/forms';
import * as i2 from '@angular/common';

/** Types of components config */
type ConfigType = 'Block' | 'Page' | 'AppRuntimeConfiguration' | 'AppBuildConfiguration' | 'ExposedComponent';
/** Type of components we can have in an application */
type ComponentStructure = 'PAGE' | 'BLOCK' | 'COMPONENT' | 'APPLICATION' | 'NESTED_ELEMENT' | 'EXPOSED_COMPONENT';
/** Component context information */
interface ComponentContext {
    /** Context library */
    library: string;
    /** Context class name */
    name: string;
}
/** Component config information */
interface ComponentConfig {
    /** Config library */
    library: string;
    /** Config class name */
    name: string;
}
/** Placeholder data identifier */
interface PlaceholderData {
    /** Id of the placeholder */
    id: string;
    /** Description of the placeholder */
    description: string;
}
/** Placeholder metadata */
interface PlaceholdersMetadata {
    /** Component library */
    library: string;
    /** Component name */
    name: string;
    /** Placeholders available for the component */
    placeholders: PlaceholderData[];
}
/**
 * Output generated for component class metadata
 */
interface ComponentClassOutput extends Output {
    /** Component library */
    library: string;
    /** Component name */
    name: string;
    /** Component path */
    path: string;
    /** Component selector */
    selector: string;
    /** Component type */
    type: ComponentStructure;
    /** Component context */
    context?: ComponentContext;
    /** Component config */
    config?: ComponentConfig;
    /** Placeholders available for the component */
    placeholders?: PlaceholderData[];
    /** Determine if the component is activating a ruleset */
    linkableToRuleset: boolean;
    /** List of localization keys used in the component */
    localizationKeys?: string[];
}
/** Property types */
type ConfigPropertyTypes = 'boolean' | 'number' | 'string' | 'string[]' | 'element[]' | 'enum' | 'enum[]' | 'unknown' | 'unknown[]';
/**
 * Interface that check if the Nested configuration defined match the cms requirements
 * It only supports a 1 level depth object, containing primitive types (string | number | boolean)
 */
interface NestedConfiguration {
    [key: string]: string | boolean | number;
}
/** Representation of a config field */
interface ConfigProperty {
    /** Name of the configuration property */
    name: string;
    /** Description associated to the configuration property */
    description: string;
    /** Configuration type: string, number, boolean ... */
    type: ConfigPropertyTypes;
    /** Config property default value if primitive */
    value?: string;
    /** Config property default values if array of primitive */
    values?: (string | NestedConfiguration)[];
    /** Label to be used in the CMS for this config */
    label: string;
    /** Reference to the nested configuration if applicable */
    reference?: ItemIdentifier;
    /** List of possible value options */
    choices?: string[];
    /** The category of the config property */
    category?: string;
    /** The CMS widget information */
    widget?: ConfigPropertyWidget;
    /** If true, the CMS user must specify a value for the property */
    required?: boolean;
    /** Restriction keys */
    restrictionKeys?: string[];
}
/**
 * Output generated for component config metadata
 */
interface ComponentConfigOutput extends Output {
    /** Component's library */
    library: string;
    /** Component type */
    type: ComponentStructure;
    /** Flag for application config to identify it as a runtime config */
    runtime?: boolean;
    /** Title of the configuration property */
    title?: string;
    /** Description associated to the configuration property */
    description?: string;
    /** Configuration tags */
    tags?: string[];
    /** Configuration fields */
    properties: ConfigProperty[];
    /** Category (taken from @o3rCategories tag) */
    categories?: CategoryDescription[];
}
/**
 * Output generated for component config metadata
 */
interface ComponentConfigOutputs {
    /**
     * List of configuration output for a component
     */
    componentConfigOutput: ComponentConfigOutput[];
}
/**
 * Output generated for component metadata
 */
interface ComponentOutput {
    components: ComponentClassOutput[];
    configurations: ComponentConfigOutput[];
}

/**
 * Buffers and emits data for lazy/progressive rendering of big lists
 * That could solve issues with long-running tasks when trying to render an array
 * of similar components.
 * @param delayMs Delay between data emits
 * @param concurrency Amount of elements that should be emitted at once
 */
declare function lazyArray<T>(delayMs?: number, concurrency?: number): (source$: Observable<T[]>) => Observable<T[]>;

/**
 * Variable model from the placeholder reply
 */
interface PlaceholderVariable {
    type: 'fact' | 'fullUrl' | 'relativeUrl' | 'localisation';
    value: string;
    parameters?: Record<string, string>;
    path?: string;
}
/**
 * Raw JSON template coming back from the CMS or any other source
 */
interface PlaceholderRequestReply {
    template?: string;
    vars?: Record<string, PlaceholderVariable>;
}
/**
 * PlaceholderRequest model
 */
interface PlaceholderRequestModel extends AsyncStoreItem, PlaceholderRequestReply {
    /** Raw URL that is not localized, ex: my_url/[LANGUAGE]/my_placeholder.json */
    id: string;
    /** Resolved URL that is localized, ex: my_url/en-GB/my_placeholder.json  */
    resolvedUrl: string;
    /** Rendered template associated to the resolved URL, can be dynamic */
    renderedTemplate?: string;
    /** Unknown type found in the reply */
    unknownTypeFound?: boolean;
    /** A mechanism to cache previous request results for a given language. This boolean disables the dynamic rendering when it is set to false */
    used?: boolean;
}
/**
 * PlaceholderRequest state details
 */
interface PlaceholderRequestStateDetails extends AsyncStoreItem {
}
/**
 * PlaceholderRequest store state
 */
interface PlaceholderRequestState extends EntityState<PlaceholderRequestModel>, PlaceholderRequestStateDetails {
}
/**
 * Name of the PlaceholderRequest Store
 */
declare const PLACEHOLDER_REQUEST_STORE_NAME = "placeholderRequest";
/**
 * PlaceholderRequest Store Interface
 */
interface PlaceholderRequestStore {
    /** PlaceholderRequest state */
    [PLACEHOLDER_REQUEST_STORE_NAME]: PlaceholderRequestState;
}

/** Action to cancel a Request ID registered in the store. Can happen from effect based on a switchMap for instance */
declare const cancelPlaceholderRequest: _ngrx_store.ActionCreator<"[PlaceholderRequest] cancel request", (props: AsyncRequest & {
    id: string;
}) => AsyncRequest & {
    id: string;
} & _ngrx_store.Action<"[PlaceholderRequest] cancel request">>;
/** Action to update failureStatus for PlaceholderRequestModels */
declare const failPlaceholderRequestEntity: _ngrx_store.ActionCreator<"[PlaceholderRequest] fail entities", (props: FailAsyncStoreItemEntitiesActionPayload<any>) => FailAsyncStoreItemEntitiesActionPayload<any> & _ngrx_store.Action<"[PlaceholderRequest] fail entities">>;
/** Action to update an entity */
declare const updatePlaceholderRequestEntity: _ngrx_store.ActionCreator<"[PlaceholderRequest] update entity", (props: UpdateAsyncStoreItemEntityActionPayloadWithId<PlaceholderRequestModel>) => UpdateAsyncStoreItemEntityActionPayloadWithId<PlaceholderRequestModel> & _ngrx_store.Action<"[PlaceholderRequest] update entity">>;
/** Action to update an entity without impact on request id */
declare const updatePlaceholderRequestEntitySync: _ngrx_store.ActionCreator<"[PlaceholderRequest] update entity sync", (props: UpdateEntityActionPayloadWithId<PlaceholderRequestModel>) => UpdateEntityActionPayloadWithId<PlaceholderRequestModel> & _ngrx_store.Action<"[PlaceholderRequest] update entity sync">>;
/** Action to update PlaceholderRequest with known IDs, will create the entity with only the url, the call will be created in the effect */
declare const setPlaceholderRequestEntityFromUrl: _ngrx_store.FunctionWithParametersType<[props: FromApiActionPayload<PlaceholderRequestReply> & {
    resolvedUrl: string;
    id: string;
}], FromApiActionPayload<PlaceholderRequestReply> & {
    resolvedUrl: string;
    id: string;
} & AsyncRequest & _ngrx_store.Action<"[PlaceholderRequest] set entity from url">> & _ngrx_store.Action<"[PlaceholderRequest] set entity from url">;

/** Token of the PlaceholderRequest reducer */
declare const PLACEHOLDER_REQUEST_REDUCER_TOKEN: InjectionToken<ActionReducer<PlaceholderRequestState, Action<string>>>;
/** Provide default reducer for PlaceholderRequest store */
declare function getDefaultplaceholderRequestReducer(): ActionReducer<PlaceholderRequestState, Action<string>>;
declare class PlaceholderRequestStoreModule {
    static forRoot<T extends PlaceholderRequestState>(reducerFactory: () => ActionReducer<T, Action>): ModuleWithProviders<PlaceholderRequestStoreModule>;
    static ɵfac: i0.ɵɵFactoryDeclaration<PlaceholderRequestStoreModule, never>;
    static ɵmod: i0.ɵɵNgModuleDeclaration<PlaceholderRequestStoreModule, never, [typeof _ngrx_store.StoreFeatureModule], never>;
    static ɵinj: i0.ɵɵInjectorDeclaration<PlaceholderRequestStoreModule>;
}

/**
 * PlaceholderRequest Store adapter
 */
declare const placeholderRequestAdapter: _o3r_core.EntityAsyncRequestAdapter<PlaceholderRequestModel>;
/**
 * PlaceholderRequest Store initial value
 */
declare const placeholderRequestInitialState: PlaceholderRequestState;
/**
 * Reducers of Placeholder request store that handles the call to the placeholder template URL
 */
declare const placeholderRequestReducerFeatures: ReducerTypes<PlaceholderRequestState, ActionCreator[]>[];
/**
 * PlaceholderRequest Store reducer
 */
declare const placeholderRequestReducer: _ngrx_store.ActionReducer<PlaceholderRequestState, _ngrx_store.Action<string>>;

declare const selectPlaceholderRequestState: _ngrx_store.MemoizedSelector<object, PlaceholderRequestState, _ngrx_store.DefaultProjectorFn<PlaceholderRequestState>>;
/** Select the dictionary of PlaceholderRequest entities */
declare const selectPlaceholderRequestEntities: _ngrx_store.MemoizedSelector<object, _ngrx_entity.Dictionary<_o3r_components.PlaceholderRequestModel>, (s1: PlaceholderRequestState) => _ngrx_entity.Dictionary<_o3r_components.PlaceholderRequestModel>>;
/**
 * Select a specific PlaceholderRequest entity using a raw url as id
 * @param rawUrl
 */
declare const selectPlaceholderRequestEntityUsage: (rawUrl: string) => _ngrx_store.MemoizedSelector<object, boolean | undefined, (s1: PlaceholderRequestState) => boolean | undefined>;

declare const placeholderRequestStorageSerializer: typeof asyncEntitySerializer;
declare const placeholderRequestStorageDeserializer: (rawObject: any) => PlaceholderRequestState;
declare const placeholderRequestStorageSync: Readonly<Serializer<PlaceholderRequestState>>;

/**
 * PlaceholderTemplate model
 */
interface PlaceholderTemplateModel {
    /** Placeholder id that is unique*/
    id: string;
    /** Urls to the templates to be fetched, and priority for rendering order */
    urlsWithPriority: {
        rawUrl: string;
        priority: number;
    }[];
}
/** Possible placeholder mode */
type PlaceholderMode = 'normal' | 'debug' | 'pending';
/**
 * PlaceholderTemplate store state
 */
interface PlaceholderTemplateState extends EntityState<PlaceholderTemplateModel> {
    mode: PlaceholderMode;
}
/**
 * Name of the PlaceholderTemplate Store
 */
declare const PLACEHOLDER_TEMPLATE_STORE_NAME = "placeholderTemplate";
/**
 * PlaceholderTemplate Store Interface
 */
interface PlaceholderTemplateStore {
    /** PlaceholderTemplate state */
    [PLACEHOLDER_TEMPLATE_STORE_NAME]: PlaceholderTemplateState;
}

/** Action to delete a specific entity */
declare const deletePlaceholderTemplateEntity: _ngrx_store.ActionCreator<"[PlaceholderTemplate] delete entity", (props: {
    id: string;
}) => {
    id: string;
} & _ngrx_store.Action<"[PlaceholderTemplate] delete entity">>;
/** Action to clear all placeholderTemplate and fill the store with the payload */
declare const setPlaceholderTemplateEntity: _ngrx_store.ActionCreator<"[PlaceholderTemplate] set entity", (props: SetEntityActionPayload<PlaceholderTemplateModel>) => SetEntityActionPayload<PlaceholderTemplateModel> & _ngrx_store.Action<"[PlaceholderTemplate] set entity">>;
declare const togglePlaceholderModeTemplate: _ngrx_store.ActionCreator<"[PlaceholderTemplate] toggle mode", (props: {
    mode: PlaceholderMode;
}) => {
    mode: PlaceholderMode;
} & _ngrx_store.Action<"[PlaceholderTemplate] toggle mode">>;

/** Token of the PlaceholderTemplate reducer */
declare const PLACEHOLDER_TEMPLATE_REDUCER_TOKEN: InjectionToken<ActionReducer<PlaceholderTemplateState, Action<string>>>;
/** Provide default reducer for PlaceholderTemplate store */
declare function getDefaultPlaceholderTemplateReducer(): ActionReducer<PlaceholderTemplateState, Action<string>>;
declare class PlaceholderTemplateStoreModule {
    static forRoot<T extends PlaceholderTemplateState>(reducerFactory: () => ActionReducer<T, Action>): ModuleWithProviders<PlaceholderTemplateStoreModule>;
    static ɵfac: i0.ɵɵFactoryDeclaration<PlaceholderTemplateStoreModule, never>;
    static ɵmod: i0.ɵɵNgModuleDeclaration<PlaceholderTemplateStoreModule, never, [typeof _ngrx_store.StoreFeatureModule], never>;
    static ɵinj: i0.ɵɵInjectorDeclaration<PlaceholderTemplateStoreModule>;
}

/**
 * PlaceholderTemplate Store adapter
 */
declare const placeholderTemplateAdapter: _ngrx_entity.EntityAdapter<PlaceholderTemplateModel>;
/**
 * PlaceholderTemplate Store initial value
 */
declare const placeholderTemplateInitialState: PlaceholderTemplateState;
/**
 * List of basic actions for PlaceholderTemplate Store
 */
declare const placeholderTemplateReducerFeatures: ReducerTypes<PlaceholderTemplateState, ActionCreator[]>[];
/**
 * PlaceholderTemplate Store reducer
 */
declare const placeholderTemplateReducer: _ngrx_store.ActionReducer<PlaceholderTemplateState, _ngrx_store.Action<string>>;

declare const selectPlaceholderTemplateState: _ngrx_store.MemoizedSelector<object, PlaceholderTemplateState, _ngrx_store.DefaultProjectorFn<PlaceholderTemplateState>>;
/** Select the dictionary of PlaceholderTemplate entities */
declare const selectPlaceholderTemplateEntities: _ngrx_store.MemoizedSelector<object, _ngrx_entity.Dictionary<_o3r_components.PlaceholderTemplateModel>, (s1: PlaceholderTemplateState) => _ngrx_entity.Dictionary<_o3r_components.PlaceholderTemplateModel>>;
/**
 * Select a specific PlaceholderTemplate
 * @param placeholderId
 */
declare const selectPlaceholderTemplateEntity: (placeholderId: string) => _ngrx_store.MemoizedSelector<object, _o3r_components.PlaceholderTemplateModel | undefined, (s1: PlaceholderTemplateState) => _o3r_components.PlaceholderTemplateModel | undefined>;
/**
 * Select the ordered rendered placeholder template full data (url, priority etc.) for a given placeholderId
 * Return undefined if the placeholder is not found
 * Returns {orderedRenderedTemplates: undefined, isPending: true} if any of the request is still pending
 * @param placeholderId
 */
declare const selectSortedTemplates: (placeholderId: string) => _ngrx_store.MemoizedSelector<object, {
    orderedTemplates: undefined;
    isPending: never;
} | {
    orderedTemplates: {
        rawUrl: string;
        priority: number;
        renderedTemplate?: string;
        resolvedUrl: string;
    }[];
    isPending: boolean;
} | undefined, (s1: _o3r_components.PlaceholderTemplateModel | undefined, s2: _o3r_components.PlaceholderRequestState) => {
    orderedTemplates: undefined;
    isPending: never;
} | {
    orderedTemplates: {
        rawUrl: string;
        priority: number;
        renderedTemplate?: string;
        resolvedUrl: string;
    }[];
    isPending: boolean;
} | undefined>;
declare const selectPlaceholderTemplateMode: _ngrx_store.MemoizedSelector<object, _o3r_components.PlaceholderMode, (s1: PlaceholderTemplateState) => _o3r_components.PlaceholderMode>;

declare const placeholderTemplateStorageDeserializer: (rawObject: any) => PlaceholderTemplateState;
declare const placeholderTemplateStorageSync: Readonly<Serializer<PlaceholderTemplateState>>;

/**
 * Model to describe a group of elements
 */
interface GroupInfo {
    /**
     * Text color for the {@link displayName}
     */
    color?: string;
    /**
     * Color of the border of the element once highlighted
     */
    backgroundColor: string;
    /**
     * Name of the group display
     */
    displayName: string;
    /**
     * Regexp to detect the elements part of the group
     */
    regexp: string;
}

interface Ng {
    /**
     * Retrieves the component instance associated with a given DOM element.
     *
     * Usage:
     *
     * Given the following DOM structure:
     * ```html
     * <my-app>
     *   <div>
     *     <child-comp></child-comp>
     *   </div>
     * </my-app>
     * ```
     * Calling `getComponent` on `<child-comp>` will return the instance of `ChildComponent`
     * associated with this DOM element.
     *
     * Calling the function on `<my-app>` will return the `MyApp` instance.
     * @param element DOM element from which the component should be retrieved.
     * @returns Component instance associated with the element or `null` if there
     *    is no component associated with it.
     */
    getComponent<T = any>(element: Element): T | null;
    /**
     * Retrieves the component instance whose view contains the DOM element.
     *
     * For example, if `<child-comp>` is used in the template of `<app-comp>`
     * (i.e. a `ViewChild` of `<app-comp>`), calling `getOwningComponent` on `<child-comp>`
     * would return `<app-comp>`.
     * @param elementOrDir DOM element, component or directive instance
     *    for which to retrieve the root components.
     * @returns Component instance whose view owns the DOM element or null if the element is not
     *    part of a component view.
     */
    getOwningComponent<T = any>(elementOrDir: Element | object): T | null;
    /**
     * Retrieves the host element of a component or directive instance.
     * The host element is the DOM element that matched the selector of the directive.
     * @param componentOrDirective Component or directive instance for which the host
     *     element should be retrieved.
     * @returns Host element of the target.
     */
    getHostElement(componentOrDirective: object): Element;
}

interface OtterLikeComponentInfo {
    /** Container information */
    container?: OtterLikeComponentInfo;
    /** Configuration ID */
    configId?: string;
    /** Component name */
    componentName: string;
    /** Component translation */
    translations?: Record<string, string[]>;
    /** Component analytics */
    analytics?: Record<string, string[]>;
}
/**
 * Otter inspector css class
 */
declare const INSPECTOR_CLASS = "otter-devtools-inspector";
/**
 * Determine if a node is an Otter container
 * @param node Element to check
 * @returns true if the node is an Otter container
 */
declare const isContainer: (node: Element | undefined | null) => node is Element;
/**
 * Determine the config id of a component instance
 * @param instance component instance
 * @returns the config id of the component instance
 */
declare const getConfigId: (instance: any) => any;
/**
 * Recursive method to determin the translations of a node
 * @param node HTMLElement to check
 * @param rec recursive method
 * @returns the trasnslations associated to their component name
 */
declare function getTranslationsRec(node: Element | null, rec: typeof getTranslationsRec): Record<string, string[]> | undefined;
/**
 * Determine the translations of a node
 * @param node HTMLElement to check
 * @returns the translations associated to their component name
 */
declare const getTranslations: (node: Element | null) => Record<string, string[]> | undefined;
/**
 * Recursive method to determine the analytics of a node
 * @param node Element to check
 * @param rec recursive method
 * @returns the analytics associated to their component name
 */
declare function getAnalyticEventsRec(node: Element | null, rec: typeof getAnalyticEventsRec): Record<string, string[]> | undefined;
/**
 * Determine the analytics of a node
 * @param node Element to check
 * @returns the analytics associated to their component name
 */
declare const getAnalyticEvents: (node: Element | null) => Record<string, string[]> | undefined;
/**
 * Determine all info from an Otter component
 * @param componentClassInstance component instance
 * @param host HTML element hosting the component
 * @returns all info from an Otter component
 */
declare const getOtterLikeComponentInfo: (componentClassInstance: any, host: Element) => OtterLikeComponentInfo;

/**
 * Service to handle the custom inspector for the Otter Devtools Chrome extension.
 */
declare class OtterInspectorService {
    private readonly angularDevTools;
    private readonly elementMouseOverCallback;
    private readonly elementClickCallback;
    private readonly cancelEventCallback;
    private selectedComponent;
    private inspectorDiv;
    private readonly otterLikeComponentInfoToBeSent;
    /**
     * Stream of component info to be sent to the extension app.
     */
    otterLikeComponentInfoToBeSent$: Observable<OtterLikeComponentInfo | undefined>;
    constructor();
    private startInspecting;
    private elementClick;
    private isOtterLikeComponent;
    private findComponentInfo;
    private elementMouseOver;
    private highlight;
    private unHighlight;
    private cancelEvent;
    /**
     * Prepare the inspector div and add it to the DOM.
     */
    prepareInspector(): void;
    /**
     * Toggle the inspector.
     * @param isRunning true if the inspector is running
     */
    toggleInspector(isRunning: boolean): void;
    stopInspecting(): void;
}

/**
 * Component Devtools options
 */
interface ComponentsDevtoolsServiceOptions extends DevtoolsCommonOptions {
}
/**
 * Message to give the selected component information
 */
interface SelectedComponentInfoMessage extends OtterLikeComponentInfo, OtterMessageContent<'selectedComponentInfo'> {
}
/**
 * Message to toggle the inspector
 */
interface ToggleInspectorMessage extends OtterMessageContent<'toggleInspector'> {
    /** Is the inspector running */
    isRunning: boolean;
}
/**
 * Message to toggle the highlight
 */
interface ToggleHighlightMessage extends OtterMessageContent<'toggleHighlight'> {
    /** Is the highlight displayed */
    isRunning: boolean;
}
/**
 * Message the change the configuration of the `HighlightService`
 */
interface ChangeHighlightConfiguration extends OtterMessageContent<'changeHighlightConfiguration'> {
    /**
     * Minimum width of HTMLElement to be considered
     */
    elementMinWidth?: number;
    /**
     * Minimum height of HTMLElement to be considered
     */
    elementMinHeight?: number;
    /**
     * Throttle interval
     */
    throttleInterval?: number;
    /**
     * Group information to detect elements
     */
    groupsInfo?: Record<string, GroupInfo>;
    /**
     * Maximum number of ancestors
     */
    maxDepth?: number;
    /**
     * Opacity of the chips
     */
    chipsOpacity?: number;
    /**
     * Auto refresh
     */
    autoRefresh?: boolean;
}
/**
 * Message to toggle the placeholder mode
 */
interface PlaceholderModeMessage extends OtterMessageContent<'placeholderMode'> {
    /** Placeholder mode */
    mode: PlaceholderMode;
}
/**
 * Message to know the component selection availability
 */
interface IsComponentSelectionAvailableMessage extends OtterMessageContent<'isComponentSelectionAvailable'> {
    available: boolean;
}
type ComponentsMessageContents = IsComponentSelectionAvailableMessage | SelectedComponentInfoMessage | ToggleInspectorMessage | ToggleHighlightMessage | ChangeHighlightConfiguration | PlaceholderModeMessage;
/** List of possible DataTypes for Components messages */
type ComponentsMessageDataTypes = MessageDataTypes<ComponentsMessageContents>;
/** List of all messages for Components purpose */
type AvailableComponentsMessageContents = ComponentsMessageContents | ConnectContentMessage | RequestMessagesContentMessage<ComponentsMessageDataTypes>;
/**
 * Determine if the given message is a Components message
 * @param message message to check
 */
declare const isComponentsMessage: (message: any) => message is AvailableComponentsMessageContents;

declare class ComponentsDevtoolsMessageService implements DevtoolsServiceInterface {
    private readonly logger;
    private readonly store;
    private readonly options;
    private readonly inspectorService;
    private readonly sendMessage;
    private readonly destroyRef;
    private readonly highlightService;
    constructor();
    /**
     * Function to connect the plugin to the Otter DevTools extension
     */
    private connectPlugin;
    private sendCurrentSelectedComponent;
    private sendIsComponentSelectionAvailable;
    /**
     * Function to trigger a re-send a requested messages to the Otter Chrome DevTools extension
     * @param only restricted list of messages to re-send
     */
    private handleReEmitRequest;
    /**
     * Function to handle the incoming messages from Otter Chrome DevTools extension
     * @param message message coming from the Otter Chrome DevTools extension
     */
    private handleEvents;
    /** @inheritDoc */
    activate(): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<ComponentsDevtoolsMessageService, never>;
    static ɵprov: i0.ɵɵInjectableDeclaration<ComponentsDevtoolsMessageService>;
}

declare class ComponentsDevtoolsModule {
    /**
     * Initialize Otter Devtools
     * @param options
     */
    static instrument(options: Partial<ComponentsDevtoolsServiceOptions>): ModuleWithProviders<ComponentsDevtoolsModule>;
    static ɵfac: i0.ɵɵFactoryDeclaration<ComponentsDevtoolsModule, never>;
    static ɵmod: i0.ɵɵNgModuleDeclaration<ComponentsDevtoolsModule, never, [typeof _ngrx_store.StoreModule, typeof PlaceholderTemplateStoreModule], never>;
    static ɵinj: i0.ɵɵInjectorDeclaration<ComponentsDevtoolsModule>;
}

declare const OTTER_COMPONENTS_DEVTOOLS_DEFAULT_OPTIONS: Readonly<ComponentsDevtoolsServiceOptions>;
declare const OTTER_COMPONENTS_DEVTOOLS_OPTIONS: InjectionToken<ComponentsDevtoolsServiceOptions>;

declare class C11nDirective<D extends Configuration = Configuration, I extends ContextInput = ContextInput, O extends BaseContextOutput = BaseContextOutput, T extends Context<I, O> = Context<I, O>> implements OnChanges, OnDestroy {
    private readonly viewContainerRef;
    private readonly differsService;
    private readonly injector;
    /** The component information passed to the directive */
    component: Type<T>;
    /** The information related to configuration */
    config?: D;
    /** Formcontrol */
    formControl?: FormControl;
    /** The input setter */
    set inputs(value: {
        [K in keyof I]: I[K];
    });
    /** The input getter */
    get inputs(): {
        [K in keyof I]: I[K];
    };
    /** The information related to output */
    outputs?: Functionify<O>;
    /** The component reference */
    componentRef: ComponentRef<T>;
    private componentSubscriptions;
    private _inputs;
    private differInputs;
    /** Set of inputs when the component was created. */
    private readonly uninitializedInputs;
    /**
     * Type guard for component implementing CVA
     * @param _cmp Component instance
     */
    private componentImplementsCva;
    private updateInputs;
    /**
     * called when data-bound property change
     * @param changes The changes that occur
     */
    ngOnChanges(changes: SimpleChanges): void;
    /**
     * returns validation errors from component instance if validate method exists else returns null
     * @param control Form control
     */
    validate(control: AbstractControl): any;
    /**
     * ngOnDestroy
     */
    ngOnDestroy(): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<C11nDirective<any, any, any, any>, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<C11nDirective<any, any, any, any>, "[c11n]", never, { "component": { "alias": "component"; "required": false; }; "config": { "alias": "config"; "required": false; }; "formControl": { "alias": "formControl"; "required": false; }; "inputs": { "alias": "inputs"; "required": false; }; "outputs": { "alias": "outputs"; "required": false; }; }, {}, never, never, true, never>;
}

/** Interface for grouping the arrays needed for custom component registration */
interface EntryCustomComponents {
    /** Array of custom presenters */
    customComponents: Type<any>[];
    /** Array of custom presenter modules */
    customComponentsModules: Type<any>[];
}
/**
 *  Register a custom component
 * @param customComponentsMap an object containing the already registered custom component
 * @param customComponentKey
 * @param customComponent
 */
declare function registerCustomComponent<T extends Context>(customComponentsMap: Map<string, Type<T>>, customComponentKey: string, customComponent: Type<T>): Map<string, Type<T>>;

/** C11n directive mock */
declare class MockC11nDirective {
    static ɵfac: i0.ɵɵFactoryDeclaration<MockC11nDirective, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<MockC11nDirective, "[c11n]", never, { "config": { "alias": "config"; "required": false; }; "component": { "alias": "component"; "required": false; }; "inputs": { "alias": "inputs"; "required": false; }; "outputs": { "alias": "outputs"; "required": false; }; }, {}, never, never, false, never>;
}
/** C11n service mock */
declare class C11nMockService {
    addPresenter(_presKey: string, _presType: any): void;
    getPresenter(_defaultPres: any, _presKey: string): (source: Observable<any>) => Observable<null>;
    static ɵfac: i0.ɵɵFactoryDeclaration<C11nMockService, never>;
    static ɵprov: i0.ɵɵInjectableDeclaration<C11nMockService>;
}
/**
 * The purpose of this module is to be imported in the unit tests of the components which are using c11n directive
 */
declare class C11nMockModule {
    static ɵfac: i0.ɵɵFactoryDeclaration<C11nMockModule, never>;
    static ɵmod: i0.ɵɵNgModuleDeclaration<C11nMockModule, [typeof MockC11nDirective], never, [typeof MockC11nDirective]>;
    static ɵinj: i0.ɵɵInjectorDeclaration<C11nMockModule>;
}

declare class C11nService {
    private readonly presentersMap;
    /**
     * Add a presenter
     * @param presKey The presenter key to set
     * @param presenter The new presenter
     */
    addPresenter<T extends Context>(presKey: string, presenter: Type<T>): void;
    /**
     * Operator to retrieve the presenter based on a given presKey
     * @param defaultPres The default presenter
     * @param presKey The presenter key to retrieve
     */
    getPresenter<T extends Context>(defaultPres: Type<T>, presKey?: string): (source: Observable<Configuration>) => Observable<Type<T>>;
    static ɵfac: i0.ɵɵFactoryDeclaration<C11nService, never>;
    static ɵprov: i0.ɵɵInjectableDeclaration<C11nService>;
}

/**
 * Customization service factory
 * @param config -> registerCompFunc - a function which returns the map of custom components which will be injected in c11n service
 * @param config.registerCompFunc
 */
declare function createC11nService(config: {
    registerCompFunc: () => Map<string, any>;
}): C11nService;
/**
 * @deprecated Will be removed in v14.
 */
declare class C11nModule {
    /**
     * Get the module with providers for the root component
     * @param config -> registerCompFunc - a function which returns the map of custom components which will be injected in c11n service
     * @param config.registerCompFunc
     * @deprecated Please use {@link provideCustomComponents} instead. Will be removed in v14.
     */
    static forRoot(config: {
        registerCompFunc: () => Map<string, any>;
    }): ModuleWithProviders<C11nModule>;
    static ɵfac: i0.ɵɵFactoryDeclaration<C11nModule, never>;
    static ɵmod: i0.ɵɵNgModuleDeclaration<C11nModule, never, [typeof C11nDirective], [typeof C11nDirective]>;
    static ɵinj: i0.ɵɵInjectorDeclaration<C11nModule>;
}
/**
 * Returns a tuple of the key and the component
 * @note should be used with {@link provideCustomComponents}
 * @example
 * ```typescript
 * provideCustomComponents(
 *   new Map(),
 *   withComponent('example1', MyFirstComponent),
 *   withComponent('example2', MySecondComponent),
 * )
 * ```
 * @param customComponentKey
 * @param customComponent
 */
declare function withComponent<T extends Context>(customComponentKey: string, customComponent: Type<T>): [string, Type<T>];
/**
 * Provide custom components which will be injected in c11n service
 * @param customComponents
 * @param additionalComponents
 */
declare function provideCustomComponents(customComponents?: Map<string, any>, ...additionalComponents: (ReturnType<typeof withComponent>)[]): i0.EnvironmentProviders;

/** The C11n injection token */
declare const C11N_PRESENTERS_MAP_TOKEN: InjectionToken<string>;
/** Function used to register custom components */
declare const C11N_REGISTER_FUNC_TOKEN: InjectionToken<string>;

declare class O3rCapitalizePipe implements PipeTransform {
    transform(value?: any): any;
    static ɵfac: i0.ɵɵFactoryDeclaration<O3rCapitalizePipe, never>;
    static ɵpipe: i0.ɵɵPipeDeclaration<O3rCapitalizePipe, "o3rCapitalize", true>;
}

/** Time object to format duration */
interface TimeUnit {
    /** character defining the time unit */
    formatCharacter: string;
    /** divider to get the time unit value */
    divider: number;
    /**
     * modulo for the time unit
     * If not provided, it will either use the immediately higher unit time divider
     * or Number.MAX_SAFE_INTEGER for the highest one
     */
    modulo?: number;
}

/**
 * Converts a duration in seconds into the HH:mm format
 */
declare class O3rDurationPipe implements PipeTransform {
    /**
     * Converts a duration in seconds into the HH:mm format
     * @param value the value in seconds
     * @param pattern the desired output format.
     * The pattern takes into account static format characters surrounded by braces
     *   {d} for days, {h} for hours, {m} for minutes and {s} for seconds.
     * It accepts a double unit time in case a padding is wanted {dd} outputs 05 for instance
     * Should respect the following pattern `/(\{h+\})|(\{m+\})/` (ex: `'{h}h{m}m'` outputs `0h2m`, `'{h}H{mm}'` `0H02` etc.)
     * @param timeUnits the units time to be used in this transformation. This can be used for custom units in the pattern like
     *  {
     *    formatCharacter: 'w',
     *    divider: 3600 * 24 * 7
     *  }
     * The above defines a week for {w}
     */
    transform(value?: number, pattern?: string, timeUnits?: TimeUnit[]): string;
    static ɵfac: i0.ɵɵFactoryDeclaration<O3rDurationPipe, never>;
    static ɵpipe: i0.ɵɵPipeDeclaration<O3rDurationPipe, "o3rDuration", true>;
}

declare class O3rKeepWhiteSpacePipe implements PipeTransform {
    transform(value: string): string;
    static ɵfac: i0.ɵɵFactoryDeclaration<O3rKeepWhiteSpacePipe, never>;
    static ɵpipe: i0.ɵɵPipeDeclaration<O3rKeepWhiteSpacePipe, "o3rKeepWhiteSpace", true>;
}

declare class O3rReplaceWithBoldPipe implements PipeTransform {
    transform(value: string, inputText: string): string;
    static ɵfac: i0.ɵɵFactoryDeclaration<O3rReplaceWithBoldPipe, never>;
    static ɵpipe: i0.ɵɵPipeDeclaration<O3rReplaceWithBoldPipe, "o3rReplaceWithBold", true>;
}

/**
 * Placeholder component that is bind to the PlaceholderTemplateStore to display a template based on its ID
 * A loading indication can be provided via projection
 * @example
 *  <o3r-placeholder id="my-template-id">Is loading ...</o3r-placeholder>
 */
declare class PlaceholderComponent implements OnInit, OnDestroy, AfterViewChecked {
    private readonly store;
    private readonly cd;
    readonly id$: BehaviorSubject<string | undefined>;
    private readonly afterViewInit$;
    private readonly messages$;
    /** Determine if the placeholder content is pending */
    isPending?: boolean;
    /** Generated HTML template */
    template?: string;
    mode: Signal<PlaceholderMode>;
    private readonly destroyRef;
    /** template identify */
    set id(value: string);
    constructor();
    /** @inheritdoc */
    ngOnInit(): void;
    ngAfterViewChecked(): void;
    /** @inheritdoc */
    ngOnDestroy(): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<PlaceholderComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<PlaceholderComponent, "o3r-placeholder", never, { "id": { "alias": "id"; "required": false; }; }, {}, never, ["*"], false, never>;
}

declare class PlaceholderModule {
    static ɵfac: i0.ɵɵFactoryDeclaration<PlaceholderModule, never>;
    static ɵmod: i0.ɵɵNgModuleDeclaration<PlaceholderModule, [typeof PlaceholderComponent], [typeof i2.CommonModule, typeof _ngrx_store.StoreModule, typeof PlaceholderTemplateStoreModule, typeof PlaceholderRequestStoreModule], [typeof PlaceholderComponent]>;
    static ɵinj: i0.ɵɵInjectorDeclaration<PlaceholderModule>;
}

export { C11N_PRESENTERS_MAP_TOKEN, C11N_REGISTER_FUNC_TOKEN, C11nDirective, C11nMockModule, C11nMockService, C11nModule, C11nService, ComponentsDevtoolsMessageService, ComponentsDevtoolsModule, INSPECTOR_CLASS, MockC11nDirective, O3rCapitalizePipe, O3rDurationPipe, O3rKeepWhiteSpacePipe, O3rReplaceWithBoldPipe, OTTER_COMPONENTS_DEVTOOLS_DEFAULT_OPTIONS, OTTER_COMPONENTS_DEVTOOLS_OPTIONS, OtterInspectorService, PLACEHOLDER_REQUEST_REDUCER_TOKEN, PLACEHOLDER_REQUEST_STORE_NAME, PLACEHOLDER_TEMPLATE_REDUCER_TOKEN, PLACEHOLDER_TEMPLATE_STORE_NAME, PlaceholderComponent, PlaceholderModule, PlaceholderRequestStoreModule, PlaceholderTemplateStoreModule, cancelPlaceholderRequest, createC11nService, deletePlaceholderTemplateEntity, failPlaceholderRequestEntity, getAnalyticEvents, getAnalyticEventsRec, getConfigId, getDefaultPlaceholderTemplateReducer, getDefaultplaceholderRequestReducer, getOtterLikeComponentInfo, getTranslations, getTranslationsRec, isComponentsMessage, isContainer, lazyArray, placeholderRequestAdapter, placeholderRequestInitialState, placeholderRequestReducer, placeholderRequestReducerFeatures, placeholderRequestStorageDeserializer, placeholderRequestStorageSerializer, placeholderRequestStorageSync, placeholderTemplateAdapter, placeholderTemplateInitialState, placeholderTemplateReducer, placeholderTemplateReducerFeatures, placeholderTemplateStorageDeserializer, placeholderTemplateStorageSync, provideCustomComponents, registerCustomComponent, selectPlaceholderRequestEntities, selectPlaceholderRequestEntityUsage, selectPlaceholderRequestState, selectPlaceholderTemplateEntities, selectPlaceholderTemplateEntity, selectPlaceholderTemplateMode, selectPlaceholderTemplateState, selectSortedTemplates, setPlaceholderRequestEntityFromUrl, setPlaceholderTemplateEntity, togglePlaceholderModeTemplate, updatePlaceholderRequestEntity, updatePlaceholderRequestEntitySync, withComponent };
export type { AvailableComponentsMessageContents, ChangeHighlightConfiguration, ComponentClassOutput, ComponentConfig, ComponentConfigOutput, ComponentConfigOutputs, ComponentContext, ComponentOutput, ComponentStructure, ComponentsDevtoolsServiceOptions, ComponentsMessageDataTypes, ConfigProperty, ConfigPropertyTypes, ConfigType, EntryCustomComponents, IsComponentSelectionAvailableMessage, NestedConfiguration, Ng, OtterLikeComponentInfo, PlaceholderData, PlaceholderMode, PlaceholderModeMessage, PlaceholderRequestModel, PlaceholderRequestReply, PlaceholderRequestState, PlaceholderRequestStateDetails, PlaceholderRequestStore, PlaceholderTemplateModel, PlaceholderTemplateState, PlaceholderTemplateStore, PlaceholderVariable, PlaceholdersMetadata, SelectedComponentInfoMessage, ToggleHighlightMessage, ToggleInspectorMessage };
//# sourceMappingURL=index.d.ts.map