import { GenesisElement } from '@genesislcap/web-core';
import { Config, Group, ModelGroup, Styles } from '../types';
import { MetadataProvider } from '../utils/data-model';
/**
 * Top level component to allow the user to build expressions. It produces a generic payload which doesn't have any system by itself
 * to evaluate or execute the built expression.
 *
 * The basics required to work with this component:
 *
 * {@link ExpressionBuilder.config} property to configure and input data and models into the component.
 *
 * _Event_ change - `Types.Group` emits the model configuration on change. If you create a child component of the expression builder
 * where you want to use a different (e.g. domain specific) model then it will likely override then emit event and instead emit
 * it's own model. To check the underlying `Types.Group` model check the {@link ExpressionBuilder.model} property.
 *
 * @fires change - Fired when the expression model changes
 * @fires add-group - Bubbled when a nested group add is requested
 * @fires del-group - Bubbled when a group delete is requested
 * @fires add-rule - Bubbled when a rule add is requested
 * @fires del-rule - Bubbled when a rule delete is requested
 * @fires update-group - Bubbled when group data changes
 * @fires update-rule - Bubbled when rule data changes
 *
 * @beta
 */
export declare class ExpressionBuilder extends GenesisElement implements MetadataProvider {
    /**
     * config - `Types.Config` the configuration which is required to be set for the expression builder. All properties are
     * defined under this single object to enforce that they're kept in sync with one another.
     *
     * If you want to set the expression of the expression builder you should do it via the `model` property on this object.
     *
     * If you're using a child class of this component with a specific model implementation you likely *don't* want to set this
     * property directly. See example 3.
     *
     * @example
     * Configuring the basic elements required by an expression builder instance
     * ```ts
     * const config: Types.Config = {
     *    fields: ...,
     *    combinators: ...,
     *    operators: ...,
     * };
     * document.querySelector('expression-builder').config = config;
     * ```
     *
     * @example
     * Configuring the basic elements required by an expression builder instance, as well as inputting a model to hydrate
     * ```ts
     * const config: Types.Config = {
     *    fields: ...,
     *    combinators: ...,
     *    operators: ...,
     *    model: ...,
     * };
     * document.querySelector('expression-builder').config = config;
     * ```
     *
     * @example
     * You may create your own child of the expression builder which automatically defines some of the properties, such
     * as creating a rule builder which defines boolean operators and combinators.  In this case you should use your own
     * property name, and on change apply the user and your configurations back to the config property.
     * ```ts
     * const config: MyTypes.RuleConfig = {
     *    operators: ...,
     * };
     * // In the implementation of RuleExpressionBuilder it should listen to ruleConfigChanged and
     * apply the missing combinators and opreators back to the config along with the user's configuration
     * document.querySelector('rule-expression-builder').ruleConfig = config;
     * ```
     * @beta
     */
    config: Config;
    /**
     * styles - `Types.Styles` optional configuration which allows you to set custom element tag names to be used, as well as
     * custom css to be inserted into the shadow DOM.
     * @example
     * Bare bones example of using a custom select component
     * ```ts
     * const styles: Types.Styles = {
     *  customElements: {
     *    select: 'rapid-select',
     *  },
     *  styles: {
     *    // If you want to customise your `rapid-select` then you can do it here. The select input
     *    // is used in the value, field, and operator component, so you should set the styles for all of them for real
     *    value: `
     *      rapid-select {
     *        max-width: 180px;
     *      }
     *    `
     *  }
     * }
     * document.querySelector('expression-builder').styles = styles;
     * ```
     *
     * @beta
     */
    styles?: Styles;
    /**
     * model - `Types.Group` the current model which completely describes the state of the component.
     *
     * *IMPORTANT* you should not set this yourself via this property directly, you should always set it via the model property on the {@link ExpressionBuilder.config} block.
     *
     * You may want to read from this variable to get the most up to date state, for example if you create a child component which
     * has a model which isn't valid for every single state (e.g. requires a complete rule) you can check this underlying model to
     * verify what field or operator is selected.
     *
     * @beta
     *
     * @example
     * ```ts
     * const model = document.querySelector('expression-builder');
     * // Once you have the model you can read it to check the applied config. While the primary use should be checking the updated model via
     * the emited change event, you can use this to check more specific changes that a domain specific model might not.
     *
     * For example, imagine a RulExpressionBuilder which is an implementation specifically for a boolean logic expression. That component may not
     * model a non-complete rule (a rule without a field, and operator, and value). In that case when it emits the event the payload will only change
     * when the user has completely configured a new rule. But if you need to catch cases earlier when they've changed the field but before they've
     * changed the value you can check the model here.
     * ```
     */
    model: ModelGroup | null;
    private ruleCount;
    private groupCount;
    /**
     * @internal
     * We don't want to dispatch a change event for the model if it's just changed because
     * the user updated it themselves, otherwise if they automatically update the config property
     * on change it'll get into an infinite loop
     */
    private userUpdatingModel;
    /** @internal */
    configChanged(_: Config, newConfig: Config): void;
    /** @internal */
    modelChanged(_: Config, newModel: ModelGroup): void;
    /**
     * @beta
     * Dispatches the provided model to the DOM.
     *
     * @remarks
     * Override this to change the shape of model the component returns
     */
    protected dispatchChangeEvent(group: Group): void;
    /** @internal */
    getConfig(): Config;
    /** @internal */
    getGroupId(): string;
    /** @internal */
    getRuleId(): string;
    /** @internal */
    connectedCallback(): void;
    /** @internal */
    disconnectedCallback(): void;
    private isValidConfig;
    private initBaseModel;
    private handleAddGroup;
    private _handleAddGroup;
    private handleAddRule;
    private _handleAddRule;
    private handleDeleteGroup;
    private _handleDeleteGroup;
    private handleDeleteRule;
    private _handleDeleteRule;
    private handleUpdateGroupData;
    private _handleUpdateGroupData;
    private handleUpdateRuleData;
    private _handleUpdateRuleData;
}
//# sourceMappingURL=expression-builder.d.ts.map