@vitrosoftware/common-ui-ts 1.1.36 → 1.1.38

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.
Files changed (32) hide show
  1. package/css/std/controls/action-handler/action-handler.css +1 -0
  2. package/css/std/controls/button/button.css +1 -1
  3. package/css/std/controls/criterion/criterion.css +217 -0
  4. package/css/std/controls/dropdown-button/dropdown-button.css +0 -2
  5. package/css/std/controls/field-iterator/field-iterator.css +17 -0
  6. package/css/std/controls/lookup-picker/lookup-picker-selected-item.css +37 -1
  7. package/css/std/controls/lookup-picker/lookup-picker-value-list.css +1 -1
  8. package/css/std/controls/search/checkbox-list.css +23 -0
  9. package/css/std/controls/search/input.css +93 -0
  10. package/css/std/controls/search/search.css +76 -0
  11. package/css/std/controls/tab-group/tab-group.css +1 -1
  12. package/css/std/controls/uploader/uploader.css +1 -1
  13. package/dist/constants/Event.d.ts +1 -0
  14. package/dist/controls/Criterion/ConditionSelect.d.ts +13 -0
  15. package/dist/controls/Criterion/Criterion.d.ts +27 -0
  16. package/dist/controls/DropdownButton/DropdownButton.d.ts +3 -2
  17. package/dist/controls/FieldIterator/FieldIterator.d.ts +22 -0
  18. package/dist/controls/Search/CheckboxList.d.ts +12 -0
  19. package/dist/controls/Search/Filter.d.ts +25 -0
  20. package/dist/controls/Search/Input.d.ts +16 -0
  21. package/dist/controls/Search/Search.d.ts +32 -0
  22. package/dist/controls/Search/SearchConstants.d.ts +4 -0
  23. package/dist/controls/Search/SearchCriterion.d.ts +7 -0
  24. package/dist/controls/TableView/TableView.d.ts +3 -0
  25. package/dist/controls/TableView/TableViewConstants.d.ts +4 -0
  26. package/dist/controls/TableView/TableViewContext.d.ts +3 -0
  27. package/dist/controls/TableView/TreeGridTableViewContextImpl.d.ts +3 -0
  28. package/dist/index.css +481 -8
  29. package/dist/index.d.ts +7 -0
  30. package/dist/index.js +818 -34
  31. package/dist/index.js.map +1 -1
  32. package/package.json +1 -1
@@ -0,0 +1,32 @@
1
+ import React from 'react';
2
+ import { SearchCriterion } from './SearchCriterion';
3
+ interface SearchProps {
4
+ fieldList: any[];
5
+ visibleFieldList?: any[];
6
+ onFilterChange?: (searchCriterionList: SearchCriterion[]) => any;
7
+ onSubmit: (searchCriterionList: SearchCriterion[]) => any;
8
+ onCancel: () => any;
9
+ componentMap: {
10
+ name: string;
11
+ value: React.FunctionComponent<any>;
12
+ }[];
13
+ onAddField?: (selectedFieldIdList: string[]) => any;
14
+ operatorList: {
15
+ type: number;
16
+ text: string;
17
+ }[];
18
+ conditionList: {
19
+ type: number;
20
+ text: string;
21
+ imageUrl?: string;
22
+ imageHoverUrl?: string;
23
+ }[];
24
+ isAllFieldsVisible?: boolean;
25
+ labelCancel: string;
26
+ labelSearch: string;
27
+ labelAddField: string;
28
+ defaultSearchFieldName: string;
29
+ inputPlaceholder?: string;
30
+ }
31
+ export declare const Search: (props: SearchProps) => JSX.Element;
32
+ export {};
@@ -0,0 +1,4 @@
1
+ export declare enum LOCALE {
2
+ INPUT_MORE = "app.common.search.input.more",
3
+ EMPTY_PLACEHOLDER = "app.common.search.checkboxList.emptyPlaceholder"
4
+ }
@@ -0,0 +1,7 @@
1
+ import { OPERATOR, FILTER_TYPE } from '../TableView/TableViewConstants';
2
+ export interface SearchCriterion {
3
+ internalName: string;
4
+ operator: OPERATOR;
5
+ valueList: any[];
6
+ condition: FILTER_TYPE;
7
+ }
@@ -2,6 +2,7 @@
2
2
  import { TableViewContext } from './TableViewContext';
3
3
  import { TableViewRow } from './TableViewRow';
4
4
  import { TableViewEventHandler } from './TableViewEventHandler';
5
+ import { SearchCriterion } from '../Search/SearchCriterion';
5
6
  export declare const TableView: (props: TableViewProps) => JSX.Element;
6
7
  export interface TableViewProps {
7
8
  id: string;
@@ -19,4 +20,6 @@ export interface TableViewProps {
19
20
  cache?: number;
20
21
  cacheVersion?: number | string;
21
22
  scope?: string;
23
+ searchCriterionList?: SearchCriterion[];
24
+ searchParentId?: string;
22
25
  }
@@ -139,3 +139,7 @@ export declare enum SECTION {
139
139
  HEADER = "Header",
140
140
  SPACE = "Space"
141
141
  }
142
+ export declare enum OPERATOR {
143
+ AND = 0,
144
+ OR = 1
145
+ }
@@ -1,6 +1,7 @@
1
1
  import { TableViewRow } from './TableViewRow';
2
2
  import { TableViewCol } from './TableViewCol';
3
3
  import { TableViewEventHandler } from './TableViewEventHandler';
4
+ import { SearchCriterion } from '../Search/SearchCriterion';
4
5
  export interface TableViewContext {
5
6
  readonly columnList: any;
6
7
  readonly columnNameList: any;
@@ -14,6 +15,8 @@ export interface TableViewContext {
14
15
  dragging: boolean;
15
16
  filterOneLevel: boolean;
16
17
  scope: string;
18
+ searchCriterionList: SearchCriterion[];
19
+ parentId: string;
17
20
  acceptChanges(row?: TableViewRow): void;
18
21
  hasGantt(): boolean;
19
22
  getRowById(id: string, attr?: string, nofixed?: boolean): TableViewRow;
@@ -2,6 +2,7 @@ import { TableViewContext } from './TableViewContext';
2
2
  import { TableViewRow } from './TableViewRow';
3
3
  import { TableViewCol } from './TableViewCol';
4
4
  import { TableViewEventHandler } from './TableViewEventHandler';
5
+ import { SearchCriterion } from '../Search/SearchCriterion';
5
6
  export declare const tableViewList: Map<string, TableViewContext>;
6
7
  export declare function getTableViewById(id: string): TableViewContext | undefined;
7
8
  export declare class TreeGridTableViewContextImpl implements TableViewContext {
@@ -10,6 +11,8 @@ export declare class TreeGridTableViewContextImpl implements TableViewContext {
10
11
  suggestValue: string;
11
12
  filterOneLevel: boolean;
12
13
  private readonly gridChangesFormat;
14
+ searchCriterionList: SearchCriterion[];
15
+ parentId: string;
13
16
  constructor(grid: any);
14
17
  get columnList(): any;
15
18
  get columnNameList(): any;
package/dist/index.css CHANGED
@@ -524,7 +524,7 @@
524
524
  position: absolute;
525
525
  width: 241px;
526
526
  height: 96px;
527
- z-index: 10000000000000;
527
+ z-index: 10000000;
528
528
  }
529
529
 
530
530
  ._uploader_vitro-uploader_237vX7T.vitro-dropzone-active {
@@ -1027,7 +1027,7 @@
1027
1027
  overflow: hidden;
1028
1028
  }
1029
1029
 
1030
- ._button_vitro-button_hVfBuSO div {
1030
+ ._button_vitro-button_hVfBuSO > div > div {
1031
1031
  text-overflow: ellipsis;
1032
1032
  white-space: nowrap;
1033
1033
  overflow: hidden;
@@ -1094,6 +1094,7 @@
1094
1094
  ._action-handler_vitro-icon-before_2OomEjN {
1095
1095
  width: 42px;
1096
1096
  height: 42px;
1097
+ min-width: 42px;
1097
1098
  margin-right: 16px;
1098
1099
  }
1099
1100
 
@@ -1466,8 +1467,6 @@
1466
1467
  outline: none;
1467
1468
  box-shadow: none !important;
1468
1469
  color: #E0E0E0;
1469
- font-family: inherit !important;
1470
- font-size: inherit !important;
1471
1470
  font-weight: normal !important;
1472
1471
  width: 24px;
1473
1472
  height: 24px;
@@ -1603,7 +1602,7 @@
1603
1602
  }
1604
1603
 
1605
1604
  ._tab-group_vitro-tab_1Qb50HL .ps > div:first-child {
1606
- padding: 30px 16px 0 16px;
1605
+ padding: 22px 16px 0 16px;
1607
1606
  display: flex;
1608
1607
  flex-wrap: wrap;
1609
1608
  grid-gap: 0 16px;
@@ -3013,16 +3012,52 @@
3013
3012
  font-size: 14px;
3014
3013
  line-height: 21px;
3015
3014
  }
3015
+ ._lookup-picker-selected-item_vitro-selected-item-multi_bzL7ugZ,
3016
3016
  ._lookup-picker-selected-item_vitro-selected-item_hw-euth {
3017
3017
  display: inline-flex;
3018
3018
  width: -moz-fit-content;
3019
3019
  width: fit-content;
3020
- margin: 0 6px 0 0;
3021
3020
  white-space: nowrap;
3022
3021
  overflow: hidden;
3023
3022
  text-overflow: ellipsis;
3024
3023
  align-items: center;
3025
3024
  }
3025
+
3026
+ ._lookup-picker-selected-item_vitro-selected-item-multi_bzL7ugZ > span,
3027
+ ._lookup-picker-selected-item_vitro-selected-item_hw-euth > span {
3028
+ overflow: hidden;
3029
+ text-overflow: ellipsis;
3030
+ }
3031
+
3032
+ ._lookup-picker-selected-item_vitro-selected-item_hw-euth {
3033
+ margin-right: 6px;
3034
+ }
3035
+
3036
+ ._lookup-picker-selected-item_vitro-selected-item-multi_bzL7ugZ {
3037
+ background: #F7F9FC;
3038
+ border-radius: 4px;
3039
+ padding: 2px 4px;
3040
+ margin-right: 12px;
3041
+ }
3042
+
3043
+ ._lookup-picker-selected-item_vitro-selected-item-multi_bzL7ugZ:last-child {
3044
+ margin-right: 0;
3045
+ }
3046
+
3047
+ ._lookup-picker-selected-item_vitro-button-close_1SRnr_0 {
3048
+ width: 24px;
3049
+ height: 24px;
3050
+ min-width: 24px;
3051
+ margin-left: 8px;
3052
+ background-size: 100%;
3053
+ background-position: center;
3054
+ background-repeat: no-repeat;
3055
+ }
3056
+
3057
+ ._lookup-picker-selected-item_vitro-button-close_1SRnr_0 {
3058
+ /* close.svg URL-encoder for SVG */
3059
+ background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='iconoir:cancel'%3E%3Cpath id='Vector' d='M6.75781 17.2438L12.0008 12.0008L17.2438 17.2438M17.2438 6.75781L11.9998 12.0008L6.75781 6.75781' stroke='%234A556C' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E%0A");
3060
+ }
3026
3061
 
3027
3062
  ._lookup-picker-html-value_vitro-item-html-value_2QBoTey {
3028
3063
  height: -moz-fit-content;
@@ -3036,7 +3071,7 @@
3036
3071
  }
3037
3072
  ._lookup-picker-value-list_vitro-value-list_LSdCMjq {
3038
3073
  position: absolute;
3039
- z-index: 1001;
3074
+ z-index: 10001;
3040
3075
  width: 100%;
3041
3076
  border-radius: 4px;
3042
3077
  margin-top: 4px;
@@ -4609,4 +4644,442 @@ ul > li:last-child > ul > li:last-child ._sidebar-item_vitro-active_7p5iOhY {
4609
4644
  ._image-picker_vitro-image-picker-wrapper_dlZyYFL {
4610
4645
  display: flex;
4611
4646
  flex-direction: column;
4612
- }
4647
+ }
4648
+ ._criterion_vitro-criterion-container_2cYcSkL {
4649
+ width: 100%;
4650
+ position: relative;
4651
+ display: flex;
4652
+ align-items: center;
4653
+ margin-bottom: 28px;
4654
+ }
4655
+
4656
+ ._criterion_vitro-criterion-container_2cYcSkL:first-child {
4657
+ margin-top: 10px;
4658
+ }
4659
+
4660
+ ._criterion_vitro-criterion-container_2cYcSkL:last-child {
4661
+ margin-bottom: 18px;
4662
+ }
4663
+
4664
+ ._criterion_vitro-block_3E9-RXM:last-child ._criterion_vitro-criterion-container_2cYcSkL {
4665
+ margin-bottom: 18px;
4666
+ }
4667
+
4668
+ ._criterion_vitro-control_2JLaybj {
4669
+ position: relative;
4670
+ }
4671
+
4672
+ ._criterion_vitro-label_3F6a8dj {
4673
+ padding: 0 6px;
4674
+ background: #fff;
4675
+ z-index: 1000;
4676
+ position: absolute;
4677
+ left: 10px;
4678
+ top: -10px;
4679
+ display: flex;
4680
+ }
4681
+
4682
+ ._criterion_vitro-operator-select-container_3OkjzXG {
4683
+ min-width: 57px;
4684
+ margin-right: 8px;
4685
+ display: flex;
4686
+ align-items: center;
4687
+ justify-content: flex-end;
4688
+ }
4689
+
4690
+ ._criterion_vitro-operator-select_1guNlk9 {
4691
+ cursor: pointer;
4692
+ padding: 4px 6px;
4693
+ line-height: 16px;
4694
+ font-size: 12px;
4695
+ border-radius: 4px;
4696
+ background: #F7F9FC;
4697
+ display: flex;
4698
+ align-items: center;
4699
+ justify-content: center;
4700
+ position: relative;
4701
+ }
4702
+
4703
+ ._criterion_vitro-operator-select_1guNlk9 > div {
4704
+ display: inline-block;
4705
+ line-height: 16px;
4706
+ font-size: 12px;
4707
+ }
4708
+
4709
+ ._criterion_vitro-operator-select_1guNlk9::after {
4710
+ content: '';
4711
+ display: inline-block;
4712
+ width: 16px;
4713
+ height: 16px;
4714
+ margin-left: 2px;
4715
+ background-position: center;
4716
+ background-size: 100%;
4717
+ /* collapse-bottom.svg URL-encoder for SVG */
4718
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M19.5 9L12 16.5L4.5 9' stroke='%234A556C' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
4719
+ }
4720
+
4721
+ ._criterion_vitro-operator-list_3A2VZsd {
4722
+ position: absolute;
4723
+ z-index: 10;
4724
+ top: calc(100% + 2px);
4725
+ right: 0;
4726
+ width: -moz-fit-content;
4727
+ width: fit-content;
4728
+ min-width: 100%;
4729
+ overflow: hidden;
4730
+ border-radius: 4px;
4731
+ background: #fff;
4732
+ list-style-type: none;
4733
+ margin: 0;
4734
+ padding: 0;
4735
+ box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.18), 0px 0px 4px 0px rgba(0, 0, 0, 0.14);
4736
+ }
4737
+
4738
+ ._criterion_vitro-operator-list_3A2VZsd li {
4739
+ padding: 8px 12px;
4740
+ }
4741
+
4742
+ ._criterion_vitro-operator-list_3A2VZsd li:hover,
4743
+ ._criterion_vitro-operator-list_3A2VZsd li:active {
4744
+ background: #F3F8FF;
4745
+ }
4746
+
4747
+ ._criterion_vitro-control_2JLaybj {
4748
+ margin-bottom: 0px;
4749
+ flex: 1 1;
4750
+ }
4751
+
4752
+ ._criterion_vitro-button-cancel_2C2G0sL {
4753
+ width: 20px;
4754
+ height: 20px;
4755
+ min-width: 20px;
4756
+ margin-left: 2px;
4757
+ margin-top: -10px;
4758
+ align-self: flex-start;
4759
+ border: none;
4760
+ background-color: transparent;
4761
+ background-size: 100%;
4762
+ background-position: center;
4763
+ /* cancel-grey.svg URL-encoder for SVG */
4764
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5.63281 14.3711L10.002 10.002L14.3711 14.3711M14.3711 5.63281L10.0011 10.002L5.63281 5.63281' stroke='%238E98A3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
4765
+ }
4766
+
4767
+ ._criterion_vitro-focus_3FNLsoN ._criterion_vitro-label_3F6a8dj {
4768
+ color: #3274E0;
4769
+ }
4770
+
4771
+ ._criterion_vitro-error_3pvFrlW ._criterion_vitro-label_3F6a8dj {
4772
+ color: #D13438;
4773
+ }
4774
+
4775
+ ._criterion_vitro-condition-select_1hTBBg- {
4776
+ padding: 0 6px 0 2px;
4777
+ position: absolute;
4778
+ top: -10px;
4779
+ left: 0;
4780
+ z-index: 10000;
4781
+ background: #fff;
4782
+ }
4783
+
4784
+ ._criterion_vitro-condition-select_1hTBBg- > div {
4785
+ border-radius: 16px;
4786
+ background: #F1F3F5;
4787
+ padding: 0 6px 0 8px;
4788
+ display: flex;
4789
+ align-items: center;
4790
+ font-size: 12px;
4791
+ line-height: 16px;
4792
+ cursor: pointer;
4793
+ }
4794
+
4795
+ ._criterion_vitro-condition-select_1hTBBg- > div::after {
4796
+ content: '';
4797
+ display: inline-block;
4798
+ margin-left: 4px;
4799
+ height: 16px;
4800
+ width: 16px;
4801
+ background-size: 100%;
4802
+ background-position: center;
4803
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M13 6L8 11L3 6' stroke='%234A556C' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
4804
+ }
4805
+
4806
+ ._criterion_vitro-icon_1DmS0jh {
4807
+ height: 16px;
4808
+ width: 16px;
4809
+ }
4810
+
4811
+ ._criterion_vitro-condition-list_10UIxJI {
4812
+ position: absolute;
4813
+ z-index: 1000000;
4814
+ top: 14px;
4815
+ left: 0;
4816
+ width: -moz-fit-content;
4817
+ width: fit-content;
4818
+ min-width: 270px;
4819
+ border-radius: 4px;
4820
+ background: #fff;
4821
+ list-style-type: none;
4822
+ margin: 0;
4823
+ padding: 0;
4824
+ box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.18), 0px 0px 4px 0px rgba(0, 0, 0, 0.14);
4825
+ }
4826
+
4827
+ ._criterion_vitro-condition-list_10UIxJI::before {
4828
+ content: '';
4829
+ display: block;
4830
+ height: 11px;
4831
+ width: 16px;
4832
+ background-position: center;
4833
+ background-size: 100%;
4834
+ background-repeat: no-repeat;
4835
+ position: absolute;
4836
+ left: 24px;
4837
+ top: -11px;
4838
+ /* dropdown-arrow.svg URL-encoder for SVG */
4839
+ background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.31554 1.65838L0.382812 11H15.6249L9.69214 1.65838C8.90651 0.421336 7.10117 0.421335 6.31554 1.65838Z' fill='white'/%3E%3C/svg%3E%0A");
4840
+ }
4841
+
4842
+ ._criterion_vitro-condition-list_10UIxJI li {
4843
+ padding: 8px 12px;
4844
+ cursor: pointer;
4845
+ display: flex;
4846
+ align-items: center;
4847
+ grid-gap: 12px;
4848
+ }
4849
+
4850
+ ._criterion_vitro-condition-list_10UIxJI li:first-child {
4851
+ border-radius: 4px 4px 0 0;
4852
+ }
4853
+
4854
+ ._criterion_vitro-condition-list_10UIxJI li:last-child {
4855
+ border-radius: 0 0 4px 4px;
4856
+ }
4857
+
4858
+ ._criterion_vitro-condition-list_10UIxJI li:hover,
4859
+ ._criterion_vitro-condition-list_10UIxJI li:active {
4860
+ background: #F3F8FF;
4861
+ }
4862
+
4863
+ ._criterion_vitro-condition-list_10UIxJI ._criterion_vitro-icon_1DmS0jh {
4864
+ height: 20px;
4865
+ width: 20px;
4866
+ }
4867
+ ._input_vitro-control__btu7j_ {
4868
+ height: 32px;
4869
+ border-radius: 4px;
4870
+ border: 1px solid #4A556C;
4871
+ padding: 4px 8px;
4872
+ display: flex;
4873
+ align-items: center;
4874
+ }
4875
+
4876
+ ._input_vitro-control__btu7j_._input_vitro-active_jxhGdE8 {
4877
+ border: 1px solid #C0CAD5;
4878
+ }
4879
+
4880
+ ._input_vitro-control__btu7j_._input_vitro-focus_3tuxmPs {
4881
+ border: 1px solid #3274E0;
4882
+ }
4883
+
4884
+ ._input_vitro-control__btu7j_ input {
4885
+ border: none;
4886
+ }
4887
+
4888
+ ._input_vitro-control__btu7j_ input::-moz-placeholder {
4889
+ color: #8E98A3;
4890
+ font-size: 14px;
4891
+ line-height: 16px;
4892
+ font-weight: 400 !important;
4893
+ }
4894
+
4895
+ ._input_vitro-control__btu7j_ input::placeholder {
4896
+ color: #8E98A3;
4897
+ font-size: 14px;
4898
+ line-height: 16px;
4899
+ font-weight: 400 !important;
4900
+ }
4901
+
4902
+ ._input_vitro-search-value-list_2I_KVY5 {
4903
+ display: flex;
4904
+ align-items: center;
4905
+ flex: 1 1;
4906
+ overflow: hidden;
4907
+ }
4908
+
4909
+ ._input_vitro-search-value-list_2I_KVY5::before {
4910
+ content: '';
4911
+ width: 24px;
4912
+ height: 24px;
4913
+ flex-shrink: 0;
4914
+ background-size: 100%;
4915
+ background-position: center;
4916
+ margin-right: 8px;
4917
+ /* search-grey.svg URL-encoder for SVG */
4918
+ background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='circum:search'%3E%3Cpath id='Vector' d='M18.3236 18.8832C18.6858 19.2434 19.2449 18.6875 18.8827 18.3351L15.9297 15.3909C16.9656 14.2512 17.5381 12.7692 17.5361 11.233C17.5361 7.79544 14.725 5 11.2681 5C7.81118 5 5 7.79544 5 11.233C5 14.6705 7.81118 17.4659 11.2681 17.4659C12.8272 17.4659 14.2682 16.8943 15.3707 15.9468L18.3236 18.8832ZM5.78666 11.233C5.78666 8.22611 8.25136 5.78304 11.2673 5.78304C14.2911 5.78304 16.7479 8.22611 16.7479 11.233C16.7479 14.2398 14.2911 16.6829 11.2673 16.6829C8.25136 16.6829 5.78666 14.2398 5.78666 11.233Z' fill='%238E98A3'/%3E%3C/g%3E%3C/svg%3E%0A");
4919
+ }
4920
+
4921
+ ._input_vitro-active_jxhGdE8 ._input_vitro-search-value-list_2I_KVY5::before {
4922
+ /* search.svg URL-encoder for SVG */
4923
+ background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='circum:search'%3E%3Cpath id='Vector' d='M18.3236 18.8832C18.6858 19.2434 19.2449 18.6875 18.8827 18.3351L15.9297 15.3909C16.9656 14.2512 17.5381 12.7692 17.5361 11.233C17.5361 7.79544 14.725 5 11.2681 5C7.81118 5 5 7.79544 5 11.233C5 14.6705 7.81118 17.4659 11.2681 17.4659C12.8272 17.4659 14.2682 16.8943 15.3707 15.9468L18.3236 18.8832ZM5.78666 11.233C5.78666 8.22611 8.25136 5.78304 11.2673 5.78304C14.2911 5.78304 16.7479 8.22611 16.7479 11.233C16.7479 14.2398 14.2911 16.6829 11.2673 16.6829C8.25136 16.6829 5.78666 14.2398 5.78666 11.233Z' fill='%23222D44'/%3E%3C/g%3E%3C/svg%3E");
4924
+ }
4925
+
4926
+ ._input_vitro-button-cancel_YqNZPj-,
4927
+ ._input_vitro-button-settings_1w9FwYt,
4928
+ ._input_vitro-button-cancel_YqNZPj-:hover,
4929
+ ._input_vitro-button-settings_1w9FwYt:hover {
4930
+ width: 24px;
4931
+ height: 24px;
4932
+ flex-shrink: 0;
4933
+ border: none;
4934
+ background-size: 100%;
4935
+ background-position: center;
4936
+ margin-left: 8px;
4937
+ background-color: #fff;
4938
+ }
4939
+
4940
+ ._input_vitro-button-settings_1w9FwYt {
4941
+ border-radius: 4px;
4942
+ /* search-settings.svg URL-encoder for SVG */
4943
+ background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='iconamoon:options-thin'%3E%3Cg id='Group'%3E%3Cpath id='Vector' d='M5.60156 8.80469H12.8016M16.0016 8.80469H18.4016M11.2016 15.2047H18.4016M5.60156 15.2047H8.00156' stroke='%23222D44' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath id='Vector_2' d='M9.6 16.8016C10.4837 16.8016 11.2 16.0852 11.2 15.2016C11.2 14.3179 10.4837 13.6016 9.6 13.6016C8.71634 13.6016 8 14.3179 8 15.2016C8 16.0852 8.71634 16.8016 9.6 16.8016Z' stroke='%23222D44'/%3E%3Cpath id='Vector_3' d='M14.4047 10.4031C15.2883 10.4031 16.0047 9.68678 16.0047 8.80313C16.0047 7.91947 15.2883 7.20312 14.4047 7.20312C13.521 7.20312 12.8047 7.91947 12.8047 8.80313C12.8047 9.68678 13.521 10.4031 14.4047 10.4031Z' stroke='%23222D44'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
4944
+ }
4945
+
4946
+ ._input_vitro-button-settings_1w9FwYt._input_vitro-active_jxhGdE8,
4947
+ ._input_vitro-button-settings_1w9FwYt:hover {
4948
+ background-color: #DCEEFF;
4949
+ }
4950
+
4951
+ ._input_vitro-button-cancel_YqNZPj- {
4952
+ /* cancel-black.svg URL-encoder for SVG */
4953
+ background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.75781 17.2438L12.0008 12.0008L17.2438 17.2438M17.2438 6.75781L11.9998 12.0008L6.75781 6.75781' stroke='%23222D44' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
4954
+ }
4955
+
4956
+ ._input_vitro-search-value_1ZbcNTJ {
4957
+ border-radius: 4px;
4958
+ background: #F7F9FC;
4959
+ padding: 4px;
4960
+ font-size: 14px;
4961
+ line-height: 16px;
4962
+ margin-right: 4px;
4963
+ white-space: nowrap;
4964
+ overflow: hidden;
4965
+ text-overflow: ellipsis;
4966
+ }
4967
+
4968
+ .vitro-inline {
4969
+ display: inline-flex;
4970
+ flex: 1 1;
4971
+ min-width: 180px;
4972
+ }
4973
+
4974
+ .vitro-inline > div {
4975
+ width: 100%;
4976
+ }
4977
+
4978
+ .vitro-block {
4979
+ width: 100%;
4980
+ }
4981
+
4982
+ .vitro-block:nth-child(2) {
4983
+ margin-top: 8px;
4984
+ }
4985
+
4986
+ ._search_vitro-search_QkJksC_ {
4987
+ position: relative;
4988
+ align-self: baseline;
4989
+ margin-right: 16px;
4990
+ margin-left: auto;
4991
+ max-width: 50%;
4992
+ }
4993
+
4994
+ ._search_vitro-settings-dialog_1_c5bIg {
4995
+ border-radius: 4px;
4996
+ background: #fff;
4997
+ box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.18), 0px 0px 4px 0px rgba(0, 0, 0, 0.14);
4998
+ position: absolute;
4999
+ top: 36px;
5000
+ right: 0;
5001
+ z-index: 10000001;
5002
+ padding: 24px 0 16px 12px;
5003
+ display: flex;
5004
+ flex-direction: column;
5005
+ }
5006
+
5007
+ ._search_vitro-filter_2n-Y-mS {
5008
+ min-width: 502px;
5009
+ }
5010
+
5011
+ ._search_vitro-filter_2n-Y-mS .ps {
5012
+ overflow: visible !important;
5013
+ }
5014
+
5015
+ ._search_vitro-add-field_2hHt1Z2 {
5016
+ position: relative;
5017
+ }
5018
+
5019
+ ._search_vitro-add-field-button_30hdXYn,
5020
+ ._search_vitro-add-field-button_30hdXYn:hover,
5021
+ ._search_vitro-add-field-button_30hdXYn:active {
5022
+ font-family: 'InterRegular' !important;
5023
+ background: #fff !important;
5024
+ color: #326AD6 !important;
5025
+ margin-left: 66px;
5026
+ padding: 0 !important;
5027
+ min-width: unset !important;
5028
+ height: 16px !important;
5029
+ }
5030
+
5031
+ ._search_vitro-add-field-dialog_3gC92SF {
5032
+ position: absolute;
5033
+ z-index: 100;
5034
+ top: 32px;
5035
+ left: 0;
5036
+ border-radius: 4px;
5037
+ box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.18), 0px 0px 4px 0px rgba(0, 0, 0, 0.14);
5038
+ }
5039
+
5040
+ ._search_vitro-add-field-dialog_3gC92SF .ps > div:first-child {
5041
+ max-height: 204px;
5042
+ }
5043
+
5044
+ ._search_vitro-footer_1-ya4xk {
5045
+ display: flex;
5046
+ grid-gap: 12px;
5047
+ justify-content: flex-end;
5048
+ padding: 0 24px;
5049
+ margin-top: auto;
5050
+ }
5051
+
5052
+ ._search_vitro-button-cancel_1M8UkMM {
5053
+ background: #fff !important;
5054
+ color: #222D44 !important;
5055
+ font-family: 'InterRegular' !important;
5056
+ }
5057
+
5058
+ ._search_vitro-button-cancel_1M8UkMM:hover,
5059
+ ._search_vitro-button-cancel_1M8UkMM:active {
5060
+ background: #F3F8FF !important;
5061
+ }
5062
+
5063
+ ._checkbox-list_vitro-checkbox-list_1iZSkkv {
5064
+ border-radius: 4px;
5065
+ background: #fff;
5066
+ padding: 12px 0 0 12px;
5067
+ }
5068
+
5069
+ ._checkbox-list_vitro-checkbox-list_1iZSkkv ._checkbox-list_vitro-control_cxgm4cj {
5070
+ margin-bottom: 8px;
5071
+ margin-right: 12px;
5072
+ }
5073
+
5074
+ ._checkbox-list_vitro-checkbox-list_1iZSkkv ._checkbox-list_vitro-checkbox_1EqsnoQ {
5075
+ margin-bottom: 4px;
5076
+ }
5077
+
5078
+ ._checkbox-list_vitro-checkbox_1EqsnoQ:last-child,
5079
+ ._checkbox-list_vitro-checkbox-list_1iZSkkv span {
5080
+ margin-bottom: 8px;
5081
+ }
5082
+
5083
+ ._checkbox-list_vitro-checkbox-list_1iZSkkv span {
5084
+ display: block;
5085
+ }
package/dist/index.d.ts CHANGED
@@ -64,6 +64,10 @@ import { EVENT } from './constants/Event';
64
64
  import { ScrollBar } from './controls/ScrollBar/ScrollBar';
65
65
  import { MessageInput } from './controls/MessageInput/MessageInput';
66
66
  import { ImagePicker } from './controls/ImagePicker/ImagePicker';
67
+ import { Criterion } from './controls/Criterion/Criterion';
68
+ import { SearchCriterion } from './controls/Search/SearchCriterion';
69
+ import { Search } from './controls/Search/Search';
70
+ import { FieldIterator } from './controls/FieldIterator/FieldIterator';
67
71
  export { Breadcrumbs };
68
72
  export { TopLevelMenu };
69
73
  export { TreeView, TreeViewContext, TREE_VIEW };
@@ -101,3 +105,6 @@ export { EVENT };
101
105
  export { ScrollBar };
102
106
  export { MessageInput };
103
107
  export { ImagePicker };
108
+ export { Criterion };
109
+ export { Search, SearchCriterion };
110
+ export { FieldIterator };