@dktunited-techoff/techoff-suite-ui 1.11.5 → 1.11.7

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 (22) hide show
  1. package/esm/components/TsButton/TsButton.css +5 -0
  2. package/esm/components/TsButton/TsButton.js +1 -1
  3. package/esm/components/TsButton/TsButton.js.map +1 -1
  4. package/esm/layouts/TsSearchHeader/TsSearchHeader.css +6 -0
  5. package/esm/layouts/TsSearchHeader/TsSearchHeader.d.ts +1 -1
  6. package/esm/layouts/TsSearchHeader/TsSearchHeader.js +19 -2
  7. package/esm/layouts/TsSearchHeader/TsSearchHeader.js.map +1 -1
  8. package/esm/layouts/TsSearchHeader/TsSearchHeader.types.d.ts +1 -0
  9. package/lib/components/TsButton/TsButton.css +5 -0
  10. package/lib/components/TsButton/TsButton.js +1 -1
  11. package/lib/components/TsButton/TsButton.js.map +1 -1
  12. package/lib/layouts/TsSearchHeader/TsSearchHeader.css +6 -0
  13. package/lib/layouts/TsSearchHeader/TsSearchHeader.d.ts +1 -1
  14. package/lib/layouts/TsSearchHeader/TsSearchHeader.js +19 -2
  15. package/lib/layouts/TsSearchHeader/TsSearchHeader.js.map +1 -1
  16. package/lib/layouts/TsSearchHeader/TsSearchHeader.types.d.ts +1 -0
  17. package/package.json +1 -1
  18. package/src/components/TsButton/TsButton.css +5 -0
  19. package/src/components/TsButton/TsButton.tsx +1 -1
  20. package/src/layouts/TsSearchHeader/TsSearchHeader.css +6 -0
  21. package/src/layouts/TsSearchHeader/TsSearchHeader.tsx +20 -2
  22. package/src/layouts/TsSearchHeader/TsSearchHeader.types.ts +1 -1
package/esm/components/TsButton/TsButton.css CHANGED
@@ -18,6 +18,11 @@
18
18
  button:disabled {
19
19
  cursor: not-allowed;
20
20
  }
21
+ .ts-button-label {
22
+ overflow: hidden;
23
+ text-overflow: ellipsis;
24
+ white-space: nowrap;
25
+ }
21
26
  /* ####### */
22
27
  /* BLOCK */
23
28
  .ts-button--block {
package/esm/components/TsButton/TsButton.js CHANGED
@@ -11,7 +11,7 @@ export const TsButton = ({ children, icon, iconDirection = 'left', size = 'md',
11
11
  ${icon && !children ? 'ts-button--icon-only' : ''}
12
12
  `, ...props },
13
13
  icon && iconDirection === 'left' && React.createElement(TsIcon, { name: icon, size: "16" }),
14
- children && React.createElement("div", null, children),
14
+ children && React.createElement("div", { className: "ts-button-label" }, children),
15
15
  icon && iconDirection === 'right' && React.createElement(TsIcon, { name: icon, size: "16" })));
16
16
  };
17
17
  //# sourceMappingURL=TsButton.js.map
package/esm/components/TsButton/TsButton.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TsButton.js","sourceRoot":"","sources":["../../../src/components/TsButton/TsButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE1C,OAAO,gBAAgB,CAAC;AAExB,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EACvB,QAAQ,EACR,IAAI,EACJ,aAAa,GAAG,MAAM,EACtB,IAAI,GAAG,IAAI,EACX,OAAO,GAAG,SAAS,EACnB,KAAK,EACL,OAAO,EACP,GAAG,KAAK,EACyB,EAAE,EAAE;IACrC,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,gCACE,SAAS,EAAE;+BACc,IAAI,eAAe,OAAO;UAC/C,KAAK,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,EAAE;UAC/B,OAAO,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,EAAE;UACnC,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,EAAE;OAClD,KACG,KAAK;QAER,IAAI,IAAI,aAAa,KAAK,MAAM,IAAI,oBAAC,MAAM,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG;QACpE,QAAQ,IAAI,iCAAM,QAAQ,CAAO;QACjC,IAAI,IAAI,aAAa,KAAK,OAAO,IAAI,oBAAC,MAAM,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG,CAC/D,CACV,CAAC;AACJ,CAAC,CAAC"}
1
+ {"version":3,"file":"TsButton.js","sourceRoot":"","sources":["../../../src/components/TsButton/TsButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE1C,OAAO,gBAAgB,CAAC;AAExB,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EACvB,QAAQ,EACR,IAAI,EACJ,aAAa,GAAG,MAAM,EACtB,IAAI,GAAG,IAAI,EACX,OAAO,GAAG,SAAS,EACnB,KAAK,EACL,OAAO,EACP,GAAG,KAAK,EACyB,EAAE,EAAE;IACrC,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,gCACE,SAAS,EAAE;+BACc,IAAI,eAAe,OAAO;UAC/C,KAAK,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,EAAE;UAC/B,OAAO,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,EAAE;UACnC,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,EAAE;OAClD,KACG,KAAK;QAER,IAAI,IAAI,aAAa,KAAK,MAAM,IAAI,oBAAC,MAAM,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG;QACpE,QAAQ,IAAI,6BAAK,SAAS,EAAC,iBAAiB,IAAE,QAAQ,CAAO;QAC7D,IAAI,IAAI,aAAa,KAAK,OAAO,IAAI,oBAAC,MAAM,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG,CAC/D,CACV,CAAC;AACJ,CAAC,CAAC"}
package/esm/layouts/TsSearchHeader/TsSearchHeader.css CHANGED
@@ -87,6 +87,12 @@
87
87
  background: #ebecf7;
88
88
  }
89
89
 
90
+ .ts-header-search-item--match {
91
+ background: #cce5f2;
92
+ color: #3643BA;
93
+ font-weight: 700;
94
+ }
95
+
90
96
  /* ######### */
91
97
  /* GLOBALS */
92
98
  * {
package/esm/layouts/TsSearchHeader/TsSearchHeader.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as React from 'react';
2
2
  import { TsSearchHeaderProps, TsSearchHeaderItemProps } from './TsSearchHeader.types';
3
3
  import './TsSearchHeader.css';
4
- export declare const TsSearchHeaderItem: ({ id, label, onClick }: TsSearchHeaderItemProps) => React.JSX.Element;
4
+ export declare const TsSearchHeaderItem: ({ id, label, value, onClick }: TsSearchHeaderItemProps) => React.JSX.Element;
5
5
  export declare const TsSearchHeader: ({ placeholder, noItemMessage, isLoading, value, items, onChange, }: TsSearchHeaderProps) => React.JSX.Element;
package/esm/layouts/TsSearchHeader/TsSearchHeader.js CHANGED
@@ -2,10 +2,27 @@ import * as React from 'react';
2
2
  import { TsIcon } from '../../components/TsIcon/TsIcon';
3
3
  import { TsLoader } from '../../components/TsLoader/TsLoader';
4
4
  import './TsSearchHeader.css';
5
- export const TsSearchHeaderItem = ({ id, label, onClick }) => {
5
+ export const TsSearchHeaderItem = ({ id, label, value, onClick }) => {
6
+ const getBeforeMatch = (label) => {
7
+ const matchStartIndex = label.toLowerCase().indexOf(value.toLowerCase());
8
+ return label.substring(0, matchStartIndex);
9
+ };
10
+ const getMatch = (label) => {
11
+ const matchStartIndex = label.toLowerCase().indexOf(value.toLowerCase());
12
+ const matchEndIndex = matchStartIndex + value.length;
13
+ return label.substring(matchStartIndex, matchEndIndex);
14
+ };
15
+ const getAfterMatch = (label) => {
16
+ const matchStartIndex = label.toLowerCase().indexOf(value.toLowerCase());
17
+ const matchEndIndex = matchStartIndex + value.length;
18
+ return label.substring(matchEndIndex);
19
+ };
6
20
  // Rendering
7
21
  return (React.createElement("button", { className: "ts-search-header-item", id: id, onClick: onClick },
8
- React.createElement("div", { className: "ts-search-header-item-label" }, label)));
22
+ React.createElement("div", { className: "ts-search-header-item-label" },
23
+ getBeforeMatch(label),
24
+ React.createElement("span", { className: "ts-header-search-item--match" }, getMatch(label)),
25
+ getAfterMatch(label))));
9
26
  };
10
27
  export const TsSearchHeader = ({ placeholder, noItemMessage, isLoading, value, items, onChange, }) => {
11
28
  // Rendering
package/esm/layouts/TsSearchHeader/TsSearchHeader.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TsSearchHeader.js","sourceRoot":"","sources":["../../../src/layouts/TsSearchHeader/TsSearchHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,MAAM,EAAE,MAAM,gCAAgC,CAAC;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAC9D,OAAO,sBAAsB,CAAC;AAE9B,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,OAAO,EAA2B,EAAE,EAAE;IACpF,YAAY;IACZ,OAAO,CACL,gCAAQ,SAAS,EAAC,uBAAuB,EAAC,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,OAAO;QAChE,6BAAK,SAAS,EAAC,6BAA6B,IAAE,KAAK,CAAO,CACnD,CACV,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAC7B,WAAW,EACX,aAAa,EACb,SAAS,EACT,KAAK,EACL,KAAK,EACL,QAAQ,GACY,EAAE,EAAE;IACxB,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,kBAAkB;QAC/B,6BAAK,SAAS,EAAC,kCAAkC;YAC/C,6BAAK,SAAS,EAAC,uCAAuC;gBACpD,oBAAC,MAAM,IAAC,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,IAAI,GAAG,CAC9B;YACN,6BAAK,SAAS,EAAC,4BAA4B;gBACzC,+BACE,EAAE,EAAC,QAAQ,EACX,IAAI,EAAC,QAAQ,EACb,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,GACvC,CACE;YACN,6BAAK,SAAS,EAAC,uCAAuC,GAAG,CACrD;QAEL,KAAK,IAAI,CACR,6BAAK,SAAS,EAAC,2BAA2B;YACvC,SAAS,IAAI,CACZ,6BAAK,SAAS,EAAC,yBAAyB;gBACtC,oBAAC,QAAQ,IAAC,IAAI,EAAC,IAAI,GAAG,CAClB,CACP;YACA,CAAC,SAAS,IAAI,CAAC,CAAC,KAAK,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,CAAC,IAAI,CAC/C,6BAAK,SAAS,EAAC,0BAA0B,IAAE,aAAa,IAAI,gBAAgB,CAAO,CACpF;YACA,CAAC,SAAS,IAAI,KAAK,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,6BAAK,SAAS,EAAC,wBAAwB,IAAE,KAAK,CAAO,CAC7F,CACP,CACG,CACP,CAAC;AACJ,CAAC,CAAC"}
1
+ {"version":3,"file":"TsSearchHeader.js","sourceRoot":"","sources":["../../../src/layouts/TsSearchHeader/TsSearchHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,MAAM,EAAE,MAAM,gCAAgC,CAAC;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAC9D,OAAO,sBAAsB,CAAC;AAE9B,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAA2B,EAAE,EAAE;IAC3F,MAAM,cAAc,GAAG,CAAC,KAAU,EAAE,EAAE;QACpC,MAAM,eAAe,GAAG,KAAK,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,CAAC;QACzE,OAAO,KAAK,CAAC,SAAS,CAAC,CAAC,EAAE,eAAe,CAAC,CAAC;IAC7C,CAAC,CAAC;IACF,MAAM,QAAQ,GAAG,CAAC,KAAU,EAAE,EAAE;QAC9B,MAAM,eAAe,GAAG,KAAK,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,CAAC;QACzE,MAAM,aAAa,GAAG,eAAe,GAAG,KAAK,CAAC,MAAM,CAAC;QACrD,OAAO,KAAK,CAAC,SAAS,CAAC,eAAe,EAAE,aAAa,CAAC,CAAC;IACzD,CAAC,CAAC;IACF,MAAM,aAAa,GAAG,CAAC,KAAU,EAAE,EAAE;QACnC,MAAM,eAAe,GAAG,KAAK,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,CAAC;QACzE,MAAM,aAAa,GAAG,eAAe,GAAG,KAAK,CAAC,MAAM,CAAC;QACrD,OAAO,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC,CAAC;IACxC,CAAC,CAAC;IACF,YAAY;IACZ,OAAO,CACL,gCAAQ,SAAS,EAAC,uBAAuB,EAAC,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,OAAO;QAChE,6BAAK,SAAS,EAAC,6BAA6B;YACzC,cAAc,CAAC,KAAK,CAAC;YACtB,8BAAM,SAAS,EAAC,8BAA8B,IAAE,QAAQ,CAAC,KAAK,CAAC,CAAQ;YACtE,aAAa,CAAC,KAAK,CAAC,CACjB,CACC,CACV,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAC7B,WAAW,EACX,aAAa,EACb,SAAS,EACT,KAAK,EACL,KAAK,EACL,QAAQ,GACY,EAAE,EAAE;IACxB,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,kBAAkB;QAC/B,6BAAK,SAAS,EAAC,kCAAkC;YAC/C,6BAAK,SAAS,EAAC,uCAAuC;gBACpD,oBAAC,MAAM,IAAC,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,IAAI,GAAG,CAC9B;YACN,6BAAK,SAAS,EAAC,4BAA4B;gBACzC,+BACE,EAAE,EAAC,QAAQ,EACX,IAAI,EAAC,QAAQ,EACb,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,GACvC,CACE;YACN,6BAAK,SAAS,EAAC,uCAAuC,GAAG,CACrD;QAEL,KAAK,IAAI,CACR,6BAAK,SAAS,EAAC,2BAA2B;YACvC,SAAS,IAAI,CACZ,6BAAK,SAAS,EAAC,yBAAyB;gBACtC,oBAAC,QAAQ,IAAC,IAAI,EAAC,IAAI,GAAG,CAClB,CACP;YACA,CAAC,SAAS,IAAI,CAAC,CAAC,KAAK,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,CAAC,IAAI,CAC/C,6BAAK,SAAS,EAAC,0BAA0B,IAAE,aAAa,IAAI,gBAAgB,CAAO,CACpF;YACA,CAAC,SAAS,IAAI,KAAK,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,6BAAK,SAAS,EAAC,wBAAwB,IAAE,KAAK,CAAO,CAC7F,CACP,CACG,CACP,CAAC;AACJ,CAAC,CAAC"}
package/esm/layouts/TsSearchHeader/TsSearchHeader.types.d.ts CHANGED
@@ -2,6 +2,7 @@ import { ReactElement } from 'react';
2
2
  export type TsSearchHeaderItemProps = {
3
3
  id: string;
4
4
  label: string;
5
+ value: string;
5
6
  onClick?: () => void;
6
7
  };
7
8
  export type TsSearchHeaderProps = {
package/lib/components/TsButton/TsButton.css CHANGED
@@ -18,6 +18,11 @@
18
18
  button:disabled {
19
19
  cursor: not-allowed;
20
20
  }
21
+ .ts-button-label {
22
+ overflow: hidden;
23
+ text-overflow: ellipsis;
24
+ white-space: nowrap;
25
+ }
21
26
  /* ####### */
22
27
  /* BLOCK */
23
28
  .ts-button--block {
package/lib/components/TsButton/TsButton.js CHANGED
@@ -14,7 +14,7 @@ const TsButton = ({ children, icon, iconDirection = 'left', size = 'md', variant
14
14
  ${icon && !children ? 'ts-button--icon-only' : ''}
15
15
  `, ...props },
16
16
  icon && iconDirection === 'left' && React.createElement(TsIcon_1.TsIcon, { name: icon, size: "16" }),
17
- children && React.createElement("div", null, children),
17
+ children && React.createElement("div", { className: "ts-button-label" }, children),
18
18
  icon && iconDirection === 'right' && React.createElement(TsIcon_1.TsIcon, { name: icon, size: "16" })));
19
19
  };
20
20
  exports.TsButton = TsButton;
package/lib/components/TsButton/TsButton.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TsButton.js","sourceRoot":"","sources":["../../../src/components/TsButton/TsButton.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAE/B,6CAA0C;AAE1C,0BAAwB;AAEjB,MAAM,QAAQ,GAAG,CAAC,EACvB,QAAQ,EACR,IAAI,EACJ,aAAa,GAAG,MAAM,EACtB,IAAI,GAAG,IAAI,EACX,OAAO,GAAG,SAAS,EACnB,KAAK,EACL,OAAO,EACP,GAAG,KAAK,EACyB,EAAE,EAAE;IACrC,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,gCACE,SAAS,EAAE;+BACc,IAAI,eAAe,OAAO;UAC/C,KAAK,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,EAAE;UAC/B,OAAO,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,EAAE;UACnC,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,EAAE;OAClD,KACG,KAAK;QAER,IAAI,IAAI,aAAa,KAAK,MAAM,IAAI,oBAAC,eAAM,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG;QACpE,QAAQ,IAAI,iCAAM,QAAQ,CAAO;QACjC,IAAI,IAAI,aAAa,KAAK,OAAO,IAAI,oBAAC,eAAM,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG,CAC/D,CACV,CAAC;AACJ,CAAC,CAAC;AA3BW,QAAA,QAAQ,YA2BnB"}
1
+ {"version":3,"file":"TsButton.js","sourceRoot":"","sources":["../../../src/components/TsButton/TsButton.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAE/B,6CAA0C;AAE1C,0BAAwB;AAEjB,MAAM,QAAQ,GAAG,CAAC,EACvB,QAAQ,EACR,IAAI,EACJ,aAAa,GAAG,MAAM,EACtB,IAAI,GAAG,IAAI,EACX,OAAO,GAAG,SAAS,EACnB,KAAK,EACL,OAAO,EACP,GAAG,KAAK,EACyB,EAAE,EAAE;IACrC,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,gCACE,SAAS,EAAE;+BACc,IAAI,eAAe,OAAO;UAC/C,KAAK,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,EAAE;UAC/B,OAAO,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,EAAE;UACnC,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,EAAE;OAClD,KACG,KAAK;QAER,IAAI,IAAI,aAAa,KAAK,MAAM,IAAI,oBAAC,eAAM,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG;QACpE,QAAQ,IAAI,6BAAK,SAAS,EAAC,iBAAiB,IAAE,QAAQ,CAAO;QAC7D,IAAI,IAAI,aAAa,KAAK,OAAO,IAAI,oBAAC,eAAM,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG,CAC/D,CACV,CAAC;AACJ,CAAC,CAAC;AA3BW,QAAA,QAAQ,YA2BnB"}
package/lib/layouts/TsSearchHeader/TsSearchHeader.css CHANGED
@@ -87,6 +87,12 @@
87
87
  background: #ebecf7;
88
88
  }
89
89
 
90
+ .ts-header-search-item--match {
91
+ background: #cce5f2;
92
+ color: #3643BA;
93
+ font-weight: 700;
94
+ }
95
+
90
96
  /* ######### */
91
97
  /* GLOBALS */
92
98
  * {
package/lib/layouts/TsSearchHeader/TsSearchHeader.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as React from 'react';
2
2
  import { TsSearchHeaderProps, TsSearchHeaderItemProps } from './TsSearchHeader.types';
3
3
  import './TsSearchHeader.css';
4
- export declare const TsSearchHeaderItem: ({ id, label, onClick }: TsSearchHeaderItemProps) => React.JSX.Element;
4
+ export declare const TsSearchHeaderItem: ({ id, label, value, onClick }: TsSearchHeaderItemProps) => React.JSX.Element;
5
5
  export declare const TsSearchHeader: ({ placeholder, noItemMessage, isLoading, value, items, onChange, }: TsSearchHeaderProps) => React.JSX.Element;
package/lib/layouts/TsSearchHeader/TsSearchHeader.js CHANGED
@@ -5,10 +5,27 @@ const React = require("react");
5
5
  const TsIcon_1 = require("../../components/TsIcon/TsIcon");
6
6
  const TsLoader_1 = require("../../components/TsLoader/TsLoader");
7
7
  require("./TsSearchHeader.css");
8
- const TsSearchHeaderItem = ({ id, label, onClick }) => {
8
+ const TsSearchHeaderItem = ({ id, label, value, onClick }) => {
9
+ const getBeforeMatch = (label) => {
10
+ const matchStartIndex = label.toLowerCase().indexOf(value.toLowerCase());
11
+ return label.substring(0, matchStartIndex);
12
+ };
13
+ const getMatch = (label) => {
14
+ const matchStartIndex = label.toLowerCase().indexOf(value.toLowerCase());
15
+ const matchEndIndex = matchStartIndex + value.length;
16
+ return label.substring(matchStartIndex, matchEndIndex);
17
+ };
18
+ const getAfterMatch = (label) => {
19
+ const matchStartIndex = label.toLowerCase().indexOf(value.toLowerCase());
20
+ const matchEndIndex = matchStartIndex + value.length;
21
+ return label.substring(matchEndIndex);
22
+ };
9
23
  // Rendering
10
24
  return (React.createElement("button", { className: "ts-search-header-item", id: id, onClick: onClick },
11
- React.createElement("div", { className: "ts-search-header-item-label" }, label)));
25
+ React.createElement("div", { className: "ts-search-header-item-label" },
26
+ getBeforeMatch(label),
27
+ React.createElement("span", { className: "ts-header-search-item--match" }, getMatch(label)),
28
+ getAfterMatch(label))));
12
29
  };
13
30
  exports.TsSearchHeaderItem = TsSearchHeaderItem;
14
31
  const TsSearchHeader = ({ placeholder, noItemMessage, isLoading, value, items, onChange, }) => {
package/lib/layouts/TsSearchHeader/TsSearchHeader.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TsSearchHeader.js","sourceRoot":"","sources":["../../../src/layouts/TsSearchHeader/TsSearchHeader.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAE/B,2DAAwD;AACxD,iEAA8D;AAC9D,gCAA8B;AAEvB,MAAM,kBAAkB,GAAG,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,OAAO,EAA2B,EAAE,EAAE;IACpF,YAAY;IACZ,OAAO,CACL,gCAAQ,SAAS,EAAC,uBAAuB,EAAC,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,OAAO;QAChE,6BAAK,SAAS,EAAC,6BAA6B,IAAE,KAAK,CAAO,CACnD,CACV,CAAC;AACJ,CAAC,CAAC;AAPW,QAAA,kBAAkB,sBAO7B;AAEK,MAAM,cAAc,GAAG,CAAC,EAC7B,WAAW,EACX,aAAa,EACb,SAAS,EACT,KAAK,EACL,KAAK,EACL,QAAQ,GACY,EAAE,EAAE;IACxB,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,kBAAkB;QAC/B,6BAAK,SAAS,EAAC,kCAAkC;YAC/C,6BAAK,SAAS,EAAC,uCAAuC;gBACpD,oBAAC,eAAM,IAAC,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,IAAI,GAAG,CAC9B;YACN,6BAAK,SAAS,EAAC,4BAA4B;gBACzC,+BACE,EAAE,EAAC,QAAQ,EACX,IAAI,EAAC,QAAQ,EACb,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,GACvC,CACE;YACN,6BAAK,SAAS,EAAC,uCAAuC,GAAG,CACrD;QAEL,KAAK,IAAI,CACR,6BAAK,SAAS,EAAC,2BAA2B;YACvC,SAAS,IAAI,CACZ,6BAAK,SAAS,EAAC,yBAAyB;gBACtC,oBAAC,mBAAQ,IAAC,IAAI,EAAC,IAAI,GAAG,CAClB,CACP;YACA,CAAC,SAAS,IAAI,CAAC,CAAC,KAAK,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,CAAC,IAAI,CAC/C,6BAAK,SAAS,EAAC,0BAA0B,IAAE,aAAa,IAAI,gBAAgB,CAAO,CACpF;YACA,CAAC,SAAS,IAAI,KAAK,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,6BAAK,SAAS,EAAC,wBAAwB,IAAE,KAAK,CAAO,CAC7F,CACP,CACG,CACP,CAAC;AACJ,CAAC,CAAC;AA1CW,QAAA,cAAc,kBA0CzB"}
1
+ {"version":3,"file":"TsSearchHeader.js","sourceRoot":"","sources":["../../../src/layouts/TsSearchHeader/TsSearchHeader.tsx"],"names":[],"mappings":"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"}
package/lib/layouts/TsSearchHeader/TsSearchHeader.types.d.ts CHANGED
@@ -2,6 +2,7 @@ import { ReactElement } from 'react';
2
2
  export type TsSearchHeaderItemProps = {
3
3
  id: string;
4
4
  label: string;
5
+ value: string;
5
6
  onClick?: () => void;
6
7
  };
7
8
  export type TsSearchHeaderProps = {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dktunited-techoff/techoff-suite-ui",
3
- "version": "1.11.5",
3
+ "version": "1.11.7",
4
4
  "main": "lib/index.js",
5
5
  "types": "./lib",
6
6
  "module": "esm/index.js",
package/src/components/TsButton/TsButton.css CHANGED
@@ -18,6 +18,11 @@
18
18
  button:disabled {
19
19
  cursor: not-allowed;
20
20
  }
21
+ .ts-button-label {
22
+ overflow: hidden;
23
+ text-overflow: ellipsis;
24
+ white-space: nowrap;
25
+ }
21
26
  /* ####### */
22
27
  /* BLOCK */
23
28
  .ts-button--block {
package/src/components/TsButton/TsButton.tsx CHANGED
@@ -27,7 +27,7 @@ export const TsButton = ({
27
27
  {...props}
28
28
  >
29
29
  {icon && iconDirection === 'left' && <TsIcon name={icon} size="16" />}
30
- {children && <div>{children}</div>}
30
+ {children && <div className="ts-button-label">{children}</div>}
31
31
  {icon && iconDirection === 'right' && <TsIcon name={icon} size="16" />}
32
32
  </button>
33
33
  );
package/src/layouts/TsSearchHeader/TsSearchHeader.css CHANGED
@@ -87,6 +87,12 @@
87
87
  background: #ebecf7;
88
88
  }
89
89
 
90
+ .ts-header-search-item--match {
91
+ background: #cce5f2;
92
+ color: #3643BA;
93
+ font-weight: 700;
94
+ }
95
+
90
96
  /* ######### */
91
97
  /* GLOBALS */
92
98
  * {
package/src/layouts/TsSearchHeader/TsSearchHeader.tsx CHANGED
@@ -4,11 +4,29 @@ import { TsIcon } from '../../components/TsIcon/TsIcon';
4
4
  import { TsLoader } from '../../components/TsLoader/TsLoader';
5
5
  import './TsSearchHeader.css';
6
6
 
7
- export const TsSearchHeaderItem = ({ id, label, onClick }: TsSearchHeaderItemProps) => {
7
+ export const TsSearchHeaderItem = ({ id, label, value, onClick }: TsSearchHeaderItemProps) => {
8
+ const getBeforeMatch = (label: any) => {
9
+ const matchStartIndex = label.toLowerCase().indexOf(value.toLowerCase());
10
+ return label.substring(0, matchStartIndex);
11
+ };
12
+ const getMatch = (label: any) => {
13
+ const matchStartIndex = label.toLowerCase().indexOf(value.toLowerCase());
14
+ const matchEndIndex = matchStartIndex + value.length;
15
+ return label.substring(matchStartIndex, matchEndIndex);
16
+ };
17
+ const getAfterMatch = (label: any) => {
18
+ const matchStartIndex = label.toLowerCase().indexOf(value.toLowerCase());
19
+ const matchEndIndex = matchStartIndex + value.length;
20
+ return label.substring(matchEndIndex);
21
+ };
8
22
  // Rendering
9
23
  return (
10
24
  <button className="ts-search-header-item" id={id} onClick={onClick}>
11
- <div className="ts-search-header-item-label">{label}</div>
25
+ <div className="ts-search-header-item-label">
26
+ {getBeforeMatch(label)}
27
+ <span className="ts-header-search-item--match">{getMatch(label)}</span>
28
+ {getAfterMatch(label)}
29
+ </div>
12
30
  </button>
13
31
  );
14
32
  };
package/src/layouts/TsSearchHeader/TsSearchHeader.types.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { ReactElement } from 'react';
2
2
 
3
- export type TsSearchHeaderItemProps = { id: string; label: string; onClick?: () => void };
3
+ export type TsSearchHeaderItemProps = { id: string; label: string; value: string, onClick?: () => void };
4
4
  export type TsSearchHeaderProps = {
5
5
  placeholder?: string;
6
6
  noItemMessage?: string;