@itwin/components-react 3.3.0-dev.8 → 3.3.0-dev.80
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +28 -1
- package/lib/cjs/components-react/common/DateUtils.d.ts +12 -2
- package/lib/cjs/components-react/common/DateUtils.d.ts.map +1 -1
- package/lib/cjs/components-react/common/DateUtils.js +14 -4
- package/lib/cjs/components-react/common/DateUtils.js.map +1 -1
- package/lib/cjs/components-react/common/SubscriptionScheduler.d.ts +6 -8
- package/lib/cjs/components-react/common/SubscriptionScheduler.d.ts.map +1 -1
- package/lib/cjs/components-react/common/SubscriptionScheduler.js +18 -52
- package/lib/cjs/components-react/common/SubscriptionScheduler.js.map +1 -1
- package/lib/cjs/components-react/editors/DateTimeEditor.d.ts.map +1 -1
- package/lib/cjs/components-react/editors/DateTimeEditor.js +2 -0
- package/lib/cjs/components-react/editors/DateTimeEditor.js.map +1 -1
- package/lib/cjs/components-react/filter-builder/FilterBuilder.d.ts +36 -0
- package/lib/cjs/components-react/filter-builder/FilterBuilder.d.ts.map +1 -0
- package/lib/cjs/components-react/filter-builder/FilterBuilder.js +118 -0
- package/lib/cjs/components-react/filter-builder/FilterBuilder.js.map +1 -0
- package/lib/cjs/components-react/filter-builder/FilterBuilderRule.d.ts +11 -0
- package/lib/cjs/components-react/filter-builder/FilterBuilderRule.d.ts.map +1 -0
- package/lib/cjs/components-react/filter-builder/FilterBuilderRule.js +76 -0
- package/lib/cjs/components-react/filter-builder/FilterBuilderRule.js.map +1 -0
- package/lib/cjs/components-react/filter-builder/FilterBuilderRule.scss +41 -0
- package/lib/cjs/components-react/filter-builder/FilterBuilderRuleGroup.d.ts +29 -0
- package/lib/cjs/components-react/filter-builder/FilterBuilderRuleGroup.d.ts.map +1 -0
- package/lib/cjs/components-react/filter-builder/FilterBuilderRuleGroup.js +79 -0
- package/lib/cjs/components-react/filter-builder/FilterBuilderRuleGroup.js.map +1 -0
- package/lib/cjs/components-react/filter-builder/FilterBuilderRuleGroup.scss +73 -0
- package/lib/cjs/components-react/filter-builder/FilterBuilderRuleOperator.d.ts +12 -0
- package/lib/cjs/components-react/filter-builder/FilterBuilderRuleOperator.d.ts.map +1 -0
- package/lib/cjs/components-react/filter-builder/FilterBuilderRuleOperator.js +47 -0
- package/lib/cjs/components-react/filter-builder/FilterBuilderRuleOperator.js.map +1 -0
- package/lib/cjs/components-react/filter-builder/FilterBuilderRuleProperty.d.ts +11 -0
- package/lib/cjs/components-react/filter-builder/FilterBuilderRuleProperty.d.ts.map +1 -0
- package/lib/cjs/components-react/filter-builder/FilterBuilderRuleProperty.js +52 -0
- package/lib/cjs/components-react/filter-builder/FilterBuilderRuleProperty.js.map +1 -0
- package/lib/cjs/components-react/filter-builder/FilterBuilderRuleValue.d.ts +11 -0
- package/lib/cjs/components-react/filter-builder/FilterBuilderRuleValue.d.ts.map +1 -0
- package/lib/cjs/components-react/filter-builder/FilterBuilderRuleValue.js +43 -0
- package/lib/cjs/components-react/filter-builder/FilterBuilderRuleValue.js.map +1 -0
- package/lib/cjs/components-react/filter-builder/FilterBuilderState.d.ts +43 -0
- package/lib/cjs/components-react/filter-builder/FilterBuilderState.d.ts.map +1 -0
- package/lib/cjs/components-react/filter-builder/FilterBuilderState.js +152 -0
- package/lib/cjs/components-react/filter-builder/FilterBuilderState.js.map +1 -0
- package/lib/cjs/components-react/filter-builder/Operators.d.ts +27 -0
- package/lib/cjs/components-react/filter-builder/Operators.d.ts.map +1 -0
- package/lib/cjs/components-react/filter-builder/Operators.js +113 -0
- package/lib/cjs/components-react/filter-builder/Operators.js.map +1 -0
- package/lib/cjs/components-react/filter-builder/Types.d.ts +18 -0
- package/lib/cjs/components-react/filter-builder/Types.d.ts.map +1 -0
- package/lib/cjs/components-react/filter-builder/Types.js +9 -0
- package/lib/cjs/components-react/filter-builder/Types.js.map +1 -0
- package/lib/cjs/components-react/tree/controlled/TreeHooks.d.ts.map +1 -1
- package/lib/cjs/components-react/tree/controlled/TreeHooks.js +5 -8
- package/lib/cjs/components-react/tree/controlled/TreeHooks.js.map +1 -1
- package/lib/cjs/components-react/tree/controlled/TreeNodeLoader.d.ts +8 -4
- package/lib/cjs/components-react/tree/controlled/TreeNodeLoader.d.ts.map +1 -1
- package/lib/cjs/components-react/tree/controlled/TreeNodeLoader.js +54 -45
- package/lib/cjs/components-react/tree/controlled/TreeNodeLoader.js.map +1 -1
- package/lib/cjs/components-react/tree/controlled/component/TreeNodeRenderer.d.ts +2 -0
- package/lib/cjs/components-react/tree/controlled/component/TreeNodeRenderer.d.ts.map +1 -1
- package/lib/cjs/components-react/tree/controlled/component/TreeNodeRenderer.js +1 -1
- package/lib/cjs/components-react/tree/controlled/component/TreeNodeRenderer.js.map +1 -1
- package/lib/cjs/components-react.d.ts +9 -0
- package/lib/cjs/components-react.d.ts.map +1 -1
- package/lib/cjs/components-react.js +9 -0
- package/lib/cjs/components-react.js.map +1 -1
- package/lib/esm/components-react/common/DateUtils.d.ts +12 -2
- package/lib/esm/components-react/common/DateUtils.d.ts.map +1 -1
- package/lib/esm/components-react/common/DateUtils.js +12 -2
- package/lib/esm/components-react/common/DateUtils.js.map +1 -1
- package/lib/esm/components-react/common/SubscriptionScheduler.d.ts +6 -8
- package/lib/esm/components-react/common/SubscriptionScheduler.d.ts.map +1 -1
- package/lib/esm/components-react/common/SubscriptionScheduler.js +18 -52
- package/lib/esm/components-react/common/SubscriptionScheduler.js.map +1 -1
- package/lib/esm/components-react/editors/DateTimeEditor.d.ts.map +1 -1
- package/lib/esm/components-react/editors/DateTimeEditor.js +2 -0
- package/lib/esm/components-react/editors/DateTimeEditor.js.map +1 -1
- package/lib/esm/components-react/filter-builder/FilterBuilder.d.ts +36 -0
- package/lib/esm/components-react/filter-builder/FilterBuilder.d.ts.map +1 -0
- package/lib/esm/components-react/filter-builder/FilterBuilder.js +94 -0
- package/lib/esm/components-react/filter-builder/FilterBuilder.js.map +1 -0
- package/lib/esm/components-react/filter-builder/FilterBuilderRule.d.ts +11 -0
- package/lib/esm/components-react/filter-builder/FilterBuilderRule.d.ts.map +1 -0
- package/lib/esm/components-react/filter-builder/FilterBuilderRule.js +53 -0
- package/lib/esm/components-react/filter-builder/FilterBuilderRule.js.map +1 -0
- package/lib/esm/components-react/filter-builder/FilterBuilderRule.scss +41 -0
- package/lib/esm/components-react/filter-builder/FilterBuilderRuleGroup.d.ts +29 -0
- package/lib/esm/components-react/filter-builder/FilterBuilderRuleGroup.d.ts.map +1 -0
- package/lib/esm/components-react/filter-builder/FilterBuilderRuleGroup.js +55 -0
- package/lib/esm/components-react/filter-builder/FilterBuilderRuleGroup.js.map +1 -0
- package/lib/esm/components-react/filter-builder/FilterBuilderRuleGroup.scss +73 -0
- package/lib/esm/components-react/filter-builder/FilterBuilderRuleOperator.d.ts +12 -0
- package/lib/esm/components-react/filter-builder/FilterBuilderRuleOperator.d.ts.map +1 -0
- package/lib/esm/components-react/filter-builder/FilterBuilderRuleOperator.js +24 -0
- package/lib/esm/components-react/filter-builder/FilterBuilderRuleOperator.js.map +1 -0
- package/lib/esm/components-react/filter-builder/FilterBuilderRuleProperty.d.ts +11 -0
- package/lib/esm/components-react/filter-builder/FilterBuilderRuleProperty.d.ts.map +1 -0
- package/lib/esm/components-react/filter-builder/FilterBuilderRuleProperty.js +29 -0
- package/lib/esm/components-react/filter-builder/FilterBuilderRuleProperty.js.map +1 -0
- package/lib/esm/components-react/filter-builder/FilterBuilderRuleValue.d.ts +11 -0
- package/lib/esm/components-react/filter-builder/FilterBuilderRuleValue.d.ts.map +1 -0
- package/lib/esm/components-react/filter-builder/FilterBuilderRuleValue.js +20 -0
- package/lib/esm/components-react/filter-builder/FilterBuilderRuleValue.js.map +1 -0
- package/lib/esm/components-react/filter-builder/FilterBuilderState.d.ts +43 -0
- package/lib/esm/components-react/filter-builder/FilterBuilderState.d.ts.map +1 -0
- package/lib/esm/components-react/filter-builder/FilterBuilderState.js +127 -0
- package/lib/esm/components-react/filter-builder/FilterBuilderState.js.map +1 -0
- package/lib/esm/components-react/filter-builder/Operators.d.ts +27 -0
- package/lib/esm/components-react/filter-builder/Operators.d.ts.map +1 -0
- package/lib/esm/components-react/filter-builder/Operators.js +107 -0
- package/lib/esm/components-react/filter-builder/Operators.js.map +1 -0
- package/lib/esm/components-react/filter-builder/Types.d.ts +18 -0
- package/lib/esm/components-react/filter-builder/Types.d.ts.map +1 -0
- package/lib/esm/components-react/filter-builder/Types.js +5 -0
- package/lib/esm/components-react/filter-builder/Types.js.map +1 -0
- package/lib/esm/components-react/tree/controlled/TreeHooks.d.ts.map +1 -1
- package/lib/esm/components-react/tree/controlled/TreeHooks.js +6 -9
- package/lib/esm/components-react/tree/controlled/TreeHooks.js.map +1 -1
- package/lib/esm/components-react/tree/controlled/TreeNodeLoader.d.ts +8 -4
- package/lib/esm/components-react/tree/controlled/TreeNodeLoader.d.ts.map +1 -1
- package/lib/esm/components-react/tree/controlled/TreeNodeLoader.js +53 -44
- package/lib/esm/components-react/tree/controlled/TreeNodeLoader.js.map +1 -1
- package/lib/esm/components-react/tree/controlled/component/TreeNodeRenderer.d.ts +2 -0
- package/lib/esm/components-react/tree/controlled/component/TreeNodeRenderer.d.ts.map +1 -1
- package/lib/esm/components-react/tree/controlled/component/TreeNodeRenderer.js +1 -1
- package/lib/esm/components-react/tree/controlled/component/TreeNodeRenderer.js.map +1 -1
- package/lib/esm/components-react.d.ts +9 -0
- package/lib/esm/components-react.d.ts.map +1 -1
- package/lib/esm/components-react.js +9 -0
- package/lib/esm/components-react.js.map +1 -1
- package/lib/public/locales/en/UiComponents.json +16 -0
- package/package.json +19 -16
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FilterBuilderRule.d.ts","sourceRoot":"","sources":["../../../../src/components-react/filter-builder/FilterBuilderRule.tsx"],"names":[],"mappings":";AAYA,OAAO,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AAEjE,OAAO,0BAA0B,CAAC;AAElC,aAAa;AACb,MAAM,WAAW,sCAAsC;IACrD,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,IAAI,EAAE,yBAAyB,CAAC;CACjC;AAED,aAAa;AACb,wBAAgB,iCAAiC,CAAC,KAAK,EAAE,sCAAsC,eAoD9F"}
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
/*---------------------------------------------------------------------------------------------
|
|
2
|
+
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
|
|
3
|
+
* See LICENSE.md in the project root for license terms and full copyright notice.
|
|
4
|
+
*--------------------------------------------------------------------------------------------*/
|
|
5
|
+
import * as React from "react";
|
|
6
|
+
import { SvgDelete } from "@itwin/itwinui-icons-react";
|
|
7
|
+
import { IconButton } from "@itwin/itwinui-react";
|
|
8
|
+
import { PropertyFilterBuilderContext, PropertyFilterBuilderRuleRenderingContext } from "./FilterBuilder";
|
|
9
|
+
import { PropertyFilterBuilderRuleOperator } from "./FilterBuilderRuleOperator";
|
|
10
|
+
import { PropertyFilterBuilderRuleProperty } from "./FilterBuilderRuleProperty";
|
|
11
|
+
import { PropertyFilterBuilderRuleValue } from "./FilterBuilderRuleValue";
|
|
12
|
+
import { isUnaryPropertyFilterOperator } from "./Operators";
|
|
13
|
+
import "./FilterBuilderRule.scss";
|
|
14
|
+
/** @alpha */
|
|
15
|
+
export function PropertyFilterBuilderRuleRenderer(props) {
|
|
16
|
+
const { path, rule } = props;
|
|
17
|
+
const { properties, actions, onRulePropertySelected } = React.useContext(PropertyFilterBuilderContext);
|
|
18
|
+
const { ruleOperatorRenderer, ruleValueRenderer } = React.useContext(PropertyFilterBuilderRuleRenderingContext);
|
|
19
|
+
const { property, operator, value } = rule;
|
|
20
|
+
const onSelectedPropertyChanged = React.useCallback((newProperty) => {
|
|
21
|
+
actions.setRuleProperty(path, newProperty);
|
|
22
|
+
// invoke 'onRulePropertySelected' when new property is selected. There is no way to deselect property
|
|
23
|
+
// so 'newProperty' will be 'undefined' only if selected property is no longer in 'properties' list.
|
|
24
|
+
if (onRulePropertySelected && newProperty)
|
|
25
|
+
onRulePropertySelected(newProperty);
|
|
26
|
+
}, [path, onRulePropertySelected, actions]);
|
|
27
|
+
const onRuleOperatorChange = React.useCallback((newOperator) => {
|
|
28
|
+
actions.setRuleOperator(path, newOperator);
|
|
29
|
+
}, [path, actions]);
|
|
30
|
+
const onRuleValueChange = React.useCallback((newValue) => {
|
|
31
|
+
actions.setRuleValue(path, newValue);
|
|
32
|
+
}, [path, actions]);
|
|
33
|
+
const removeRule = () => actions.removeItem(path);
|
|
34
|
+
const operatorRenderer = React.useCallback((prop) => {
|
|
35
|
+
if (ruleOperatorRenderer)
|
|
36
|
+
return ruleOperatorRenderer({ property: prop, operator, onChange: onRuleOperatorChange });
|
|
37
|
+
return React.createElement(PropertyFilterBuilderRuleOperator, { property: prop, onChange: onRuleOperatorChange, operator: operator });
|
|
38
|
+
}, [operator, ruleOperatorRenderer, onRuleOperatorChange]);
|
|
39
|
+
const valueRenderer = React.useCallback((prop) => {
|
|
40
|
+
if (ruleValueRenderer)
|
|
41
|
+
return ruleValueRenderer({ property: prop, value, onChange: onRuleValueChange });
|
|
42
|
+
return React.createElement(PropertyFilterBuilderRuleValue, { property: prop, onChange: onRuleValueChange, value: value });
|
|
43
|
+
}, [value, ruleValueRenderer, onRuleValueChange]);
|
|
44
|
+
return React.createElement("div", { className: "rule" },
|
|
45
|
+
React.createElement("div", { className: "rule-remove-action" },
|
|
46
|
+
React.createElement(IconButton, { onClick: removeRule, styleType: "borderless", size: "small" },
|
|
47
|
+
React.createElement(SvgDelete, null))),
|
|
48
|
+
React.createElement("div", { className: "rule-condition" },
|
|
49
|
+
React.createElement(PropertyFilterBuilderRuleProperty, { properties: properties, selectedProperty: rule.property, onSelectedPropertyChanged: onSelectedPropertyChanged }),
|
|
50
|
+
property && operatorRenderer(property),
|
|
51
|
+
property && operator && !isUnaryPropertyFilterOperator(operator) && valueRenderer(property)));
|
|
52
|
+
}
|
|
53
|
+
//# sourceMappingURL=FilterBuilderRule.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FilterBuilderRule.js","sourceRoot":"","sources":["../../../../src/components-react/filter-builder/FilterBuilderRule.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\nimport * as React from \"react\";\r\nimport { PropertyDescription, PropertyValue } from \"@itwin/appui-abstract\";\r\nimport { SvgDelete } from \"@itwin/itwinui-icons-react\";\r\nimport { IconButton } from \"@itwin/itwinui-react\";\r\nimport { PropertyFilterBuilderContext, PropertyFilterBuilderRuleRenderingContext } from \"./FilterBuilder\";\r\nimport { PropertyFilterBuilderRuleOperator } from \"./FilterBuilderRuleOperator\";\r\nimport { PropertyFilterBuilderRuleProperty } from \"./FilterBuilderRuleProperty\";\r\nimport { PropertyFilterBuilderRuleValue } from \"./FilterBuilderRuleValue\";\r\nimport { PropertyFilterBuilderRule } from \"./FilterBuilderState\";\r\nimport { isUnaryPropertyFilterOperator, PropertyFilterRuleOperator } from \"./Operators\";\r\nimport \"./FilterBuilderRule.scss\";\r\n\r\n/** @alpha */\r\nexport interface PropertyFilterBuilderRuleRendererProps {\r\n path: string[];\r\n rule: PropertyFilterBuilderRule;\r\n}\r\n\r\n/** @alpha */\r\nexport function PropertyFilterBuilderRuleRenderer(props: PropertyFilterBuilderRuleRendererProps) {\r\n const { path, rule} = props;\r\n const { properties, actions, onRulePropertySelected } = React.useContext(PropertyFilterBuilderContext);\r\n const { ruleOperatorRenderer, ruleValueRenderer } = React.useContext(PropertyFilterBuilderRuleRenderingContext);\r\n const { property, operator, value } = rule;\r\n\r\n const onSelectedPropertyChanged = React.useCallback((newProperty?: PropertyDescription) => {\r\n actions.setRuleProperty(path, newProperty);\r\n // invoke 'onRulePropertySelected' when new property is selected. There is no way to deselect property\r\n // so 'newProperty' will be 'undefined' only if selected property is no longer in 'properties' list.\r\n if (onRulePropertySelected && newProperty)\r\n onRulePropertySelected(newProperty);\r\n }, [path, onRulePropertySelected, actions]);\r\n\r\n const onRuleOperatorChange = React.useCallback((newOperator: PropertyFilterRuleOperator) => {\r\n actions.setRuleOperator(path, newOperator);\r\n }, [path, actions]);\r\n\r\n const onRuleValueChange = React.useCallback((newValue: PropertyValue) => {\r\n actions.setRuleValue(path, newValue);\r\n }, [path, actions]);\r\n\r\n const removeRule = () => actions.removeItem(path);\r\n\r\n const operatorRenderer = React.useCallback((prop: PropertyDescription) => {\r\n if (ruleOperatorRenderer)\r\n return ruleOperatorRenderer({property: prop, operator, onChange: onRuleOperatorChange});\r\n return <PropertyFilterBuilderRuleOperator property={prop} onChange={onRuleOperatorChange} operator={operator} />;\r\n }, [ operator,ruleOperatorRenderer, onRuleOperatorChange]);\r\n\r\n const valueRenderer = React.useCallback((prop: PropertyDescription) => {\r\n if (ruleValueRenderer)\r\n return ruleValueRenderer({property: prop, value, onChange: onRuleValueChange});\r\n return <PropertyFilterBuilderRuleValue property={prop} onChange={onRuleValueChange} value={value} />;\r\n }, [value, ruleValueRenderer, onRuleValueChange]);\r\n\r\n return <div className=\"rule\">\r\n <div className=\"rule-remove-action\">\r\n <IconButton onClick={removeRule} styleType=\"borderless\" size=\"small\">\r\n <SvgDelete />\r\n </IconButton>\r\n </div>\r\n <div className=\"rule-condition\">\r\n <PropertyFilterBuilderRuleProperty\r\n properties={properties}\r\n selectedProperty={rule.property}\r\n onSelectedPropertyChanged={onSelectedPropertyChanged}\r\n />\r\n {property && operatorRenderer(property)}\r\n {property && operator && !isUnaryPropertyFilterOperator(operator) && valueRenderer(property)}\r\n </div>\r\n </div>;\r\n}\r\n"]}
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
/*---------------------------------------------------------------------------------------------
|
|
2
|
+
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
|
|
3
|
+
* See LICENSE.md in the project root for license terms and full copyright notice.
|
|
4
|
+
*--------------------------------------------------------------------------------------------*/
|
|
5
|
+
@import "~@itwin/itwinui-css/scss/style/index";
|
|
6
|
+
|
|
7
|
+
.rule {
|
|
8
|
+
display: grid;
|
|
9
|
+
grid-template-columns: min-content auto;
|
|
10
|
+
padding: 3px 0;
|
|
11
|
+
|
|
12
|
+
.rule-condition {
|
|
13
|
+
display: grid;
|
|
14
|
+
grid-template-columns: minmax(auto, 500px) 150px minmax(auto, 300px);
|
|
15
|
+
grid-column-gap: $iui-m;
|
|
16
|
+
|
|
17
|
+
.rule-property .iui-input {
|
|
18
|
+
padding-top: 1.5px;
|
|
19
|
+
padding-bottom: 1.5px;
|
|
20
|
+
min-height: 27px;
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.rule-remove-action {
|
|
25
|
+
padding-right: $iui-sm;
|
|
26
|
+
visibility: hidden;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
&:focus-within .rule-remove-action,
|
|
30
|
+
&:hover .rule-remove-action {
|
|
31
|
+
visibility: visible;
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.rule-group-items > .rule {
|
|
36
|
+
padding-bottom: 14px;
|
|
37
|
+
|
|
38
|
+
&:first-child {
|
|
39
|
+
padding-top: 14px;
|
|
40
|
+
}
|
|
41
|
+
}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { PropertyFilterBuilderRuleGroup } from "./FilterBuilderState";
|
|
3
|
+
import { PropertyFilterRuleGroupOperator } from "./Operators";
|
|
4
|
+
import "./FilterBuilderRuleGroup.scss";
|
|
5
|
+
/** @alpha */
|
|
6
|
+
export interface ActiveRuleGroupContextProps {
|
|
7
|
+
activeElement: HTMLElement | undefined;
|
|
8
|
+
onFocus: React.FocusEventHandler<HTMLElement>;
|
|
9
|
+
onBlur: React.FocusEventHandler<HTMLElement>;
|
|
10
|
+
onMouseOver: React.MouseEventHandler<HTMLElement>;
|
|
11
|
+
onMouseOut: React.MouseEventHandler<HTMLElement>;
|
|
12
|
+
}
|
|
13
|
+
/** @alpha */
|
|
14
|
+
export declare const ActiveRuleGroupContext: React.Context<ActiveRuleGroupContextProps>;
|
|
15
|
+
/** @alpha */
|
|
16
|
+
export interface PropertyFilterBuilderRuleGroupRendererProps {
|
|
17
|
+
path: string[];
|
|
18
|
+
group: PropertyFilterBuilderRuleGroup;
|
|
19
|
+
}
|
|
20
|
+
/** @alpha */
|
|
21
|
+
export declare function PropertyFilterBuilderRuleGroupRenderer(props: PropertyFilterBuilderRuleGroupRendererProps): JSX.Element;
|
|
22
|
+
/** @alpha */
|
|
23
|
+
export interface PropertyFilterBuilderRuleGroupOperatorProps {
|
|
24
|
+
operator: PropertyFilterRuleGroupOperator;
|
|
25
|
+
onChange: (operator: PropertyFilterRuleGroupOperator) => void;
|
|
26
|
+
}
|
|
27
|
+
/** @alpha */
|
|
28
|
+
export declare function PropertyFilterBuilderRuleGroupOperator(props: PropertyFilterBuilderRuleGroupOperatorProps): JSX.Element;
|
|
29
|
+
//# sourceMappingURL=FilterBuilderRuleGroup.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FilterBuilderRuleGroup.d.ts","sourceRoot":"","sources":["../../../../src/components-react/filter-builder/FilterBuilderRuleGroup.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,EAAoC,8BAA8B,EAAsC,MAAM,sBAAsB,CAAC;AAC5I,OAAO,EAAE,+BAA+B,EAAE,MAAM,aAAa,CAAC;AAC9D,OAAO,+BAA+B,CAAC;AAEvC,aAAa;AACb,MAAM,WAAW,2BAA2B;IAC1C,aAAa,EAAE,WAAW,GAAG,SAAS,CAAC;IACvC,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC;IAC9C,MAAM,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC;IAC7C,WAAW,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC;IAClD,UAAU,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC;CAClD;AAED,aAAa;AACb,eAAO,MAAM,sBAAsB,4CAA0D,CAAC;AAE9F,aAAa;AACb,MAAM,WAAW,2CAA2C;IAC1D,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,KAAK,EAAE,8BAA8B,CAAC;CACvC;AAED,aAAa;AACb,wBAAgB,sCAAsC,CAAC,KAAK,EAAE,2CAA2C,eAwCxG;AAED,aAAa;AACb,MAAM,WAAW,2CAA2C;IAC1D,QAAQ,EAAE,+BAA+B,CAAC;IAC1C,QAAQ,EAAE,CAAC,QAAQ,EAAE,+BAA+B,KAAK,IAAI,CAAC;CAC/D;AAED,aAAa;AACb,wBAAgB,sCAAsC,CAAC,KAAK,EAAE,2CAA2C,eAWxG"}
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
/*---------------------------------------------------------------------------------------------
|
|
2
|
+
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
|
|
3
|
+
* See LICENSE.md in the project root for license terms and full copyright notice.
|
|
4
|
+
*--------------------------------------------------------------------------------------------*/
|
|
5
|
+
import * as React from "react";
|
|
6
|
+
import { SvgAdd, SvgDelete } from "@itwin/itwinui-icons-react";
|
|
7
|
+
import { Button, IconButton, Select } from "@itwin/itwinui-react";
|
|
8
|
+
import { UiComponents } from "../UiComponents";
|
|
9
|
+
import { PropertyFilterBuilderContext } from "./FilterBuilder";
|
|
10
|
+
import { PropertyFilterBuilderRuleRenderer } from "./FilterBuilderRule";
|
|
11
|
+
import { isPropertyFilterBuilderRuleGroup } from "./FilterBuilderState";
|
|
12
|
+
import { PropertyFilterRuleGroupOperator } from "./Operators";
|
|
13
|
+
import "./FilterBuilderRuleGroup.scss";
|
|
14
|
+
/** @alpha */
|
|
15
|
+
export const ActiveRuleGroupContext = React.createContext(null);
|
|
16
|
+
/** @alpha */
|
|
17
|
+
export function PropertyFilterBuilderRuleGroupRenderer(props) {
|
|
18
|
+
const { path, group } = props;
|
|
19
|
+
const { actions, ruleGroupDepthLimit } = React.useContext(PropertyFilterBuilderContext);
|
|
20
|
+
const groupRef = React.useRef(null);
|
|
21
|
+
const addRule = () => actions.addItem(path, "RULE");
|
|
22
|
+
const addRuleGroup = () => actions.addItem(path, "RULE_GROUP");
|
|
23
|
+
const removeGroup = () => actions.removeItem(path);
|
|
24
|
+
const onOperatorChange = React.useCallback((operator) => {
|
|
25
|
+
actions.setRuleGroupOperator(path, operator);
|
|
26
|
+
}, [path, actions]);
|
|
27
|
+
const allowToAddGroup = ruleGroupDepthLimit === undefined || path.length < ruleGroupDepthLimit;
|
|
28
|
+
const { activeElement, ...eventHandlers } = React.useContext(ActiveRuleGroupContext);
|
|
29
|
+
return React.createElement("div", { ref: groupRef, className: "rule-group", "data-isactive": groupRef.current === activeElement, ...eventHandlers },
|
|
30
|
+
React.createElement("div", { className: "rule-group-remove-action" }, group.groupId !== undefined && React.createElement(IconButton, { "data-testid": "rule-group-remove", onClick: removeGroup, styleType: "borderless", size: "small" },
|
|
31
|
+
React.createElement(SvgDelete, null))),
|
|
32
|
+
React.createElement("div", { className: "rule-group-content" },
|
|
33
|
+
React.createElement(PropertyFilterBuilderRuleGroupOperator, { operator: group.operator, onChange: onOperatorChange }),
|
|
34
|
+
React.createElement("div", { className: "rule-group-items" }, group.items.map((item) => React.createElement(PropertyFilterBuilderGroupOrRule, { key: item.id, path: path, item: item }))),
|
|
35
|
+
React.createElement("div", { className: "rule-group-actions" },
|
|
36
|
+
React.createElement(Button, { key: "add-rule-button", "data-testid": "rule-group-add-rule", onClick: addRule, styleType: "borderless", size: "small", startIcon: React.createElement(SvgAdd, null) }, UiComponents.translate("filterBuilder.rule")),
|
|
37
|
+
allowToAddGroup && React.createElement(Button, { key: "add-rule-group-button", "data-testid": "rule-group-add-rule-group", onClick: addRuleGroup, styleType: "borderless", size: "small", startIcon: React.createElement(SvgAdd, null) }, UiComponents.translate("filterBuilder.ruleGroup")))));
|
|
38
|
+
}
|
|
39
|
+
/** @alpha */
|
|
40
|
+
export function PropertyFilterBuilderRuleGroupOperator(props) {
|
|
41
|
+
const { operator, onChange } = props;
|
|
42
|
+
const options = React.useMemo(() => ([
|
|
43
|
+
{ value: PropertyFilterRuleGroupOperator.And, label: UiComponents.translate("filterBuilder.operators.and") },
|
|
44
|
+
{ value: PropertyFilterRuleGroupOperator.Or, label: UiComponents.translate("filterBuilder.operators.or") },
|
|
45
|
+
]), []);
|
|
46
|
+
return React.createElement("div", { className: "rule-group-operator" },
|
|
47
|
+
React.createElement(Select, { options: options, value: operator, onChange: onChange, size: "small" }));
|
|
48
|
+
}
|
|
49
|
+
const PropertyFilterBuilderGroupOrRule = React.memo(function PropertyFilterBuilderGroupOrRule({ path, item }) {
|
|
50
|
+
const itemPath = [...path, item.id];
|
|
51
|
+
if (isPropertyFilterBuilderRuleGroup(item))
|
|
52
|
+
return React.createElement(PropertyFilterBuilderRuleGroupRenderer, { path: itemPath, group: item });
|
|
53
|
+
return React.createElement(PropertyFilterBuilderRuleRenderer, { path: itemPath, rule: item });
|
|
54
|
+
});
|
|
55
|
+
//# sourceMappingURL=FilterBuilderRuleGroup.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FilterBuilderRuleGroup.js","sourceRoot":"","sources":["../../../../src/components-react/filter-builder/FilterBuilderRuleGroup.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\nimport * as React from \"react\";\r\nimport { SvgAdd, SvgDelete } from \"@itwin/itwinui-icons-react\";\r\nimport { Button, IconButton, Select, SelectOption } from \"@itwin/itwinui-react\";\r\nimport { UiComponents } from \"../UiComponents\";\r\nimport { PropertyFilterBuilderContext } from \"./FilterBuilder\";\r\nimport { PropertyFilterBuilderRuleRenderer } from \"./FilterBuilderRule\";\r\nimport { isPropertyFilterBuilderRuleGroup, PropertyFilterBuilderRuleGroup, PropertyFilterBuilderRuleGroupItem } from \"./FilterBuilderState\";\r\nimport { PropertyFilterRuleGroupOperator } from \"./Operators\";\r\nimport \"./FilterBuilderRuleGroup.scss\";\r\n\r\n/** @alpha */\r\nexport interface ActiveRuleGroupContextProps {\r\n activeElement: HTMLElement | undefined;\r\n onFocus: React.FocusEventHandler<HTMLElement>;\r\n onBlur: React.FocusEventHandler<HTMLElement>;\r\n onMouseOver: React.MouseEventHandler<HTMLElement>;\r\n onMouseOut: React.MouseEventHandler<HTMLElement>;\r\n}\r\n\r\n/** @alpha */\r\nexport const ActiveRuleGroupContext = React.createContext<ActiveRuleGroupContextProps>(null!);\r\n\r\n/** @alpha */\r\nexport interface PropertyFilterBuilderRuleGroupRendererProps {\r\n path: string[];\r\n group: PropertyFilterBuilderRuleGroup;\r\n}\r\n\r\n/** @alpha */\r\nexport function PropertyFilterBuilderRuleGroupRenderer(props: PropertyFilterBuilderRuleGroupRendererProps) {\r\n const { path, group } = props;\r\n const { actions, ruleGroupDepthLimit } = React.useContext(PropertyFilterBuilderContext);\r\n const groupRef = React.useRef<HTMLDivElement>(null);\r\n\r\n const addRule = () => actions.addItem(path, \"RULE\");\r\n const addRuleGroup = () => actions.addItem(path, \"RULE_GROUP\");\r\n const removeGroup = () => actions.removeItem(path);\r\n\r\n const onOperatorChange = React.useCallback((operator) => {\r\n actions.setRuleGroupOperator(path, operator);\r\n }, [path, actions]);\r\n\r\n const allowToAddGroup = ruleGroupDepthLimit === undefined || path.length < ruleGroupDepthLimit;\r\n const { activeElement, ...eventHandlers } = React.useContext(ActiveRuleGroupContext);\r\n\r\n return <div\r\n ref={groupRef}\r\n className=\"rule-group\"\r\n data-isactive={groupRef.current === activeElement}\r\n {...eventHandlers}\r\n >\r\n <div className=\"rule-group-remove-action\">\r\n {group.groupId !== undefined && <IconButton data-testid=\"rule-group-remove\" onClick={removeGroup} styleType=\"borderless\" size=\"small\"><SvgDelete /></IconButton>}\r\n </div>\r\n <div className=\"rule-group-content\">\r\n <PropertyFilterBuilderRuleGroupOperator operator={group.operator} onChange={onOperatorChange}/>\r\n <div className=\"rule-group-items\">\r\n {group.items.map((item) => <PropertyFilterBuilderGroupOrRule key={item.id} path={path} item={item} />)}\r\n </div>\r\n <div className=\"rule-group-actions\">\r\n <Button key=\"add-rule-button\" data-testid=\"rule-group-add-rule\" onClick={addRule} styleType=\"borderless\" size=\"small\" startIcon={<SvgAdd />}>\r\n {UiComponents.translate(\"filterBuilder.rule\")}\r\n </Button>\r\n {allowToAddGroup && <Button key=\"add-rule-group-button\" data-testid=\"rule-group-add-rule-group\" onClick={addRuleGroup} styleType=\"borderless\" size=\"small\" startIcon={<SvgAdd />}>\r\n {UiComponents.translate(\"filterBuilder.ruleGroup\")}\r\n </Button>}\r\n </div>\r\n </div>\r\n </div>;\r\n}\r\n\r\n/** @alpha */\r\nexport interface PropertyFilterBuilderRuleGroupOperatorProps {\r\n operator: PropertyFilterRuleGroupOperator;\r\n onChange: (operator: PropertyFilterRuleGroupOperator) => void;\r\n}\r\n\r\n/** @alpha */\r\nexport function PropertyFilterBuilderRuleGroupOperator(props: PropertyFilterBuilderRuleGroupOperatorProps) {\r\n const { operator, onChange } = props;\r\n\r\n const options = React.useMemo<Array<SelectOption<PropertyFilterRuleGroupOperator>>>(() => ([\r\n { value: PropertyFilterRuleGroupOperator.And, label: UiComponents.translate(\"filterBuilder.operators.and\") },\r\n { value: PropertyFilterRuleGroupOperator.Or, label: UiComponents.translate(\"filterBuilder.operators.or\") },\r\n ]), []);\r\n\r\n return <div className=\"rule-group-operator\">\r\n <Select options={options} value={operator} onChange={onChange} size=\"small\" />\r\n </div>;\r\n}\r\ninterface PropertyFilterBuilderGroupOrRuleProps {\r\n path: string[];\r\n item: PropertyFilterBuilderRuleGroupItem;\r\n}\r\n\r\nconst PropertyFilterBuilderGroupOrRule = React.memo(\r\n function PropertyFilterBuilderGroupOrRule({path, item}: PropertyFilterBuilderGroupOrRuleProps) {\r\n const itemPath = [...path, item.id];\r\n\r\n if (isPropertyFilterBuilderRuleGroup(item))\r\n return <PropertyFilterBuilderRuleGroupRenderer path={itemPath} group={item} />;\r\n return <PropertyFilterBuilderRuleRenderer path={itemPath} rule={item} />;\r\n }\r\n);\r\n"]}
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
/*---------------------------------------------------------------------------------------------
|
|
2
|
+
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
|
|
3
|
+
* See LICENSE.md in the project root for license terms and full copyright notice.
|
|
4
|
+
*--------------------------------------------------------------------------------------------*/
|
|
5
|
+
@import "~@itwin/itwinui-css/scss/style/index";
|
|
6
|
+
@import "~@itwin/itwinui-css/scss/button/disabled";
|
|
7
|
+
|
|
8
|
+
.filter-builder > .rule-group {
|
|
9
|
+
& > .rule-group-content {
|
|
10
|
+
border-left: 0;
|
|
11
|
+
padding-left: 0;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
& > .rule-group-remove-action {
|
|
15
|
+
padding-right: 0;
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.rule-group {
|
|
20
|
+
display: grid;
|
|
21
|
+
grid-template-columns: min-content auto;
|
|
22
|
+
padding: 11px 0;
|
|
23
|
+
|
|
24
|
+
&[data-isactive=true] > .rule-group-remove-action {
|
|
25
|
+
visibility: visible;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
&[data-isactive=true] > .rule-group-content {
|
|
29
|
+
@include themed {
|
|
30
|
+
border-color: t(iui-color-background-1--light);
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
&[data-isactive=false] > .rule-group-content > .rule-group-actions .iui-button {
|
|
35
|
+
@include themed {
|
|
36
|
+
color: t(iui-icons-color);
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.rule-group-remove-action {
|
|
41
|
+
padding: 3px $iui-sm 3px 0;
|
|
42
|
+
visibility: hidden;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.rule-group-content {
|
|
46
|
+
padding-left: $iui-sm;
|
|
47
|
+
border-left: 1px solid;
|
|
48
|
+
box-sizing: border-box;
|
|
49
|
+
@include themed {
|
|
50
|
+
border-color: t(iui-color-background-border);
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.rule-group-operator {
|
|
54
|
+
padding: 3px 0;
|
|
55
|
+
width: max-content;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.rule-group-actions {
|
|
59
|
+
padding: 3px 0;
|
|
60
|
+
display: grid;
|
|
61
|
+
grid-template-columns: min-content min-content;
|
|
62
|
+
gap: 8px;
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.rule-group-items > .rule-group {
|
|
68
|
+
padding-bottom: 22px;
|
|
69
|
+
|
|
70
|
+
&:last-child {
|
|
71
|
+
padding-bottom: 11px;
|
|
72
|
+
}
|
|
73
|
+
}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { PropertyDescription } from "@itwin/appui-abstract";
|
|
3
|
+
import { PropertyFilterRuleOperator } from "./Operators";
|
|
4
|
+
/** @alpha */
|
|
5
|
+
export interface PropertyFilterBuilderRuleOperatorProps {
|
|
6
|
+
operator?: PropertyFilterRuleOperator;
|
|
7
|
+
property: PropertyDescription;
|
|
8
|
+
onChange: (operator: PropertyFilterRuleOperator) => void;
|
|
9
|
+
}
|
|
10
|
+
/** @alpha */
|
|
11
|
+
export declare function PropertyFilterBuilderRuleOperator(props: PropertyFilterBuilderRuleOperatorProps): JSX.Element;
|
|
12
|
+
//# sourceMappingURL=FilterBuilderRuleOperator.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FilterBuilderRuleOperator.d.ts","sourceRoot":"","sources":["../../../../src/components-react/filter-builder/FilterBuilderRuleOperator.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAE5D,OAAO,EAA8D,0BAA0B,EAAE,MAAM,aAAa,CAAC;AAErH,aAAa;AACb,MAAM,WAAW,sCAAsC;IACrD,QAAQ,CAAC,EAAE,0BAA0B,CAAC;IACtC,QAAQ,EAAE,mBAAmB,CAAC;IAC9B,QAAQ,EAAE,CAAC,QAAQ,EAAE,0BAA0B,KAAK,IAAI,CAAC;CAC1D;AAED,aAAa;AACb,wBAAgB,iCAAiC,CAAC,KAAK,EAAE,sCAAsC,eAkB9F"}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
/*---------------------------------------------------------------------------------------------
|
|
2
|
+
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
|
|
3
|
+
* See LICENSE.md in the project root for license terms and full copyright notice.
|
|
4
|
+
*--------------------------------------------------------------------------------------------*/
|
|
5
|
+
import * as React from "react";
|
|
6
|
+
import { Select } from "@itwin/itwinui-react";
|
|
7
|
+
import { getPropertyFilterOperatorLabel, getPropertyFilterOperators } from "./Operators";
|
|
8
|
+
/** @alpha */
|
|
9
|
+
export function PropertyFilterBuilderRuleOperator(props) {
|
|
10
|
+
var _a;
|
|
11
|
+
const { operator, property, onChange } = props;
|
|
12
|
+
const availableOperators = React.useMemo(() => getPropertyFilterOperators(property), [property]);
|
|
13
|
+
const selectedOperator = (_a = availableOperators.find((op) => op === operator)) !== null && _a !== void 0 ? _a : availableOperators[0];
|
|
14
|
+
React.useEffect(() => {
|
|
15
|
+
onChange(selectedOperator);
|
|
16
|
+
}, [onChange, selectedOperator]);
|
|
17
|
+
const availableOptions = React.useMemo(() => availableOperators.map((op) => ({
|
|
18
|
+
value: op,
|
|
19
|
+
label: getPropertyFilterOperatorLabel(op),
|
|
20
|
+
})), [availableOperators]);
|
|
21
|
+
return React.createElement("div", { className: "rule-operator" },
|
|
22
|
+
React.createElement(Select, { options: availableOptions, value: selectedOperator, onChange: onChange, size: "small" }));
|
|
23
|
+
}
|
|
24
|
+
//# sourceMappingURL=FilterBuilderRuleOperator.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FilterBuilderRuleOperator.js","sourceRoot":"","sources":["../../../../src/components-react/filter-builder/FilterBuilderRuleOperator.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC9C,OAAO,EAAE,8BAA8B,EAAE,0BAA0B,EAA8B,MAAM,aAAa,CAAC;AASrH,aAAa;AACb,MAAM,UAAU,iCAAiC,CAAC,KAA6C;;IAC7F,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAE/C,MAAM,kBAAkB,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,0BAA0B,CAAC,QAAQ,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IACjG,MAAM,gBAAgB,GAAG,MAAA,kBAAkB,CAAC,IAAI,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,KAAK,QAAQ,CAAC,mCAAI,kBAAkB,CAAC,CAAC,CAAC,CAAC;IAEnG,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,QAAQ,CAAC,gBAAgB,CAAC,CAAC;IAC7B,CAAC,EAAE,CAAC,QAAQ,EAAE,gBAAgB,CAAC,CAAC,CAAC;IAEjC,MAAM,gBAAgB,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,kBAAkB,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC;QAC3E,KAAK,EAAE,EAAE;QACT,KAAK,EAAE,8BAA8B,CAAC,EAAE,CAAC;KAC1C,CAAC,CAAC,EAAE,CAAC,kBAAkB,CAAC,CAAC,CAAC;IAE3B,OAAO,6BAAK,SAAS,EAAC,eAAe;QACnC,oBAAC,MAAM,IAAC,OAAO,EAAE,gBAAgB,EAAE,KAAK,EAAE,gBAAgB,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAC,OAAO,GAAE,CAC1F,CAAC;AACT,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\nimport * as React from \"react\";\r\nimport { PropertyDescription } from \"@itwin/appui-abstract\";\r\nimport { Select } from \"@itwin/itwinui-react\";\r\nimport { getPropertyFilterOperatorLabel, getPropertyFilterOperators, PropertyFilterRuleOperator } from \"./Operators\";\r\n\r\n/** @alpha */\r\nexport interface PropertyFilterBuilderRuleOperatorProps {\r\n operator?: PropertyFilterRuleOperator;\r\n property: PropertyDescription;\r\n onChange: (operator: PropertyFilterRuleOperator) => void;\r\n}\r\n\r\n/** @alpha */\r\nexport function PropertyFilterBuilderRuleOperator(props: PropertyFilterBuilderRuleOperatorProps) {\r\n const { operator, property, onChange } = props;\r\n\r\n const availableOperators = React.useMemo(() => getPropertyFilterOperators(property), [property]);\r\n const selectedOperator = availableOperators.find((op) => op === operator) ?? availableOperators[0];\r\n\r\n React.useEffect(() => {\r\n onChange(selectedOperator);\r\n }, [onChange, selectedOperator]);\r\n\r\n const availableOptions = React.useMemo(() => availableOperators.map((op) => ({\r\n value: op,\r\n label: getPropertyFilterOperatorLabel(op),\r\n })), [availableOperators]);\r\n\r\n return <div className=\"rule-operator\">\r\n <Select options={availableOptions} value={selectedOperator} onChange={onChange} size=\"small\"/>\r\n </div>;\r\n}\r\n"]}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { PropertyDescription } from "@itwin/appui-abstract";
|
|
3
|
+
/** @alpha */
|
|
4
|
+
export interface PropertyFilterBuilderRulePropertyProps {
|
|
5
|
+
properties: PropertyDescription[];
|
|
6
|
+
selectedProperty?: PropertyDescription;
|
|
7
|
+
onSelectedPropertyChanged: (property?: PropertyDescription) => void;
|
|
8
|
+
}
|
|
9
|
+
/** @alpha */
|
|
10
|
+
export declare function PropertyFilterBuilderRuleProperty(props: PropertyFilterBuilderRulePropertyProps): JSX.Element;
|
|
11
|
+
//# sourceMappingURL=FilterBuilderRuleProperty.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FilterBuilderRuleProperty.d.ts","sourceRoot":"","sources":["../../../../src/components-react/filter-builder/FilterBuilderRuleProperty.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAI5D,aAAa;AACb,MAAM,WAAW,sCAAsC;IACrD,UAAU,EAAE,mBAAmB,EAAE,CAAC;IAClC,gBAAgB,CAAC,EAAE,mBAAmB,CAAC;IACvC,yBAAyB,EAAE,CAAC,QAAQ,CAAC,EAAE,mBAAmB,KAAK,IAAI,CAAC;CACrE;AAED,aAAa;AACb,wBAAgB,iCAAiC,CAAC,KAAK,EAAE,sCAAsC,eA6B9F"}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
/*---------------------------------------------------------------------------------------------
|
|
2
|
+
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
|
|
3
|
+
* See LICENSE.md in the project root for license terms and full copyright notice.
|
|
4
|
+
*--------------------------------------------------------------------------------------------*/
|
|
5
|
+
import * as React from "react";
|
|
6
|
+
import { ComboBox } from "@itwin/itwinui-react";
|
|
7
|
+
import { UiComponents } from "../UiComponents";
|
|
8
|
+
/** @alpha */
|
|
9
|
+
export function PropertyFilterBuilderRuleProperty(props) {
|
|
10
|
+
const { selectedProperty, properties, onSelectedPropertyChanged } = props;
|
|
11
|
+
const selectOptions = React.useMemo(() => properties.map((property) => ({
|
|
12
|
+
id: property.name,
|
|
13
|
+
label: property.displayLabel,
|
|
14
|
+
value: property.name,
|
|
15
|
+
})), [properties]);
|
|
16
|
+
const onPropertyChanged = React.useCallback((name) => {
|
|
17
|
+
onSelectedPropertyChanged(properties.find((property) => property.name === name));
|
|
18
|
+
}, [properties, onSelectedPropertyChanged]);
|
|
19
|
+
React.useEffect(() => {
|
|
20
|
+
const currentSelectedProperty = properties.find((property) => property.name === (selectedProperty === null || selectedProperty === void 0 ? void 0 : selectedProperty.name));
|
|
21
|
+
if ((currentSelectedProperty === null || currentSelectedProperty === void 0 ? void 0 : currentSelectedProperty.name) !== (selectedProperty === null || selectedProperty === void 0 ? void 0 : selectedProperty.name))
|
|
22
|
+
onSelectedPropertyChanged(currentSelectedProperty);
|
|
23
|
+
}, [properties, selectedProperty, onSelectedPropertyChanged]);
|
|
24
|
+
return React.createElement("div", { className: "rule-property" },
|
|
25
|
+
React.createElement(ComboBox, { options: selectOptions, onChange: onPropertyChanged, value: selectedProperty === null || selectedProperty === void 0 ? void 0 : selectedProperty.name, inputProps: {
|
|
26
|
+
placeholder: UiComponents.translate("filterBuilder.chooseProperty"),
|
|
27
|
+
} }));
|
|
28
|
+
}
|
|
29
|
+
//# sourceMappingURL=FilterBuilderRuleProperty.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FilterBuilderRuleProperty.js","sourceRoot":"","sources":["../../../../src/components-react/filter-builder/FilterBuilderRuleProperty.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,QAAQ,EAAgB,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAS/C,aAAa;AACb,MAAM,UAAU,iCAAiC,CAAC,KAA6C;IAC7F,MAAM,EAAE,gBAAgB,EAAE,UAAU,EAAE,yBAAyB,EAAE,GAAG,KAAK,CAAC;IAE1E,MAAM,aAAa,GAAG,KAAK,CAAC,OAAO,CAAyB,GAAG,EAAE,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;QAC9F,EAAE,EAAE,QAAQ,CAAC,IAAI;QACjB,KAAK,EAAE,QAAQ,CAAC,YAAY;QAC5B,KAAK,EAAE,QAAQ,CAAC,IAAI;KACrB,CAAC,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEnB,MAAM,iBAAiB,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,IAAY,EAAE,EAAE;QAC3D,yBAAyB,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC;IACnF,CAAC,EAAE,CAAC,UAAU,EAAE,yBAAyB,CAAC,CAAC,CAAC;IAE5C,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,MAAM,uBAAuB,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,MAAK,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,IAAI,CAAA,CAAC,CAAC;QACxG,IAAI,CAAA,uBAAuB,aAAvB,uBAAuB,uBAAvB,uBAAuB,CAAE,IAAI,OAAK,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,IAAI,CAAA;YAC1D,yBAAyB,CAAC,uBAAuB,CAAC,CAAC;IACvD,CAAC,EAAE,CAAC,UAAU,EAAE,gBAAgB,EAAE,yBAAyB,CAAC,CAAC,CAAC;IAE9D,OAAO,6BAAK,SAAS,EAAC,eAAe;QACnC,oBAAC,QAAQ,IACP,OAAO,EAAE,aAAa,EACtB,QAAQ,EAAE,iBAAiB,EAC3B,KAAK,EAAE,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAE,IAAI,EAC7B,UAAU,EAAE;gBACV,WAAW,EAAE,YAAY,CAAC,SAAS,CAAC,8BAA8B,CAAC;aACpE,GACD,CACE,CAAC;AACT,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\nimport * as React from \"react\";\r\nimport { PropertyDescription } from \"@itwin/appui-abstract\";\r\nimport { ComboBox, SelectOption } from \"@itwin/itwinui-react\";\r\nimport { UiComponents } from \"../UiComponents\";\r\n\r\n/** @alpha */\r\nexport interface PropertyFilterBuilderRulePropertyProps {\r\n properties: PropertyDescription[];\r\n selectedProperty?: PropertyDescription;\r\n onSelectedPropertyChanged: (property?: PropertyDescription) => void;\r\n}\r\n\r\n/** @alpha */\r\nexport function PropertyFilterBuilderRuleProperty(props: PropertyFilterBuilderRulePropertyProps) {\r\n const { selectedProperty, properties, onSelectedPropertyChanged } = props;\r\n\r\n const selectOptions = React.useMemo<SelectOption<string>[]>(() => properties.map((property) => ({\r\n id: property.name,\r\n label: property.displayLabel,\r\n value: property.name,\r\n })), [properties]);\r\n\r\n const onPropertyChanged = React.useCallback((name: string) => {\r\n onSelectedPropertyChanged(properties.find((property) => property.name === name));\r\n }, [properties, onSelectedPropertyChanged]);\r\n\r\n React.useEffect(() => {\r\n const currentSelectedProperty = properties.find((property) => property.name === selectedProperty?.name);\r\n if (currentSelectedProperty?.name !== selectedProperty?.name)\r\n onSelectedPropertyChanged(currentSelectedProperty);\r\n }, [properties, selectedProperty, onSelectedPropertyChanged]);\r\n\r\n return <div className=\"rule-property\">\r\n <ComboBox\r\n options={selectOptions}\r\n onChange={onPropertyChanged}\r\n value={selectedProperty?.name}\r\n inputProps={{\r\n placeholder: UiComponents.translate(\"filterBuilder.chooseProperty\"),\r\n }}\r\n />\r\n </div>;\r\n}\r\n"]}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { PropertyDescription, PropertyValue } from "@itwin/appui-abstract";
|
|
3
|
+
/** @alpha */
|
|
4
|
+
export interface PropertyFilterBuilderRuleValueProps {
|
|
5
|
+
value?: PropertyValue;
|
|
6
|
+
property: PropertyDescription;
|
|
7
|
+
onChange: (value: PropertyValue) => void;
|
|
8
|
+
}
|
|
9
|
+
/** @alpha */
|
|
10
|
+
export declare function PropertyFilterBuilderRuleValue(props: PropertyFilterBuilderRuleValueProps): JSX.Element;
|
|
11
|
+
//# sourceMappingURL=FilterBuilderRuleValue.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FilterBuilderRuleValue.d.ts","sourceRoot":"","sources":["../../../../src/components-react/filter-builder/FilterBuilderRuleValue.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAE,mBAAmB,EAAkB,aAAa,EAAuB,MAAM,uBAAuB,CAAC;AAGhH,aAAa;AACb,MAAM,WAAW,mCAAmC;IAClD,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,QAAQ,EAAE,mBAAmB,CAAC;IAC9B,QAAQ,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;CAC1C;AAED,aAAa;AACb,wBAAgB,8BAA8B,CAAC,KAAK,EAAE,mCAAmC,eAmBxF"}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
/*---------------------------------------------------------------------------------------------
|
|
2
|
+
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
|
|
3
|
+
* See LICENSE.md in the project root for license terms and full copyright notice.
|
|
4
|
+
*--------------------------------------------------------------------------------------------*/
|
|
5
|
+
import * as React from "react";
|
|
6
|
+
import { PropertyRecord, PropertyValueFormat } from "@itwin/appui-abstract";
|
|
7
|
+
import { EditorContainer } from "../editors/EditorContainer";
|
|
8
|
+
/** @alpha */
|
|
9
|
+
export function PropertyFilterBuilderRuleValue(props) {
|
|
10
|
+
const { value, property, onChange } = props;
|
|
11
|
+
const propertyRecord = React.useMemo(() => {
|
|
12
|
+
return new PropertyRecord(value !== null && value !== void 0 ? value : { valueFormat: PropertyValueFormat.Primitive }, property);
|
|
13
|
+
}, [value, property]);
|
|
14
|
+
const onValueChange = React.useCallback(({ newValue }) => {
|
|
15
|
+
onChange(newValue);
|
|
16
|
+
}, [onChange]);
|
|
17
|
+
return React.createElement("div", { className: "rule-value" },
|
|
18
|
+
React.createElement(EditorContainer, { propertyRecord: propertyRecord, onCancel: /* istanbul ignore next */ () => { }, onCommit: onValueChange, setFocus: false }));
|
|
19
|
+
}
|
|
20
|
+
//# sourceMappingURL=FilterBuilderRuleValue.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FilterBuilderRuleValue.js","sourceRoot":"","sources":["../../../../src/components-react/filter-builder/FilterBuilderRuleValue.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAuB,cAAc,EAAiB,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAChH,OAAO,EAAE,eAAe,EAAuB,MAAM,4BAA4B,CAAC;AASlF,aAAa;AACb,MAAM,UAAU,8BAA8B,CAAC,KAA0C;IACvF,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAE5C,MAAM,cAAc,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACxC,OAAO,IAAI,cAAc,CAAC,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,EAAC,WAAW,EAAE,mBAAmB,CAAC,SAAS,EAAC,EAAE,QAAQ,CAAC,CAAC;IAC7F,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEtB,MAAM,aAAa,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,EAAC,QAAQ,EAAsB,EAAE,EAAE;QAC1E,QAAQ,CAAC,QAAQ,CAAC,CAAC;IACrB,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,OAAO,6BAAK,SAAS,EAAC,YAAY;QAChC,oBAAC,eAAe,IACd,cAAc,EAAE,cAAc,EAC9B,QAAQ,EAAE,0BAA0B,CAAC,GAAG,EAAE,GAAE,CAAC,EAC7C,QAAQ,EAAE,aAAa,EACvB,QAAQ,EAAE,KAAK,GACf,CACE,CAAC;AACT,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\nimport * as React from \"react\";\r\nimport { PropertyDescription, PropertyRecord, PropertyValue, PropertyValueFormat } from \"@itwin/appui-abstract\";\r\nimport { EditorContainer, PropertyUpdatedArgs } from \"../editors/EditorContainer\";\r\n\r\n/** @alpha */\r\nexport interface PropertyFilterBuilderRuleValueProps {\r\n value?: PropertyValue;\r\n property: PropertyDescription;\r\n onChange: (value: PropertyValue) => void;\r\n}\r\n\r\n/** @alpha */\r\nexport function PropertyFilterBuilderRuleValue(props: PropertyFilterBuilderRuleValueProps) {\r\n const { value, property, onChange } = props;\r\n\r\n const propertyRecord = React.useMemo(() => {\r\n return new PropertyRecord(value ?? {valueFormat: PropertyValueFormat.Primitive}, property);\r\n }, [value, property]);\r\n\r\n const onValueChange = React.useCallback(({newValue}: PropertyUpdatedArgs) => {\r\n onChange(newValue);\r\n }, [onChange]);\r\n\r\n return <div className=\"rule-value\">\r\n <EditorContainer\r\n propertyRecord={propertyRecord}\r\n onCancel={/* istanbul ignore next */ () => {}}\r\n onCommit={onValueChange}\r\n setFocus={false}\r\n />\r\n </div>;\r\n}\r\n"]}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import { PropertyDescription, PropertyValue } from "@itwin/appui-abstract";
|
|
2
|
+
import { PropertyFilterRuleGroupOperator, PropertyFilterRuleOperator } from "./Operators";
|
|
3
|
+
/** @alpha */
|
|
4
|
+
export interface PropertyFilterBuilderState {
|
|
5
|
+
rootGroup: PropertyFilterBuilderRuleGroup;
|
|
6
|
+
}
|
|
7
|
+
/** @alpha */
|
|
8
|
+
export declare type PropertyFilterBuilderRuleGroupItem = PropertyFilterBuilderRuleGroup | PropertyFilterBuilderRule;
|
|
9
|
+
/** @alpha */
|
|
10
|
+
export interface PropertyFilterBuilderRuleGroup {
|
|
11
|
+
id: string;
|
|
12
|
+
groupId?: string;
|
|
13
|
+
operator: PropertyFilterRuleGroupOperator;
|
|
14
|
+
items: PropertyFilterBuilderRuleGroupItem[];
|
|
15
|
+
}
|
|
16
|
+
/** @alpha */
|
|
17
|
+
export interface PropertyFilterBuilderRule {
|
|
18
|
+
id: string;
|
|
19
|
+
groupId: string;
|
|
20
|
+
property?: PropertyDescription;
|
|
21
|
+
operator?: PropertyFilterRuleOperator;
|
|
22
|
+
value?: PropertyValue;
|
|
23
|
+
}
|
|
24
|
+
/** @alpha */
|
|
25
|
+
export declare class PropertyFilterBuilderActions {
|
|
26
|
+
private setState;
|
|
27
|
+
constructor(setState: (setter: (prevState: PropertyFilterBuilderState) => PropertyFilterBuilderState) => void);
|
|
28
|
+
private updateState;
|
|
29
|
+
addItem(path: string[], itemType: "RULE_GROUP" | "RULE"): void;
|
|
30
|
+
removeItem(path: string[]): void;
|
|
31
|
+
setRuleGroupOperator(path: string[], operator: PropertyFilterRuleGroupOperator): void;
|
|
32
|
+
setRuleProperty(path: string[], property?: PropertyDescription): void;
|
|
33
|
+
setRuleOperator(path: string[], operator: PropertyFilterRuleOperator): void;
|
|
34
|
+
setRuleValue(path: string[], value: PropertyValue): void;
|
|
35
|
+
}
|
|
36
|
+
/** @alpha */
|
|
37
|
+
export declare function isPropertyFilterBuilderRuleGroup(item: PropertyFilterBuilderRuleGroupItem): item is PropertyFilterBuilderRuleGroup;
|
|
38
|
+
/** @alpha */
|
|
39
|
+
export declare function usePropertyFilterBuilderState(): {
|
|
40
|
+
state: PropertyFilterBuilderState;
|
|
41
|
+
actions: PropertyFilterBuilderActions;
|
|
42
|
+
};
|
|
43
|
+
//# sourceMappingURL=FilterBuilderState.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FilterBuilderState.d.ts","sourceRoot":"","sources":["../../../../src/components-react/filter-builder/FilterBuilderState.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,mBAAmB,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAE3E,OAAO,EAAiC,+BAA+B,EAAE,0BAA0B,EAAE,MAAM,aAAa,CAAC;AAEzH,aAAa;AACb,MAAM,WAAW,0BAA0B;IACzC,SAAS,EAAE,8BAA8B,CAAC;CAC3C;AAED,aAAa;AACb,oBAAY,kCAAkC,GAAG,8BAA8B,GAAG,yBAAyB,CAAC;AAE5G,aAAa;AACb,MAAM,WAAW,8BAA8B;IAC7C,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,+BAA+B,CAAC;IAC1C,KAAK,EAAE,kCAAkC,EAAE,CAAC;CAC7C;AAED,aAAa;AACb,MAAM,WAAW,yBAAyB;IACxC,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,mBAAmB,CAAC;IAC/B,QAAQ,CAAC,EAAE,0BAA0B,CAAC;IACtC,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED,aAAa;AACb,qBAAa,4BAA4B;IAC3B,OAAO,CAAC,QAAQ;gBAAR,QAAQ,EAAE,CAAC,MAAM,EAAE,CAAC,SAAS,EAAE,0BAA0B,KAAK,0BAA0B,KAAK,IAAI;IAErH,OAAO,CAAC,WAAW;IAIZ,OAAO,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,QAAQ,EAAE,YAAY,GAAG,MAAM;IAUvD,UAAU,CAAC,IAAI,EAAE,MAAM,EAAE;IAoBzB,oBAAoB,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,QAAQ,EAAE,+BAA+B;IAS9E,eAAe,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,QAAQ,CAAC,EAAE,mBAAmB;IAU9D,eAAe,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,QAAQ,EAAE,0BAA0B;IAWpE,YAAY,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,aAAa;CAQzD;AAED,aAAa;AACb,wBAAgB,gCAAgC,CAAC,IAAI,EAAE,kCAAkC,GAAG,IAAI,IAAI,8BAA8B,CAEjI;AAED,aAAa;AACb,wBAAgB,6BAA6B;;;EAO5C"}
|