@activecollab/components 1.0.406 → 1.0.408
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/Badge/Badge.js +7 -8
- package/dist/cjs/components/Badge/Badge.js.map +1 -1
- package/dist/cjs/components/Badge/Styles.js +11 -6
- package/dist/cjs/components/Badge/Styles.js.map +1 -1
- package/dist/cjs/components/Checkbox/CheckboxIcon.js +1 -1
- package/dist/cjs/components/Checkbox/CheckboxIcon.js.map +1 -1
- package/dist/cjs/components/CounterButton/CounterButton.js +5 -3
- package/dist/cjs/components/CounterButton/CounterButton.js.map +1 -1
- package/dist/cjs/components/CounterButton/Styles.js +10 -9
- package/dist/cjs/components/CounterButton/Styles.js.map +1 -1
- package/dist/cjs/components/Filter/StartMenu.js +7 -1
- package/dist/cjs/components/Filter/StartMenu.js.map +1 -1
- package/dist/esm/components/Badge/Badge.d.ts +2 -3
- package/dist/esm/components/Badge/Badge.d.ts.map +1 -1
- package/dist/esm/components/Badge/Badge.js +7 -8
- package/dist/esm/components/Badge/Badge.js.map +1 -1
- package/dist/esm/components/Badge/Styles.d.ts.map +1 -1
- package/dist/esm/components/Badge/Styles.js +11 -6
- package/dist/esm/components/Badge/Styles.js.map +1 -1
- package/dist/esm/components/Checkbox/CheckboxIcon.js +1 -1
- package/dist/esm/components/Checkbox/CheckboxIcon.js.map +1 -1
- package/dist/esm/components/CounterButton/CounterButton.d.ts.map +1 -1
- package/dist/esm/components/CounterButton/CounterButton.js +6 -4
- package/dist/esm/components/CounterButton/CounterButton.js.map +1 -1
- package/dist/esm/components/CounterButton/Styles.d.ts +1 -3
- package/dist/esm/components/CounterButton/Styles.d.ts.map +1 -1
- package/dist/esm/components/CounterButton/Styles.js +8 -7
- package/dist/esm/components/CounterButton/Styles.js.map +1 -1
- package/dist/esm/components/Filter/StartMenu.js +8 -2
- package/dist/esm/components/Filter/StartMenu.js.map +1 -1
- package/dist/index.js +89 -78
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +1 -1
- package/dist/index.min.js.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/CounterButton/Styles.ts"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/CounterButton/Styles.ts"],"names":[],"mappings":";AAQA,UAAU,wBAAwB;IAChC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,0BAA0B,oEAKtC,CAAC;AAIF,eAAO,MAAM,mBAAmB;;4FA8B/B,CAAC;AAIF,eAAO,MAAM,wBAAwB;;sEAWpC,CAAC;AAIF,eAAO,MAAM,wBAAwB;;SAgBpC,CAAC;AAIF,eAAO,MAAM,WAAW,wLAGvB,CAAC"}
|
|
@@ -3,6 +3,7 @@ import { Body2 } from "../Typography/Variants/Body2";
|
|
|
3
3
|
import { Button } from "../Button/Button";
|
|
4
4
|
import { BoxSizingStyle } from "../BoxSizingStyle";
|
|
5
5
|
import { FontStyle } from "../FontStyle";
|
|
6
|
+
import { Badge } from "../Badge";
|
|
6
7
|
export var StyledCounterButtonWrapper = styled.div.withConfig({
|
|
7
8
|
displayName: "Styles__StyledCounterButtonWrapper",
|
|
8
9
|
componentId: "sc-1ecrcba-0"
|
|
@@ -21,19 +22,14 @@ export var StyledCounterButton = styled(Button).withConfig({
|
|
|
21
22
|
return props.disabled && css(["pointer-events:none;opacity:0.5;"]);
|
|
22
23
|
});
|
|
23
24
|
StyledCounterButton.displayName = "StyledCounterButton";
|
|
24
|
-
export var StyledCounterButtonCounter = styled.div.withConfig({
|
|
25
|
-
displayName: "Styles__StyledCounterButtonCounter",
|
|
26
|
-
componentId: "sc-1ecrcba-2"
|
|
27
|
-
})(["border-radius:50%;background-color:var(--color-primary);color:var(--page-paper-main);line-height:15px;width:15px;font-weight:bold;font-size:10px;text-align:center;margin-left:4px;margin-right:-6px;"]);
|
|
28
|
-
StyledCounterButtonCounter.displayName = "StyledCounterButtonCounter";
|
|
29
25
|
export var StyledCounterButtonReset = styled(Button).withConfig({
|
|
30
26
|
displayName: "Styles__StyledCounterButtonReset",
|
|
31
|
-
componentId: "sc-1ecrcba-
|
|
27
|
+
componentId: "sc-1ecrcba-2"
|
|
32
28
|
})(["background-color:var(--color-primary-200);border-top-left-radius:0;border-bottom-left-radius:0;&:hover,&:focus-visible{background-color:var(--color-primary-300);border-top-left-radius:0;border-bottom-left-radius:0;}"]);
|
|
33
29
|
StyledCounterButtonReset.displayName = "StyledCounterButtonReset";
|
|
34
30
|
export var StyledCounterButtonLabel = styled(Body2).withConfig({
|
|
35
31
|
displayName: "Styles__StyledCounterButtonLabel",
|
|
36
|
-
componentId: "sc-1ecrcba-
|
|
32
|
+
componentId: "sc-1ecrcba-3"
|
|
37
33
|
})(["", " ", ":hover &&{", "}", ""], {
|
|
38
34
|
"pointerEvents": "none"
|
|
39
35
|
}, StyledCounterButton, function (props) {
|
|
@@ -42,4 +38,9 @@ export var StyledCounterButtonLabel = styled(Body2).withConfig({
|
|
|
42
38
|
return props.$active && css(["color:var(--color-primary);"]);
|
|
43
39
|
});
|
|
44
40
|
StyledCounterButtonLabel.displayName = "StyledCounterButtonLabel";
|
|
41
|
+
export var StyledBadge = styled(Badge).withConfig({
|
|
42
|
+
displayName: "Styles__StyledBadge",
|
|
43
|
+
componentId: "sc-1ecrcba-4"
|
|
44
|
+
})(["margin-left:4px;margin-right:-6px;"]);
|
|
45
|
+
StyledBadge.displayName = "StyledBadge";
|
|
45
46
|
//# sourceMappingURL=Styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.js","names":["styled","css","Body2","Button","BoxSizingStyle","FontStyle","StyledCounterButtonWrapper","div","displayName","StyledCounterButton","props","$active","disabled","$selected","
|
|
1
|
+
{"version":3,"file":"Styles.js","names":["styled","css","Body2","Button","BoxSizingStyle","FontStyle","Badge","StyledCounterButtonWrapper","div","displayName","StyledCounterButton","props","$active","disabled","$selected","StyledCounterButtonReset","StyledCounterButtonLabel","StyledBadge"],"sources":["../../../../src/components/CounterButton/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { Body2 } from \"../Typography/Variants/Body2\";\nimport { Button } from \"../Button/Button\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\nimport { Badge } from \"../Badge\";\n\ninterface StyledCounterButtonProps {\n $active?: boolean;\n $selected?: boolean;\n}\n\nexport const StyledCounterButtonWrapper = styled.div`\n ${tw`tw-flex`}\n ${FontStyle}\n ${BoxSizingStyle}\n width: fit-content;\n`;\n\nStyledCounterButtonWrapper.displayName = \"StyledCounterButtonWrapper\";\n\nexport const StyledCounterButton = styled(Button)<StyledCounterButtonProps>`\n ${(props) =>\n props.$active &&\n !props.disabled &&\n css`\n padding: 0 8px;\n\n svg {\n fill: var(--color-primary);\n }\n\n &:hover {\n background: var(--color-primary-300);\n }\n `}\n\n ${(props) =>\n props.$selected &&\n css`\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n background-color: var(--color-primary-200);\n `}\n\n ${(props) =>\n props.disabled &&\n css`\n pointer-events: none;\n opacity: 0.5;\n `}\n`;\n\nStyledCounterButton.displayName = \"StyledCounterButton\";\n\nexport const StyledCounterButtonReset = styled(Button)`\n background-color: var(--color-primary-200);\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n\n &:hover,\n &:focus-visible {\n background-color: var(--color-primary-300);\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n`;\n\nStyledCounterButtonReset.displayName = \"StyledCounterButtonReset\";\n\nexport const StyledCounterButtonLabel = styled(Body2)<{ $active?: boolean }>`\n ${tw`tw-pointer-events-none`}\n\n ${StyledCounterButton}:hover && {\n ${(props) =>\n !props.$active &&\n css`\n color: var(--color-theme-900);\n `}\n }\n\n ${(props) =>\n props.$active &&\n css`\n color: var(--color-primary);\n `}\n`;\n\nStyledCounterButtonLabel.displayName = \"StyledCounterButtonLabel\";\n\nexport const StyledBadge = styled(Badge)`\n margin-left: 4px;\n margin-right: -6px;\n`;\n\nStyledBadge.displayName = \"StyledBadge\";\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAE/C,SAASC,KAAK,QAAQ,8BAA8B;AACpD,SAASC,MAAM,QAAQ,kBAAkB;AACzC,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SAASC,SAAS,QAAQ,cAAc;AACxC,SAASC,KAAK,QAAQ,UAAU;AAOhC,OAAO,IAAMC,0BAA0B,GAAGP,MAAM,CAACQ,GAAG;EAAA;EAAA;AAAA,0CAC9C;EAAA;AAAQ,CAAC,EACXH,SAAS,EACTD,cAAc,CAEjB;AAEDG,0BAA0B,CAACE,WAAW,GAAG,4BAA4B;AAErE,OAAO,IAAMC,mBAAmB,GAAGV,MAAM,CAACG,MAAM,CAAC;EAAA;EAAA;AAAA,uBAC7C,UAACQ,KAAK;EAAA,OACNA,KAAK,CAACC,OAAO,IACb,CAACD,KAAK,CAACE,QAAQ,IACfZ,GAAG,gGAUF;AAAA,GAED,UAACU,KAAK;EAAA,OACNA,KAAK,CAACG,SAAS,IACfb,GAAG,uGAIF;AAAA,GAEC,UAACU,KAAK;EAAA,OACRA,KAAK,CAACE,QAAQ,IACdZ,GAAG,sCAGF;AAAA,EACJ;AAEDS,mBAAmB,CAACD,WAAW,GAAG,qBAAqB;AAEvD,OAAO,IAAMM,wBAAwB,GAAGf,MAAM,CAACG,MAAM,CAAC;EAAA;EAAA;AAAA,+NAWrD;AAEDY,wBAAwB,CAACN,WAAW,GAAG,0BAA0B;AAEjE,OAAO,IAAMO,wBAAwB,GAAGhB,MAAM,CAACE,KAAK,CAAC;EAAA;EAAA;AAAA,qCAC/C;EAAA;AAAuB,CAAC,EAE1BQ,mBAAmB,EACjB,UAACC,KAAK;EAAA,OACN,CAACA,KAAK,CAACC,OAAO,IACdX,GAAG,mCAEF;AAAA,GAGH,UAACU,KAAK;EAAA,OACNA,KAAK,CAACC,OAAO,IACbX,GAAG,iCAEF;AAAA,EACJ;AAEDe,wBAAwB,CAACP,WAAW,GAAG,0BAA0B;AAEjE,OAAO,IAAMQ,WAAW,GAAGjB,MAAM,CAACM,KAAK,CAAC;EAAA;EAAA;AAAA,0CAGvC;AAEDW,WAAW,CAACR,WAAW,GAAG,aAAa"}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import React, { useRef, useEffect } from "react";
|
|
2
2
|
import { ArrowRightIcon } from "../Icons";
|
|
3
|
-
import { StyledStartMenuTitle,
|
|
3
|
+
import { StyledStartMenuTitle, StyledStartMenuListItem, StyledStartMenuList, StyledStartMenuNoResults } from "./Styles";
|
|
4
4
|
import { useResizeObserver } from "../../utils";
|
|
5
|
+
import { Badge } from "../Badge";
|
|
5
6
|
export var StartMenu = function StartMenu(_ref) {
|
|
6
7
|
var data = _ref.data,
|
|
7
8
|
selected = _ref.selected,
|
|
@@ -27,6 +28,7 @@ export var StartMenu = function StartMenu(_ref) {
|
|
|
27
28
|
title = _ref2.title,
|
|
28
29
|
submenu = _ref2.submenu;
|
|
29
30
|
var count = 0;
|
|
31
|
+
// Popricati o ovome kada je selected[id] vrednost 0.
|
|
30
32
|
if (typeof selected[id] === "string") {
|
|
31
33
|
count += 1;
|
|
32
34
|
} else {
|
|
@@ -39,7 +41,11 @@ export var StartMenu = function StartMenu(_ref) {
|
|
|
39
41
|
onClick: function onClick() {
|
|
40
42
|
return onItemClick(id);
|
|
41
43
|
}
|
|
42
|
-
}, /*#__PURE__*/React.createElement(StyledStartMenuTitle, null, title), count > 0 ? /*#__PURE__*/React.createElement(
|
|
44
|
+
}, /*#__PURE__*/React.createElement(StyledStartMenuTitle, null, title), count > 0 ? /*#__PURE__*/React.createElement(Badge, {
|
|
45
|
+
dimension: 16,
|
|
46
|
+
value: count,
|
|
47
|
+
isStandalone: true
|
|
48
|
+
}) : null, /*#__PURE__*/React.createElement(ArrowRightIcon, null));
|
|
43
49
|
}
|
|
44
50
|
}) : emptyFilterText ? /*#__PURE__*/React.createElement(StyledStartMenuNoResults, null, emptyFilterText) : null, children));
|
|
45
51
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StartMenu.js","names":["React","useRef","useEffect","ArrowRightIcon","StyledStartMenuTitle","
|
|
1
|
+
{"version":3,"file":"StartMenu.js","names":["React","useRef","useEffect","ArrowRightIcon","StyledStartMenuTitle","StyledStartMenuListItem","StyledStartMenuList","StyledStartMenuNoResults","useResizeObserver","Badge","StartMenu","data","selected","onItemClick","style","onHeightChange","shouldRenderSubmenus","emptyFilterText","children","ref","dimensions","height","map","index","id","title","submenu","count","length"],"sources":["../../../../src/components/Filter/StartMenu.tsx"],"sourcesContent":["import React, { FC, useRef, useEffect, HTMLAttributes } from \"react\";\nimport { ArrowRightIcon } from \"../Icons\";\nimport { DataType, SelectedType } from \"./Filter\";\nimport {\n StyledStartMenuTitle,\n StyledStartMenuListItem,\n StyledStartMenuList,\n StyledStartMenuNoResults,\n} from \"./Styles\";\nimport { useResizeObserver } from \"../../utils\";\nimport { Badge } from \"../Badge\";\n\nexport interface StartMenuProps {\n data: Array<DataType>;\n selected: SelectedType;\n onItemClick: (id: number | string) => void;\n onHeightChange: (height: number) => void;\n shouldRenderSubmenus: boolean;\n emptyFilterText?: string;\n}\n\nexport const StartMenu: FC<StartMenuProps & HTMLAttributes<HTMLDivElement>> = ({\n data,\n selected,\n onItemClick,\n style,\n onHeightChange,\n shouldRenderSubmenus,\n emptyFilterText,\n children,\n}) => {\n const ref = useRef(null);\n const dimensions = useResizeObserver(ref);\n const height = dimensions?.height;\n\n useEffect(() => {\n if (height && height > 0) {\n onHeightChange(height);\n }\n }, [height, onHeightChange]);\n\n return (\n <div style={style} ref={ref}>\n <StyledStartMenuList>\n {shouldRenderSubmenus ? (\n data.map(({ id, title, submenu }, index: number) => {\n let count = 0;\n // Popricati o ovome kada je selected[id] vrednost 0.\n if (typeof selected[id] === \"string\") {\n count += 1;\n } else {\n count = selected[id]?.length;\n }\n\n if (submenu?.length > 1) {\n return (\n <StyledStartMenuListItem\n key={`filter-list-item-${index}`}\n onClick={() => onItemClick(id)}\n >\n <StyledStartMenuTitle>{title}</StyledStartMenuTitle>\n {count > 0 ? (\n <Badge dimension={16} value={count} isStandalone={true} />\n ) : null}\n <ArrowRightIcon />\n </StyledStartMenuListItem>\n );\n }\n })\n ) : emptyFilterText ? (\n <StyledStartMenuNoResults>{emptyFilterText}</StyledStartMenuNoResults>\n ) : null}\n {children}\n </StyledStartMenuList>\n </div>\n );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAQC,MAAM,EAAEC,SAAS,QAAwB,OAAO;AACpE,SAASC,cAAc,QAAQ,UAAU;AAEzC,SACEC,oBAAoB,EACpBC,uBAAuB,EACvBC,mBAAmB,EACnBC,wBAAwB,QACnB,UAAU;AACjB,SAASC,iBAAiB,QAAQ,aAAa;AAC/C,SAASC,KAAK,QAAQ,UAAU;AAWhC,OAAO,IAAMC,SAA8D,GAAG,SAAjEA,SAA8D,OASrE;EAAA,IARJC,IAAI,QAAJA,IAAI;IACJC,QAAQ,QAARA,QAAQ;IACRC,WAAW,QAAXA,WAAW;IACXC,KAAK,QAALA,KAAK;IACLC,cAAc,QAAdA,cAAc;IACdC,oBAAoB,QAApBA,oBAAoB;IACpBC,eAAe,QAAfA,eAAe;IACfC,QAAQ,QAARA,QAAQ;EAER,IAAMC,GAAG,GAAGlB,MAAM,CAAC,IAAI,CAAC;EACxB,IAAMmB,UAAU,GAAGZ,iBAAiB,CAACW,GAAG,CAAC;EACzC,IAAME,MAAM,GAAGD,UAAU,oBAAVA,UAAU,CAAEC,MAAM;EAEjCnB,SAAS,CAAC,YAAM;IACd,IAAImB,MAAM,IAAIA,MAAM,GAAG,CAAC,EAAE;MACxBN,cAAc,CAACM,MAAM,CAAC;IACxB;EACF,CAAC,EAAE,CAACA,MAAM,EAAEN,cAAc,CAAC,CAAC;EAE5B,oBACE;IAAK,KAAK,EAAED,KAAM;IAAC,GAAG,EAAEK;EAAI,gBAC1B,oBAAC,mBAAmB,QACjBH,oBAAoB,GACnBL,IAAI,CAACW,GAAG,CAAC,iBAAyBC,KAAa,EAAK;IAAA,IAAxCC,EAAE,SAAFA,EAAE;MAAEC,KAAK,SAALA,KAAK;MAAEC,OAAO,SAAPA,OAAO;IAC5B,IAAIC,KAAK,GAAG,CAAC;IACb;IACA,IAAI,OAAOf,QAAQ,CAACY,EAAE,CAAC,KAAK,QAAQ,EAAE;MACpCG,KAAK,IAAI,CAAC;IACZ,CAAC,MAAM;MAAA;MACLA,KAAK,mBAAGf,QAAQ,CAACY,EAAE,CAAC,qBAAZ,aAAcI,MAAM;IAC9B;IAEA,IAAI,CAAAF,OAAO,oBAAPA,OAAO,CAAEE,MAAM,IAAG,CAAC,EAAE;MACvB,oBACE,oBAAC,uBAAuB;QACtB,GAAG,wBAAsBL,KAAQ;QACjC,OAAO,EAAE;UAAA,OAAMV,WAAW,CAACW,EAAE,CAAC;QAAA;MAAC,gBAE/B,oBAAC,oBAAoB,QAAEC,KAAK,CAAwB,EACnDE,KAAK,GAAG,CAAC,gBACR,oBAAC,KAAK;QAAC,SAAS,EAAE,EAAG;QAAC,KAAK,EAAEA,KAAM;QAAC,YAAY,EAAE;MAAK,EAAG,GACxD,IAAI,eACR,oBAAC,cAAc,OAAG,CACM;IAE9B;EACF,CAAC,CAAC,GACAV,eAAe,gBACjB,oBAAC,wBAAwB,QAAEA,eAAe,CAA4B,GACpE,IAAI,EACPC,QAAQ,CACW,CAClB;AAEV,CAAC"}
|
package/dist/index.js
CHANGED
|
@@ -8194,6 +8194,76 @@
|
|
|
8194
8194
|
});
|
|
8195
8195
|
Body2.displayName = "Body2";
|
|
8196
8196
|
|
|
8197
|
+
var StyledBadge$1 = styled__default["default"].div.withConfig({
|
|
8198
|
+
displayName: "Styles__StyledBadge",
|
|
8199
|
+
componentId: "sc-6o8do5-0"
|
|
8200
|
+
})(["", " align-items:center;background-color:", ";border:", ";block-size:", ";border-radius:100%;color:var(--color-theme-100);display:flex;font-size:10px;font-weight:500;inline-size:", ";justify-content:center;padding:", ";pointer-events:none;position:absolute;z-index:1;", " ", " ", " ", " ", ""], FontStyle, function (props) {
|
|
8201
|
+
return !props.backgroundColor ? "var(--color-primary)" : props.backgroundColor;
|
|
8202
|
+
}, function (props) {
|
|
8203
|
+
return props.isStandalone ? "none" : "2px solid var(--page-paper-main)";
|
|
8204
|
+
}, function (props) {
|
|
8205
|
+
return props.dimension + "px";
|
|
8206
|
+
}, function (props) {
|
|
8207
|
+
return props.dimension + "px";
|
|
8208
|
+
}, function (props) {
|
|
8209
|
+
return props.value && (props.value > 99 ? "4px" : props.value < 100 && "2px");
|
|
8210
|
+
}, function (_ref) {
|
|
8211
|
+
var isStandalone = _ref.isStandalone;
|
|
8212
|
+
return isStandalone && styled.css(["position:static;z-index:0;"]);
|
|
8213
|
+
}, function (_ref2) {
|
|
8214
|
+
var position = _ref2.position;
|
|
8215
|
+
return position === "top-left" && styled.css(["inset-block-start:0;inset-inline-start:0;"]);
|
|
8216
|
+
}, function (_ref3) {
|
|
8217
|
+
var position = _ref3.position;
|
|
8218
|
+
return position === "top-right" && styled.css(["inset-block-start:0;inset-inline-end:0;"]);
|
|
8219
|
+
}, function (_ref4) {
|
|
8220
|
+
var position = _ref4.position;
|
|
8221
|
+
return position === "bottom-right" && styled.css(["inset-block-end:0;inset-inline-end:0;"]);
|
|
8222
|
+
}, function (_ref5) {
|
|
8223
|
+
var position = _ref5.position;
|
|
8224
|
+
return position === "bottom-left" && styled.css(["inset-block-end:0;inset-inline-start:0;"]);
|
|
8225
|
+
});
|
|
8226
|
+
|
|
8227
|
+
/**
|
|
8228
|
+
* @component Badge
|
|
8229
|
+
* @description
|
|
8230
|
+
* In some products, you might need to show a badge on the right corner of the avatar.
|
|
8231
|
+
* We call this a badge. Here's an example that shows if the user is online.
|
|
8232
|
+
*
|
|
8233
|
+
* @prop {position} - dictates the position of a badge.
|
|
8234
|
+
* @prop {dimension} - controls the size of a badge (width and height) in pixels.
|
|
8235
|
+
* @prop {backgroundColor} - background-color of a badge.
|
|
8236
|
+
*
|
|
8237
|
+
* @example
|
|
8238
|
+
* <IconButton variant="text gray" size="big">
|
|
8239
|
+
* <BellOffIcon />
|
|
8240
|
+
* <Badge position="top-right" backgroundColor="red" dimension={16} />
|
|
8241
|
+
* </IconButton>
|
|
8242
|
+
*
|
|
8243
|
+
* @see
|
|
8244
|
+
* https://system.activecollab.com/?path=/story/components-button-indicators-badge--badge
|
|
8245
|
+
*/
|
|
8246
|
+
var Badge = function Badge(_ref) {
|
|
8247
|
+
var _ref$dimension = _ref.dimension,
|
|
8248
|
+
dimension = _ref$dimension === void 0 ? 8 : _ref$dimension,
|
|
8249
|
+
className = _ref.className,
|
|
8250
|
+
_ref$position = _ref.position,
|
|
8251
|
+
position = _ref$position === void 0 ? "bottom-left" : _ref$position,
|
|
8252
|
+
backgroundColor = _ref.backgroundColor,
|
|
8253
|
+
value = _ref.value,
|
|
8254
|
+
_ref$isStandalone = _ref.isStandalone,
|
|
8255
|
+
isStandalone = _ref$isStandalone === void 0 ? false : _ref$isStandalone;
|
|
8256
|
+
return /*#__PURE__*/React__default["default"].createElement(StyledBadge$1, {
|
|
8257
|
+
className: classNames__default["default"]("c-badge", className),
|
|
8258
|
+
dimension: dimension,
|
|
8259
|
+
position: position,
|
|
8260
|
+
isStandalone: isStandalone,
|
|
8261
|
+
backgroundColor: backgroundColor,
|
|
8262
|
+
role: "status",
|
|
8263
|
+
value: value
|
|
8264
|
+
}, value && value > 100 ? 99 + "+" : value);
|
|
8265
|
+
};
|
|
8266
|
+
|
|
8197
8267
|
var StyledCounterButtonWrapper = styled__default["default"].div.withConfig({
|
|
8198
8268
|
displayName: "Styles__StyledCounterButtonWrapper",
|
|
8199
8269
|
componentId: "sc-1ecrcba-0"
|
|
@@ -8212,19 +8282,14 @@
|
|
|
8212
8282
|
return props.disabled && styled.css(["pointer-events:none;opacity:0.5;"]);
|
|
8213
8283
|
});
|
|
8214
8284
|
StyledCounterButton.displayName = "StyledCounterButton";
|
|
8215
|
-
var StyledCounterButtonCounter = styled__default["default"].div.withConfig({
|
|
8216
|
-
displayName: "Styles__StyledCounterButtonCounter",
|
|
8217
|
-
componentId: "sc-1ecrcba-2"
|
|
8218
|
-
})(["border-radius:50%;background-color:var(--color-primary);color:var(--page-paper-main);line-height:15px;width:15px;font-weight:bold;font-size:10px;text-align:center;margin-left:4px;margin-right:-6px;"]);
|
|
8219
|
-
StyledCounterButtonCounter.displayName = "StyledCounterButtonCounter";
|
|
8220
8285
|
var StyledCounterButtonReset = styled__default["default"](Button).withConfig({
|
|
8221
8286
|
displayName: "Styles__StyledCounterButtonReset",
|
|
8222
|
-
componentId: "sc-1ecrcba-
|
|
8287
|
+
componentId: "sc-1ecrcba-2"
|
|
8223
8288
|
})(["background-color:var(--color-primary-200);border-top-left-radius:0;border-bottom-left-radius:0;&:hover,&:focus-visible{background-color:var(--color-primary-300);border-top-left-radius:0;border-bottom-left-radius:0;}"]);
|
|
8224
8289
|
StyledCounterButtonReset.displayName = "StyledCounterButtonReset";
|
|
8225
8290
|
var StyledCounterButtonLabel = styled__default["default"](Body2).withConfig({
|
|
8226
8291
|
displayName: "Styles__StyledCounterButtonLabel",
|
|
8227
|
-
componentId: "sc-1ecrcba-
|
|
8292
|
+
componentId: "sc-1ecrcba-3"
|
|
8228
8293
|
})(["", " ", ":hover &&{", "}", ""], {
|
|
8229
8294
|
"pointerEvents": "none"
|
|
8230
8295
|
}, StyledCounterButton, function (props) {
|
|
@@ -8233,6 +8298,11 @@
|
|
|
8233
8298
|
return props.$active && styled.css(["color:var(--color-primary);"]);
|
|
8234
8299
|
});
|
|
8235
8300
|
StyledCounterButtonLabel.displayName = "StyledCounterButtonLabel";
|
|
8301
|
+
var StyledBadge = styled__default["default"](Badge).withConfig({
|
|
8302
|
+
displayName: "Styles__StyledBadge",
|
|
8303
|
+
componentId: "sc-1ecrcba-4"
|
|
8304
|
+
})(["margin-left:4px;margin-right:-6px;"]);
|
|
8305
|
+
StyledBadge.displayName = "StyledBadge";
|
|
8236
8306
|
|
|
8237
8307
|
var _excluded$18 = ["label", "icon", "active", "counter", "tooltipText", "onClearAll", "className", "disabled"];
|
|
8238
8308
|
var CounterButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
@@ -8267,9 +8337,11 @@
|
|
|
8267
8337
|
weight: "medium",
|
|
8268
8338
|
className: "c-counter-button__label",
|
|
8269
8339
|
$active: counter > 0 || active
|
|
8270
|
-
}, label), counter > 0 ? /*#__PURE__*/React__default["default"].createElement(
|
|
8271
|
-
|
|
8272
|
-
|
|
8340
|
+
}, label), counter > 0 ? /*#__PURE__*/React__default["default"].createElement(StyledBadge, {
|
|
8341
|
+
isStandalone: true,
|
|
8342
|
+
dimension: 16,
|
|
8343
|
+
value: counter
|
|
8344
|
+
}) : null), counter > 0 ? /*#__PURE__*/React__default["default"].createElement(Tooltip, {
|
|
8273
8345
|
title: "".concat(tooltipText),
|
|
8274
8346
|
popperTooltipClassName: "z-index-1300"
|
|
8275
8347
|
}, /*#__PURE__*/React__default["default"].createElement(StyledCounterButtonReset, {
|
|
@@ -10640,7 +10712,7 @@
|
|
|
10640
10712
|
} else {
|
|
10641
10713
|
mountRef.current = true;
|
|
10642
10714
|
}
|
|
10643
|
-
}, [
|
|
10715
|
+
}, []);
|
|
10644
10716
|
if (isIndeterminate) {
|
|
10645
10717
|
return /*#__PURE__*/React__default["default"].createElement("svg", {
|
|
10646
10718
|
width: "16",
|
|
@@ -16961,6 +17033,7 @@
|
|
|
16961
17033
|
title = _ref2.title,
|
|
16962
17034
|
submenu = _ref2.submenu;
|
|
16963
17035
|
var count = 0;
|
|
17036
|
+
// Popricati o ovome kada je selected[id] vrednost 0.
|
|
16964
17037
|
if (typeof selected[id] === "string") {
|
|
16965
17038
|
count += 1;
|
|
16966
17039
|
} else {
|
|
@@ -16973,7 +17046,11 @@
|
|
|
16973
17046
|
onClick: function onClick() {
|
|
16974
17047
|
return onItemClick(id);
|
|
16975
17048
|
}
|
|
16976
|
-
}, /*#__PURE__*/React__default["default"].createElement(StyledStartMenuTitle, null, title), count > 0 ? /*#__PURE__*/React__default["default"].createElement(
|
|
17049
|
+
}, /*#__PURE__*/React__default["default"].createElement(StyledStartMenuTitle, null, title), count > 0 ? /*#__PURE__*/React__default["default"].createElement(Badge, {
|
|
17050
|
+
dimension: 16,
|
|
17051
|
+
value: count,
|
|
17052
|
+
isStandalone: true
|
|
17053
|
+
}) : null, /*#__PURE__*/React__default["default"].createElement(ArrowRightIcon$1, null));
|
|
16977
17054
|
}
|
|
16978
17055
|
}) : emptyFilterText ? /*#__PURE__*/React__default["default"].createElement(StyledStartMenuNoResults, null, emptyFilterText) : null, children));
|
|
16979
17056
|
};
|
|
@@ -17372,72 +17449,6 @@
|
|
|
17372
17449
|
});
|
|
17373
17450
|
Wizard.displayName = "Wizard";
|
|
17374
17451
|
|
|
17375
|
-
var StyledBadge = styled__default["default"].div.withConfig({
|
|
17376
|
-
displayName: "Styles__StyledBadge",
|
|
17377
|
-
componentId: "sc-6o8do5-0"
|
|
17378
|
-
})(["", " align-items:center;background-color:", ";block-size:", ";border-radius:100%;border:2px solid var(--page-paper-main);color:var(--color-theme-100);display:flex;font-size:12px;font-weight:500;inline-size:", ";justify-content:center;padding:", ";pointer-events:none;position:absolute;z-index:1;", " ", " ", " ", ""], FontStyle, function (props) {
|
|
17379
|
-
return props.backgroundColor;
|
|
17380
|
-
}, function (props) {
|
|
17381
|
-
return props.dimension + "px";
|
|
17382
|
-
}, function (props) {
|
|
17383
|
-
return props.dimension + "px";
|
|
17384
|
-
}, function (props) {
|
|
17385
|
-
return props.value && (props.value > 99 ? "4px" : props.value < 100 && "2px");
|
|
17386
|
-
}, function (_ref) {
|
|
17387
|
-
var position = _ref.position;
|
|
17388
|
-
return position === "top-left" && styled.css(["inset-block-start:0;inset-inline-start:0;"]);
|
|
17389
|
-
}, function (_ref2) {
|
|
17390
|
-
var position = _ref2.position;
|
|
17391
|
-
return position === "top-right" && styled.css(["inset-block-start:0;inset-inline-end:0;"]);
|
|
17392
|
-
}, function (_ref3) {
|
|
17393
|
-
var position = _ref3.position;
|
|
17394
|
-
return position === "bottom-right" && styled.css(["inset-block-end:0;inset-inline-end:0;"]);
|
|
17395
|
-
}, function (_ref4) {
|
|
17396
|
-
var position = _ref4.position;
|
|
17397
|
-
return position === "bottom-left" && styled.css(["inset-block-end:0;inset-inline-start:0;"]);
|
|
17398
|
-
});
|
|
17399
|
-
|
|
17400
|
-
/**
|
|
17401
|
-
* @component Badge
|
|
17402
|
-
* @description
|
|
17403
|
-
* In some products, you might need to show a badge on the right corner of the avatar.
|
|
17404
|
-
* We call this a badge. Here's an example that shows if the user is online.
|
|
17405
|
-
*
|
|
17406
|
-
* @prop {position} - dictates the position of a badge.
|
|
17407
|
-
* @prop {dimension} - controls the size of a badge (width and height) in pixels.
|
|
17408
|
-
* @prop {backgroundColor} - background-color of a badge.
|
|
17409
|
-
* @prop {isVisible} - dictates if badge should be visible or not.
|
|
17410
|
-
*
|
|
17411
|
-
* @example
|
|
17412
|
-
* <IconButton variant="text gray" size="big">
|
|
17413
|
-
* <BellOffIcon />
|
|
17414
|
-
* <Badge position="top-right" backgroundColor="red" dimension={16} />
|
|
17415
|
-
* </IconButton>
|
|
17416
|
-
*
|
|
17417
|
-
* @see
|
|
17418
|
-
* https://system.activecollab.com/?path=/story/components-button-indicators-badge--badge
|
|
17419
|
-
*/
|
|
17420
|
-
var Badge = function Badge(_ref) {
|
|
17421
|
-
var _ref$dimension = _ref.dimension,
|
|
17422
|
-
dimension = _ref$dimension === void 0 ? 8 : _ref$dimension,
|
|
17423
|
-
className = _ref.className,
|
|
17424
|
-
_ref$position = _ref.position,
|
|
17425
|
-
position = _ref$position === void 0 ? "bottom-left" : _ref$position,
|
|
17426
|
-
_ref$backgroundColor = _ref.backgroundColor,
|
|
17427
|
-
backgroundColor = _ref$backgroundColor === void 0 ? "#40C37D" : _ref$backgroundColor,
|
|
17428
|
-
_ref$isVisible = _ref.isVisible,
|
|
17429
|
-
isVisible = _ref$isVisible === void 0 ? true : _ref$isVisible,
|
|
17430
|
-
value = _ref.value;
|
|
17431
|
-
return isVisible ? /*#__PURE__*/React__default["default"].createElement(StyledBadge, {
|
|
17432
|
-
className: classNames__default["default"]("c-badge", className),
|
|
17433
|
-
dimension: dimension,
|
|
17434
|
-
position: position,
|
|
17435
|
-
backgroundColor: backgroundColor,
|
|
17436
|
-
role: "status",
|
|
17437
|
-
value: value
|
|
17438
|
-
}, value && value > 100 ? 99 + "+" : value) : null;
|
|
17439
|
-
};
|
|
17440
|
-
|
|
17441
17452
|
var AvatarGroupsStyles = styled__default["default"].div.withConfig({
|
|
17442
17453
|
displayName: "Styles__AvatarGroupsStyles",
|
|
17443
17454
|
componentId: "sc-1padv46-0"
|