@koobiq/components 16.0.0-beta.14 → 16.0.0-beta.15
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/badge/_badge-theme.scss +4 -0
- package/badge/badge.component.d.ts +1 -0
- package/core/styles/theming/_components-theming.scss +6 -0
- package/core/styles/theming/_scrollbars-theme.scss +6 -2
- package/esm2022/badge/badge.component.mjs +2 -1
- package/esm2022/core/version.mjs +2 -2
- package/esm2022/navbar/navbar-item.component.mjs +7 -2
- package/esm2022/navbar/navbar.component.mjs +5 -4
- package/esm2022/navbar/vertical-navbar.component.mjs +5 -4
- package/esm2022/tree/control/flat-tree-control.filters.mjs +46 -0
- package/esm2022/tree/control/flat-tree-control.mjs +24 -42
- package/esm2022/tree/public-api.mjs +2 -1
- package/fesm2022/koobiq-components-badge.mjs +1 -0
- package/fesm2022/koobiq-components-badge.mjs.map +1 -1
- package/fesm2022/koobiq-components-core.mjs +1 -1
- package/fesm2022/koobiq-components-core.mjs.map +1 -1
- package/fesm2022/koobiq-components-navbar.mjs +14 -7
- package/fesm2022/koobiq-components-navbar.mjs.map +1 -1
- package/fesm2022/koobiq-components-tree.mjs +69 -42
- package/fesm2022/koobiq-components-tree.mjs.map +1 -1
- package/form-field/_form-field-theme.scss +5 -3
- package/navbar/_navbar-theme.scss +2 -3
- package/navbar/navbar-item.component.d.ts +3 -1
- package/navbar/navbar-item.scss +5 -0
- package/package.json +34 -34
- package/prebuilt-themes/dark-theme.css +1 -1
- package/prebuilt-themes/light-theme.css +1 -1
- package/tree/control/flat-tree-control.d.ts +5 -3
- package/tree/control/flat-tree-control.filters.d.ts +26 -0
- package/tree/public-api.d.ts +1 -0
|
@@ -866,6 +866,52 @@ class BaseTreeControl {
|
|
|
866
866
|
}
|
|
867
867
|
}
|
|
868
868
|
|
|
869
|
+
class FilterByViewValue {
|
|
870
|
+
constructor(control) {
|
|
871
|
+
this.control = control;
|
|
872
|
+
}
|
|
873
|
+
handle(value) {
|
|
874
|
+
this.result = this.control.dataNodes
|
|
875
|
+
.filter((node) => this.control.compareViewValues(this.control.getViewValue(node), value));
|
|
876
|
+
return this.result;
|
|
877
|
+
}
|
|
878
|
+
}
|
|
879
|
+
class FilterParentsForNodes {
|
|
880
|
+
constructor(control) {
|
|
881
|
+
this.control = control;
|
|
882
|
+
}
|
|
883
|
+
handle(_, prevFilter) {
|
|
884
|
+
const result = new Set();
|
|
885
|
+
this.control.dataNodes
|
|
886
|
+
.filter((node) => prevFilter?.result.includes(node))
|
|
887
|
+
.forEach((node) => {
|
|
888
|
+
this.control.getParents(node, [])
|
|
889
|
+
.forEach((parent) => result.add(parent));
|
|
890
|
+
result.add(node);
|
|
891
|
+
});
|
|
892
|
+
this.result = Array.from(result);
|
|
893
|
+
return this.result;
|
|
894
|
+
}
|
|
895
|
+
}
|
|
896
|
+
class FilterByValues {
|
|
897
|
+
constructor(control) {
|
|
898
|
+
this.control = control;
|
|
899
|
+
this.values = [];
|
|
900
|
+
this.setValues = (values) => {
|
|
901
|
+
this.values = values;
|
|
902
|
+
};
|
|
903
|
+
}
|
|
904
|
+
handle(_, prevFilter) {
|
|
905
|
+
const found = this.control.dataNodes
|
|
906
|
+
.filter((node) => this.values.includes(this.control.getValue(node)));
|
|
907
|
+
this.result = Array.from(new Set([...(prevFilter?.result || []), ...found]));
|
|
908
|
+
return this.result;
|
|
909
|
+
}
|
|
910
|
+
getValues() {
|
|
911
|
+
return this.values;
|
|
912
|
+
}
|
|
913
|
+
}
|
|
914
|
+
|
|
869
915
|
function defaultCompareValues(firstValue, secondValue) {
|
|
870
916
|
return firstValue === secondValue;
|
|
871
917
|
}
|
|
@@ -894,6 +940,13 @@ class FlatTreeControl extends BaseTreeControl {
|
|
|
894
940
|
this.compareValues = compareValues;
|
|
895
941
|
this.compareViewValues = compareViewValues;
|
|
896
942
|
this.isDisabled = isDisabled;
|
|
943
|
+
this.setFilters(new FilterByViewValue(this), new FilterParentsForNodes(this));
|
|
944
|
+
}
|
|
945
|
+
getFilters() {
|
|
946
|
+
return this.filters;
|
|
947
|
+
}
|
|
948
|
+
setFilters(...filters) {
|
|
949
|
+
this.filters = filters;
|
|
897
950
|
}
|
|
898
951
|
/**
|
|
899
952
|
* Gets a list of the data node's subtree of descendent data nodes.
|
|
@@ -936,43 +989,25 @@ class FlatTreeControl extends BaseTreeControl {
|
|
|
936
989
|
hasValue(value) {
|
|
937
990
|
return this.dataNodes.find((node) => this.compareValues(this.getValue(node), value));
|
|
938
991
|
}
|
|
939
|
-
filterNodes(value) {
|
|
992
|
+
filterNodes(value = null) {
|
|
940
993
|
this.saveExpansionState();
|
|
941
|
-
|
|
942
|
-
this.
|
|
943
|
-
|
|
944
|
-
|
|
945
|
-
|
|
946
|
-
filteredNodes.forEach((filteredNode) => {
|
|
947
|
-
this.getParents(filteredNode, [])
|
|
948
|
-
.forEach((node) => {
|
|
949
|
-
filteredNodesWithTheirParents.add(node);
|
|
950
|
-
this.expandDataNode(node);
|
|
951
|
-
});
|
|
952
|
-
filteredNodesWithTheirParents.add(filteredNode);
|
|
953
|
-
this.expandDataNode(filteredNode);
|
|
954
|
-
if (this.isExpandable(filteredNode)) {
|
|
955
|
-
const childNodeLevel = this.getLevel(filteredNode) + 1;
|
|
956
|
-
this.getDescendants(filteredNode)
|
|
957
|
-
.filter((childNode) => this.getLevel(childNode) === childNodeLevel)
|
|
958
|
-
.filter((childNode) => !this.isExpandable(childNode) || !this.hasFilteredDescendant(childNode, filteredNodes))
|
|
959
|
-
.forEach((childNode) => {
|
|
960
|
-
filteredNodesWithTheirParents.add(childNode);
|
|
961
|
-
this.expandDataNode(childNode);
|
|
962
|
-
});
|
|
963
|
-
}
|
|
994
|
+
let result = [];
|
|
995
|
+
this.filters
|
|
996
|
+
.forEach((filter, index, filters) => {
|
|
997
|
+
const prevFilter = filters[index - 1] || null;
|
|
998
|
+
result = filter.handle(value, prevFilter);
|
|
964
999
|
});
|
|
965
|
-
this.filterModel.
|
|
1000
|
+
this.filterModel.clear();
|
|
1001
|
+
this.filterModel.select(...result);
|
|
1002
|
+
// set current expansion state according to filtered tree
|
|
1003
|
+
this.expansionModel.setSelection(...result.filter((node) => this.isExpandable(node)));
|
|
966
1004
|
this.updateFilterValue(value);
|
|
967
|
-
Promise.resolve()
|
|
1005
|
+
Promise.resolve()
|
|
1006
|
+
.then(() => this.restoreExpansionState());
|
|
968
1007
|
}
|
|
969
1008
|
updateFilterValue(value) {
|
|
970
|
-
Promise.resolve()
|
|
971
|
-
|
|
972
|
-
expandDataNode(dataNode) {
|
|
973
|
-
if (this.isExpandable(dataNode)) {
|
|
974
|
-
this.expansionModel.select(dataNode);
|
|
975
|
-
}
|
|
1009
|
+
Promise.resolve()
|
|
1010
|
+
.then(() => this.filterValue.next(value));
|
|
976
1011
|
}
|
|
977
1012
|
saveExpansionState() {
|
|
978
1013
|
if (!this.filterValue.value) {
|
|
@@ -981,17 +1016,9 @@ class FlatTreeControl extends BaseTreeControl {
|
|
|
981
1016
|
}
|
|
982
1017
|
restoreExpansionState() {
|
|
983
1018
|
if (!this.filterValue.value) {
|
|
984
|
-
this.expansionModel.
|
|
985
|
-
this.expansionModel.select(...this.expandedItemsBeforeFiltration);
|
|
1019
|
+
this.expansionModel.setSelection(...this.expandedItemsBeforeFiltration);
|
|
986
1020
|
}
|
|
987
1021
|
}
|
|
988
|
-
hasFilteredDescendant(dataNode, filteredNodes) {
|
|
989
|
-
const filteredViewValues = filteredNodes
|
|
990
|
-
.map((node) => this.getViewValue(node));
|
|
991
|
-
return this.getDescendants(dataNode)
|
|
992
|
-
.filter((node) => filteredViewValues.includes(this.getViewValue(node)))
|
|
993
|
-
.length > 0;
|
|
994
|
-
}
|
|
995
1022
|
}
|
|
996
1023
|
|
|
997
1024
|
/* tslint:disable:no-empty */
|
|
@@ -1811,5 +1838,5 @@ class KbqTreeNestedDataSource extends DataSource {
|
|
|
1811
1838
|
* Generated bundle index. Do not edit.
|
|
1812
1839
|
*/
|
|
1813
1840
|
|
|
1814
|
-
export { BaseTreeControl, FlatTreeControl, KBQ_SELECTION_TREE_VALUE_ACCESSOR, KBQ_TREE_OPTION_PARENT_COMPONENT, KbqTree, KbqTreeBase, KbqTreeCopyEvent, KbqTreeFlatDataSource, KbqTreeFlattener, KbqTreeModule, KbqTreeNavigationChange, KbqTreeNestedDataSource, KbqTreeNode, KbqTreeNodeDef, KbqTreeNodeOutlet, KbqTreeNodeOutletContext, KbqTreeNodePadding, KbqTreeNodeToggleBase, KbqTreeNodeToggleBaseDirective, KbqTreeNodeToggleComponent, KbqTreeNodeToggleDirective, KbqTreeNodeToggleMixinBase, KbqTreeOption, KbqTreeOptionChange, KbqTreeSelectAllEvent, KbqTreeSelection, KbqTreeSelectionChange, NestedTreeControl, defaultCompareValues, defaultCompareViewValues };
|
|
1841
|
+
export { BaseTreeControl, FilterByValues, FilterByViewValue, FilterParentsForNodes, FlatTreeControl, KBQ_SELECTION_TREE_VALUE_ACCESSOR, KBQ_TREE_OPTION_PARENT_COMPONENT, KbqTree, KbqTreeBase, KbqTreeCopyEvent, KbqTreeFlatDataSource, KbqTreeFlattener, KbqTreeModule, KbqTreeNavigationChange, KbqTreeNestedDataSource, KbqTreeNode, KbqTreeNodeDef, KbqTreeNodeOutlet, KbqTreeNodeOutletContext, KbqTreeNodePadding, KbqTreeNodeToggleBase, KbqTreeNodeToggleBaseDirective, KbqTreeNodeToggleComponent, KbqTreeNodeToggleDirective, KbqTreeNodeToggleMixinBase, KbqTreeOption, KbqTreeOptionChange, KbqTreeSelectAllEvent, KbqTreeSelection, KbqTreeSelectionChange, NestedTreeControl, defaultCompareValues, defaultCompareViewValues };
|
|
1815
1842
|
//# sourceMappingURL=koobiq-components-tree.mjs.map
|