@genesislcap/expression-builder 14.260.1 → 14.260.2

package/docs/api/expression-builder.expressionbuilder.config.md

@@ -0,0 +1,61 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@genesislcap/expression-builder](./expression-builder.md) &gt; [ExpressionBuilder](./expression-builder.expressionbuilder.md) &gt; [config](./expression-builder.expressionbuilder.config.md)
+
+## ExpressionBuilder.config property
+
+> This API is provided as a beta preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
+> 
+
+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.
+
+**Signature:**
+
+```typescript
+config: Config;
+```
+
+## Example 1
+
+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 2
+
+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 3
+
+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;
+```
+

package/docs/api/expression-builder.expressionbuilder.dispatchchangeevent.md

@@ -0,0 +1,31 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@genesislcap/expression-builder](./expression-builder.md) &gt; [ExpressionBuilder](./expression-builder.expressionbuilder.md) &gt; [dispatchChangeEvent](./expression-builder.expressionbuilder.dispatchchangeevent.md)
+
+## ExpressionBuilder.dispatchChangeEvent() method
+
+> This API is provided as a beta preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
+> 
+
+Dispatches the provided model to the DOM.
+
+**Signature:**
+
+```typescript
+protected dispatchChangeEvent(group: Group): void;
+```
+
+## Parameters
+
+|  Parameter | Type | Description |
+|  --- | --- | --- |
+|  group | [Group](./expression-builder.types.group.md) |  |
+
+**Returns:**
+
+void
+
+## Remarks
+
+Override this to change the shape of model the component returns
+

package/docs/api/expression-builder.expressionbuilder.md

@@ -0,0 +1,40 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@genesislcap/expression-builder](./expression-builder.md) &gt; [ExpressionBuilder](./expression-builder.expressionbuilder.md)
+
+## ExpressionBuilder class
+
+> This API is provided as a beta preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
+> 
+
+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:
+
+[ExpressionBuilder.config](./expression-builder.expressionbuilder.config.md) 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 [ExpressionBuilder.model](./expression-builder.expressionbuilder.model.md) property.
+
+**Signature:**
+
+```typescript
+export declare class ExpressionBuilder extends GenesisElement implements MetadataProvider 
+```
+**Extends:** GenesisElement
+
+**Implements:** MetadataProvider
+
+## Properties
+
+|  Property | Modifiers | Type | Description |
+|  --- | --- | --- | --- |
+|  [config](./expression-builder.expressionbuilder.config.md) |  | Config | <p>**_(BETA)_** config - <code>Types.Config</code> 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.</p><p>If you want to set the expression of the expression builder you should do it via the <code>model</code> property on this object.</p><p>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.</p> |
+|  [model](./expression-builder.expressionbuilder.model.md) |  | ModelGroup \| null | <p>**_(BETA)_** model - <code>Types.Group</code> the current model which completely describes the state of the component.</p><p>\*IMPORTANT\* you should not set this yourself via this property directly, you should always set it via the model property on the [ExpressionBuilder.config](./expression-builder.expressionbuilder.config.md) block.</p><p>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.</p> |
+|  [styles?](./expression-builder.expressionbuilder.styles.md) |  | [Styles](./expression-builder.types.styles.md) | **_(BETA)_** _(Optional)_ styles - <code>Types.Styles</code> 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. |
+
+## Methods
+
+|  Method | Modifiers | Description |
+|  --- | --- | --- |
+|  [dispatchChangeEvent(group)](./expression-builder.expressionbuilder.dispatchchangeevent.md) | <code>protected</code> | **_(BETA)_** Dispatches the provided model to the DOM. |
+

package/docs/api/expression-builder.expressionbuilder.model.md

@@ -0,0 +1,35 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@genesislcap/expression-builder](./expression-builder.md) &gt; [ExpressionBuilder](./expression-builder.expressionbuilder.md) &gt; [model](./expression-builder.expressionbuilder.model.md)
+
+## ExpressionBuilder.model property
+
+> This API is provided as a beta preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
+> 
+
+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 [ExpressionBuilder.config](./expression-builder.expressionbuilder.config.md) 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.
+
+**Signature:**
+
+```typescript
+model: ModelGroup | null;
+```
+
+## 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.
+```
+

package/docs/api/expression-builder.expressionbuilder.styles.md

@@ -0,0 +1,39 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@genesislcap/expression-builder](./expression-builder.md) &gt; [ExpressionBuilder](./expression-builder.expressionbuilder.md) &gt; [styles](./expression-builder.expressionbuilder.styles.md)
+
+## ExpressionBuilder.styles property
+
+> This API is provided as a beta preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
+> 
+
+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.
+
+**Signature:**
+
+```typescript
+styles?: Styles;
+```
+
+## 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;
+```
+

package/docs/api/expression-builder.formatdatestring.md

@@ -0,0 +1,18 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@genesislcap/expression-builder](./expression-builder.md) &gt; [formatDateString](./expression-builder.formatdatestring.md)
+
+## formatDateString variable
+
+> This API is provided as a beta preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
+> 
+
+Gets the string representation from a `Date` which is the format a `date` input uses. `yyyy-mm-dd`<!-- -->. Uses UTC methods to ensure consistent output regardless of timezone.
+
+Used to convert a javascript date object into the required string format expected by the expression builder.
+
+**Signature:**
+
+```typescript
+formatDateString: (date: Date) => string
+```

package/docs/api/expression-builder.formatdatetimestring.md

@@ -0,0 +1,18 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@genesislcap/expression-builder](./expression-builder.md) &gt; [formatDateTimeString](./expression-builder.formatdatetimestring.md)
+
+## formatDateTimeString variable
+
+> This API is provided as a beta preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
+> 
+
+Gets the string representation from a `Date` which is the format a `datetime-local` input uses. `yyyy-mm-ddThh:mm:ss`<!-- -->. Uses UTC methods to ensure consistent output regardless of timezone.
+
+Used to convert a javascript date object into the required string format expected by the expression builder.
+
+**Signature:**
+
+```typescript
+formatDateTimeString: (date: Date) => string
+```

package/docs/api/expression-builder.md

@@ -4,6 +4,12 @@
 
 ## expression-builder package
 
+## Classes
+
+|  Class | Description |
+|  --- | --- |
+|  [ExpressionBuilder](./expression-builder.expressionbuilder.md) | <p>**_(BETA)_** 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.</p><p>The basics required to work with this component:</p><p>[ExpressionBuilder.config](./expression-builder.expressionbuilder.config.md) property to configure and input data and models into the component.</p><p>\_Event\_ change - <code>Types.Group</code> 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 <code>Types.Group</code> model check the [ExpressionBuilder.model](./expression-builder.expressionbuilder.model.md) property.</p> |
+
 ## Namespaces
 
 |  Namespace | Description |
@@ -11,3 +17,10 @@
 |  [Config](./expression-builder.config.md) |  |
 |  [Types](./expression-builder.types.md) |  |
 
+## Variables
+
+|  Variable | Description |
+|  --- | --- |
+|  [formatDateString](./expression-builder.formatdatestring.md) | <p>**_(BETA)_** Gets the string representation from a <code>Date</code> which is the format a <code>date</code> input uses. <code>yyyy-mm-dd</code>. Uses UTC methods to ensure consistent output regardless of timezone.</p><p>Used to convert a javascript date object into the required string format expected by the expression builder.</p> |
+|  [formatDateTimeString](./expression-builder.formatdatetimestring.md) | <p>**_(BETA)_** Gets the string representation from a <code>Date</code> which is the format a <code>datetime-local</code> input uses. <code>yyyy-mm-ddThh:mm:ss</code>. Uses UTC methods to ensure consistent output regardless of timezone.</p><p>Used to convert a javascript date object into the required string format expected by the expression builder.</p> |
+

package/docs/api/expression-builder.types._operator.md

@@ -0,0 +1,23 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@genesislcap/expression-builder](./expression-builder.md) &gt; [Types](./expression-builder.types.md) &gt; [\_Operator](./expression-builder.types._operator.md)
+
+## Types.\_Operator type
+
+> This API is provided as a beta preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
+> 
+
+\*
+
+**Signature:**
+
+```typescript
+export type _Operator = {
+    applyTo: FieldTypes['type'][];
+    optgroup?: string | null;
+    type: string;
+    tooltip?: string;
+};
+```
+**References:** [FieldTypes](./expression-builder.types.fieldtypes.md)
+

package/docs/api/expression-builder.types.binaryoperator.md

@@ -0,0 +1,20 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@genesislcap/expression-builder](./expression-builder.md) &gt; [Types](./expression-builder.types.md) &gt; [BinaryOperator](./expression-builder.types.binaryoperator.md)
+
+## Types.BinaryOperator type
+
+> This API is provided as a beta preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
+> 
+
+An operator which has one value. Example `greater_than` \*
+
+**Signature:**
+
+```typescript
+export type BinaryOperator = {
+    nbInputs: 1;
+} & _Operator;
+```
+**References:** [\_Operator](./expression-builder.types._operator.md)
+

package/docs/api/expression-builder.types.checkboxinput.md

@@ -0,0 +1,19 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@genesislcap/expression-builder](./expression-builder.md) &gt; [Types](./expression-builder.types.md) &gt; [CheckboxInput](./expression-builder.types.checkboxinput.md)
+
+## Types.CheckboxInput type
+
+> This API is provided as a beta preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
+> 
+
+Configuration for a boolean-type input, which has a boolean value and a checkbox. \*
+
+**Signature:**
+
+```typescript
+export type CheckboxInput = {
+    input: 'checkbox';
+    type: 'boolean';
+};
+```

package/docs/api/expression-builder.types.combinator.md

@@ -0,0 +1,29 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@genesislcap/expression-builder](./expression-builder.md) &gt; [Types](./expression-builder.types.md) &gt; [Combinator](./expression-builder.types.combinator.md)
+
+## Types.Combinator type
+
+> This API is provided as a beta preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
+> 
+
+\*
+
+**Signature:**
+
+```typescript
+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;
+};
+```
+**References:** [Field](./expression-builder.types.field.md)<!-- -->, [Operator](./expression-builder.types.operator.md)<!-- -->, [Group](./expression-builder.types.group.md)
+

package/docs/api/expression-builder.types.config.md

@@ -0,0 +1,25 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@genesislcap/expression-builder](./expression-builder.md) &gt; [Types](./expression-builder.types.md) &gt; [Config](./expression-builder.types.config.md)
+
+## Types.Config type
+
+> This API is provided as a beta preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
+> 
+
+\*
+
+**Signature:**
+
+```typescript
+export type Config = {
+    operators: Operator[];
+    fields: Field[];
+    combinators: Combinator[];
+    model?: Group;
+    maxNesting?: number;
+    partialRuleValidationWarning?: boolean;
+};
+```
+**References:** [Operator](./expression-builder.types.operator.md)<!-- -->, [Field](./expression-builder.types.field.md)<!-- -->, [Combinator](./expression-builder.types.combinator.md)<!-- -->, [Group](./expression-builder.types.group.md)
+

package/docs/api/expression-builder.types.customelements.md

@@ -0,0 +1,47 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@genesislcap/expression-builder](./expression-builder.md) &gt; [Types](./expression-builder.types.md) &gt; [CustomElements](./expression-builder.types.customelements.md)
+
+## Types.CustomElements type
+
+> This API is provided as a beta preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
+> 
+
+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.
+
+**Signature:**
+
+```typescript
+export type CustomElements = {
+    checkbox?: string;
+    text?: string;
+    number?: string;
+    date?: string;
+    datetimeLocal?: string;
+    select?: string;
+    option?: string;
+    button?: string;
+    radio?: {
+        input: string;
+        group: string;
+    };
+};
+```

package/docs/api/expression-builder.types.customstyles.md

@@ -0,0 +1,32 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@genesislcap/expression-builder](./expression-builder.md) &gt; [Types](./expression-builder.types.md) &gt; [CustomStyles](./expression-builder.types.customstyles.md)
+
+## Types.CustomStyles type
+
+> This API is provided as a beta preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
+> 
+
+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
+
+**Signature:**
+
+```typescript
+export type CustomStyles = {
+    rule?: string;
+    value?: string;
+    field?: string;
+    operator?: string;
+    group?: string;
+};
+```

package/docs/api/expression-builder.types.dateinput.md

@@ -0,0 +1,20 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@genesislcap/expression-builder](./expression-builder.md) &gt; [Types](./expression-builder.types.md) &gt; [DateInput](./expression-builder.types.dateinput.md)
+
+## Types.DateInput type
+
+> This API is provided as a beta preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
+> 
+
+Configuration for a date input, which has s string value and a date field input \*
+
+**Signature:**
+
+```typescript
+export type DateInput = {
+    input: 'date';
+    type: 'date';
+    validation?: (x: unknown) => string | null;
+};
+```

package/docs/api/expression-builder.types.datetimeinput.md

@@ -0,0 +1,20 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@genesislcap/expression-builder](./expression-builder.md) &gt; [Types](./expression-builder.types.md) &gt; [DateTimeInput](./expression-builder.types.datetimeinput.md)
+
+## Types.DateTimeInput type
+
+> This API is provided as a beta preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
+> 
+
+Configuration for a datetime input, which has s string value and a datetime field input \*
+
+**Signature:**
+
+```typescript
+export type DateTimeInput = {
+    input: 'datetime-local';
+    type: 'date-time';
+    validation?: (x: unknown) => string | null;
+};
+```

package/docs/api/expression-builder.types.field.md

@@ -0,0 +1,24 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@genesislcap/expression-builder](./expression-builder.md) &gt; [Types](./expression-builder.types.md) &gt; [Field](./expression-builder.types.field.md)
+
+## Types.Field type
+
+> This API is provided as a beta preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
+> 
+
+\*
+
+**Signature:**
+
+```typescript
+export type Field = {
+    optgroup?: string | null;
+    defaultValue?: any;
+    fieldId: string;
+    label: string;
+    operators?: string[];
+} & FieldTypes;
+```
+**References:** [FieldTypes](./expression-builder.types.fieldtypes.md)
+

package/docs/api/expression-builder.types.fieldtypes.md

@@ -0,0 +1,18 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@genesislcap/expression-builder](./expression-builder.md) &gt; [Types](./expression-builder.types.md) &gt; [FieldTypes](./expression-builder.types.fieldtypes.md)
+
+## Types.FieldTypes type
+
+> This API is provided as a beta preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
+> 
+
+Union of all input types \*
+
+**Signature:**
+
+```typescript
+export type FieldTypes = TextInput | NumberInput | CheckboxInput | SelectInput | DateInput | DateTimeInput;
+```
+**References:** [TextInput](./expression-builder.types.textinput.md)<!-- -->, [NumberInput](./expression-builder.types.numberinput.md)<!-- -->, [CheckboxInput](./expression-builder.types.checkboxinput.md)<!-- -->, [SelectInput](./expression-builder.types.selectinput.md)<!-- -->, [DateInput](./expression-builder.types.dateinput.md)<!-- -->, [DateTimeInput](./expression-builder.types.datetimeinput.md)
+

package/docs/api/expression-builder.types.group.md

@@ -0,0 +1,49 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@genesislcap/expression-builder](./expression-builder.md) &gt; [Types](./expression-builder.types.md) &gt; [Group](./expression-builder.types.group.md)
+
+## Types.Group type
+
+> This API is provided as a beta preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
+> 
+
+A group forms the overall model of the expression builder, and is recursive to itself allowing for a nested tree.
+
+**Signature:**
+
+```typescript
+export type Group = {
+    combinator: Combinator;
+    children: (Rule | Group)[];
+};
+```
+**References:** [Combinator](./expression-builder.types.combinator.md)<!-- -->, [Rule](./expression-builder.types.rule.md)<!-- -->, [Group](./expression-builder.types.group.md)
+
+## 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.
+```
+

package/docs/api/expression-builder.types.md

@@ -4,3 +4,29 @@
 
 ## Types namespace
 
+## Type Aliases
+
+|  Type Alias | Description |
+|  --- | --- |
+|  [\_Operator](./expression-builder.types._operator.md) | **_(BETA)_** \* |
+|  [BinaryOperator](./expression-builder.types.binaryoperator.md) | **_(BETA)_** An operator which has one value. Example <code>greater_than</code> \* |
+|  [CheckboxInput](./expression-builder.types.checkboxinput.md) | **_(BETA)_** Configuration for a boolean-type input, which has a boolean value and a checkbox. \* |
+|  [Combinator](./expression-builder.types.combinator.md) | **_(BETA)_** \* |
+|  [Config](./expression-builder.types.config.md) | **_(BETA)_** \* |
+|  [CustomElements](./expression-builder.types.customelements.md) | <p>**_(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.</p><p><code>checkbox</code>: Custom element tag for checkbox inputs</p><p><code>text</code>: Custom element tag for text inputs</p><p><code>number</code>: Custom element tag for number inputs</p><p><code>date</code>: Custom element tag for date inputs</p><p><code>datetimeLocal</code>: Custom element tag for datetime-local inputs</p><p><code>select</code>: Custom element tag for select inputs</p><p><code>option</code>: Custom element tag for option elements</p><p><code>button</code>: Custom element tag for button elements</p><p><code>radio</code>: 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 <code>change</code> event and <code>value</code> attribute.</p> |
+|  [CustomStyles](./expression-builder.types.customstyles.md) | <p>**_(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.</p><p><code>rule</code>: Additional CSS for expression rule component</p><p><code>value</code>: Additional CSS for rule value component</p><p><code>field</code>: Additional CSS for rule field component</p><p><code>operator</code>: Additional CSS for rule operator component</p><p><code>group</code>: Additional CSS for expression group component</p> |
+|  [DateInput](./expression-builder.types.dateinput.md) | **_(BETA)_** Configuration for a date input, which has s string value and a date field input \* |
+|  [DateTimeInput](./expression-builder.types.datetimeinput.md) | **_(BETA)_** Configuration for a datetime input, which has s string value and a datetime field input \* |
+|  [Field](./expression-builder.types.field.md) | **_(BETA)_** \* |
+|  [FieldTypes](./expression-builder.types.fieldtypes.md) | **_(BETA)_** Union of all input types \* |
+|  [Group](./expression-builder.types.group.md) | **_(BETA)_** A group forms the overall model of the expression builder, and is recursive to itself allowing for a nested tree. |
+|  [NumberInput](./expression-builder.types.numberinput.md) | **_(BETA)_** Configuration for a number-type input, which has a number value and a number input. \* |
+|  [Operator](./expression-builder.types.operator.md) | **_(BETA)_** \* |
+|  [Rule](./expression-builder.types.rule.md) | **_(BETA)_** A rule is a single constituent element of a larger expression, and is the smallest whole part of an expression. |
+|  [SelectInput](./expression-builder.types.selectinput.md) | **_(BETA)_** Configuration for an enum-type input, which as a string or number value, and uses a select input. \* |
+|  [Styles](./expression-builder.types.styles.md) | <p>**_(BETA)_** Configuration items for the expression builder styles.</p><p><code>customElements</code>: optional <code>Types.CustomElements</code> block for overriding the html tags used in the expression builder</p><p><code>customStyles</code>: optional <code>Types.CustomStyles</code> block to configure custom css for components.</p> |
+|  [TernararyOperator](./expression-builder.types.ternararyoperator.md) | **_(BETA)_** An operator which has two values. Example <code>between_inclusive</code> \* |
+|  [TextInput](./expression-builder.types.textinput.md) | **_(BETA)_** Configuration for a text-type input, which has a string value and a text input. \* |
+|  [UniraryOperator](./expression-builder.types.uniraryoperator.md) | <p>**_(BETA)_** An operator which doesn't have any value. Example <code>is_null</code></p><p>\*</p> |
+|  [VariadicOperator](./expression-builder.types.variadicoperator.md) | **_(BETA)_** An operator which can have any number of values where <code>NumVals &gt;= 1</code>, defaulting to 1. Example <code>one_of</code>. \* |
+