/** @beta * By default the expression builder uses the basic html components such as buttons and inputs. If you want to integrate your * own components from a design system or otherwise you can add the tag names for your elements here. For your custom components * to work they must expose the same API as the underlying HTML element they're overriding. * * `checkbox`: Custom element tag for checkbox inputs * * `text`: Custom element tag for text inputs * * `number`: Custom element tag for number inputs * * `date`: Custom element tag for date inputs * * `datetimeLocal`: Custom element tag for datetime-local inputs * * `select`: Custom element tag for select inputs * * `option`: Custom element tag for option elements * * `button`: Custom element tag for button elements * * `radio`: Custom element tag for radio and radio group elements. When using a custom element for a radio you require a parent radio group component to semantically link the radios into a group. The parent radio group must expose the `change` event and `value` attribute. */ export type CustomElements = { checkbox?: string; text?: string; number?: string; date?: string; datetimeLocal?: string; select?: string; option?: string; optgroup?: string; button?: string; radio?: { input: string; group: string; }; }; /** * @beta * Optional strings for configuring css to be applied inside of each constituent element's shadow DOM. * To apply styles to components which are used inside of multiple different components (such as buttons which are used in groups, * rules, and values) you must ensure the styling is set in each block. If your styling isn't showing the ensure that you're * using more specific css rules to override the precedence of your rule. * * `rule`: Additional CSS for expression rule component * * `value`: Additional CSS for rule value component * * `field`: Additional CSS for rule field component * * `operator`: Additional CSS for rule operator component * * `group`: Additional CSS for expression group component * * @privateRemarks * Use css layers to help with the precedence in future. */ export type CustomStyles = { rule?: string; value?: string; field?: string; operator?: string; group?: string; }; /** * Configuration items for the expression builder styles. * * `customElements`: optional `Types.CustomElements` block for overriding the html tags used in the expression builder * * `customStyles`: optional `Types.CustomStyles` block to configure custom css for components. * * @beta **/ export type Styles = { customElements?: CustomElements; customStyles?: CustomStyles; }; /** * @beta * The configuration object to set on an expression builder object. The expression builder always requires `operators`, * `fields` and `combinators` to be configured. * * Specific implementations of the expression builder may expose these options via a different attribute and automatically * configure some options. E.g. a rule (boolean) expression builder may configure boolean operators and combinators so the user * doesn't have to. * * `operators`: Array of {@link Operator} objects * * `fields`: Array of {@link Field} objects * * `combinators`: Array of {@link Combinator} objects * * `model`: Optional {@link Group} model to hydrate * * `maxNesting`: If set and more than 0, is a 1-indexed config for the maximum nesting level of groups. * * `partialRuleValidationWarning`: If set a rule will highlight in an error colour when it's not complete (doesn't have a field + operator + (maybe value) selected) */ /** @beta **/ export type Config = { operators: Operator[]; fields: Field[]; combinators: Combinator[]; model?: Group; maxNesting?: number; partialRuleValidationWarning?: boolean; }; /** * The shared configuration properties of an operator * @beta * * `applyTo`: Only allow this operator to be used on a field type (e.g. only allow this on an enum) * * `optgroup`: Group the operators inside of the select component * * `type`: The name of the operator (e.g. one_of) * * `label`: Optional: Display label (if different from type) * * `tooltip`: Optional tooltip to display on mouse hover * * `valueType`: [EXPERIMENTAL] Optional override to change the input type for the operator (e.g. a date field could present a string input) */ /** @beta **/ export type _Operator = { applyTo: FieldTypes['type'][]; optgroup?: string | null; type: string; label?: string; tooltip?: string; valueType?: FieldTypes; }; /** * An operator which doesn't have any value. Example `is_null` * @beta * **/ export type UniraryOperator = { nbInputs: 0; } & _Operator; /** * An operator which has one value. Example `greater_than` * @beta **/ export type BinaryOperator = { nbInputs: 1; } & _Operator; /** * An operator which has two values. Example `between_inclusive` * @beta **/ export type TernararyOperator = { nbInputs: 2; } & _Operator; /** * An operator which can have any number of values where `NumVals >= 1`, defaulting to 1. Example `one_of`. * @beta **/ export type VariadicOperator = { nbInputs: 'many'; } & _Operator; /** @beta **/ export type Operator = UniraryOperator | BinaryOperator | TernararyOperator | VariadicOperator; /** * Configuration for a text-type input, which has a string value and a text input. * @beta **/ export type TextInput = { type: 'string'; input: 'text'; validation?: (x: unknown) => string | null; }; /** * Configuration for a number-type input, which has a number value and a number input. * @beta **/ export type NumberInput = { input: 'number'; type: 'int' | 'short' | 'double' | 'long' | 'bigdecimal'; validation?: (x: unknown) => string | null; }; /** * Configuration for a boolean-type input, which has a boolean value and a checkbox. * @beta **/ export type CheckboxInput = { input: 'checkbox'; type: 'boolean'; }; /** * Configuration for an enum-type input, which as a string or number value, and uses a select input. * @beta **/ export type SelectInput = { input: 'select'; type: 'enum'; values: Record; }; /** * Configuration for a date input, which has s string value and a date field input * @beta **/ export type DateInput = { input: 'date'; type: 'date'; validation?: (x: unknown) => string | null; }; /** * Configuration for a datetime input, which has s string value and a datetime field input * @beta **/ export type DateTimeInput = { input: 'datetime-local'; type: 'date-time'; validation?: (x: unknown) => string | null; }; /** * Union of all input types * @beta **/ export type FieldTypes = TextInput | NumberInput | CheckboxInput | SelectInput | DateInput | DateTimeInput; /** * Configuration for the fields which the user can choose from per rule, the left hand side of each rule expression. * @beta * * `optgroup`: Group the fields inside of the select component. This option currently isn't supported if you're using custom elements configured with {@link CustomElements}. * * `defaultValue`: Default value for the field. If set then the value of any rule operands is defaulted to this value, but the user can change the value to something else. * * `fieldId`: Id for the field * * `label`: Label for the field, what the user sees on the select input listbox. * * (not yet implemented) `operators`: Constrain the operators which can be used with this field (e.g. only allow starts_with on a string) */ /** @beta **/ export type Field = { optgroup?: string | null; defaultValue?: any; fieldId: string; label: string; operators?: string[]; } & FieldTypes; /** * A combinator is a type of expression which can link two or more rules or groups. The most simple example is `AND` and `OR` which * can take any number of expressions to produce one boolean value. * @beta * * `type`: e.g., 'AND', 'OR', 'XOR', 'MULTIPLY', etc. * * `maxRules`: Controls number of nested rules. Max 1 only allows 1 rule, Max 2 allows 2 rules/groups, many allows any rules/groups * * `invisible`: If true then it won't appear on the component UI and is only selectable programmatically, or by default if it's the first and only value. If the only combinators are invisible then you're configuring the expression builder to not use combinators. Use the {@link NULL_COMBINATOR} for this purpose. * * `label`: Optional: Display label (if different from type) * * (not yet implemented) `description`: Optional: More details about the combinator * * (not yet implemented) `allowedFields`: Array of allowed field IDs (or `null` for all) * * (not yet implemented) `allowedOperators`: Explicit array of allowed operator types. (or `null` for all) * * (not yet implemented) `validator`: Optional: A validation function for the whole group. Null is valid, string is error message * * (not yet implemented) `allowLiterals`: Allow literal values instead of having to select a field * * (not yet implemented) `forceFieldOnly`: If the user selects a field they use it for it's value, without an operation on it */ /** @beta **/ export type Combinator = { type: string; maxRules: 1 | 2 | 'many'; invisible?: boolean; label?: string; description?: string; allowedFields?: Field['fieldId'][]; allowedOperators?: Operator['type'][]; validator?: (group: Group) => string | null; allowLiterals?: boolean; forceFieldOnly?: boolean; }; /** * A rule is a single constituent element of a larger expression, and is the smallest whole part of an expression. * * @example * ``` * FIELD : PROFILE_AGE * OPERATOR : GREATER_THAN * VALUE : 18 * * If you're constructing a boolean expression then this rule could be used to restrict users who are 17 or younger. * ``` @beta **/ export type Rule = { field: Field | null; } & ({ operator: null; } | { operator: UniraryOperator; } | { operator: BinaryOperator; value: any; } | { operator: TernararyOperator; value: [any, any]; } | { operator: VariadicOperator; value: any[]; }); /** * A group forms the overall model of the expression builder, and is recursive to itself allowing for a nested tree. * * @example * ``` * RULE 1 * FIELD : PROFILE_AGE * OPERATOR : GREATER_THAN * VALUE : 18 * * COMBINATOR : OR * * GROUP 2 * RULE 2 * FIELD : PARENT_ROLE * OPERATOR : ONE_OF * VALUE : GIVES_PERMISSION * * COMBINATOR : AND * * RULE 3 * FIELD : GRANTS_CHILD_ACCESS * OPERATOR : EQUALS * VALUE : true * * If you're constructing a boolean expression then this rule could be used to restrict users who are 17 or younger, but * allowing parents who have specific rights to be able to grant access too. * ``` * @beta */ export type Group = { combinator: Combinator; children: (Rule | Group)[]; }; //# sourceMappingURL=public.types.d.ts.map