@chayns-components/core 5.0.0-beta.9 → 5.0.0-beta.98

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 (144) hide show
  1. package/README.md +3 -9
  2. package/lib/components/accordion/Accordion.d.ts +47 -9
  3. package/lib/components/accordion/Accordion.js +83 -87
  4. package/lib/components/accordion/Accordion.js.map +1 -1
  5. package/lib/components/accordion/Accordion.styles.d.ts +6 -5
  6. package/lib/components/accordion/Accordion.styles.js +67 -26
  7. package/lib/components/accordion/Accordion.styles.js.map +1 -1
  8. package/lib/components/accordion/accordion-body/AccordionBody.d.ts +13 -2
  9. package/lib/components/accordion/accordion-body/AccordionBody.js +19 -11
  10. package/lib/components/accordion/accordion-body/AccordionBody.js.map +1 -1
  11. package/lib/components/accordion/accordion-body/AccordionBody.styles.d.ts +4 -1
  12. package/lib/components/accordion/accordion-body/AccordionBody.styles.js +15 -10
  13. package/lib/components/accordion/accordion-body/AccordionBody.styles.js.map +1 -1
  14. package/lib/components/accordion/accordion-content/AccordionContent.d.ts +11 -3
  15. package/lib/components/accordion/accordion-content/AccordionContent.js +13 -11
  16. package/lib/components/accordion/accordion-content/AccordionContent.js.map +1 -1
  17. package/lib/components/accordion/accordion-content/AccordionContent.styles.d.ts +5 -4
  18. package/lib/components/accordion/accordion-content/AccordionContent.styles.js +25 -12
  19. package/lib/components/accordion/accordion-content/AccordionContent.styles.js.map +1 -1
  20. package/lib/components/accordion/accordion-group/AccordionGroup.d.ts +26 -0
  21. package/lib/components/accordion/accordion-group/AccordionGroup.js +57 -0
  22. package/lib/components/accordion/accordion-group/AccordionGroup.js.map +1 -0
  23. package/lib/components/accordion/accordion-head/AccordionHead.d.ts +8 -4
  24. package/lib/components/accordion/accordion-head/AccordionHead.js +79 -64
  25. package/lib/components/accordion/accordion-head/AccordionHead.js.map +1 -1
  26. package/lib/components/accordion/accordion-head/AccordionHead.styles.d.ts +10 -5
  27. package/lib/components/accordion/accordion-head/AccordionHead.styles.js +142 -32
  28. package/lib/components/accordion/accordion-head/AccordionHead.styles.js.map +1 -1
  29. package/lib/components/accordion/accordion-intro/AccordionIntro.d.ts +9 -0
  30. package/lib/components/accordion/accordion-intro/AccordionIntro.js +21 -0
  31. package/lib/components/accordion/accordion-intro/AccordionIntro.js.map +1 -0
  32. package/lib/components/accordion/accordion-intro/AccordionIntro.styles.d.ts +1 -0
  33. package/lib/components/accordion/accordion-intro/AccordionIntro.styles.js +13 -0
  34. package/lib/components/accordion/accordion-intro/AccordionIntro.styles.js.map +1 -0
  35. package/lib/components/accordion/utils.js +10 -12
  36. package/lib/components/accordion/utils.js.map +1 -1
  37. package/lib/components/badge/Badge.d.ts +9 -1
  38. package/lib/components/badge/Badge.js +12 -12
  39. package/lib/components/badge/Badge.js.map +1 -1
  40. package/lib/components/badge/Badge.styles.d.ts +4 -1
  41. package/lib/components/badge/Badge.styles.js +22 -15
  42. package/lib/components/badge/Badge.styles.js.map +1 -1
  43. package/lib/components/button/Button.d.ts +2 -2
  44. package/lib/components/button/Button.js +12 -20
  45. package/lib/components/button/Button.js.map +1 -1
  46. package/lib/components/button/Button.styles.d.ts +2 -0
  47. package/lib/components/button/Button.styles.js +47 -24
  48. package/lib/components/button/Button.styles.js.map +1 -1
  49. package/lib/components/checkbox/Checkbox.d.ts +25 -0
  50. package/lib/components/checkbox/Checkbox.js +44 -0
  51. package/lib/components/checkbox/Checkbox.js.map +1 -0
  52. package/lib/components/checkbox/Checkbox.styles.d.ts +6 -0
  53. package/lib/components/checkbox/Checkbox.styles.js +131 -0
  54. package/lib/components/checkbox/Checkbox.styles.js.map +1 -0
  55. package/lib/components/color-scheme-provider/ColorSchemeProvider.d.ts +7 -1
  56. package/lib/components/color-scheme-provider/ColorSchemeProvider.js +41 -78
  57. package/lib/components/color-scheme-provider/ColorSchemeProvider.js.map +1 -1
  58. package/lib/components/color-scheme-provider/font.d.ts +6 -0
  59. package/lib/components/color-scheme-provider/font.js +59 -0
  60. package/lib/components/color-scheme-provider/font.js.map +1 -0
  61. package/lib/components/context-menu/ContextMenu.d.ts +51 -0
  62. package/lib/components/context-menu/ContextMenu.js +154 -0
  63. package/lib/components/context-menu/ContextMenu.js.map +1 -0
  64. package/lib/components/context-menu/ContextMenu.styles.d.ts +1 -0
  65. package/lib/components/context-menu/ContextMenu.styles.js +13 -0
  66. package/lib/components/context-menu/ContextMenu.styles.js.map +1 -0
  67. package/lib/components/context-menu/constants/alignment.d.ts +8 -0
  68. package/lib/components/context-menu/constants/alignment.js +17 -0
  69. package/lib/components/context-menu/constants/alignment.js.map +1 -0
  70. package/lib/components/context-menu/context-menu-content/ContextMenuContent.d.ts +10 -0
  71. package/lib/components/context-menu/context-menu-content/ContextMenuContent.js +78 -0
  72. package/lib/components/context-menu/context-menu-content/ContextMenuContent.js.map +1 -0
  73. package/lib/components/context-menu/context-menu-content/ContextMenuContent.styles.d.ts +11 -0
  74. package/lib/components/context-menu/context-menu-content/ContextMenuContent.styles.js +117 -0
  75. package/lib/components/context-menu/context-menu-content/ContextMenuContent.styles.js.map +1 -0
  76. package/lib/components/grid-image/GridImage.d.ts +19 -0
  77. package/lib/components/grid-image/GridImage.js +46 -0
  78. package/lib/components/grid-image/GridImage.js.map +1 -0
  79. package/lib/components/grid-image/GridImage.styles.d.ts +21 -0
  80. package/lib/components/grid-image/GridImage.styles.js +105 -0
  81. package/lib/components/grid-image/GridImage.styles.js.map +1 -0
  82. package/lib/components/icon/Icon.d.ts +11 -3
  83. package/lib/components/icon/Icon.js +32 -30
  84. package/lib/components/icon/Icon.js.map +1 -1
  85. package/lib/components/icon/Icon.styles.d.ts +8 -1
  86. package/lib/components/icon/Icon.styles.js +64 -42
  87. package/lib/components/icon/Icon.styles.js.map +1 -1
  88. package/lib/components/icon/utils.js +2 -5
  89. package/lib/components/icon/utils.js.map +1 -1
  90. package/lib/components/input/Input.d.ts +37 -0
  91. package/lib/components/input/Input.js +75 -0
  92. package/lib/components/input/Input.js.map +1 -0
  93. package/lib/components/input/Input.styles.d.ts +7 -0
  94. package/lib/components/input/Input.styles.js +71 -0
  95. package/lib/components/input/Input.styles.js.map +1 -0
  96. package/lib/components/list/List.d.ts +18 -0
  97. package/lib/components/list/List.js +54 -0
  98. package/lib/components/list/List.js.map +1 -0
  99. package/lib/components/list/list-item/ListItem.d.ts +67 -0
  100. package/lib/components/list/list-item/ListItem.js +90 -0
  101. package/lib/components/list/list-item/ListItem.js.map +1 -0
  102. package/lib/components/list/list-item/ListItem.styles.d.ts +6 -0
  103. package/lib/components/list/list-item/ListItem.styles.js +56 -0
  104. package/lib/components/list/list-item/ListItem.styles.js.map +1 -0
  105. package/lib/components/list/list-item/list-item-body/ListItemBody.d.ts +3 -0
  106. package/lib/components/list/list-item/list-item-body/ListItemBody.js +36 -0
  107. package/lib/components/list/list-item/list-item-body/ListItemBody.js.map +1 -0
  108. package/lib/components/list/list-item/list-item-body/ListItemBody.styles.d.ts +1 -0
  109. package/lib/components/list/list-item/list-item-body/ListItemBody.styles.js +14 -0
  110. package/lib/components/list/list-item/list-item-body/ListItemBody.styles.js.map +1 -0
  111. package/lib/components/list/list-item/list-item-content/ListItemContent.d.ts +3 -0
  112. package/lib/components/list/list-item/list-item-content/ListItemContent.js +21 -0
  113. package/lib/components/list/list-item/list-item-content/ListItemContent.js.map +1 -0
  114. package/lib/components/list/list-item/list-item-content/ListItemContent.styles.d.ts +1 -0
  115. package/lib/components/list/list-item/list-item-content/ListItemContent.styles.js +19 -0
  116. package/lib/components/list/list-item/list-item-content/ListItemContent.styles.js.map +1 -0
  117. package/lib/components/list/list-item/list-item-head/ListItemHead.d.ts +18 -0
  118. package/lib/components/list/list-item/list-item-head/ListItemHead.js +100 -0
  119. package/lib/components/list/list-item/list-item-head/ListItemHead.js.map +1 -0
  120. package/lib/components/list/list-item/list-item-head/ListItemHead.styles.d.ts +20 -0
  121. package/lib/components/list/list-item/list-item-head/ListItemHead.styles.js +110 -0
  122. package/lib/components/list/list-item/list-item-head/ListItemHead.styles.js.map +1 -0
  123. package/lib/components/list/list-item/list-item-head/list-item-icon/ListItemIcon.d.ts +6 -0
  124. package/lib/components/list/list-item/list-item-head/list-item-icon/ListItemIcon.js +23 -0
  125. package/lib/components/list/list-item/list-item-head/list-item-icon/ListItemIcon.js.map +1 -0
  126. package/lib/components/list/list-item/list-item-head/list-item-icon/ListItemIcon.styles.d.ts +1 -0
  127. package/lib/components/list/list-item/list-item-head/list-item-icon/ListItemIcon.styles.js +32 -0
  128. package/lib/components/list/list-item/list-item-head/list-item-icon/ListItemIcon.styles.js.map +1 -0
  129. package/lib/components/list/list-item/list-item-head/list-item-image/ListItemImage.d.ts +7 -0
  130. package/lib/components/list/list-item/list-item-head/list-item-image/ListItemImage.js +44 -0
  131. package/lib/components/list/list-item/list-item-head/list-item-image/ListItemImage.js.map +1 -0
  132. package/lib/components/list/list-item/list-item-head/list-item-image/ListItemImage.styles.d.ts +10 -0
  133. package/lib/components/list/list-item/list-item-head/list-item-image/ListItemImage.styles.js +52 -0
  134. package/lib/components/list/list-item/list-item-head/list-item-image/ListItemImage.styles.js.map +1 -0
  135. package/lib/hooks/uuid.d.ts +1 -0
  136. package/lib/hooks/uuid.js +14 -0
  137. package/lib/hooks/uuid.js.map +1 -0
  138. package/lib/index.d.ts +10 -0
  139. package/lib/index.js +69 -13
  140. package/lib/index.js.map +1 -1
  141. package/lib/types/chayns.d.ts +57 -0
  142. package/lib/types/chayns.js +14 -0
  143. package/lib/types/chayns.js.map +1 -0
  144. package/package.json +64 -62
@@ -0,0 +1 @@
1
+ {"version":3,"file":"GridImage.js","names":["_react","_interopRequireWildcard","require","_GridImage","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","GridImage","_ref","images","shouldShowRoundImage","size","hasLoadedLeftImage","setHasLoadedLeftImage","useState","hasLoadedTopRightImage","setHasLoadedTopRightImage","hasLoadedBottomRightImage","setHasLoadedBottomRightImage","handleLeftImageLoaded","useCallback","handleTopRightImageLoaded","handleBottomRightImageLoaded","isGridImageHidden","createElement","StyledGridImage","StyledGridLeftImage","isHidden","onLoad","src","StyledGridTopRightImage","StyledGridBottomRightImage","displayName","_default","exports"],"sources":["../../../src/components/grid-image/GridImage.tsx"],"sourcesContent":["import React, { FC, useCallback, useState } from 'react';\nimport {\n StyledGridBottomRightImage,\n StyledGridImage,\n StyledGridLeftImage,\n StyledGridTopRightImage,\n} from './GridImage.styles';\n\ntype GridImageProps = {\n /**\n * The images to be displayed in the `GridImage`. Only the first three\n * images are displayed.\n */\n images: string[];\n /**\n * Images of users should always be displayed in a round shape. Therefore\n * this property can be set to true.\n */\n shouldShowRoundImage?: boolean;\n /**\n * The size of the `GridImage` in pixels, which is set as both width and height.\n */\n size: number;\n};\n\nconst GridImage: FC<GridImageProps> = ({ images, shouldShowRoundImage, size }) => {\n const [hasLoadedLeftImage, setHasLoadedLeftImage] = useState(false);\n const [hasLoadedTopRightImage, setHasLoadedTopRightImage] = useState(false);\n const [hasLoadedBottomRightImage, setHasLoadedBottomRightImage] = useState(false);\n\n const handleLeftImageLoaded = useCallback(() => setHasLoadedLeftImage(true), []);\n\n const handleTopRightImageLoaded = useCallback(() => setHasLoadedTopRightImage(true), []);\n\n const handleBottomRightImageLoaded = useCallback(() => setHasLoadedBottomRightImage(true), []);\n\n const isGridImageHidden =\n !hasLoadedLeftImage || !hasLoadedTopRightImage || !hasLoadedBottomRightImage;\n\n return (\n <StyledGridImage shouldShowRoundImage={shouldShowRoundImage} size={size}>\n <StyledGridLeftImage\n isHidden={isGridImageHidden}\n onLoad={handleLeftImageLoaded}\n size={size}\n src={images[0]}\n />\n <StyledGridTopRightImage\n isHidden={isGridImageHidden}\n onLoad={handleTopRightImageLoaded}\n size={size}\n src={images[1]}\n />\n <StyledGridBottomRightImage\n isHidden={isGridImageHidden}\n onLoad={handleBottomRightImageLoaded}\n src={images[2]}\n />\n </StyledGridImage>\n );\n};\n\nGridImage.displayName = 'GridImage';\n\nexport default GridImage;\n"],"mappings":"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"}
@@ -0,0 +1,21 @@
1
+ export declare const StyledGridImage: import("styled-components").StyledComponent<"div", any, {
2
+ shouldShowRoundImage?: boolean | undefined;
3
+ size: number;
4
+ } & {
5
+ theme: import("../color-scheme-provider/ColorSchemeProvider").Theme;
6
+ }, never>;
7
+ type StyledGridLeftImageProps = {
8
+ isHidden: boolean;
9
+ size: number;
10
+ };
11
+ export declare const StyledGridLeftImage: import("styled-components").StyledComponent<"img", any, StyledGridLeftImageProps, never>;
12
+ type StyledGridTopRightImageProps = {
13
+ isHidden: boolean;
14
+ size: number;
15
+ };
16
+ export declare const StyledGridTopRightImage: import("styled-components").StyledComponent<"img", any, StyledGridTopRightImageProps, never>;
17
+ type StyledGridBottomRightImageProps = {
18
+ isHidden: boolean;
19
+ };
20
+ export declare const StyledGridBottomRightImage: import("styled-components").StyledComponent<"img", any, StyledGridBottomRightImageProps, never>;
21
+ export {};
@@ -0,0 +1,105 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.StyledGridTopRightImage = exports.StyledGridLeftImage = exports.StyledGridImage = exports.StyledGridBottomRightImage = void 0;
7
+ var _styledComponents = _interopRequireDefault(require("styled-components"));
8
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
9
+ const StyledGridImage = _styledComponents.default.div`
10
+ background-color: rgba(${_ref => {
11
+ let {
12
+ theme
13
+ } = _ref;
14
+ return theme['text-rgb'];
15
+ }}, 0.1);
16
+ border-radius: ${_ref2 => {
17
+ let {
18
+ shouldShowRoundImage
19
+ } = _ref2;
20
+ return shouldShowRoundImage ? '50%' : undefined;
21
+ }};
22
+ box-shadow: 0 0 0 1px rgba(${_ref3 => {
23
+ let {
24
+ theme
25
+ } = _ref3;
26
+ return theme['009-rgb'];
27
+ }}, 0.08) inset;
28
+ height: ${_ref4 => {
29
+ let {
30
+ size
31
+ } = _ref4;
32
+ return size;
33
+ }}px;
34
+ overflow: hidden;
35
+ position: relative;
36
+ transition: border-radius 0.3s ease;
37
+ width: ${_ref5 => {
38
+ let {
39
+ size
40
+ } = _ref5;
41
+ return size;
42
+ }}px;
43
+ `;
44
+ exports.StyledGridImage = StyledGridImage;
45
+ const StyledGridLeftImage = _styledComponents.default.img`
46
+ border-right: ${_ref6 => {
47
+ let {
48
+ size
49
+ } = _ref6;
50
+ return size / 40;
51
+ }}px solid white;
52
+ height: 100%;
53
+ left: 0;
54
+ object-fit: cover;
55
+ opacity: ${_ref7 => {
56
+ let {
57
+ isHidden
58
+ } = _ref7;
59
+ return isHidden ? 0 : 1;
60
+ }};
61
+ position: absolute;
62
+ top: 0;
63
+ transition: opacity 0.4s ease;
64
+ width: 60%;
65
+ `;
66
+ exports.StyledGridLeftImage = StyledGridLeftImage;
67
+ const StyledGridTopRightImage = _styledComponents.default.img`
68
+ border-bottom: ${_ref8 => {
69
+ let {
70
+ size
71
+ } = _ref8;
72
+ return size / 40;
73
+ }}px solid white;
74
+ height: 50%;
75
+ object-fit: cover;
76
+ opacity: ${_ref9 => {
77
+ let {
78
+ isHidden
79
+ } = _ref9;
80
+ return isHidden ? 0 : 1;
81
+ }};
82
+ position: absolute;
83
+ right: 0;
84
+ top: 0;
85
+ transition: opacity 0.3s ease;
86
+ width: 40%;
87
+ `;
88
+ exports.StyledGridTopRightImage = StyledGridTopRightImage;
89
+ const StyledGridBottomRightImage = _styledComponents.default.img`
90
+ bottom: 0;
91
+ height: 50%;
92
+ object-fit: cover;
93
+ opacity: ${_ref10 => {
94
+ let {
95
+ isHidden
96
+ } = _ref10;
97
+ return isHidden ? 0 : 1;
98
+ }};
99
+ position: absolute;
100
+ right: 0;
101
+ transition: opacity 0.3s ease;
102
+ width: 40%;
103
+ `;
104
+ exports.StyledGridBottomRightImage = StyledGridBottomRightImage;
105
+ //# sourceMappingURL=GridImage.styles.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"GridImage.styles.js","names":["_styledComponents","_interopRequireDefault","require","obj","__esModule","default","StyledGridImage","styled","div","_ref","theme","_ref2","shouldShowRoundImage","undefined","_ref3","_ref4","size","_ref5","exports","StyledGridLeftImage","img","_ref6","_ref7","isHidden","StyledGridTopRightImage","_ref8","_ref9","StyledGridBottomRightImage","_ref10"],"sources":["../../../src/components/grid-image/GridImage.styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledGridImageProps = WithTheme<{\n shouldShowRoundImage?: boolean;\n size: number;\n}>;\n\nexport const StyledGridImage = styled.div<StyledGridImageProps>`\n background-color: rgba(${({ theme }: StyledGridImageProps) => theme['text-rgb']}, 0.1);\n border-radius: ${({ shouldShowRoundImage }) => (shouldShowRoundImage ? '50%' : undefined)};\n box-shadow: 0 0 0 1px rgba(${({ theme }: StyledGridImageProps) => theme['009-rgb']}, 0.08) inset;\n height: ${({ size }) => size}px;\n overflow: hidden;\n position: relative;\n transition: border-radius 0.3s ease;\n width: ${({ size }) => size}px;\n`;\n\ntype StyledGridLeftImageProps = {\n isHidden: boolean;\n size: number;\n};\n\nexport const StyledGridLeftImage = styled.img<StyledGridLeftImageProps>`\n border-right: ${({ size }) => size / 40}px solid white;\n height: 100%;\n left: 0;\n object-fit: cover;\n opacity: ${({ isHidden }) => (isHidden ? 0 : 1)};\n position: absolute;\n top: 0;\n transition: opacity 0.4s ease;\n width: 60%;\n`;\n\ntype StyledGridTopRightImageProps = {\n isHidden: boolean;\n size: number;\n};\n\nexport const StyledGridTopRightImage = styled.img<StyledGridTopRightImageProps>`\n border-bottom: ${({ size }) => size / 40}px solid white;\n height: 50%;\n object-fit: cover;\n opacity: ${({ isHidden }) => (isHidden ? 0 : 1)};\n position: absolute;\n right: 0;\n top: 0;\n transition: opacity 0.3s ease;\n width: 40%;\n`;\n\ntype StyledGridBottomRightImageProps = {\n isHidden: boolean;\n};\n\nexport const StyledGridBottomRightImage = styled.img<StyledGridBottomRightImageProps>`\n bottom: 0;\n height: 50%;\n object-fit: cover;\n opacity: ${({ isHidden }) => (isHidden ? 0 : 1)};\n position: absolute;\n right: 0;\n transition: opacity 0.3s ease;\n width: 40%;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAQhC,MAAMG,eAAe,GAAGC,yBAAM,CAACC,GAA0B;AAChE,6BAA6BC,IAAA;EAAA,IAAC;IAAEC;EAA4B,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,UAAU,CAAC;AAAA,CAAC;AACpF,qBAAqBC,KAAA;EAAA,IAAC;IAAEC;EAAqB,CAAC,GAAAD,KAAA;EAAA,OAAMC,oBAAoB,GAAG,KAAK,GAAGC,SAAS;AAAA,CAAE;AAC9F,iCAAiCC,KAAA;EAAA,IAAC;IAAEJ;EAA4B,CAAC,GAAAI,KAAA;EAAA,OAAKJ,KAAK,CAAC,SAAS,CAAC;AAAA,CAAC;AACvF,cAAcK,KAAA;EAAA,IAAC;IAAEC;EAAK,CAAC,GAAAD,KAAA;EAAA,OAAKC,IAAI;AAAA,CAAC;AACjC;AACA;AACA;AACA,aAAaC,KAAA;EAAA,IAAC;IAAED;EAAK,CAAC,GAAAC,KAAA;EAAA,OAAKD,IAAI;AAAA,CAAC;AAChC,CAAC;AAACE,OAAA,CAAAZ,eAAA,GAAAA,eAAA;AAOK,MAAMa,mBAAmB,GAAGZ,yBAAM,CAACa,GAA8B;AACxE,oBAAoBC,KAAA;EAAA,IAAC;IAAEL;EAAK,CAAC,GAAAK,KAAA;EAAA,OAAKL,IAAI,GAAG,EAAE;AAAA,CAAC;AAC5C;AACA;AACA;AACA,eAAeM,KAAA;EAAA,IAAC;IAAEC;EAAS,CAAC,GAAAD,KAAA;EAAA,OAAMC,QAAQ,GAAG,CAAC,GAAG,CAAC;AAAA,CAAE;AACpD;AACA;AACA;AACA;AACA,CAAC;AAACL,OAAA,CAAAC,mBAAA,GAAAA,mBAAA;AAOK,MAAMK,uBAAuB,GAAGjB,yBAAM,CAACa,GAAkC;AAChF,qBAAqBK,KAAA;EAAA,IAAC;IAAET;EAAK,CAAC,GAAAS,KAAA;EAAA,OAAKT,IAAI,GAAG,EAAE;AAAA,CAAC;AAC7C;AACA;AACA,eAAeU,KAAA;EAAA,IAAC;IAAEH;EAAS,CAAC,GAAAG,KAAA;EAAA,OAAMH,QAAQ,GAAG,CAAC,GAAG,CAAC;AAAA,CAAE;AACpD;AACA;AACA;AACA;AACA;AACA,CAAC;AAACL,OAAA,CAAAM,uBAAA,GAAAA,uBAAA;AAMK,MAAMG,0BAA0B,GAAGpB,yBAAM,CAACa,GAAqC;AACtF;AACA;AACA;AACA,eAAeQ,MAAA;EAAA,IAAC;IAAEL;EAAS,CAAC,GAAAK,MAAA;EAAA,OAAML,QAAQ,GAAG,CAAC,GAAG,CAAC;AAAA,CAAE;AACpD;AACA;AACA;AACA;AACA,CAAC;AAACL,OAAA,CAAAS,0BAAA,GAAAA,0BAAA"}
@@ -1,5 +1,5 @@
1
1
  import { FC, MouseEventHandler } from 'react';
2
- export declare type IconProps = {
2
+ export type IconProps = {
3
3
  /**
4
4
  * Additional class names for the root element
5
5
  */
@@ -11,15 +11,23 @@ export declare type IconProps = {
11
11
  /**
12
12
  * The FontAwesome or tobit icons to render. Multiple icons are stacked.
13
13
  */
14
- icons: [string, ...string[]];
14
+ icons: string[];
15
15
  /**
16
16
  * Disables the icon so that it cannot be clicked anymore
17
17
  */
18
18
  isDisabled?: boolean;
19
19
  /**
20
- * Function to be executed when the icon is clicked
20
+ * Function to be executed when the icon was clicked
21
21
  */
22
22
  onClick?: MouseEventHandler<HTMLSpanElement>;
23
+ /**
24
+ * Function to be executed when the icon was double-clicked
25
+ */
26
+ onDoubleClick?: MouseEventHandler<HTMLSpanElement>;
27
+ /**
28
+ * Function to be executed when a mouse button is pressed on the icon
29
+ */
30
+ onMouseDown?: MouseEventHandler<HTMLSpanElement>;
23
31
  /**
24
32
  * Size of the icon in pixel
25
33
  */
@@ -4,55 +4,58 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.default = void 0;
7
-
8
7
  var _clsx = _interopRequireDefault(require("clsx"));
9
-
10
8
  var _react = _interopRequireDefault(require("react"));
11
-
12
9
  var _Icon = require("./Icon.styles");
13
-
14
10
  var _utils = require("./utils");
15
-
16
11
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
17
-
18
- var Icon = function Icon(_ref) {
19
- var className = _ref.className,
20
- color = _ref.color,
21
- icons = _ref.icons,
22
- isDisabled = _ref.isDisabled,
23
- onClick = _ref.onClick,
24
- _ref$size = _ref.size,
25
- size = _ref$size === void 0 ? 15 : _ref$size,
26
- shouldStopPropagation = _ref.shouldStopPropagation;
27
-
28
- var handleClick = function handleClick(event) {
12
+ const Icon = _ref => {
13
+ let {
14
+ className,
15
+ color,
16
+ icons,
17
+ isDisabled,
18
+ onClick,
19
+ onDoubleClick,
20
+ onMouseDown,
21
+ size = 15,
22
+ shouldStopPropagation
23
+ } = _ref;
24
+ const handleClick = event => {
29
25
  if (shouldStopPropagation) {
30
26
  event.stopPropagation();
31
27
  }
32
-
33
28
  if (typeof onClick === 'function') {
34
29
  onClick(event);
35
30
  }
36
31
  };
37
-
38
- var maxStackSizeFactor = 1;
39
- icons.forEach(function (icon) {
40
- var stackSizeFactor = (0, _utils.getStackSizeFactor)(icon);
41
-
32
+ const handleDoubleClick = event => {
33
+ if (shouldStopPropagation) {
34
+ event.stopPropagation();
35
+ }
36
+ if (typeof onDoubleClick === 'function') {
37
+ onDoubleClick(event);
38
+ }
39
+ };
40
+ let maxStackSizeFactor = 1;
41
+ icons.forEach(icon => {
42
+ const stackSizeFactor = (0, _utils.getStackSizeFactor)(icon);
42
43
  if (stackSizeFactor && stackSizeFactor > maxStackSizeFactor) {
43
44
  maxStackSizeFactor = stackSizeFactor;
44
45
  }
45
46
  });
46
- var shouldUseStackedIcon = icons.length > 1;
47
- var wrapperClasses = (0, _clsx.default)('beta-chayns-icon', shouldUseStackedIcon ? 'fa-stack' : '', className);
47
+ const shouldUseStackedIcon = icons.length > 1;
48
+ const wrapperClasses = (0, _clsx.default)('beta-chayns-icon', shouldUseStackedIcon ? 'fa-stack' : '', className);
48
49
  return /*#__PURE__*/_react.default.createElement(_Icon.StyledIconWrapper, {
49
50
  className: wrapperClasses,
50
51
  isDisabled: isDisabled,
51
- onClick: handleClick,
52
+ onClick: typeof onClick === 'function' ? handleClick : undefined,
53
+ onDoubleClick: typeof onDoubleClick === 'function' ? handleDoubleClick : undefined,
54
+ onMouseDown: onMouseDown,
52
55
  size: size
53
- }, icons.map(function (icon) {
54
- var stackSizeFactor = (0, _utils.getStackSizeFactor)(icon);
55
- var iconClasses = (0, _clsx.default)(icon, className, {
56
+ }, icons.map(icon => {
57
+ const stackSizeFactor = (0, _utils.getStackSizeFactor)(icon);
58
+ const iconClasses = (0, _clsx.default)(icon, className, {
56
59
  'fa-stack-1x': shouldUseStackedIcon && stackSizeFactor === undefined
57
60
  });
58
61
  return /*#__PURE__*/_react.default.createElement(_Icon.StyledIcon, {
@@ -65,7 +68,6 @@ var Icon = function Icon(_ref) {
65
68
  });
66
69
  }));
67
70
  };
68
-
69
71
  Icon.displayName = 'Icon';
70
72
  var _default = Icon;
71
73
  exports.default = _default;
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/icon/Icon.tsx"],"names":["Icon","className","color","icons","isDisabled","onClick","size","shouldStopPropagation","handleClick","event","stopPropagation","maxStackSizeFactor","forEach","icon","stackSizeFactor","shouldUseStackedIcon","length","wrapperClasses","map","iconClasses","undefined","includes","displayName"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;;;AAiCA,IAAMA,IAAmB,GAAG,SAAtBA,IAAsB,OAQtB;AAAA,MAPFC,SAOE,QAPFA,SAOE;AAAA,MANFC,KAME,QANFA,KAME;AAAA,MALFC,KAKE,QALFA,KAKE;AAAA,MAJFC,UAIE,QAJFA,UAIE;AAAA,MAHFC,OAGE,QAHFA,OAGE;AAAA,uBAFFC,IAEE;AAAA,MAFFA,IAEE,0BAFK,EAEL;AAAA,MADFC,qBACE,QADFA,qBACE;;AACF,MAAMC,WAA6D,GAAG,SAAhEA,WAAgE,CAACC,KAAD,EAAW;AAC7E,QAAIF,qBAAJ,EAA2B;AACvBE,MAAAA,KAAK,CAACC,eAAN;AACH;;AAED,QAAI,OAAOL,OAAP,KAAmB,UAAvB,EAAmC;AAC/BA,MAAAA,OAAO,CAACI,KAAD,CAAP;AACH;AACJ,GARD;;AAUA,MAAIE,kBAAkB,GAAG,CAAzB;AAEAR,EAAAA,KAAK,CAACS,OAAN,CAAc,UAACC,IAAD,EAAU;AACpB,QAAMC,eAAe,GAAG,+BAAmBD,IAAnB,CAAxB;;AAEA,QAAIC,eAAe,IAAIA,eAAe,GAAGH,kBAAzC,EAA6D;AACzDA,MAAAA,kBAAkB,GAAGG,eAArB;AACH;AACJ,GAND;AAQA,MAAMC,oBAAoB,GAAGZ,KAAK,CAACa,MAAN,GAAe,CAA5C;AAEA,MAAMC,cAAc,GAAG,mBACnB,kBADmB,EAEnBF,oBAAoB,GAAG,UAAH,GAAgB,EAFjB,EAGnBd,SAHmB,CAAvB;AAMA,sBACI,6BAAC,uBAAD;AACI,IAAA,SAAS,EAAEgB,cADf;AAEI,IAAA,UAAU,EAAEb,UAFhB;AAGI,IAAA,OAAO,EAAEI,WAHb;AAII,IAAA,IAAI,EAAEF;AAJV,KAMKH,KAAK,CAACe,GAAN,CAAU,UAACL,IAAD,EAAU;AACjB,QAAMC,eAAe,GAAG,+BAAmBD,IAAnB,CAAxB;AAEA,QAAMM,WAAW,GAAG,mBAAKN,IAAL,EAAWZ,SAAX,EAAsB;AACtC,qBAAec,oBAAoB,IAAID,eAAe,KAAKM;AADrB,KAAtB,CAApB;AAIA,wBACI,6BAAC,gBAAD;AACI,MAAA,SAAS,EAAED,WADf;AAEI,MAAA,KAAK,EAAEN,IAAI,CAACQ,QAAL,CAAc,YAAd,IAA8B,OAA9B,GAAwCnB,KAFnD;AAGI,MAAA,QAAQ,EAAG,CAACY,eAAe,IAAI,CAApB,IAAyBH,kBAA1B,GAAgDL,IAH9D;AAII,MAAA,SAAS,EAAES,oBAJf;AAKI,MAAA,GAAG,EAAEF,IALT;AAMI,MAAA,IAAI,EAAEP;AANV,MADJ;AAUH,GAjBA,CANL,CADJ;AA2BH,CAhED;;AAkEAN,IAAI,CAACsB,WAAL,GAAmB,MAAnB;eAEetB,I","sourcesContent":["import clsx from 'clsx';\nimport React, { FC, MouseEventHandler } from 'react';\nimport { StyledIcon, StyledIconWrapper } from './Icon.styles';\nimport { getStackSizeFactor } from './utils';\n\nexport type IconProps = {\n /**\n * Additional class names for the root element\n */\n className?: string;\n /**\n * The color of the icon\n */\n color?: string;\n /**\n * The FontAwesome or tobit icons to render. Multiple icons are stacked.\n */\n icons: [string, ...string[]];\n /**\n * Disables the icon so that it cannot be clicked anymore\n */\n isDisabled?: boolean;\n /**\n * Function to be executed when the icon is clicked\n */\n onClick?: MouseEventHandler<HTMLSpanElement>;\n /**\n * Size of the icon in pixel\n */\n size?: number;\n /**\n * Stops event propagation on click\n */\n shouldStopPropagation?: boolean;\n};\n\nconst Icon: FC<IconProps> = ({\n className,\n color,\n icons,\n isDisabled,\n onClick,\n size = 15,\n shouldStopPropagation,\n}) => {\n const handleClick: MouseEventHandler<HTMLElement | HTMLSpanElement> = (event) => {\n if (shouldStopPropagation) {\n event.stopPropagation();\n }\n\n if (typeof onClick === 'function') {\n onClick(event);\n }\n };\n\n let maxStackSizeFactor = 1;\n\n icons.forEach((icon) => {\n const stackSizeFactor = getStackSizeFactor(icon);\n\n if (stackSizeFactor && stackSizeFactor > maxStackSizeFactor) {\n maxStackSizeFactor = stackSizeFactor;\n }\n });\n\n const shouldUseStackedIcon = icons.length > 1;\n\n const wrapperClasses = clsx(\n 'beta-chayns-icon',\n shouldUseStackedIcon ? 'fa-stack' : '',\n className\n );\n\n return (\n <StyledIconWrapper\n className={wrapperClasses}\n isDisabled={isDisabled}\n onClick={handleClick}\n size={size}\n >\n {icons.map((icon) => {\n const stackSizeFactor = getStackSizeFactor(icon);\n\n const iconClasses = clsx(icon, className, {\n 'fa-stack-1x': shouldUseStackedIcon && stackSizeFactor === undefined,\n });\n\n return (\n <StyledIcon\n className={iconClasses}\n color={icon.includes('fa-inverse') ? 'white' : color}\n fontSize={((stackSizeFactor || 1) / maxStackSizeFactor) * size}\n isStacked={shouldUseStackedIcon}\n key={icon}\n size={size}\n />\n );\n })}\n </StyledIconWrapper>\n );\n};\n\nIcon.displayName = 'Icon';\n\nexport default Icon;\n"],"file":"Icon.js"}
1
+ {"version":3,"file":"Icon.js","names":["_clsx","_interopRequireDefault","require","_react","_Icon","_utils","obj","__esModule","default","Icon","_ref","className","color","icons","isDisabled","onClick","onDoubleClick","onMouseDown","size","shouldStopPropagation","handleClick","event","stopPropagation","handleDoubleClick","maxStackSizeFactor","forEach","icon","stackSizeFactor","getStackSizeFactor","shouldUseStackedIcon","length","wrapperClasses","clsx","createElement","StyledIconWrapper","undefined","map","iconClasses","StyledIcon","includes","fontSize","isStacked","key","displayName","_default","exports"],"sources":["../../../src/components/icon/Icon.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React, { FC, MouseEventHandler } from 'react';\nimport { StyledIcon, StyledIconWrapper } from './Icon.styles';\nimport { getStackSizeFactor } from './utils';\n\nexport type IconProps = {\n /**\n * Additional class names for the root element\n */\n className?: string;\n /**\n * The color of the icon\n */\n color?: string;\n /**\n * The FontAwesome or tobit icons to render. Multiple icons are stacked.\n */\n icons: string[];\n /**\n * Disables the icon so that it cannot be clicked anymore\n */\n isDisabled?: boolean;\n /**\n * Function to be executed when the icon was clicked\n */\n onClick?: MouseEventHandler<HTMLSpanElement>;\n /**\n * Function to be executed when the icon was double-clicked\n */\n onDoubleClick?: MouseEventHandler<HTMLSpanElement>;\n /**\n * Function to be executed when a mouse button is pressed on the icon\n */\n onMouseDown?: MouseEventHandler<HTMLSpanElement>;\n /**\n * Size of the icon in pixel\n */\n size?: number;\n /**\n * Stops event propagation on click\n */\n shouldStopPropagation?: boolean;\n};\n\nconst Icon: FC<IconProps> = ({\n className,\n color,\n icons,\n isDisabled,\n onClick,\n onDoubleClick,\n onMouseDown,\n size = 15,\n shouldStopPropagation,\n}) => {\n const handleClick: MouseEventHandler<HTMLSpanElement> = (event) => {\n if (shouldStopPropagation) {\n event.stopPropagation();\n }\n\n if (typeof onClick === 'function') {\n onClick(event);\n }\n };\n\n const handleDoubleClick: MouseEventHandler<HTMLSpanElement> = (event) => {\n if (shouldStopPropagation) {\n event.stopPropagation();\n }\n\n if (typeof onDoubleClick === 'function') {\n onDoubleClick(event);\n }\n };\n\n let maxStackSizeFactor = 1;\n\n icons.forEach((icon) => {\n const stackSizeFactor = getStackSizeFactor(icon);\n\n if (stackSizeFactor && stackSizeFactor > maxStackSizeFactor) {\n maxStackSizeFactor = stackSizeFactor;\n }\n });\n\n const shouldUseStackedIcon = icons.length > 1;\n\n const wrapperClasses = clsx(\n 'beta-chayns-icon',\n shouldUseStackedIcon ? 'fa-stack' : '',\n className\n );\n\n return (\n <StyledIconWrapper\n className={wrapperClasses}\n isDisabled={isDisabled}\n onClick={typeof onClick === 'function' ? handleClick : undefined}\n onDoubleClick={typeof onDoubleClick === 'function' ? handleDoubleClick : undefined}\n onMouseDown={onMouseDown}\n size={size}\n >\n {icons.map((icon) => {\n const stackSizeFactor = getStackSizeFactor(icon);\n\n const iconClasses = clsx(icon, className, {\n 'fa-stack-1x': shouldUseStackedIcon && stackSizeFactor === undefined,\n });\n\n return (\n <StyledIcon\n className={iconClasses}\n color={icon.includes('fa-inverse') ? 'white' : color}\n fontSize={((stackSizeFactor || 1) / maxStackSizeFactor) * size}\n isStacked={shouldUseStackedIcon}\n key={icon}\n size={size}\n />\n );\n })}\n </StyledIconWrapper>\n );\n};\n\nIcon.displayName = 'Icon';\n\nexport default Icon;\n"],"mappings":"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"}
@@ -1,8 +1,15 @@
1
+ import type { MouseEventHandler } from 'react';
1
2
  import type { IconProps } from './Icon';
2
- declare type StyledIconWrapperProps = Omit<IconProps, 'icons'>;
3
+ type StyledIconWrapperProps = {
4
+ isDisabled?: boolean;
5
+ onClick?: MouseEventHandler<HTMLSpanElement>;
6
+ size: number;
7
+ };
3
8
  export declare const StyledIconWrapper: import("styled-components").StyledComponent<"span", any, StyledIconWrapperProps, never>;
4
9
  export declare const StyledIcon: import("styled-components").StyledComponent<"i", any, Omit<IconProps, "icons"> & {
5
10
  fontSize: number;
6
11
  isStacked?: boolean | undefined;
12
+ } & {
13
+ theme: import("../color-scheme-provider/ColorSchemeProvider").Theme;
7
14
  }, never>;
8
15
  export {};
@@ -1,54 +1,76 @@
1
1
  "use strict";
2
2
 
3
- function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
4
-
5
3
  Object.defineProperty(exports, "__esModule", {
6
4
  value: true
7
5
  });
8
- exports.StyledIcon = exports.StyledIconWrapper = void 0;
9
-
6
+ exports.StyledIconWrapper = exports.StyledIcon = void 0;
10
7
  var _styledComponents = _interopRequireWildcard(require("styled-components"));
11
-
12
- var _templateObject, _templateObject2, _templateObject3;
13
-
14
- function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
15
-
16
- function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
17
-
18
- function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
19
-
20
- var StyledIconWrapper = _styledComponents.default.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n align-items: center;\n cursor: ", ";\n display: inline-flex;\n height: ", ";\n justify-content: center;\n opacity: ", ";\n position: relative;\n transition: opacity 0.3s ease;\n width: ", ";\n"])), function (_ref) {
21
- var isDisabled = _ref.isDisabled,
22
- onClick = _ref.onClick;
23
- return typeof onClick === 'function' && !isDisabled ? 'pointer' : 'default';
24
- }, function (_ref2) {
25
- var size = _ref2.size;
26
- return "".concat(size, "px");
27
- }, function (_ref3) {
28
- var isDisabled = _ref3.isDisabled;
8
+ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
9
+ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
10
+ const StyledIconWrapper = _styledComponents.default.span`
11
+ align-items: center;
12
+ cursor: ${_ref => {
13
+ let {
14
+ isDisabled,
15
+ onClick
16
+ } = _ref;
17
+ return typeof onClick === 'function' && !isDisabled ? 'pointer' : 'inherit';
18
+ }};
19
+ display: inline-flex;
20
+ height: ${_ref2 => {
21
+ let {
22
+ size
23
+ } = _ref2;
24
+ return `${size}px`;
25
+ }};
26
+ justify-content: center;
27
+ opacity: ${_ref3 => {
28
+ let {
29
+ isDisabled
30
+ } = _ref3;
29
31
  return isDisabled ? 0.5 : 1;
30
- }, function (_ref4) {
31
- var size = _ref4.size;
32
- return "".concat(size, "px");
33
- });
34
-
32
+ }};
33
+ position: relative;
34
+ transition: opacity 0.3s ease;
35
+ width: ${_ref4 => {
36
+ let {
37
+ size
38
+ } = _ref4;
39
+ return `${size}px`;
40
+ }};
41
+ `;
35
42
  exports.StyledIconWrapper = StyledIconWrapper;
36
-
37
- var StyledIcon = _styledComponents.default.i(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n color: ", ";\n display: ", ";\n font-size: ", ";\n\n ", "\n"])), function (_ref5) {
38
- var color = _ref5.color,
39
- theme = _ref5.theme;
40
- return color || theme['headline'];
41
- }, function (_ref6) {
42
- var isStacked = _ref6.isStacked;
43
+ const StyledIcon = _styledComponents.default.i`
44
+ color: ${_ref5 => {
45
+ let {
46
+ color,
47
+ theme
48
+ } = _ref5;
49
+ return color || theme.headline;
50
+ }};
51
+ display: ${_ref6 => {
52
+ let {
53
+ isStacked
54
+ } = _ref6;
43
55
  return isStacked ? undefined : 'inline-flex';
44
- }, function (_ref7) {
45
- var fontSize = _ref7.fontSize;
46
- return "".concat(fontSize, "px");
47
- }, function (_ref8) {
48
- var fontSize = _ref8.fontSize,
49
- size = _ref8.size;
50
- return fontSize !== size && (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n top: 50%;\n transform: translateY(-50%);\n "])));
51
- });
56
+ }};
57
+ font-size: ${_ref7 => {
58
+ let {
59
+ fontSize
60
+ } = _ref7;
61
+ return `${fontSize}px`;
62
+ }};
52
63
 
64
+ ${_ref8 => {
65
+ let {
66
+ fontSize,
67
+ size
68
+ } = _ref8;
69
+ return fontSize !== size && (0, _styledComponents.css)`
70
+ top: 50%;
71
+ transform: translateY(-50%);
72
+ `;
73
+ }}
74
+ `;
53
75
  exports.StyledIcon = StyledIcon;
54
76
  //# sourceMappingURL=Icon.styles.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/icon/Icon.styles.ts"],"names":["StyledIconWrapper","styled","span","isDisabled","onClick","size","StyledIcon","i","color","theme","isStacked","undefined","fontSize","css"],"mappings":";;;;;;;;;AAAA;;;;;;;;;;AAUO,IAAMA,iBAAiB,GAAGC,0BAAOC,IAAV,oSAEhB;AAAA,MAAGC,UAAH,QAAGA,UAAH;AAAA,MAAeC,OAAf,QAAeA,OAAf;AAAA,SACN,OAAOA,OAAP,KAAmB,UAAnB,IAAiC,CAACD,UAAlC,GAA+C,SAA/C,GAA2D,SADrD;AAAA,CAFgB,EAKhB;AAAA,MAAGE,IAAH,SAAGA,IAAH;AAAA,mBAAiBA,IAAjB;AAAA,CALgB,EAOf;AAAA,MAAGF,UAAH,SAAGA,UAAH;AAAA,SAAqBA,UAAU,GAAG,GAAH,GAAS,CAAxC;AAAA,CAPe,EAUjB;AAAA,MAAGE,IAAH,SAAGA,IAAH;AAAA,mBAAiBA,IAAjB;AAAA,CAViB,CAAvB;;;;AAaA,IAAMC,UAAU,GAAGL,0BAAOM,CAAV,kJACV;AAAA,MAAGC,KAAH,SAAGA,KAAH;AAAA,MAAUC,KAAV,SAAUA,KAAV;AAAA,SAAsBD,KAAK,IAAIC,KAAK,CAAC,UAAD,CAApC;AAAA,CADU,EAER;AAAA,MAAGC,SAAH,SAAGA,SAAH;AAAA,SAAoBA,SAAS,GAAGC,SAAH,GAAe,aAA5C;AAAA,CAFQ,EAGN;AAAA,MAAGC,QAAH,SAAGA,QAAH;AAAA,mBAAqBA,QAArB;AAAA,CAHM,EAKjB;AAAA,MAAGA,QAAH,SAAGA,QAAH;AAAA,MAAaP,IAAb,SAAaA,IAAb;AAAA,SACEO,QAAQ,KAAKP,IAAb,QACAQ,qBADA,mJADF;AAAA,CALiB,CAAhB","sourcesContent":["import styled, { css } from 'styled-components';\nimport type { IconProps } from './Icon';\n\ntype StyledIconWrapperProps = Omit<IconProps, 'icons'>;\n\ntype StyledIconProps = Omit<IconProps, 'icons'> & {\n fontSize: number;\n isStacked?: boolean;\n};\n\nexport const StyledIconWrapper = styled.span<StyledIconWrapperProps>`\n align-items: center;\n cursor: ${({ isDisabled, onClick }) =>\n typeof onClick === 'function' && !isDisabled ? 'pointer' : 'default'};\n display: inline-flex;\n height: ${({ size }) => `${size}px`};\n justify-content: center;\n opacity: ${({ isDisabled }) => (isDisabled ? 0.5 : 1)};\n position: relative;\n transition: opacity 0.3s ease;\n width: ${({ size }) => `${size}px`};\n`;\n\nexport const StyledIcon = styled.i<StyledIconProps>`\n color: ${({ color, theme }) => color || theme['headline']};\n display: ${({ isStacked }) => (isStacked ? undefined : 'inline-flex')};\n font-size: ${({ fontSize }) => `${fontSize}px`};\n\n ${({ fontSize, size }) =>\n fontSize !== size &&\n css`\n top: 50%;\n transform: translateY(-50%);\n `}\n`;\n"],"file":"Icon.styles.js"}
1
+ {"version":3,"file":"Icon.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","StyledIconWrapper","styled","span","_ref","isDisabled","onClick","_ref2","size","_ref3","_ref4","exports","StyledIcon","i","_ref5","color","theme","headline","_ref6","isStacked","undefined","_ref7","fontSize","_ref8","css"],"sources":["../../../src/components/icon/Icon.styles.ts"],"sourcesContent":["import type { MouseEventHandler } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { IconProps } from './Icon';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledIconWrapperProps = {\n isDisabled?: boolean;\n onClick?: MouseEventHandler<HTMLSpanElement>;\n size: number;\n};\n\nexport const StyledIconWrapper = styled.span<StyledIconWrapperProps>`\n align-items: center;\n cursor: ${({ isDisabled, onClick }) =>\n typeof onClick === 'function' && !isDisabled ? 'pointer' : 'inherit'};\n display: inline-flex;\n height: ${({ size }) => `${size}px`};\n justify-content: center;\n opacity: ${({ isDisabled }) => (isDisabled ? 0.5 : 1)};\n position: relative;\n transition: opacity 0.3s ease;\n width: ${({ size }) => `${size}px`};\n`;\n\ntype StyledIconProps = Omit<IconProps, 'icons'> &\n WithTheme<{\n fontSize: number;\n isStacked?: boolean;\n }>;\n\nexport const StyledIcon = styled.i<StyledIconProps>`\n color: ${({ color, theme }: StyledIconProps) => color || theme.headline};\n display: ${({ isStacked }) => (isStacked ? undefined : 'inline-flex')};\n font-size: ${({ fontSize }) => `${fontSize}px`};\n\n ${({ fontSize, size }) =>\n fontSize !== size &&\n css`\n top: 50%;\n transform: translateY(-50%);\n `}\n`;\n"],"mappings":"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"}
@@ -4,13 +4,10 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.getStackSizeFactor = void 0;
7
-
8
- var getStackSizeFactor = function getStackSizeFactor(icon) {
7
+ const getStackSizeFactor = icon => {
9
8
  var _icon$match;
10
-
11
- var sizeFactorString = (_icon$match = icon.match(/fa-stack-([\d])x/)) === null || _icon$match === void 0 ? void 0 : _icon$match[1];
9
+ const sizeFactorString = (_icon$match = icon.match(/fa-stack-([\d])x/)) === null || _icon$match === void 0 ? void 0 : _icon$match[1];
12
10
  return typeof sizeFactorString === 'string' ? parseInt(sizeFactorString, 10) : undefined;
13
11
  };
14
-
15
12
  exports.getStackSizeFactor = getStackSizeFactor;
16
13
  //# sourceMappingURL=utils.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/icon/utils.ts"],"names":["getStackSizeFactor","icon","sizeFactorString","match","parseInt","undefined"],"mappings":";;;;;;;AAAO,IAAMA,kBAAkB,GAAG,SAArBA,kBAAqB,CAACC,IAAD,EAAkB;AAAA;;AAChD,MAAMC,gBAAgB,kBAAGD,IAAI,CAACE,KAAL,CAAW,kBAAX,CAAH,gDAAG,YAAiC,CAAjC,CAAzB;AAEA,SAAO,OAAOD,gBAAP,KAA4B,QAA5B,GAAuCE,QAAQ,CAACF,gBAAD,EAAmB,EAAnB,CAA/C,GAAwEG,SAA/E;AACH,CAJM","sourcesContent":["export const getStackSizeFactor = (icon: string) => {\n const sizeFactorString = icon.match(/fa-stack-([\\d])x/)?.[1];\n\n return typeof sizeFactorString === 'string' ? parseInt(sizeFactorString, 10) : undefined;\n};\n"],"file":"utils.js"}
1
+ {"version":3,"file":"utils.js","names":["getStackSizeFactor","icon","_icon$match","sizeFactorString","match","parseInt","undefined","exports"],"sources":["../../../src/components/icon/utils.ts"],"sourcesContent":["export const getStackSizeFactor = (icon: string) => {\n const sizeFactorString = icon.match(/fa-stack-([\\d])x/)?.[1];\n\n return typeof sizeFactorString === 'string' ? parseInt(sizeFactorString, 10) : undefined;\n};\n"],"mappings":";;;;;;AAAO,MAAMA,kBAAkB,GAAIC,IAAY,IAAK;EAAA,IAAAC,WAAA;EAChD,MAAMC,gBAAgB,IAAAD,WAAA,GAAGD,IAAI,CAACG,KAAK,CAAC,kBAAkB,CAAC,cAAAF,WAAA,uBAA9BA,WAAA,CAAiC,CAAC,CAAC;EAE5D,OAAO,OAAOC,gBAAgB,KAAK,QAAQ,GAAGE,QAAQ,CAACF,gBAAgB,EAAE,EAAE,CAAC,GAAGG,SAAS;AAC5F,CAAC;AAACC,OAAA,CAAAP,kBAAA,GAAAA,kBAAA"}
@@ -0,0 +1,37 @@
1
+ import { ChangeEventHandler, FC, FocusEventHandler, HTMLInputTypeAttribute, KeyboardEventHandler } from 'react';
2
+ export type InputProps = {
3
+ /**
4
+ * Disables the input so that it cannot be changed anymore
5
+ */
6
+ isDisabled?: boolean;
7
+ /**
8
+ * Function that is executed when the input field loses focus
9
+ */
10
+ onBlur?: FocusEventHandler<HTMLInputElement>;
11
+ /**
12
+ * Function that is executed when the text of the input changes
13
+ */
14
+ onChange?: ChangeEventHandler<HTMLInputElement>;
15
+ /**
16
+ * Function that is executed when the input field is focused
17
+ */
18
+ onFocus?: FocusEventHandler<HTMLInputElement>;
19
+ /**
20
+ * Function that is executed when a letter is pressed
21
+ */
22
+ onKeyDown?: KeyboardEventHandler<HTMLInputElement>;
23
+ /**
24
+ * Placeholder for the input field
25
+ */
26
+ placeholder?: string;
27
+ /**
28
+ * Input type set for input element (e.g. 'text', 'number' or 'password')
29
+ */
30
+ type?: HTMLInputTypeAttribute;
31
+ /**
32
+ * Value if the input field should be controlled
33
+ */
34
+ value?: string;
35
+ };
36
+ declare const Input: FC<InputProps>;
37
+ export default Input;
@@ -0,0 +1,75 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+ var _react = _interopRequireWildcard(require("react"));
8
+ var _Input = require("./Input.styles");
9
+ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
10
+ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
11
+ const Input = _ref => {
12
+ let {
13
+ isDisabled,
14
+ onBlur,
15
+ onChange,
16
+ onFocus,
17
+ onKeyDown,
18
+ placeholder,
19
+ type = 'text',
20
+ value
21
+ } = _ref;
22
+ const [hasValue, setHasValue] = (0, _react.useState)(typeof value === 'string' && value !== '');
23
+ const handleInputFieldChange = (0, _react.useCallback)(event => {
24
+ setHasValue(event.target.value !== '');
25
+ if (typeof onChange === 'function') {
26
+ onChange(event);
27
+ }
28
+ }, [onChange]);
29
+ (0, _react.useEffect)(() => {
30
+ if (typeof value === 'string') {
31
+ setHasValue(value !== '');
32
+ }
33
+ }, [value]);
34
+ const labelPosition = (0, _react.useMemo)(() => {
35
+ if (hasValue) {
36
+ return {
37
+ bottom: -8,
38
+ right: -6
39
+ };
40
+ }
41
+ return {
42
+ left: 0,
43
+ top: 0
44
+ };
45
+ }, [hasValue]);
46
+ return /*#__PURE__*/_react.default.createElement(_Input.StyledInput, {
47
+ className: "beta-chayns-input",
48
+ isDisabled: isDisabled
49
+ }, /*#__PURE__*/_react.default.createElement(_Input.StyledInputContent, null, /*#__PURE__*/_react.default.createElement(_Input.StyledInputField, {
50
+ disabled: isDisabled,
51
+ onBlur: onBlur,
52
+ onChange: handleInputFieldChange,
53
+ onFocus: onFocus,
54
+ onKeyDown: onKeyDown,
55
+ value: value,
56
+ type: type
57
+ }), /*#__PURE__*/_react.default.createElement(_Input.StyledMotionInputLabel, {
58
+ animate: {
59
+ scale: hasValue ? 0.6 : 1
60
+ },
61
+ layout: true,
62
+ style: {
63
+ ...labelPosition,
64
+ originX: 1,
65
+ originY: 1
66
+ },
67
+ transition: {
68
+ type: 'tween'
69
+ }
70
+ }, placeholder)));
71
+ };
72
+ Input.displayName = 'Input';
73
+ var _default = Input;
74
+ exports.default = _default;
75
+ //# sourceMappingURL=Input.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Input.js","names":["_react","_interopRequireWildcard","require","_Input","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","Input","_ref","isDisabled","onBlur","onChange","onFocus","onKeyDown","placeholder","type","value","hasValue","setHasValue","useState","handleInputFieldChange","useCallback","event","target","useEffect","labelPosition","useMemo","bottom","right","left","top","createElement","StyledInput","className","StyledInputContent","StyledInputField","disabled","StyledMotionInputLabel","animate","scale","layout","style","originX","originY","transition","displayName","_default","exports"],"sources":["../../../src/components/input/Input.tsx"],"sourcesContent":["import React, {\n ChangeEvent,\n ChangeEventHandler,\n FC,\n FocusEventHandler,\n HTMLInputTypeAttribute,\n KeyboardEventHandler,\n useCallback,\n useEffect,\n useMemo,\n useState,\n} from 'react';\nimport {\n StyledInput,\n StyledInputContent,\n StyledInputField,\n StyledMotionInputLabel,\n} from './Input.styles';\n\nexport type InputProps = {\n /**\n * Disables the input so that it cannot be changed anymore\n */\n isDisabled?: boolean;\n /**\n * Function that is executed when the input field loses focus\n */\n onBlur?: FocusEventHandler<HTMLInputElement>;\n /**\n * Function that is executed when the text of the input changes\n */\n onChange?: ChangeEventHandler<HTMLInputElement>;\n /**\n * Function that is executed when the input field is focused\n */\n onFocus?: FocusEventHandler<HTMLInputElement>;\n /**\n * Function that is executed when a letter is pressed\n */\n onKeyDown?: KeyboardEventHandler<HTMLInputElement>;\n /**\n * Placeholder for the input field\n */\n placeholder?: string;\n /**\n * Input type set for input element (e.g. 'text', 'number' or 'password')\n */\n type?: HTMLInputTypeAttribute;\n /**\n * Value if the input field should be controlled\n */\n value?: string;\n};\n\nconst Input: FC<InputProps> = ({\n isDisabled,\n onBlur,\n onChange,\n onFocus,\n onKeyDown,\n placeholder,\n type = 'text',\n value,\n}) => {\n const [hasValue, setHasValue] = useState(typeof value === 'string' && value !== '');\n\n const handleInputFieldChange = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n setHasValue(event.target.value !== '');\n\n if (typeof onChange === 'function') {\n onChange(event);\n }\n },\n [onChange]\n );\n\n useEffect(() => {\n if (typeof value === 'string') {\n setHasValue(value !== '');\n }\n }, [value]);\n\n const labelPosition = useMemo(() => {\n if (hasValue) {\n return { bottom: -8, right: -6 };\n }\n\n return { left: 0, top: 0 };\n }, [hasValue]);\n\n return (\n <StyledInput className=\"beta-chayns-input\" isDisabled={isDisabled}>\n <StyledInputContent>\n <StyledInputField\n disabled={isDisabled}\n onBlur={onBlur}\n onChange={handleInputFieldChange}\n onFocus={onFocus}\n onKeyDown={onKeyDown}\n value={value}\n type={type}\n />\n <StyledMotionInputLabel\n animate={{ scale: hasValue ? 0.6 : 1 }}\n layout\n style={{ ...labelPosition, originX: 1, originY: 1 }}\n transition={{ type: 'tween' }}\n >\n {placeholder}\n </StyledMotionInputLabel>\n </StyledInputContent>\n </StyledInput>\n );\n};\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"mappings":"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"}