@elliemae/ds-notification-badge 3.35.0 → 3.36.0-next.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/NotificationBadge.js +0 -1
- package/dist/cjs/NotificationBadge.js.map +2 -2
- package/dist/cjs/style.js +3 -6
- package/dist/cjs/style.js.map +1 -1
- package/dist/esm/NotificationBadge.js +0 -1
- package/dist/esm/NotificationBadge.js.map +2 -2
- package/dist/esm/style.js +3 -6
- package/dist/esm/style.js.map +1 -1
- package/package.json +4 -4
|
@@ -89,7 +89,6 @@ const NotificationBadge = (props) => {
|
|
|
89
89
|
Component ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { "data-testid": "ds-notification-badge-component", innerRef: relatedComponentRef }) : null
|
|
90
90
|
] });
|
|
91
91
|
};
|
|
92
|
-
NotificationBadge.propTypes = import_react_desc_prop_types.NotificationBadgePropTypes;
|
|
93
92
|
NotificationBadge.displayName = "NotificationBadge";
|
|
94
93
|
const NotificationBadgeWithSchema = (0, import_ds_props_helpers.describe)(NotificationBadge);
|
|
95
94
|
NotificationBadgeWithSchema.propTypes = import_react_desc_prop_types.NotificationBadgePropTypes;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/NotificationBadge.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable complexity */\nimport type { WeakValidationMap } from 'react';\nimport React, { useRef } from 'react';\nimport {\n useMemoMergePropsWithDefault,\n useValidateTypescriptPropTypes,\n describe,\n useGetGlobalAttributes,\n} from '@elliemae/ds-props-helpers';\nimport type { DSNotificationBadgeT } from './react-desc-prop-types.js';\nimport { NotificationBadgePropTypes, defaultProps } from './react-desc-prop-types.js';\nimport { Wrapper, NumericBadge, DotBadge } from './style.js';\nimport { getSpaceLeft, getSpaceRight, getSpaceTop } from './helpers.js';\n\nconst getValueCharactersCount = (val: string | number | undefined): number => String(val).length;\n\nconst NotificationBadge: React.ComponentType<DSNotificationBadgeT.Props> = (props) => {\n const propsWithDefaults = useMemoMergePropsWithDefault<DSNotificationBadgeT.InternalProps>(props, defaultProps);\n useValidateTypescriptPropTypes<DSNotificationBadgeT.Props>(\n propsWithDefaults,\n NotificationBadgePropTypes,\n 'DSNotificationBadge',\n );\n const { type, color, value, size, disabled, position, Component, ...rest } = propsWithDefaults;\n const globalAttributes = useGetGlobalAttributes(rest);\n\n const [renderBadge, setRenderBadge] = React.useState(false);\n const isNumericBadge = type === 'number';\n const Badge = isNumericBadge ? NumericBadge : DotBadge;\n const relatedComponentRef = useRef<HTMLSpanElement>(null);\n const wrapperComponentRef = useRef<HTMLDivElement>(null);\n const badgeComponentRef = useRef<HTMLDivElement>(null);\n\n React.useLayoutEffect(() => {\n setRenderBadge(!!relatedComponentRef?.current || !Component);\n }, [relatedComponentRef, Component]);\n\n const relatedComputedStyle = relatedComponentRef?.current ? window.getComputedStyle(relatedComponentRef?.current) : 0;\n const spaceLeft = getSpaceLeft(relatedComputedStyle);\n const spaceRight = getSpaceRight(relatedComputedStyle);\n const spaceTop = getSpaceTop(relatedComputedStyle);\n\n const factor = isNumericBadge ? (size === 'l' ? 9 : 5) : size === 'l' ? 5 : 3;\n const top = relatedComponentRef?.current ? spaceTop - factor : 0;\n const left = relatedComponentRef?.current ? spaceLeft - factor : 0;\n const right = relatedComponentRef?.current ? spaceRight - factor : 0;\n\n return (\n <Wrapper {...globalAttributes} innerRef={wrapperComponentRef}>\n {renderBadge ? (\n <Badge\n data-related-component={!!Component ? 'true' : 'false'}\n innerRef={badgeComponentRef}\n data-position={position}\n data-type={type}\n data-testid=\"ds-notification-badge\"\n color={color}\n size={size}\n value={value}\n disabled={disabled}\n top={top}\n right={position === 'right' ? right : null}\n left={position === 'left' ? left : null}\n charCount={getValueCharactersCount(value)}\n >\n {type === 'number' ? value : null}\n </Badge>\n ) : null}\n {Component ? <Component data-testid=\"ds-notification-badge-component\" innerRef={relatedComponentRef} /> : null}\n </Wrapper>\n );\n};\n\nNotificationBadge.
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgDnB;AA9CJ,mBAA8B;AAC9B,8BAKO;AAEP,mCAAyD;AACzD,mBAAgD;AAChD,qBAAyD;AAEzD,MAAM,0BAA0B,CAAC,QAA6C,OAAO,GAAG,EAAE;AAE1F,MAAM,oBAAqE,CAAC,UAAU;AACpF,QAAM,wBAAoB,sDAAiE,OAAO,yCAAY;AAC9G;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACA,QAAM,EAAE,MAAM,OAAO,OAAO,MAAM,UAAU,UAAU,WAAW,GAAG,KAAK,IAAI;AAC7E,QAAM,uBAAmB,gDAAuB,IAAI;AAEpD,QAAM,CAAC,aAAa,cAAc,IAAI,aAAAA,QAAM,SAAS,KAAK;AAC1D,QAAM,iBAAiB,SAAS;AAChC,QAAM,QAAQ,iBAAiB,4BAAe;AAC9C,QAAM,0BAAsB,qBAAwB,IAAI;AACxD,QAAM,0BAAsB,qBAAuB,IAAI;AACvD,QAAM,wBAAoB,qBAAuB,IAAI;AAErD,eAAAA,QAAM,gBAAgB,MAAM;AAC1B,mBAAe,CAAC,CAAC,qBAAqB,WAAW,CAAC,SAAS;AAAA,EAC7D,GAAG,CAAC,qBAAqB,SAAS,CAAC;AAEnC,QAAM,uBAAuB,qBAAqB,UAAU,OAAO,iBAAiB,qBAAqB,OAAO,IAAI;AACpH,QAAM,gBAAY,6BAAa,oBAAoB;AACnD,QAAM,iBAAa,8BAAc,oBAAoB;AACrD,QAAM,eAAW,4BAAY,oBAAoB;AAEjD,QAAM,SAAS,iBAAkB,SAAS,MAAM,IAAI,IAAK,SAAS,MAAM,IAAI;AAC5E,QAAM,MAAM,qBAAqB,UAAU,WAAW,SAAS;AAC/D,QAAM,OAAO,qBAAqB,UAAU,YAAY,SAAS;AACjE,QAAM,QAAQ,qBAAqB,UAAU,aAAa,SAAS;AAEnE,SACE,6CAAC,wBAAS,GAAG,kBAAkB,UAAU,qBACtC;AAAA,kBACC;AAAA,MAAC;AAAA;AAAA,QACC,0BAAwB,CAAC,CAAC,YAAY,SAAS;AAAA,QAC/C,UAAU;AAAA,QACV,iBAAe;AAAA,QACf,aAAW;AAAA,QACX,eAAY;AAAA,QACZ;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,OAAO,aAAa,UAAU,QAAQ;AAAA,QACtC,MAAM,aAAa,SAAS,OAAO;AAAA,QACnC,WAAW,wBAAwB,KAAK;AAAA,QAEvC,mBAAS,WAAW,QAAQ;AAAA;AAAA,IAC/B,IACE;AAAA,IACH,YAAY,4CAAC,aAAU,eAAY,mCAAkC,UAAU,qBAAqB,IAAK;AAAA,KAC5G;AAEJ;AAEA,kBAAkB,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable complexity */\nimport type { WeakValidationMap } from 'react';\nimport React, { useRef } from 'react';\nimport {\n useMemoMergePropsWithDefault,\n useValidateTypescriptPropTypes,\n describe,\n useGetGlobalAttributes,\n} from '@elliemae/ds-props-helpers';\nimport type { DSNotificationBadgeT } from './react-desc-prop-types.js';\nimport { NotificationBadgePropTypes, defaultProps } from './react-desc-prop-types.js';\nimport { Wrapper, NumericBadge, DotBadge } from './style.js';\nimport { getSpaceLeft, getSpaceRight, getSpaceTop } from './helpers.js';\n\nconst getValueCharactersCount = (val: string | number | undefined): number => String(val).length;\n\nconst NotificationBadge: React.ComponentType<DSNotificationBadgeT.Props> = (props) => {\n const propsWithDefaults = useMemoMergePropsWithDefault<DSNotificationBadgeT.InternalProps>(props, defaultProps);\n useValidateTypescriptPropTypes<DSNotificationBadgeT.Props>(\n propsWithDefaults,\n NotificationBadgePropTypes,\n 'DSNotificationBadge',\n );\n const { type, color, value, size, disabled, position, Component, ...rest } = propsWithDefaults;\n const globalAttributes = useGetGlobalAttributes(rest);\n\n const [renderBadge, setRenderBadge] = React.useState(false);\n const isNumericBadge = type === 'number';\n const Badge = isNumericBadge ? NumericBadge : DotBadge;\n const relatedComponentRef = useRef<HTMLSpanElement>(null);\n const wrapperComponentRef = useRef<HTMLDivElement>(null);\n const badgeComponentRef = useRef<HTMLDivElement>(null);\n\n React.useLayoutEffect(() => {\n setRenderBadge(!!relatedComponentRef?.current || !Component);\n }, [relatedComponentRef, Component]);\n\n const relatedComputedStyle = relatedComponentRef?.current ? window.getComputedStyle(relatedComponentRef?.current) : 0;\n const spaceLeft = getSpaceLeft(relatedComputedStyle);\n const spaceRight = getSpaceRight(relatedComputedStyle);\n const spaceTop = getSpaceTop(relatedComputedStyle);\n\n const factor = isNumericBadge ? (size === 'l' ? 9 : 5) : size === 'l' ? 5 : 3;\n const top = relatedComponentRef?.current ? spaceTop - factor : 0;\n const left = relatedComponentRef?.current ? spaceLeft - factor : 0;\n const right = relatedComponentRef?.current ? spaceRight - factor : 0;\n\n return (\n <Wrapper {...globalAttributes} innerRef={wrapperComponentRef}>\n {renderBadge ? (\n <Badge\n data-related-component={!!Component ? 'true' : 'false'}\n innerRef={badgeComponentRef}\n data-position={position}\n data-type={type}\n data-testid=\"ds-notification-badge\"\n color={color}\n size={size}\n value={value}\n disabled={disabled}\n top={top}\n right={position === 'right' ? right : null}\n left={position === 'left' ? left : null}\n charCount={getValueCharactersCount(value)}\n >\n {type === 'number' ? value : null}\n </Badge>\n ) : null}\n {Component ? <Component data-testid=\"ds-notification-badge-component\" innerRef={relatedComponentRef} /> : null}\n </Wrapper>\n );\n};\n\nNotificationBadge.displayName = 'NotificationBadge';\nconst NotificationBadgeWithSchema = describe(NotificationBadge);\nNotificationBadgeWithSchema.propTypes = NotificationBadgePropTypes as WeakValidationMap<unknown>;\n\nexport { NotificationBadge, NotificationBadgeWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgDnB;AA9CJ,mBAA8B;AAC9B,8BAKO;AAEP,mCAAyD;AACzD,mBAAgD;AAChD,qBAAyD;AAEzD,MAAM,0BAA0B,CAAC,QAA6C,OAAO,GAAG,EAAE;AAE1F,MAAM,oBAAqE,CAAC,UAAU;AACpF,QAAM,wBAAoB,sDAAiE,OAAO,yCAAY;AAC9G;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACA,QAAM,EAAE,MAAM,OAAO,OAAO,MAAM,UAAU,UAAU,WAAW,GAAG,KAAK,IAAI;AAC7E,QAAM,uBAAmB,gDAAuB,IAAI;AAEpD,QAAM,CAAC,aAAa,cAAc,IAAI,aAAAA,QAAM,SAAS,KAAK;AAC1D,QAAM,iBAAiB,SAAS;AAChC,QAAM,QAAQ,iBAAiB,4BAAe;AAC9C,QAAM,0BAAsB,qBAAwB,IAAI;AACxD,QAAM,0BAAsB,qBAAuB,IAAI;AACvD,QAAM,wBAAoB,qBAAuB,IAAI;AAErD,eAAAA,QAAM,gBAAgB,MAAM;AAC1B,mBAAe,CAAC,CAAC,qBAAqB,WAAW,CAAC,SAAS;AAAA,EAC7D,GAAG,CAAC,qBAAqB,SAAS,CAAC;AAEnC,QAAM,uBAAuB,qBAAqB,UAAU,OAAO,iBAAiB,qBAAqB,OAAO,IAAI;AACpH,QAAM,gBAAY,6BAAa,oBAAoB;AACnD,QAAM,iBAAa,8BAAc,oBAAoB;AACrD,QAAM,eAAW,4BAAY,oBAAoB;AAEjD,QAAM,SAAS,iBAAkB,SAAS,MAAM,IAAI,IAAK,SAAS,MAAM,IAAI;AAC5E,QAAM,MAAM,qBAAqB,UAAU,WAAW,SAAS;AAC/D,QAAM,OAAO,qBAAqB,UAAU,YAAY,SAAS;AACjE,QAAM,QAAQ,qBAAqB,UAAU,aAAa,SAAS;AAEnE,SACE,6CAAC,wBAAS,GAAG,kBAAkB,UAAU,qBACtC;AAAA,kBACC;AAAA,MAAC;AAAA;AAAA,QACC,0BAAwB,CAAC,CAAC,YAAY,SAAS;AAAA,QAC/C,UAAU;AAAA,QACV,iBAAe;AAAA,QACf,aAAW;AAAA,QACX,eAAY;AAAA,QACZ;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,OAAO,aAAa,UAAU,QAAQ;AAAA,QACtC,MAAM,aAAa,SAAS,OAAO;AAAA,QACnC,WAAW,wBAAwB,KAAK;AAAA,QAEvC,mBAAS,WAAW,QAAQ;AAAA;AAAA,IAC/B,IACE;AAAA,IACH,YAAY,4CAAC,aAAU,eAAY,mCAAkC,UAAU,qBAAqB,IAAK;AAAA,KAC5G;AAEJ;AAEA,kBAAkB,cAAc;AAChC,MAAM,kCAA8B,kCAAS,iBAAiB;AAC9D,4BAA4B,YAAY;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
package/dist/cjs/style.js
CHANGED
|
@@ -42,12 +42,9 @@ const magicNumbersWidth = {
|
|
|
42
42
|
d: 15
|
|
43
43
|
};
|
|
44
44
|
const getWidth = (size, charCount) => {
|
|
45
|
-
if (size === "l" && charCount > 1)
|
|
46
|
-
|
|
47
|
-
if (size === "
|
|
48
|
-
return magicNumbersWidth.l1;
|
|
49
|
-
if (size === "s" && charCount > 1)
|
|
50
|
-
return magicNumbersWidth.l1;
|
|
45
|
+
if (size === "l" && charCount > 1) return magicNumbersWidth.l;
|
|
46
|
+
if (size === "l" && charCount <= 1) return magicNumbersWidth.l1;
|
|
47
|
+
if (size === "s" && charCount > 1) return magicNumbersWidth.l1;
|
|
51
48
|
return magicNumbersWidth.d;
|
|
52
49
|
};
|
|
53
50
|
const Wrapper = import_ds_system.styled.div`
|
package/dist/cjs/style.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/style.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
4
|
"sourcesContent": ["import { styled } from '@elliemae/ds-system';\nimport type { Theme } from '@elliemae/pui-theme';\n\ninterface NumericBadgeT {\n top: number;\n left: number;\n right: number;\n charCount: number;\n size?: string;\n value?: number | string;\n disabled?: boolean;\n color?: string;\n theme: Theme;\n ['data-related-component']: 'true' | 'false';\n}\n\nconst magicNumbersWidth = {\n l: 30,\n l1: 21,\n d: 15,\n};\n\nconst getWidth = (size: string | undefined, charCount: number) => {\n if (size === 'l' && charCount > 1) return magicNumbersWidth.l;\n if (size === 'l' && charCount <= 1) return magicNumbersWidth.l1;\n if (size === 's' && charCount > 1) return magicNumbersWidth.l1;\n return magicNumbersWidth.d;\n};\n\nexport const Wrapper = styled.div`\n width: fit-content;\n height: fit-content;\n position: relative;\n z-index: 0;\n`;\n\nexport const GenericBadge = styled.span<NumericBadgeT>`\n position: ${(props) => (props['data-related-component'] === 'true' ? 'absolute' : 'inherit')};\n display: flex;\n justify-content: center;\n align-items: center;\n line-height: 1;\n top: ${({ top }: NumericBadgeT) => `${top}px`};\n right: ${({ right }: NumericBadgeT) => (right ? `${right}px` : `unset`)};\n left: ${({ left }: NumericBadgeT) => (left ? `${left}px` : `unset`)};\n z-index: ${({ theme }) => theme.zIndex.tooltip};\n`;\n\nexport const NumericBadge = styled(GenericBadge)<NumericBadgeT>`\n display: flex;\n justify-content: center;\n align-items: center;\n width: fit-content;\n white-space: nowrap;\n color: #fff;\n padding: ${({ charCount }: NumericBadgeT) => (charCount > 1 ? '0 5px' : '0')};\n background-color: ${({ disabled, color, theme }: NumericBadgeT) =>\n disabled ? theme.colors.neutral['500'] : color || theme.colors.danger['900']};\n border-radius: ${({ charCount }: NumericBadgeT) => (charCount > 1 ? '10px' : '50%')};\n font-size: ${({ size }: NumericBadgeT) => (size === 'l' ? '16px' : '12px')};\n font-weight: ${({ size }: NumericBadgeT) => (size === 'l' ? '400' : '600')};\n height: ${({ size }: NumericBadgeT) => (size === 'l' ? '21px' : '15px')};\n min-width: ${({ size, charCount }: NumericBadgeT) => `${getWidth(size, charCount)}px`};\n`;\n\nexport const DotBadge = styled(GenericBadge)<NumericBadgeT>`\n background-color: ${({ disabled, theme, color }: NumericBadgeT) =>\n disabled ? theme.colors.neutral['500'] : color || theme.colors.brand[500]};\n width: ${({ size }: NumericBadgeT) => (size === 'l' ? '15px' : '10px')};\n height: ${({ size }: NumericBadgeT) => (size === 'l' ? '15px' : '10px')};\n border-radius: 100%;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AAgBvB,MAAM,oBAAoB;AAAA,EACxB,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,GAAG;AACL;AAEA,MAAM,WAAW,CAAC,MAA0B,cAAsB;AAChE,MAAI,SAAS,OAAO,YAAY
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AAgBvB,MAAM,oBAAoB;AAAA,EACxB,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,GAAG;AACL;AAEA,MAAM,WAAW,CAAC,MAA0B,cAAsB;AAChE,MAAI,SAAS,OAAO,YAAY,EAAG,QAAO,kBAAkB;AAC5D,MAAI,SAAS,OAAO,aAAa,EAAG,QAAO,kBAAkB;AAC7D,MAAI,SAAS,OAAO,YAAY,EAAG,QAAO,kBAAkB;AAC5D,SAAO,kBAAkB;AAC3B;AAEO,MAAM,UAAU,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOvB,MAAM,eAAe,wBAAO;AAAA,cACrB,CAAC,UAAW,MAAM,wBAAwB,MAAM,SAAS,aAAa,SAAU;AAAA;AAAA;AAAA;AAAA;AAAA,SAKrF,CAAC,EAAE,IAAI,MAAqB,GAAG,GAAG,IAAI;AAAA,WACpC,CAAC,EAAE,MAAM,MAAsB,QAAQ,GAAG,KAAK,OAAO,OAAQ;AAAA,UAC/D,CAAC,EAAE,KAAK,MAAsB,OAAO,GAAG,IAAI,OAAO,OAAQ;AAAA,aACxD,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,OAAO;AAAA;AAGzC,MAAM,mBAAe,yBAAO,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAOlC,CAAC,EAAE,UAAU,MAAsB,YAAY,IAAI,UAAU,GAAI;AAAA,sBACxD,CAAC,EAAE,UAAU,OAAO,MAAM,MAC5C,WAAW,MAAM,OAAO,QAAQ,KAAK,IAAI,SAAS,MAAM,OAAO,OAAO,KAAK,CAAC;AAAA,mBAC7D,CAAC,EAAE,UAAU,MAAsB,YAAY,IAAI,SAAS,KAAM;AAAA,eACtE,CAAC,EAAE,KAAK,MAAsB,SAAS,MAAM,SAAS,MAAO;AAAA,iBAC3D,CAAC,EAAE,KAAK,MAAsB,SAAS,MAAM,QAAQ,KAAM;AAAA,YAChE,CAAC,EAAE,KAAK,MAAsB,SAAS,MAAM,SAAS,MAAO;AAAA,eAC1D,CAAC,EAAE,MAAM,UAAU,MAAqB,GAAG,SAAS,MAAM,SAAS,CAAC,IAAI;AAAA;AAGhF,MAAM,eAAW,yBAAO,YAAY;AAAA,sBACrB,CAAC,EAAE,UAAU,OAAO,MAAM,MAC5C,WAAW,MAAM,OAAO,QAAQ,KAAK,IAAI,SAAS,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA,WAClE,CAAC,EAAE,KAAK,MAAsB,SAAS,MAAM,SAAS,MAAO;AAAA,YAC5D,CAAC,EAAE,KAAK,MAAsB,SAAS,MAAM,SAAS,MAAO;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -60,7 +60,6 @@ const NotificationBadge = (props) => {
|
|
|
60
60
|
Component ? /* @__PURE__ */ jsx(Component, { "data-testid": "ds-notification-badge-component", innerRef: relatedComponentRef }) : null
|
|
61
61
|
] });
|
|
62
62
|
};
|
|
63
|
-
NotificationBadge.propTypes = NotificationBadgePropTypes;
|
|
64
63
|
NotificationBadge.displayName = "NotificationBadge";
|
|
65
64
|
const NotificationBadgeWithSchema = describe(NotificationBadge);
|
|
66
65
|
NotificationBadgeWithSchema.propTypes = NotificationBadgePropTypes;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/NotificationBadge.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport type { WeakValidationMap } from 'react';\nimport React, { useRef } from 'react';\nimport {\n useMemoMergePropsWithDefault,\n useValidateTypescriptPropTypes,\n describe,\n useGetGlobalAttributes,\n} from '@elliemae/ds-props-helpers';\nimport type { DSNotificationBadgeT } from './react-desc-prop-types.js';\nimport { NotificationBadgePropTypes, defaultProps } from './react-desc-prop-types.js';\nimport { Wrapper, NumericBadge, DotBadge } from './style.js';\nimport { getSpaceLeft, getSpaceRight, getSpaceTop } from './helpers.js';\n\nconst getValueCharactersCount = (val: string | number | undefined): number => String(val).length;\n\nconst NotificationBadge: React.ComponentType<DSNotificationBadgeT.Props> = (props) => {\n const propsWithDefaults = useMemoMergePropsWithDefault<DSNotificationBadgeT.InternalProps>(props, defaultProps);\n useValidateTypescriptPropTypes<DSNotificationBadgeT.Props>(\n propsWithDefaults,\n NotificationBadgePropTypes,\n 'DSNotificationBadge',\n );\n const { type, color, value, size, disabled, position, Component, ...rest } = propsWithDefaults;\n const globalAttributes = useGetGlobalAttributes(rest);\n\n const [renderBadge, setRenderBadge] = React.useState(false);\n const isNumericBadge = type === 'number';\n const Badge = isNumericBadge ? NumericBadge : DotBadge;\n const relatedComponentRef = useRef<HTMLSpanElement>(null);\n const wrapperComponentRef = useRef<HTMLDivElement>(null);\n const badgeComponentRef = useRef<HTMLDivElement>(null);\n\n React.useLayoutEffect(() => {\n setRenderBadge(!!relatedComponentRef?.current || !Component);\n }, [relatedComponentRef, Component]);\n\n const relatedComputedStyle = relatedComponentRef?.current ? window.getComputedStyle(relatedComponentRef?.current) : 0;\n const spaceLeft = getSpaceLeft(relatedComputedStyle);\n const spaceRight = getSpaceRight(relatedComputedStyle);\n const spaceTop = getSpaceTop(relatedComputedStyle);\n\n const factor = isNumericBadge ? (size === 'l' ? 9 : 5) : size === 'l' ? 5 : 3;\n const top = relatedComponentRef?.current ? spaceTop - factor : 0;\n const left = relatedComponentRef?.current ? spaceLeft - factor : 0;\n const right = relatedComponentRef?.current ? spaceRight - factor : 0;\n\n return (\n <Wrapper {...globalAttributes} innerRef={wrapperComponentRef}>\n {renderBadge ? (\n <Badge\n data-related-component={!!Component ? 'true' : 'false'}\n innerRef={badgeComponentRef}\n data-position={position}\n data-type={type}\n data-testid=\"ds-notification-badge\"\n color={color}\n size={size}\n value={value}\n disabled={disabled}\n top={top}\n right={position === 'right' ? right : null}\n left={position === 'left' ? left : null}\n charCount={getValueCharactersCount(value)}\n >\n {type === 'number' ? value : null}\n </Badge>\n ) : null}\n {Component ? <Component data-testid=\"ds-notification-badge-component\" innerRef={relatedComponentRef} /> : null}\n </Wrapper>\n );\n};\n\nNotificationBadge.
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACgDnB,SAEI,KAFJ;AA9CJ,OAAOA,UAAS,cAAc;AAC9B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,4BAA4B,oBAAoB;AACzD,SAAS,SAAS,cAAc,gBAAgB;AAChD,SAAS,cAAc,eAAe,mBAAmB;AAEzD,MAAM,0BAA0B,CAAC,QAA6C,OAAO,GAAG,EAAE;AAE1F,MAAM,oBAAqE,CAAC,UAAU;AACpF,QAAM,oBAAoB,6BAAiE,OAAO,YAAY;AAC9G;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACA,QAAM,EAAE,MAAM,OAAO,OAAO,MAAM,UAAU,UAAU,WAAW,GAAG,KAAK,IAAI;AAC7E,QAAM,mBAAmB,uBAAuB,IAAI;AAEpD,QAAM,CAAC,aAAa,cAAc,IAAIA,OAAM,SAAS,KAAK;AAC1D,QAAM,iBAAiB,SAAS;AAChC,QAAM,QAAQ,iBAAiB,eAAe;AAC9C,QAAM,sBAAsB,OAAwB,IAAI;AACxD,QAAM,sBAAsB,OAAuB,IAAI;AACvD,QAAM,oBAAoB,OAAuB,IAAI;AAErD,EAAAA,OAAM,gBAAgB,MAAM;AAC1B,mBAAe,CAAC,CAAC,qBAAqB,WAAW,CAAC,SAAS;AAAA,EAC7D,GAAG,CAAC,qBAAqB,SAAS,CAAC;AAEnC,QAAM,uBAAuB,qBAAqB,UAAU,OAAO,iBAAiB,qBAAqB,OAAO,IAAI;AACpH,QAAM,YAAY,aAAa,oBAAoB;AACnD,QAAM,aAAa,cAAc,oBAAoB;AACrD,QAAM,WAAW,YAAY,oBAAoB;AAEjD,QAAM,SAAS,iBAAkB,SAAS,MAAM,IAAI,IAAK,SAAS,MAAM,IAAI;AAC5E,QAAM,MAAM,qBAAqB,UAAU,WAAW,SAAS;AAC/D,QAAM,OAAO,qBAAqB,UAAU,YAAY,SAAS;AACjE,QAAM,QAAQ,qBAAqB,UAAU,aAAa,SAAS;AAEnE,SACE,qBAAC,WAAS,GAAG,kBAAkB,UAAU,qBACtC;AAAA,kBACC;AAAA,MAAC;AAAA;AAAA,QACC,0BAAwB,CAAC,CAAC,YAAY,SAAS;AAAA,QAC/C,UAAU;AAAA,QACV,iBAAe;AAAA,QACf,aAAW;AAAA,QACX,eAAY;AAAA,QACZ;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,OAAO,aAAa,UAAU,QAAQ;AAAA,QACtC,MAAM,aAAa,SAAS,OAAO;AAAA,QACnC,WAAW,wBAAwB,KAAK;AAAA,QAEvC,mBAAS,WAAW,QAAQ;AAAA;AAAA,IAC/B,IACE;AAAA,IACH,YAAY,oBAAC,aAAU,eAAY,mCAAkC,UAAU,qBAAqB,IAAK;AAAA,KAC5G;AAEJ;AAEA,kBAAkB,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport type { WeakValidationMap } from 'react';\nimport React, { useRef } from 'react';\nimport {\n useMemoMergePropsWithDefault,\n useValidateTypescriptPropTypes,\n describe,\n useGetGlobalAttributes,\n} from '@elliemae/ds-props-helpers';\nimport type { DSNotificationBadgeT } from './react-desc-prop-types.js';\nimport { NotificationBadgePropTypes, defaultProps } from './react-desc-prop-types.js';\nimport { Wrapper, NumericBadge, DotBadge } from './style.js';\nimport { getSpaceLeft, getSpaceRight, getSpaceTop } from './helpers.js';\n\nconst getValueCharactersCount = (val: string | number | undefined): number => String(val).length;\n\nconst NotificationBadge: React.ComponentType<DSNotificationBadgeT.Props> = (props) => {\n const propsWithDefaults = useMemoMergePropsWithDefault<DSNotificationBadgeT.InternalProps>(props, defaultProps);\n useValidateTypescriptPropTypes<DSNotificationBadgeT.Props>(\n propsWithDefaults,\n NotificationBadgePropTypes,\n 'DSNotificationBadge',\n );\n const { type, color, value, size, disabled, position, Component, ...rest } = propsWithDefaults;\n const globalAttributes = useGetGlobalAttributes(rest);\n\n const [renderBadge, setRenderBadge] = React.useState(false);\n const isNumericBadge = type === 'number';\n const Badge = isNumericBadge ? NumericBadge : DotBadge;\n const relatedComponentRef = useRef<HTMLSpanElement>(null);\n const wrapperComponentRef = useRef<HTMLDivElement>(null);\n const badgeComponentRef = useRef<HTMLDivElement>(null);\n\n React.useLayoutEffect(() => {\n setRenderBadge(!!relatedComponentRef?.current || !Component);\n }, [relatedComponentRef, Component]);\n\n const relatedComputedStyle = relatedComponentRef?.current ? window.getComputedStyle(relatedComponentRef?.current) : 0;\n const spaceLeft = getSpaceLeft(relatedComputedStyle);\n const spaceRight = getSpaceRight(relatedComputedStyle);\n const spaceTop = getSpaceTop(relatedComputedStyle);\n\n const factor = isNumericBadge ? (size === 'l' ? 9 : 5) : size === 'l' ? 5 : 3;\n const top = relatedComponentRef?.current ? spaceTop - factor : 0;\n const left = relatedComponentRef?.current ? spaceLeft - factor : 0;\n const right = relatedComponentRef?.current ? spaceRight - factor : 0;\n\n return (\n <Wrapper {...globalAttributes} innerRef={wrapperComponentRef}>\n {renderBadge ? (\n <Badge\n data-related-component={!!Component ? 'true' : 'false'}\n innerRef={badgeComponentRef}\n data-position={position}\n data-type={type}\n data-testid=\"ds-notification-badge\"\n color={color}\n size={size}\n value={value}\n disabled={disabled}\n top={top}\n right={position === 'right' ? right : null}\n left={position === 'left' ? left : null}\n charCount={getValueCharactersCount(value)}\n >\n {type === 'number' ? value : null}\n </Badge>\n ) : null}\n {Component ? <Component data-testid=\"ds-notification-badge-component\" innerRef={relatedComponentRef} /> : null}\n </Wrapper>\n );\n};\n\nNotificationBadge.displayName = 'NotificationBadge';\nconst NotificationBadgeWithSchema = describe(NotificationBadge);\nNotificationBadgeWithSchema.propTypes = NotificationBadgePropTypes as WeakValidationMap<unknown>;\n\nexport { NotificationBadge, NotificationBadgeWithSchema };\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACgDnB,SAEI,KAFJ;AA9CJ,OAAOA,UAAS,cAAc;AAC9B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,4BAA4B,oBAAoB;AACzD,SAAS,SAAS,cAAc,gBAAgB;AAChD,SAAS,cAAc,eAAe,mBAAmB;AAEzD,MAAM,0BAA0B,CAAC,QAA6C,OAAO,GAAG,EAAE;AAE1F,MAAM,oBAAqE,CAAC,UAAU;AACpF,QAAM,oBAAoB,6BAAiE,OAAO,YAAY;AAC9G;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACA,QAAM,EAAE,MAAM,OAAO,OAAO,MAAM,UAAU,UAAU,WAAW,GAAG,KAAK,IAAI;AAC7E,QAAM,mBAAmB,uBAAuB,IAAI;AAEpD,QAAM,CAAC,aAAa,cAAc,IAAIA,OAAM,SAAS,KAAK;AAC1D,QAAM,iBAAiB,SAAS;AAChC,QAAM,QAAQ,iBAAiB,eAAe;AAC9C,QAAM,sBAAsB,OAAwB,IAAI;AACxD,QAAM,sBAAsB,OAAuB,IAAI;AACvD,QAAM,oBAAoB,OAAuB,IAAI;AAErD,EAAAA,OAAM,gBAAgB,MAAM;AAC1B,mBAAe,CAAC,CAAC,qBAAqB,WAAW,CAAC,SAAS;AAAA,EAC7D,GAAG,CAAC,qBAAqB,SAAS,CAAC;AAEnC,QAAM,uBAAuB,qBAAqB,UAAU,OAAO,iBAAiB,qBAAqB,OAAO,IAAI;AACpH,QAAM,YAAY,aAAa,oBAAoB;AACnD,QAAM,aAAa,cAAc,oBAAoB;AACrD,QAAM,WAAW,YAAY,oBAAoB;AAEjD,QAAM,SAAS,iBAAkB,SAAS,MAAM,IAAI,IAAK,SAAS,MAAM,IAAI;AAC5E,QAAM,MAAM,qBAAqB,UAAU,WAAW,SAAS;AAC/D,QAAM,OAAO,qBAAqB,UAAU,YAAY,SAAS;AACjE,QAAM,QAAQ,qBAAqB,UAAU,aAAa,SAAS;AAEnE,SACE,qBAAC,WAAS,GAAG,kBAAkB,UAAU,qBACtC;AAAA,kBACC;AAAA,MAAC;AAAA;AAAA,QACC,0BAAwB,CAAC,CAAC,YAAY,SAAS;AAAA,QAC/C,UAAU;AAAA,QACV,iBAAe;AAAA,QACf,aAAW;AAAA,QACX,eAAY;AAAA,QACZ;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,OAAO,aAAa,UAAU,QAAQ;AAAA,QACtC,MAAM,aAAa,SAAS,OAAO;AAAA,QACnC,WAAW,wBAAwB,KAAK;AAAA,QAEvC,mBAAS,WAAW,QAAQ;AAAA;AAAA,IAC/B,IACE;AAAA,IACH,YAAY,oBAAC,aAAU,eAAY,mCAAkC,UAAU,qBAAqB,IAAK;AAAA,KAC5G;AAEJ;AAEA,kBAAkB,cAAc;AAChC,MAAM,8BAA8B,SAAS,iBAAiB;AAC9D,4BAA4B,YAAY;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
package/dist/esm/style.js
CHANGED
|
@@ -6,12 +6,9 @@ const magicNumbersWidth = {
|
|
|
6
6
|
d: 15
|
|
7
7
|
};
|
|
8
8
|
const getWidth = (size, charCount) => {
|
|
9
|
-
if (size === "l" && charCount > 1)
|
|
10
|
-
|
|
11
|
-
if (size === "
|
|
12
|
-
return magicNumbersWidth.l1;
|
|
13
|
-
if (size === "s" && charCount > 1)
|
|
14
|
-
return magicNumbersWidth.l1;
|
|
9
|
+
if (size === "l" && charCount > 1) return magicNumbersWidth.l;
|
|
10
|
+
if (size === "l" && charCount <= 1) return magicNumbersWidth.l1;
|
|
11
|
+
if (size === "s" && charCount > 1) return magicNumbersWidth.l1;
|
|
15
12
|
return magicNumbersWidth.d;
|
|
16
13
|
};
|
|
17
14
|
const Wrapper = styled.div`
|
package/dist/esm/style.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/style.tsx"],
|
|
4
4
|
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\nimport type { Theme } from '@elliemae/pui-theme';\n\ninterface NumericBadgeT {\n top: number;\n left: number;\n right: number;\n charCount: number;\n size?: string;\n value?: number | string;\n disabled?: boolean;\n color?: string;\n theme: Theme;\n ['data-related-component']: 'true' | 'false';\n}\n\nconst magicNumbersWidth = {\n l: 30,\n l1: 21,\n d: 15,\n};\n\nconst getWidth = (size: string | undefined, charCount: number) => {\n if (size === 'l' && charCount > 1) return magicNumbersWidth.l;\n if (size === 'l' && charCount <= 1) return magicNumbersWidth.l1;\n if (size === 's' && charCount > 1) return magicNumbersWidth.l1;\n return magicNumbersWidth.d;\n};\n\nexport const Wrapper = styled.div`\n width: fit-content;\n height: fit-content;\n position: relative;\n z-index: 0;\n`;\n\nexport const GenericBadge = styled.span<NumericBadgeT>`\n position: ${(props) => (props['data-related-component'] === 'true' ? 'absolute' : 'inherit')};\n display: flex;\n justify-content: center;\n align-items: center;\n line-height: 1;\n top: ${({ top }: NumericBadgeT) => `${top}px`};\n right: ${({ right }: NumericBadgeT) => (right ? `${right}px` : `unset`)};\n left: ${({ left }: NumericBadgeT) => (left ? `${left}px` : `unset`)};\n z-index: ${({ theme }) => theme.zIndex.tooltip};\n`;\n\nexport const NumericBadge = styled(GenericBadge)<NumericBadgeT>`\n display: flex;\n justify-content: center;\n align-items: center;\n width: fit-content;\n white-space: nowrap;\n color: #fff;\n padding: ${({ charCount }: NumericBadgeT) => (charCount > 1 ? '0 5px' : '0')};\n background-color: ${({ disabled, color, theme }: NumericBadgeT) =>\n disabled ? theme.colors.neutral['500'] : color || theme.colors.danger['900']};\n border-radius: ${({ charCount }: NumericBadgeT) => (charCount > 1 ? '10px' : '50%')};\n font-size: ${({ size }: NumericBadgeT) => (size === 'l' ? '16px' : '12px')};\n font-weight: ${({ size }: NumericBadgeT) => (size === 'l' ? '400' : '600')};\n height: ${({ size }: NumericBadgeT) => (size === 'l' ? '21px' : '15px')};\n min-width: ${({ size, charCount }: NumericBadgeT) => `${getWidth(size, charCount)}px`};\n`;\n\nexport const DotBadge = styled(GenericBadge)<NumericBadgeT>`\n background-color: ${({ disabled, theme, color }: NumericBadgeT) =>\n disabled ? theme.colors.neutral['500'] : color || theme.colors.brand[500]};\n width: ${({ size }: NumericBadgeT) => (size === 'l' ? '15px' : '10px')};\n height: ${({ size }: NumericBadgeT) => (size === 'l' ? '15px' : '10px')};\n border-radius: 100%;\n`;\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AAgBvB,MAAM,oBAAoB;AAAA,EACxB,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,GAAG;AACL;AAEA,MAAM,WAAW,CAAC,MAA0B,cAAsB;AAChE,MAAI,SAAS,OAAO,YAAY
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AAgBvB,MAAM,oBAAoB;AAAA,EACxB,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,GAAG;AACL;AAEA,MAAM,WAAW,CAAC,MAA0B,cAAsB;AAChE,MAAI,SAAS,OAAO,YAAY,EAAG,QAAO,kBAAkB;AAC5D,MAAI,SAAS,OAAO,aAAa,EAAG,QAAO,kBAAkB;AAC7D,MAAI,SAAS,OAAO,YAAY,EAAG,QAAO,kBAAkB;AAC5D,SAAO,kBAAkB;AAC3B;AAEO,MAAM,UAAU,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOvB,MAAM,eAAe,OAAO;AAAA,cACrB,CAAC,UAAW,MAAM,wBAAwB,MAAM,SAAS,aAAa,SAAU;AAAA;AAAA;AAAA;AAAA;AAAA,SAKrF,CAAC,EAAE,IAAI,MAAqB,GAAG,GAAG,IAAI;AAAA,WACpC,CAAC,EAAE,MAAM,MAAsB,QAAQ,GAAG,KAAK,OAAO,OAAQ;AAAA,UAC/D,CAAC,EAAE,KAAK,MAAsB,OAAO,GAAG,IAAI,OAAO,OAAQ;AAAA,aACxD,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,OAAO;AAAA;AAGzC,MAAM,eAAe,OAAO,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAOlC,CAAC,EAAE,UAAU,MAAsB,YAAY,IAAI,UAAU,GAAI;AAAA,sBACxD,CAAC,EAAE,UAAU,OAAO,MAAM,MAC5C,WAAW,MAAM,OAAO,QAAQ,KAAK,IAAI,SAAS,MAAM,OAAO,OAAO,KAAK,CAAC;AAAA,mBAC7D,CAAC,EAAE,UAAU,MAAsB,YAAY,IAAI,SAAS,KAAM;AAAA,eACtE,CAAC,EAAE,KAAK,MAAsB,SAAS,MAAM,SAAS,MAAO;AAAA,iBAC3D,CAAC,EAAE,KAAK,MAAsB,SAAS,MAAM,QAAQ,KAAM;AAAA,YAChE,CAAC,EAAE,KAAK,MAAsB,SAAS,MAAM,SAAS,MAAO;AAAA,eAC1D,CAAC,EAAE,MAAM,UAAU,MAAqB,GAAG,SAAS,MAAM,SAAS,CAAC,IAAI;AAAA;AAGhF,MAAM,WAAW,OAAO,YAAY;AAAA,sBACrB,CAAC,EAAE,UAAU,OAAO,MAAM,MAC5C,WAAW,MAAM,OAAO,QAAQ,KAAK,IAAI,SAAS,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA,WAClE,CAAC,EAAE,KAAK,MAAsB,SAAS,MAAM,SAAS,MAAO;AAAA,YAC5D,CAAC,EAAE,KAAK,MAAsB,SAAS,MAAM,SAAS,MAAO;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-notification-badge",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.36.0-next.1",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Notification Badge",
|
|
6
6
|
"files": [
|
|
@@ -49,13 +49,13 @@
|
|
|
49
49
|
},
|
|
50
50
|
"dependencies": {
|
|
51
51
|
"@elliemae/pui-theme": "~2.9.3",
|
|
52
|
-
"@elliemae/ds-props-helpers": "3.
|
|
53
|
-
"@elliemae/ds-system": "3.
|
|
52
|
+
"@elliemae/ds-props-helpers": "3.36.0-next.1",
|
|
53
|
+
"@elliemae/ds-system": "3.36.0-next.1"
|
|
54
54
|
},
|
|
55
55
|
"devDependencies": {
|
|
56
56
|
"@elliemae/pui-cli": "~9.0.0-next.31",
|
|
57
57
|
"styled-components": "~5.3.9",
|
|
58
|
-
"@elliemae/ds-monorepo-devops": "3.
|
|
58
|
+
"@elliemae/ds-monorepo-devops": "3.36.0-next.1"
|
|
59
59
|
},
|
|
60
60
|
"peerDependencies": {
|
|
61
61
|
"react": "^17.0.2",
|