@deviceinsight/ng-ui-components 6.28.0 → 6.28.1

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 (13) hide show
  1. package/lib/cjs/components/reactable/helpers/ReactableTableFilterRow.d.ts.map +1 -1
  2. package/lib/cjs/components/reactable/helpers/ReactableTableFilterRow.js +25 -11
  3. package/lib/cjs/components/reactable/types.d.ts +1 -0
  4. package/lib/cjs/components/reactable/types.d.ts.map +1 -1
  5. package/lib/esm/components/reactable/helpers/ReactableTableFilterRow.d.ts.map +1 -1
  6. package/lib/esm/components/reactable/helpers/ReactableTableFilterRow.js +25 -11
  7. package/lib/esm/components/reactable/types.d.ts +1 -0
  8. package/lib/esm/components/reactable/types.d.ts.map +1 -1
  9. package/lib/esm/src/components/reactable/helpers/ReactableTableFilterRow.d.ts.map +1 -1
  10. package/lib/esm/src/components/reactable/helpers/ReactableTableFilterRow.js +25 -11
  11. package/lib/esm/src/components/reactable/types.d.ts +1 -0
  12. package/lib/esm/src/components/reactable/types.d.ts.map +1 -1
  13. package/package.json +1 -1
package/lib/cjs/components/reactable/helpers/ReactableTableFilterRow.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ReactableTableFilterRow.d.ts","sourceRoot":"","sources":["../../../../../src/components/reactable/helpers/ReactableTableFilterRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAEjD,OAAO,EAAC,kBAAkB,EAAE,uBAAuB,EAAC,MAAM,UAAU,CAAC;AAIrE,aAAK,KAAK,GAAG;IACZ,UAAU,EAAE,KAAK,CAAC,kBAAkB,CAAC,GAAG,CAAC,CAAC,CAAC;IAC3C,QAAQ,EAAE,CAAC,aAAa,EAAE,uBAAuB,KAAK,IAAI,CAAC;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AACF,QAAA,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA+F5C,CAAC;AAEF,eAAe,uBAAuB,CAAC"}
1
+ {"version":3,"file":"ReactableTableFilterRow.d.ts","sourceRoot":"","sources":["../../../../../src/components/reactable/helpers/ReactableTableFilterRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAEjD,OAAO,EAAC,kBAAkB,EAAE,uBAAuB,EAAC,MAAM,UAAU,CAAC;AAKrE,aAAK,KAAK,GAAG;IACZ,UAAU,EAAE,KAAK,CAAC,kBAAkB,CAAC,GAAG,CAAC,CAAC,CAAC;IAC3C,QAAQ,EAAE,CAAC,aAAa,EAAE,uBAAuB,KAAK,IAAI,CAAC;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AACF,QAAA,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAwH5C,CAAC;AAEF,eAAe,uBAAuB,CAAC"}
package/lib/cjs/components/reactable/helpers/ReactableTableFilterRow.js CHANGED
@@ -30,6 +30,7 @@ const react_1 = __importStar(require("react"));
30
30
  const i18n_1 = require("../../../i18n");
31
31
  const ReactableTextFilter_1 = __importDefault(require("./ReactableTextFilter"));
32
32
  const helper_1 = require("./helper");
33
+ const SelectWithSearch_1 = __importDefault(require("../../input/SelectWithSearch"));
33
34
  const ReactableTableFilterRow = ({ columnDefs, onFilter, tableName }) => {
34
35
  const { t } = (0, i18n_1.useTranslation)();
35
36
  const [state, setState] = (0, react_1.useState)({});
@@ -78,17 +79,30 @@ const ReactableTableFilterRow = ({ columnDefs, onFilter, tableName }) => {
78
79
  throw new Error(`No filterOptions found for column type: options on columnDef: ${columnDef.name}`);
79
80
  }
80
81
  const filterOptions = columnDef.filterable.filterOptions;
81
- return (react_1.default.createElement("select", { onChange: (event) => {
82
- changeFilter(columnDef.name, event.target.value);
83
- }, value: state[columnDef.name] },
84
- react_1.default.createElement("option", { key: "", value: "" }, t('reactable.filter.all', {
85
- defaultValue: '- All -'
86
- })),
87
- filterOptions.map((option) => (react_1.default.createElement("option", { className: (0, helper_1.getClassName)(tableName, columnDef.name), key: option.value, value: option.value }, typeof option.label === 'string'
88
- ? option.label
89
- : t(option.label.id, {
90
- defaultValue: option.label.defaultValue
91
- }))))));
82
+ if (columnDef.filterable.searchableOptions) {
83
+ const searchableOptions = filterOptions.map((option) => ({
84
+ type: 'item',
85
+ label: typeof option.label === 'string'
86
+ ? option.label
87
+ : t(option.label.id, { defaultValue: option.label.defaultValue }),
88
+ value: option.value
89
+ }));
90
+ const value = state[columnDef.name];
91
+ return (react_1.default.createElement(SelectWithSearch_1.default, { options: searchableOptions, onChange: (item) => {
92
+ changeFilter(columnDef.name, item?.value);
93
+ }, value: value ? searchableOptions.find((opt) => opt.value === value.toString()) : null, clearable: true }));
94
+ }
95
+ else {
96
+ return (react_1.default.createElement("select", { onChange: (event) => {
97
+ changeFilter(columnDef.name, event.target.value);
98
+ }, value: state[columnDef.name] },
99
+ react_1.default.createElement("option", { key: "", value: "" }, t('reactable.filter.all', {
100
+ defaultValue: '- All -'
101
+ })),
102
+ filterOptions.map((option) => (react_1.default.createElement("option", { className: (0, helper_1.getClassName)(tableName, columnDef.name), key: option.value, value: option.value }, typeof option.label === 'string'
103
+ ? option.label
104
+ : t(option.label.id, { defaultValue: option.label.defaultValue }))))));
105
+ }
92
106
  };
93
107
  return (react_1.default.createElement("tr", { className: "di filterrow form" }, columnDefs.map((columnDef) => (react_1.default.createElement("td", { key: columnDef.name, style: { textAlign: columnDef.align || 'left' } }, getFilterByColumnDef(columnDef))))));
94
108
  };
package/lib/cjs/components/reactable/types.d.ts CHANGED
@@ -12,6 +12,7 @@ declare type ReactableColumnFilterable<T> = {
12
12
  filterFn?: (item: T, value: string) => boolean;
13
13
  initialValue?: string;
14
14
  placeholder?: string;
15
+ searchableOptions?: boolean;
15
16
  };
16
17
  export declare type ReactableColumnDef<T> = {
17
18
  name: string;
package/lib/cjs/components/reactable/types.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/reactable/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAC,aAAa,EAAC,MAAM,OAAO,CAAC;AAEpC,OAAO,EAAC,qBAAqB,EAAC,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAC,aAAa,EAAC,MAAM,wBAAwB,CAAC;AAErD,oBAAY,oBAAoB,GAAG,MAAM,GAAG,qBAAqB,GAAG,KAAK,CAAC,SAAS,CAAC;AAEpF,aAAK,yBAAyB,CAAC,CAAC,IAAI;IACnC,UAAU,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,aAAa,CAAC,EAAE,KAAK,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,GAAG,qBAAqB,CAAA;KAAC,CAAC,CAAC;IAC9E,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IAC/C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,oBAAY,kBAAkB,CAAC,CAAC,IAAI;IACnC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,oBAAoB,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB,CAAC,EAAE,aAAa,CAAC;IACrC,MAAM,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IACxC,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,IAAI,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;IACpC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,yBAAyB,CAAC,CAAC,CAAC,CAAC;CAC1C,CAAC;AAEF,oBAAY,uBAAuB,GAAG;IAAC,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,CAAA;CAAC,CAAC;AAEpE,oBAAY,eAAe,CAAC,CAAC,IAAI;IAChC,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,IAAI,CAAC;IAC/B,WAAW,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,MAAM,CAAC;IACrC,WAAW,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,aAAa,CAAC;IAC5C,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,MAAM,CAAC;CACpC,CAAC"}
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/reactable/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAC,aAAa,EAAC,MAAM,OAAO,CAAC;AAEpC,OAAO,EAAC,qBAAqB,EAAC,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAC,aAAa,EAAC,MAAM,wBAAwB,CAAC;AAErD,oBAAY,oBAAoB,GAAG,MAAM,GAAG,qBAAqB,GAAG,KAAK,CAAC,SAAS,CAAC;AAEpF,aAAK,yBAAyB,CAAC,CAAC,IAAI;IACnC,UAAU,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,aAAa,CAAC,EAAE,KAAK,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,GAAG,qBAAqB,CAAA;KAAC,CAAC,CAAC;IAC9E,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IAC/C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC5B,CAAC;AAEF,oBAAY,kBAAkB,CAAC,CAAC,IAAI;IACnC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,oBAAoB,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB,CAAC,EAAE,aAAa,CAAC;IACrC,MAAM,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IACxC,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,IAAI,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;IACpC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,yBAAyB,CAAC,CAAC,CAAC,CAAC;CAC1C,CAAC;AAEF,oBAAY,uBAAuB,GAAG;IAAC,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,CAAA;CAAC,CAAC;AAEpE,oBAAY,eAAe,CAAC,CAAC,IAAI;IAChC,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,IAAI,CAAC;IAC/B,WAAW,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,MAAM,CAAC;IACrC,WAAW,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,aAAa,CAAC;IAC5C,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,MAAM,CAAC;CACpC,CAAC"}
package/lib/esm/components/reactable/helpers/ReactableTableFilterRow.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ReactableTableFilterRow.d.ts","sourceRoot":"","sources":["../../../../../src/components/reactable/helpers/ReactableTableFilterRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAEjD,OAAO,EAAC,kBAAkB,EAAE,uBAAuB,EAAC,MAAM,UAAU,CAAC;AAIrE,aAAK,KAAK,GAAG;IACZ,UAAU,EAAE,KAAK,CAAC,kBAAkB,CAAC,GAAG,CAAC,CAAC,CAAC;IAC3C,QAAQ,EAAE,CAAC,aAAa,EAAE,uBAAuB,KAAK,IAAI,CAAC;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AACF,QAAA,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA+F5C,CAAC;AAEF,eAAe,uBAAuB,CAAC"}
1
+ {"version":3,"file":"ReactableTableFilterRow.d.ts","sourceRoot":"","sources":["../../../../../src/components/reactable/helpers/ReactableTableFilterRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAEjD,OAAO,EAAC,kBAAkB,EAAE,uBAAuB,EAAC,MAAM,UAAU,CAAC;AAKrE,aAAK,KAAK,GAAG;IACZ,UAAU,EAAE,KAAK,CAAC,kBAAkB,CAAC,GAAG,CAAC,CAAC,CAAC;IAC3C,QAAQ,EAAE,CAAC,aAAa,EAAE,uBAAuB,KAAK,IAAI,CAAC;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AACF,QAAA,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAwH5C,CAAC;AAEF,eAAe,uBAAuB,CAAC"}
package/lib/esm/components/reactable/helpers/ReactableTableFilterRow.js CHANGED
@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
2
2
  import { useTranslation } from '../../../i18n';
3
3
  import ReactableTextFilter from './ReactableTextFilter';
4
4
  import { getClassName } from './helper';
5
+ import SelectWithSearch from '../../input/SelectWithSearch';
5
6
  const ReactableTableFilterRow = ({ columnDefs, onFilter, tableName }) => {
6
7
  const { t } = useTranslation();
7
8
  const [state, setState] = useState({});
@@ -50,17 +51,30 @@ const ReactableTableFilterRow = ({ columnDefs, onFilter, tableName }) => {
50
51
  throw new Error(`No filterOptions found for column type: options on columnDef: ${columnDef.name}`);
51
52
  }
52
53
  const filterOptions = columnDef.filterable.filterOptions;
53
- return (React.createElement("select", { onChange: (event) => {
54
- changeFilter(columnDef.name, event.target.value);
55
- }, value: state[columnDef.name] },
56
- React.createElement("option", { key: "", value: "" }, t('reactable.filter.all', {
57
- defaultValue: '- All -'
58
- })),
59
- filterOptions.map((option) => (React.createElement("option", { className: getClassName(tableName, columnDef.name), key: option.value, value: option.value }, typeof option.label === 'string'
60
- ? option.label
61
- : t(option.label.id, {
62
- defaultValue: option.label.defaultValue
63
- }))))));
54
+ if (columnDef.filterable.searchableOptions) {
55
+ const searchableOptions = filterOptions.map((option) => ({
56
+ type: 'item',
57
+ label: typeof option.label === 'string'
58
+ ? option.label
59
+ : t(option.label.id, { defaultValue: option.label.defaultValue }),
60
+ value: option.value
61
+ }));
62
+ const value = state[columnDef.name];
63
+ return (React.createElement(SelectWithSearch, { options: searchableOptions, onChange: (item) => {
64
+ changeFilter(columnDef.name, item?.value);
65
+ }, value: value ? searchableOptions.find((opt) => opt.value === value.toString()) : null, clearable: true }));
66
+ }
67
+ else {
68
+ return (React.createElement("select", { onChange: (event) => {
69
+ changeFilter(columnDef.name, event.target.value);
70
+ }, value: state[columnDef.name] },
71
+ React.createElement("option", { key: "", value: "" }, t('reactable.filter.all', {
72
+ defaultValue: '- All -'
73
+ })),
74
+ filterOptions.map((option) => (React.createElement("option", { className: getClassName(tableName, columnDef.name), key: option.value, value: option.value }, typeof option.label === 'string'
75
+ ? option.label
76
+ : t(option.label.id, { defaultValue: option.label.defaultValue }))))));
77
+ }
64
78
  };
65
79
  return (React.createElement("tr", { className: "di filterrow form" }, columnDefs.map((columnDef) => (React.createElement("td", { key: columnDef.name, style: { textAlign: columnDef.align || 'left' } }, getFilterByColumnDef(columnDef))))));
66
80
  };
package/lib/esm/components/reactable/types.d.ts CHANGED
@@ -12,6 +12,7 @@ declare type ReactableColumnFilterable<T> = {
12
12
  filterFn?: (item: T, value: string) => boolean;
13
13
  initialValue?: string;
14
14
  placeholder?: string;
15
+ searchableOptions?: boolean;
15
16
  };
16
17
  export declare type ReactableColumnDef<T> = {
17
18
  name: string;
package/lib/esm/components/reactable/types.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/reactable/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAC,aAAa,EAAC,MAAM,OAAO,CAAC;AAEpC,OAAO,EAAC,qBAAqB,EAAC,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAC,aAAa,EAAC,MAAM,wBAAwB,CAAC;AAErD,oBAAY,oBAAoB,GAAG,MAAM,GAAG,qBAAqB,GAAG,KAAK,CAAC,SAAS,CAAC;AAEpF,aAAK,yBAAyB,CAAC,CAAC,IAAI;IACnC,UAAU,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,aAAa,CAAC,EAAE,KAAK,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,GAAG,qBAAqB,CAAA;KAAC,CAAC,CAAC;IAC9E,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IAC/C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,oBAAY,kBAAkB,CAAC,CAAC,IAAI;IACnC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,oBAAoB,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB,CAAC,EAAE,aAAa,CAAC;IACrC,MAAM,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IACxC,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,IAAI,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;IACpC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,yBAAyB,CAAC,CAAC,CAAC,CAAC;CAC1C,CAAC;AAEF,oBAAY,uBAAuB,GAAG;IAAC,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,CAAA;CAAC,CAAC;AAEpE,oBAAY,eAAe,CAAC,CAAC,IAAI;IAChC,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,IAAI,CAAC;IAC/B,WAAW,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,MAAM,CAAC;IACrC,WAAW,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,aAAa,CAAC;IAC5C,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,MAAM,CAAC;CACpC,CAAC"}
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/reactable/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAC,aAAa,EAAC,MAAM,OAAO,CAAC;AAEpC,OAAO,EAAC,qBAAqB,EAAC,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAC,aAAa,EAAC,MAAM,wBAAwB,CAAC;AAErD,oBAAY,oBAAoB,GAAG,MAAM,GAAG,qBAAqB,GAAG,KAAK,CAAC,SAAS,CAAC;AAEpF,aAAK,yBAAyB,CAAC,CAAC,IAAI;IACnC,UAAU,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,aAAa,CAAC,EAAE,KAAK,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,GAAG,qBAAqB,CAAA;KAAC,CAAC,CAAC;IAC9E,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IAC/C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC5B,CAAC;AAEF,oBAAY,kBAAkB,CAAC,CAAC,IAAI;IACnC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,oBAAoB,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB,CAAC,EAAE,aAAa,CAAC;IACrC,MAAM,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IACxC,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,IAAI,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;IACpC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,yBAAyB,CAAC,CAAC,CAAC,CAAC;CAC1C,CAAC;AAEF,oBAAY,uBAAuB,GAAG;IAAC,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,CAAA;CAAC,CAAC;AAEpE,oBAAY,eAAe,CAAC,CAAC,IAAI;IAChC,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,IAAI,CAAC;IAC/B,WAAW,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,MAAM,CAAC;IACrC,WAAW,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,aAAa,CAAC;IAC5C,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,MAAM,CAAC;CACpC,CAAC"}
package/lib/esm/src/components/reactable/helpers/ReactableTableFilterRow.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ReactableTableFilterRow.d.ts","sourceRoot":"","sources":["../../../../../../src/components/reactable/helpers/ReactableTableFilterRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAEjD,OAAO,EAAC,kBAAkB,EAAE,uBAAuB,EAAC,MAAM,UAAU,CAAC;AAIrE,aAAK,KAAK,GAAG;IACZ,UAAU,EAAE,KAAK,CAAC,kBAAkB,CAAC,GAAG,CAAC,CAAC,CAAC;IAC3C,QAAQ,EAAE,CAAC,aAAa,EAAE,uBAAuB,KAAK,IAAI,CAAC;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AACF,QAAA,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA+F5C,CAAC;AAEF,eAAe,uBAAuB,CAAC"}
1
+ {"version":3,"file":"ReactableTableFilterRow.d.ts","sourceRoot":"","sources":["../../../../../../src/components/reactable/helpers/ReactableTableFilterRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAEjD,OAAO,EAAC,kBAAkB,EAAE,uBAAuB,EAAC,MAAM,UAAU,CAAC;AAKrE,aAAK,KAAK,GAAG;IACZ,UAAU,EAAE,KAAK,CAAC,kBAAkB,CAAC,GAAG,CAAC,CAAC,CAAC;IAC3C,QAAQ,EAAE,CAAC,aAAa,EAAE,uBAAuB,KAAK,IAAI,CAAC;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AACF,QAAA,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAwH5C,CAAC;AAEF,eAAe,uBAAuB,CAAC"}
package/lib/esm/src/components/reactable/helpers/ReactableTableFilterRow.js CHANGED
@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
2
2
  import { useTranslation } from '../../../i18n';
3
3
  import ReactableTextFilter from './ReactableTextFilter';
4
4
  import { getClassName } from './helper';
5
+ import SelectWithSearch from '../../input/SelectWithSearch';
5
6
  const ReactableTableFilterRow = ({ columnDefs, onFilter, tableName }) => {
6
7
  const { t } = useTranslation();
7
8
  const [state, setState] = useState({});
@@ -50,17 +51,30 @@ const ReactableTableFilterRow = ({ columnDefs, onFilter, tableName }) => {
50
51
  throw new Error(`No filterOptions found for column type: options on columnDef: ${columnDef.name}`);
51
52
  }
52
53
  const filterOptions = columnDef.filterable.filterOptions;
53
- return (React.createElement("select", { onChange: (event) => {
54
- changeFilter(columnDef.name, event.target.value);
55
- }, value: state[columnDef.name] },
56
- React.createElement("option", { key: "", value: "" }, t('reactable.filter.all', {
57
- defaultValue: '- All -'
58
- })),
59
- filterOptions.map((option) => (React.createElement("option", { className: getClassName(tableName, columnDef.name), key: option.value, value: option.value }, typeof option.label === 'string'
60
- ? option.label
61
- : t(option.label.id, {
62
- defaultValue: option.label.defaultValue
63
- }))))));
54
+ if (columnDef.filterable.searchableOptions) {
55
+ const searchableOptions = filterOptions.map((option) => ({
56
+ type: 'item',
57
+ label: typeof option.label === 'string'
58
+ ? option.label
59
+ : t(option.label.id, { defaultValue: option.label.defaultValue }),
60
+ value: option.value
61
+ }));
62
+ const value = state[columnDef.name];
63
+ return (React.createElement(SelectWithSearch, { options: searchableOptions, onChange: (item) => {
64
+ changeFilter(columnDef.name, item?.value);
65
+ }, value: value ? searchableOptions.find((opt) => opt.value === value.toString()) : null, clearable: true }));
66
+ }
67
+ else {
68
+ return (React.createElement("select", { onChange: (event) => {
69
+ changeFilter(columnDef.name, event.target.value);
70
+ }, value: state[columnDef.name] },
71
+ React.createElement("option", { key: "", value: "" }, t('reactable.filter.all', {
72
+ defaultValue: '- All -'
73
+ })),
74
+ filterOptions.map((option) => (React.createElement("option", { className: getClassName(tableName, columnDef.name), key: option.value, value: option.value }, typeof option.label === 'string'
75
+ ? option.label
76
+ : t(option.label.id, { defaultValue: option.label.defaultValue }))))));
77
+ }
64
78
  };
65
79
  return (React.createElement("tr", { className: "di filterrow form" }, columnDefs.map((columnDef) => (React.createElement("td", { key: columnDef.name, style: { textAlign: columnDef.align || 'left' } }, getFilterByColumnDef(columnDef))))));
66
80
  };
package/lib/esm/src/components/reactable/types.d.ts CHANGED
@@ -12,6 +12,7 @@ declare type ReactableColumnFilterable<T> = {
12
12
  filterFn?: (item: T, value: string) => boolean;
13
13
  initialValue?: string;
14
14
  placeholder?: string;
15
+ searchableOptions?: boolean;
15
16
  };
16
17
  export declare type ReactableColumnDef<T> = {
17
18
  name: string;
package/lib/esm/src/components/reactable/types.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/components/reactable/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAC,aAAa,EAAC,MAAM,OAAO,CAAC;AAEpC,OAAO,EAAC,qBAAqB,EAAC,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAC,aAAa,EAAC,MAAM,wBAAwB,CAAC;AAErD,oBAAY,oBAAoB,GAAG,MAAM,GAAG,qBAAqB,GAAG,KAAK,CAAC,SAAS,CAAC;AAEpF,aAAK,yBAAyB,CAAC,CAAC,IAAI;IACnC,UAAU,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,aAAa,CAAC,EAAE,KAAK,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,GAAG,qBAAqB,CAAA;KAAC,CAAC,CAAC;IAC9E,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IAC/C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,oBAAY,kBAAkB,CAAC,CAAC,IAAI;IACnC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,oBAAoB,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB,CAAC,EAAE,aAAa,CAAC;IACrC,MAAM,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IACxC,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,IAAI,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;IACpC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,yBAAyB,CAAC,CAAC,CAAC,CAAC;CAC1C,CAAC;AAEF,oBAAY,uBAAuB,GAAG;IAAC,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,CAAA;CAAC,CAAC;AAEpE,oBAAY,eAAe,CAAC,CAAC,IAAI;IAChC,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,IAAI,CAAC;IAC/B,WAAW,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,MAAM,CAAC;IACrC,WAAW,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,aAAa,CAAC;IAC5C,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,MAAM,CAAC;CACpC,CAAC"}
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/components/reactable/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAC,aAAa,EAAC,MAAM,OAAO,CAAC;AAEpC,OAAO,EAAC,qBAAqB,EAAC,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAC,aAAa,EAAC,MAAM,wBAAwB,CAAC;AAErD,oBAAY,oBAAoB,GAAG,MAAM,GAAG,qBAAqB,GAAG,KAAK,CAAC,SAAS,CAAC;AAEpF,aAAK,yBAAyB,CAAC,CAAC,IAAI;IACnC,UAAU,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,aAAa,CAAC,EAAE,KAAK,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,GAAG,qBAAqB,CAAA;KAAC,CAAC,CAAC;IAC9E,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IAC/C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC5B,CAAC;AAEF,oBAAY,kBAAkB,CAAC,CAAC,IAAI;IACnC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,oBAAoB,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB,CAAC,EAAE,aAAa,CAAC;IACrC,MAAM,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IACxC,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,IAAI,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;IACpC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,yBAAyB,CAAC,CAAC,CAAC,CAAC;CAC1C,CAAC;AAEF,oBAAY,uBAAuB,GAAG;IAAC,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,CAAA;CAAC,CAAC;AAEpE,oBAAY,eAAe,CAAC,CAAC,IAAI;IAChC,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,IAAI,CAAC;IAC/B,WAAW,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,MAAM,CAAC;IACrC,WAAW,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,aAAa,CAAC;IAC5C,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,MAAM,CAAC;CACpC,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@deviceinsight/ng-ui-components",
3
- "version": "6.28.0",
3
+ "version": "6.28.1",
4
4
  "private": false,
5
5
  "license": "SEE LICENSE IN LICENSE",
6
6
  "repository": {