@servicetitan/marketing-ui 5.8.1 → 5.10.0
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/components/ads/ads-stat.js +21 -10
- package/dist/components/ads/ads-stat.js.map +1 -1
- package/dist/components/charts/funnel-chart/components/funnel-chart.js +118 -6
- package/dist/components/charts/funnel-chart/components/funnel-chart.js.map +1 -1
- package/dist/components/charts/funnel-chart/components/funnel-chart.module.less.d.ts +9 -0
- package/dist/components/charts/funnel-chart/components/funnel-svg.js +62 -12
- package/dist/components/charts/funnel-chart/components/funnel-svg.js.map +1 -1
- package/dist/components/charts/funnel-chart/funnel-chart.stories.d.ts +0 -1
- package/dist/components/charts/funnel-chart/funnel-chart.stories.d.ts.map +1 -1
- package/dist/components/charts/funnel-chart/index.js +1 -0
- package/dist/components/charts/funnel-chart/index.js.map +1 -1
- package/dist/components/charts/funnel-chart/utils/const.js +1 -0
- package/dist/components/charts/funnel-chart/utils/const.js.map +1 -1
- package/dist/components/charts/funnel-chart/utils/interface.js +2 -1
- package/dist/components/charts/funnel-chart/utils/interface.js.map +1 -1
- package/dist/components/charts/line-chart/components/body.js +105 -16
- package/dist/components/charts/line-chart/components/body.js.map +1 -1
- package/dist/components/charts/line-chart/components/body.module.less.d.ts +4 -0
- package/dist/components/charts/line-chart/components/container.js +12 -4
- package/dist/components/charts/line-chart/components/container.js.map +1 -1
- package/dist/components/charts/line-chart/components/hover-popover.js +56 -13
- package/dist/components/charts/line-chart/components/hover-popover.js.map +1 -1
- package/dist/components/charts/line-chart/components/hover-popover.module.less.d.ts +5 -0
- package/dist/components/charts/line-chart/components/sidebar.js +35 -5
- package/dist/components/charts/line-chart/components/sidebar.js.map +1 -1
- package/dist/components/charts/line-chart/components/sidebar.module.less.d.ts +13 -0
- package/dist/components/charts/line-chart/components/stuff.js +73 -32
- package/dist/components/charts/line-chart/components/stuff.js.map +1 -1
- package/dist/components/charts/line-chart/components/stuff.module.less.d.ts +6 -0
- package/dist/components/charts/line-chart/components/svg-bars.d.ts.map +1 -1
- package/dist/components/charts/line-chart/components/svg-bars.js +60 -26
- package/dist/components/charts/line-chart/components/svg-bars.js.map +1 -1
- package/dist/components/charts/line-chart/components/svg-body.js +52 -11
- package/dist/components/charts/line-chart/components/svg-body.js.map +1 -1
- package/dist/components/charts/line-chart/components/svg-lines.js +46 -27
- package/dist/components/charts/line-chart/components/svg-lines.js.map +1 -1
- package/dist/components/charts/line-chart/components/svg.module.less.d.ts +5 -0
- package/dist/components/charts/line-chart/index.js +1 -0
- package/dist/components/charts/line-chart/index.js.map +1 -1
- package/dist/components/charts/line-chart/stores/line-chart.store.d.ts.map +1 -1
- package/dist/components/charts/line-chart/stores/line-chart.store.js +98 -127
- package/dist/components/charts/line-chart/stores/line-chart.store.js.map +1 -1
- package/dist/components/charts/line-chart/stores/svg.store.d.ts.map +1 -1
- package/dist/components/charts/line-chart/stores/svg.store.js +66 -108
- package/dist/components/charts/line-chart/stores/svg.store.js.map +1 -1
- package/dist/components/charts/line-chart/utils/const.js +8 -7
- package/dist/components/charts/line-chart/utils/const.js.map +1 -1
- package/dist/components/charts/line-chart/utils/formatters.d.ts.map +1 -1
- package/dist/components/charts/line-chart/utils/formatters.js +13 -11
- package/dist/components/charts/line-chart/utils/formatters.js.map +1 -1
- package/dist/components/charts/line-chart/utils/interfaces.js +2 -1
- package/dist/components/charts/line-chart/utils/interfaces.js.map +1 -1
- package/dist/components/charts/line-chart/utils/internal-interfaces.js +2 -1
- package/dist/components/charts/line-chart/utils/internal-interfaces.js.map +1 -1
- package/dist/components/charts/line-chart/utils/key.d.ts.map +1 -1
- package/dist/components/charts/line-chart/utils/key.js +2 -1
- package/dist/components/charts/line-chart/utils/key.js.map +1 -1
- package/dist/components/charts/line-chart/utils/labels.d.ts.map +1 -1
- package/dist/components/charts/line-chart/utils/labels.js +50 -46
- package/dist/components/charts/line-chart/utils/labels.js.map +1 -1
- package/dist/components/charts/pie-chart/components/pie-chart.js +60 -6
- package/dist/components/charts/pie-chart/components/pie-chart.js.map +1 -1
- package/dist/components/charts/pie-chart/components/pie-chart.module.less.d.ts +3 -0
- package/dist/components/charts/pie-chart/components/pie.js +176 -39
- package/dist/components/charts/pie-chart/components/pie.js.map +1 -1
- package/dist/components/charts/pie-chart/index.js +2 -0
- package/dist/components/charts/pie-chart/index.js.map +1 -1
- package/dist/components/charts/pie-chart/pie-chart.stories.d.ts +0 -1
- package/dist/components/charts/pie-chart/pie-chart.stories.d.ts.map +1 -1
- package/dist/components/charts/pie-chart/utils/const.d.ts.map +1 -1
- package/dist/components/charts/pie-chart/utils/const.js +55 -39
- package/dist/components/charts/pie-chart/utils/const.js.map +1 -1
- package/dist/components/charts/pie-chart/utils/interface.js +2 -1
- package/dist/components/charts/pie-chart/utils/interface.js.map +1 -1
- package/dist/components/image-cropper/image-cropper.d.ts.map +1 -1
- package/dist/components/image-cropper/image-cropper.js +74 -88
- package/dist/components/image-cropper/image-cropper.js.map +1 -1
- package/dist/components/stat/stat-card.js +68 -22
- package/dist/components/stat/stat-card.js.map +1 -1
- package/dist/components/stat/stat-card.module.less.d.ts +5 -0
- package/dist/components/stat/stat-cards.stories.d.ts +0 -1
- package/dist/components/stat/stat-cards.stories.d.ts.map +1 -1
- package/dist/components/stat/stat-extended-card.js +76 -4
- package/dist/components/stat/stat-extended-card.js.map +1 -1
- package/dist/components/stat/stat-extended-card.stories.d.ts +0 -1
- package/dist/components/stat/stat-extended-card.stories.d.ts.map +1 -1
- package/dist/components/ui/action-button/action-button.js +33 -7
- package/dist/components/ui/action-button/action-button.js.map +1 -1
- package/dist/components/ui/action-button/action-button.module.less.d.ts +9 -0
- package/dist/components/ui/action-button/action-button.stories.d.ts +0 -1
- package/dist/components/ui/action-button/action-button.stories.d.ts.map +1 -1
- package/dist/components/ui/action-button/index.js +1 -0
- package/dist/components/ui/action-button/index.js.map +1 -1
- package/dist/components/ui/centered-spinner/centered-spinner.js +20 -2
- package/dist/components/ui/centered-spinner/centered-spinner.js.map +1 -1
- package/dist/components/ui/centered-spinner/centered-spinner.stories.d.ts +0 -1
- package/dist/components/ui/centered-spinner/centered-spinner.stories.d.ts.map +1 -1
- package/dist/components/ui/date-range-picker/date-range-picker.d.ts.map +1 -1
- package/dist/components/ui/date-range-picker/date-range-picker.js +71 -35
- package/dist/components/ui/date-range-picker/date-range-picker.js.map +1 -1
- package/dist/components/ui/date-range-picker/date-range-picker.module.less.d.ts +4 -0
- package/dist/components/ui/date-range-picker/date-range-picker.stories.d.ts.map +1 -1
- package/dist/components/ui/disabled-button.js +12 -3
- package/dist/components/ui/disabled-button.js.map +1 -1
- package/dist/components/ui/label-with-hint/label-with-hint.js +23 -1
- package/dist/components/ui/label-with-hint/label-with-hint.js.map +1 -1
- package/dist/components/ui/label-with-hint/label-with-hint.stories.d.ts +0 -1
- package/dist/components/ui/label-with-hint/label-with-hint.stories.d.ts.map +1 -1
- package/dist/components/ui/line-text/index.js +1 -0
- package/dist/components/ui/line-text/index.js.map +1 -1
- package/dist/components/ui/line-text/line-text-body.stories.d.ts +0 -1
- package/dist/components/ui/line-text/line-text-body.stories.d.ts.map +1 -1
- package/dist/components/ui/line-text/line-text-head.stories.d.ts +0 -1
- package/dist/components/ui/line-text/line-text-head.stories.d.ts.map +1 -1
- package/dist/components/ui/line-text/line-text.js +71 -25
- package/dist/components/ui/line-text/line-text.js.map +1 -1
- package/dist/components/ui/line-text/line-text.module.less.d.ts +6 -0
- package/dist/components/ui/title-popover/index.js +1 -0
- package/dist/components/ui/title-popover/index.js.map +1 -1
- package/dist/components/ui/title-popover/title-popover.d.ts.map +1 -1
- package/dist/components/ui/title-popover/title-popover.js +78 -69
- package/dist/components/ui/title-popover/title-popover.js.map +1 -1
- package/dist/components/ui/title-popover/title-popover.module.less.d.ts +3 -0
- package/dist/components/ui/title-popover/title-popover.stories.d.ts.map +1 -1
- package/dist/index.js +3 -1
- package/dist/index.js.map +1 -1
- package/dist/utils/__tests__/format-big-numbers.test.d.ts +2 -0
- package/dist/utils/__tests__/format-big-numbers.test.d.ts.map +1 -0
- package/dist/utils/__tests__/formatters.test.d.ts +2 -0
- package/dist/utils/__tests__/formatters.test.d.ts.map +1 -0
- package/dist/utils/__tests__/helpers.test.d.ts +2 -0
- package/dist/utils/__tests__/helpers.test.d.ts.map +1 -0
- package/dist/utils/__tests__/string-case.test.d.ts +2 -0
- package/dist/utils/__tests__/string-case.test.d.ts.map +1 -0
- package/dist/utils/ads-texts.js +2 -1
- package/dist/utils/ads-texts.js.map +1 -1
- package/dist/utils/date/__tests__/date-range-picker.test.d.ts +2 -0
- package/dist/utils/date/__tests__/date-range-picker.test.d.ts.map +1 -0
- package/dist/utils/date/__tests__/date-tenant.test.d.ts +2 -0
- package/dist/utils/date/__tests__/date-tenant.test.d.ts.map +1 -0
- package/dist/utils/date/date-range-picker-options.d.ts.map +1 -1
- package/dist/utils/date/date-range-picker-options.js +90 -68
- package/dist/utils/date/date-range-picker-options.js.map +1 -1
- package/dist/utils/date/date-range-picker-state.d.ts.map +1 -1
- package/dist/utils/date/date-range-picker-state.js +42 -43
- package/dist/utils/date/date-range-picker-state.js.map +1 -1
- package/dist/utils/date/date-tenant.js +4 -6
- package/dist/utils/date/date-tenant.js.map +1 -1
- package/dist/utils/date/date.d.ts.map +1 -1
- package/dist/utils/date/date.js +5 -9
- package/dist/utils/date/date.js.map +1 -1
- package/dist/utils/date/index.js +1 -0
- package/dist/utils/date/index.js.map +1 -1
- package/dist/utils/format-big-numbers.d.ts.map +1 -1
- package/dist/utils/format-big-numbers.js +11 -6
- package/dist/utils/format-big-numbers.js.map +1 -1
- package/dist/utils/formatters.d.ts.map +1 -1
- package/dist/utils/formatters.js +8 -7
- package/dist/utils/formatters.js.map +1 -1
- package/dist/utils/helpers.d.ts.map +1 -1
- package/dist/utils/helpers.js +9 -12
- package/dist/utils/helpers.js.map +1 -1
- package/dist/utils/marketing-parner-handlers.js +9 -12
- package/dist/utils/marketing-parner-handlers.js.map +1 -1
- package/dist/utils/string-case.js +1 -0
- package/dist/utils/string-case.js.map +1 -1
- package/dist/utils/use-client-rect.d.ts +1 -5
- package/dist/utils/use-client-rect.d.ts.map +1 -1
- package/dist/utils/use-client-rect.js +19 -19
- package/dist/utils/use-client-rect.js.map +1 -1
- package/dist/utils/use-target-range-store.js +7 -6
- package/dist/utils/use-target-range-store.js.map +1 -1
- package/package.json +11 -11
- package/src/components/charts/funnel-chart/funnel-chart.stories.tsx +3 -2
- package/src/components/charts/line-chart/components/svg-bars.tsx +2 -0
- package/src/components/ui/action-button/action-button.stories.tsx +3 -2
- package/src/components/ui/centered-spinner/centered-spinner.stories.tsx +3 -2
- package/src/components/ui/date-range-picker/date-range-picker.stories.tsx +5 -6
- package/src/components/ui/date-range-picker/date-range-picker.tsx +2 -2
- package/src/components/ui/line-text/line-text-body.stories.tsx +3 -2
- package/src/components/ui/line-text/line-text-head.stories.tsx +3 -2
- package/src/components/ui/line-text/line-text.tsx +1 -1
- package/src/components/ui/title-popover/title-popover.stories.tsx +3 -2
- package/src/utils/date/__tests__/date-range-picker.test.ts +1 -1
- package/src/utils/use-client-rect.ts +1 -1
- package/dist/components/charts/funnel-chart/funnel-chart.stories.js +0 -76
- package/dist/components/charts/funnel-chart/funnel-chart.stories.js.map +0 -1
- package/dist/components/charts/line-chart/line-chart.stories.js +0 -225
- package/dist/components/charts/line-chart/line-chart.stories.js.map +0 -1
- package/dist/components/charts/pie-chart/pie-chart.stories.js +0 -22
- package/dist/components/charts/pie-chart/pie-chart.stories.js.map +0 -1
- package/dist/components/image-cropper/image-cropper.stories.js +0 -48
- package/dist/components/image-cropper/image-cropper.stories.js.map +0 -1
- package/dist/components/stat/stat-cards.stories.js +0 -16
- package/dist/components/stat/stat-cards.stories.js.map +0 -1
- package/dist/components/stat/stat-extended-card.stories.js +0 -12
- package/dist/components/stat/stat-extended-card.stories.js.map +0 -1
- package/dist/components/ui/action-button/action-button.stories.js +0 -11
- package/dist/components/ui/action-button/action-button.stories.js.map +0 -1
- package/dist/components/ui/centered-spinner/centered-spinner.stories.js +0 -12
- package/dist/components/ui/centered-spinner/centered-spinner.stories.js.map +0 -1
- package/dist/components/ui/date-range-picker/date-range-picker.stories.js +0 -18
- package/dist/components/ui/date-range-picker/date-range-picker.stories.js.map +0 -1
- package/dist/components/ui/label-with-hint/label-with-hint.stories.js +0 -12
- package/dist/components/ui/label-with-hint/label-with-hint.stories.js.map +0 -1
- package/dist/components/ui/line-text/line-text-body.stories.js +0 -11
- package/dist/components/ui/line-text/line-text-body.stories.js.map +0 -1
- package/dist/components/ui/line-text/line-text-head.stories.js +0 -11
- package/dist/components/ui/line-text/line-text-head.stories.js.map +0 -1
- package/dist/components/ui/title-popover/title-popover.stories.js +0 -17
- package/dist/components/ui/title-popover/title-popover.stories.js.map +0 -1
- package/dist/utils/date/__mocks__/date-mock.js +0 -19
- package/dist/utils/date/__mocks__/date-mock.js.map +0 -1
|
@@ -4,49 +4,85 @@ import classNames from 'classnames';
|
|
|
4
4
|
import { observer } from 'mobx-react';
|
|
5
5
|
import { BodyText, Form, Stack } from '@servicetitan/design-system';
|
|
6
6
|
import * as Styles from './date-range-picker.module.less';
|
|
7
|
-
const convertDateRange = (val, backward)
|
|
8
|
-
? {
|
|
7
|
+
const convertDateRange = (val, backward)=>val ? {
|
|
9
8
|
start: val.start,
|
|
10
|
-
end: new Date(val.end.getFullYear(), val.end.getMonth(), val.end.getDate() + (backward ? 1 : -1))
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
})
|
|
18
|
-
const
|
|
19
|
-
export const DateRangePicker = observer(({ compare, disabled, state, onChange, input, }) => {
|
|
9
|
+
end: new Date(val.end.getFullYear(), val.end.getMonth(), val.end.getDate() + (backward ? 1 : -1))
|
|
10
|
+
} : undefined;
|
|
11
|
+
const formatDate = (dt)=>dt.toLocaleString('en-US', {
|
|
12
|
+
day: 'numeric',
|
|
13
|
+
year: 'numeric',
|
|
14
|
+
month: 'short'
|
|
15
|
+
});
|
|
16
|
+
const formatDateRange = (range)=>`${formatDate(range.start)} - ${formatDate(range.end)}`;
|
|
17
|
+
export const DateRangePicker = observer(({ compare, disabled, state, onChange, input })=>{
|
|
20
18
|
const selectedOption = state.selectedOption;
|
|
21
19
|
/*
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
const onPickerChange = val => {
|
|
20
|
+
* DateRangePickerOptions uses exclusive date ranges for end date (start >= dt > end)
|
|
21
|
+
* but anvil's DateRangePicker uses inclusive dates (with end set to endOfDay),
|
|
22
|
+
* so we performing some transformations here
|
|
23
|
+
* convertDateRange (predefined options, value and onChange)
|
|
24
|
+
*/ const onPickerChange = (val)=>{
|
|
28
25
|
const newVal = convertDateRange(val, true);
|
|
29
26
|
if (onChange) {
|
|
30
27
|
onChange(newVal);
|
|
31
|
-
}
|
|
32
|
-
else {
|
|
28
|
+
} else {
|
|
33
29
|
state.onChange(newVal);
|
|
34
30
|
}
|
|
35
31
|
};
|
|
36
|
-
const options = useMemo(()
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
32
|
+
const options = useMemo(()=>state.options.options.map((o)=>({
|
|
33
|
+
text: o.text,
|
|
34
|
+
value: convertDateRange(o.value),
|
|
35
|
+
selected: o.key === (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.key)
|
|
36
|
+
})), [
|
|
37
|
+
selectedOption,
|
|
38
|
+
state.options.options
|
|
39
|
+
]);
|
|
40
|
+
const value = useMemo(()=>convertDateRange(state.value), [
|
|
41
|
+
state.value
|
|
42
|
+
]);
|
|
43
|
+
const compareValue = useMemo(()=>state.value && compare ? convertDateRange(state.options.getComparisonDateRange(state.value)) : undefined, [
|
|
44
|
+
compare,
|
|
45
|
+
state.value,
|
|
46
|
+
state.options
|
|
47
|
+
]);
|
|
48
|
+
const textValue = selectedOption ? selectedOption.text : compare || !value ? 'Custom Date Range' : formatDateRange(value);
|
|
49
|
+
return /*#__PURE__*/ _jsxs(Stack, {
|
|
50
|
+
children: [
|
|
51
|
+
/*#__PURE__*/ _jsx(Stack.Item, {
|
|
52
|
+
className: Styles.pickerContainer,
|
|
53
|
+
children: /*#__PURE__*/ _jsx(Form.DateRangePicker, {
|
|
54
|
+
onChange: onPickerChange,
|
|
55
|
+
options: options,
|
|
56
|
+
value: value,
|
|
57
|
+
required: true,
|
|
58
|
+
disabled: disabled,
|
|
59
|
+
label: !input && /*#__PURE__*/ _jsx("div", {
|
|
60
|
+
className: classNames(Styles.pickerValue, 'd-f flex-column justify-content-center t-truncate cursor-pointer'),
|
|
61
|
+
children: textValue
|
|
62
|
+
}),
|
|
63
|
+
input: input === null || input === void 0 ? void 0 : input(textValue)
|
|
64
|
+
})
|
|
65
|
+
}),
|
|
66
|
+
!!compare && /*#__PURE__*/ _jsxs(Stack, {
|
|
67
|
+
direction: "column",
|
|
68
|
+
justifyContent: "center",
|
|
69
|
+
className: "m-l-2",
|
|
70
|
+
children: [
|
|
71
|
+
/*#__PURE__*/ _jsx(BodyText, {
|
|
72
|
+
children: value ? formatDateRange(value) : ''
|
|
73
|
+
}),
|
|
74
|
+
!!compareValue && /*#__PURE__*/ _jsxs(BodyText, {
|
|
75
|
+
size: "xsmall",
|
|
76
|
+
subdued: true,
|
|
77
|
+
children: [
|
|
78
|
+
"vs. ",
|
|
79
|
+
formatDateRange(compareValue)
|
|
80
|
+
]
|
|
81
|
+
})
|
|
82
|
+
]
|
|
83
|
+
})
|
|
84
|
+
]
|
|
85
|
+
});
|
|
51
86
|
});
|
|
87
|
+
|
|
52
88
|
//# sourceMappingURL=date-range-picker.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/ui/date-range-picker/date-range-picker.tsx"],"sourcesContent":["import { ReactElement, useMemo } from 'react';\nimport classNames from 'classnames';\nimport { observer } from 'mobx-react';\nimport { BodyText, DateRangePickerProps, Form, Stack } from '@servicetitan/design-system';\nimport { DateRange, DateRangePickerOptionsStateType } from '../../../utils/date';\nimport * as Styles from './date-range-picker.module.less';\n\ninterface TriggerProps {\n onClick?: () => void;\n}\n\nexport interface CustomDateRangePickerProps<OptionKeys extends string> {\n state: DateRangePickerOptionsStateType<OptionKeys>;\n onChange?: DateRangePickerOptionsStateType<OptionKeys>['onChange'];\n compare?: boolean;\n disabled?: boolean;\n input?: (textValue: string) => {\n element: (\n value: DateRangePickerProps['value'],\n triggerProp: TriggerProps,\n open: DateRangePickerProps['open'],\n error: DateRangePickerProps['error']\n ) => ReactElement;\n };\n}\n\nconst convertDateRange = (val?: DateRange, backward?: boolean): DateRange | undefined =>\n val\n ? {\n start: val.start,\n end: new Date(\n val.end.getFullYear(),\n val.end.getMonth(),\n val.end.getDate() + (backward ? 1 : -1)\n ),\n }\n : undefined;\n\nconst formatDate = (dt: Date) =>\n dt.toLocaleString('en-US', {\n day: 'numeric',\n year: 'numeric',\n month: 'short',\n });\n\nconst formatDateRange = (range: DateRange) =>\n `${formatDate(range.start)} - ${formatDate(range.end)}`;\n\nexport const DateRangePicker = observer(\n <OptionKeys extends string>({\n compare,\n disabled,\n state,\n onChange,\n input,\n }: CustomDateRangePickerProps<OptionKeys>) => {\n const selectedOption = state.selectedOption;\n\n /*\n * DateRangePickerOptions uses exclusive date ranges for end date (start >= dt > end)\n * but anvil's DateRangePicker uses inclusive dates (with end set to endOfDay),\n * so we performing some transformations here\n * convertDateRange (predefined options, value and onChange)\n */\n const onPickerChange: DateRangePickerOptionsStateType<OptionKeys>['onChange'] = val => {\n const newVal = convertDateRange(val, true);\n\n if (onChange) {\n onChange(newVal);\n } else {\n state.onChange(newVal);\n }\n };\n const options = useMemo(\n () =>\n state.options.options.map(o => ({\n text: o.text,\n value: convertDateRange(o.value),\n selected: o.key === selectedOption?.key,\n })),\n [selectedOption, state.options.options]\n );\n const value = useMemo(() => convertDateRange(state.value), [state.value]);\n const compareValue = useMemo(\n () =>\n state.value && compare\n ? convertDateRange(state.options.getComparisonDateRange(state.value))\n : undefined,\n [compare, state.value, state.options]\n );\n const textValue = selectedOption\n ? selectedOption.text\n : compare || !value\n ? 'Custom Date Range'\n : formatDateRange(value);\n\n return (\n <Stack>\n <Stack.Item className={Styles.pickerContainer}>\n <Form.DateRangePicker\n onChange={onPickerChange}\n options={options}\n value={value}\n required\n disabled={disabled}\n label={\n !input && (\n <div\n className={classNames(\n Styles.pickerValue,\n 'd-f flex-column justify-content-center t-truncate cursor-pointer'\n )}\n >\n {textValue}\n </div>\n )\n }\n input={input?.(textValue)}\n />\n </Stack.Item>\n {!!compare && (\n <Stack direction=\"column\" justifyContent=\"center\" className=\"m-l-2\">\n <BodyText>{value ? formatDateRange(value) : ''}</BodyText>\n {!!compareValue && (\n <BodyText size=\"xsmall\" subdued>\n vs. {formatDateRange(compareValue)}\n </BodyText>\n )}\n </Stack>\n )}\n </Stack>\n );\n }\n);\n"],"names":["useMemo","classNames","observer","BodyText","Form","Stack","Styles","convertDateRange","val","backward","start","end","Date","getFullYear","getMonth","getDate","undefined","formatDate","dt","toLocaleString","day","year","month","formatDateRange","range","DateRangePicker","compare","disabled","state","onChange","input","selectedOption","onPickerChange","newVal","options","map","o","text","value","selected","key","compareValue","getComparisonDateRange","textValue","Item","className","pickerContainer","required","label","div","pickerValue","direction","justifyContent","size","subdued"],"mappings":";AAAA,SAAuBA,OAAO,QAAQ,QAAQ;AAC9C,OAAOC,gBAAgB,aAAa;AACpC,SAASC,QAAQ,QAAQ,aAAa;AACtC,SAASC,QAAQ,EAAwBC,IAAI,EAAEC,KAAK,QAAQ,8BAA8B;AAE1F,YAAYC,YAAY,kCAAkC;AAqB1D,MAAMC,mBAAmB,CAACC,KAAiBC,WACvCD,MACM;QACIE,OAAOF,IAAIE,KAAK;QAChBC,KAAK,IAAIC,KACLJ,IAAIG,GAAG,CAACE,WAAW,IACnBL,IAAIG,GAAG,CAACG,QAAQ,IAChBN,IAAIG,GAAG,CAACI,OAAO,KAAMN,CAAAA,WAAW,IAAI,CAAC,CAAA;IAE7C,IACAO;AAEV,MAAMC,aAAa,CAACC,KAChBA,GAAGC,cAAc,CAAC,SAAS;QACvBC,KAAK;QACLC,MAAM;QACNC,OAAO;IACX;AAEJ,MAAMC,kBAAkB,CAACC,QACrB,GAAGP,WAAWO,MAAMd,KAAK,EAAE,GAAG,EAAEO,WAAWO,MAAMb,GAAG,GAAG;AAE3D,OAAO,MAAMc,kBAAkBvB,SAC3B,CAA4B,EACxBwB,OAAO,EACPC,QAAQ,EACRC,KAAK,EACLC,QAAQ,EACRC,KAAK,EACgC;IACrC,MAAMC,iBAAiBH,MAAMG,cAAc;IAE3C;;;;;SAKC,GACD,MAAMC,iBAA0ExB,CAAAA;QAC5E,MAAMyB,SAAS1B,iBAAiBC,KAAK;QAErC,IAAIqB,UAAU;YACVA,SAASI;QACb,OAAO;YACHL,MAAMC,QAAQ,CAACI;QACnB;IACJ;IACA,MAAMC,UAAUlC,QACZ,IACI4B,MAAMM,OAAO,CAACA,OAAO,CAACC,GAAG,CAACC,CAAAA,IAAM,CAAA;gBAC5BC,MAAMD,EAAEC,IAAI;gBACZC,OAAO/B,iBAAiB6B,EAAEE,KAAK;gBAC/BC,UAAUH,EAAEI,GAAG,MAAKT,2BAAAA,qCAAAA,eAAgBS,GAAG;YAC3C,CAAA,IACJ;QAACT;QAAgBH,MAAMM,OAAO,CAACA,OAAO;KAAC;IAE3C,MAAMI,QAAQtC,QAAQ,IAAMO,iBAAiBqB,MAAMU,KAAK,GAAG;QAACV,MAAMU,KAAK;KAAC;IACxE,MAAMG,eAAezC,QACjB,IACI4B,MAAMU,KAAK,IAAIZ,UACTnB,iBAAiBqB,MAAMM,OAAO,CAACQ,sBAAsB,CAACd,MAAMU,KAAK,KACjEtB,WACV;QAACU;QAASE,MAAMU,KAAK;QAAEV,MAAMM,OAAO;KAAC;IAEzC,MAAMS,YAAYZ,iBACZA,eAAeM,IAAI,GACnBX,WAAW,CAACY,QACV,sBACAf,gBAAgBe;IAExB,qBACI,MAACjC;;0BACG,KAACA,MAAMuC,IAAI;gBAACC,WAAWvC,OAAOwC,eAAe;0BACzC,cAAA,KAAC1C,KAAKqB,eAAe;oBACjBI,UAAUG;oBACVE,SAASA;oBACTI,OAAOA;oBACPS,QAAQ;oBACRpB,UAAUA;oBACVqB,OACI,CAAClB,uBACG,KAACmB;wBACGJ,WAAW5C,WACPK,OAAO4C,WAAW,EAClB;kCAGHP;;oBAIbb,KAAK,EAAEA,kBAAAA,4BAAAA,MAAQa;;;YAGtB,CAAC,CAACjB,yBACC,MAACrB;gBAAM8C,WAAU;gBAASC,gBAAe;gBAASP,WAAU;;kCACxD,KAAC1C;kCAAUmC,QAAQf,gBAAgBe,SAAS;;oBAC3C,CAAC,CAACG,8BACC,MAACtC;wBAASkD,MAAK;wBAASC,OAAO;;4BAAC;4BACvB/B,gBAAgBkB;;;;;;;AAOjD,GACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"date-range-picker.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/date-range-picker/date-range-picker.stories.tsx"],"names":[],"mappings":";;;;;AAKA,wBAIE;
|
|
1
|
+
{"version":3,"file":"date-range-picker.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/date-range-picker/date-range-picker.stories.tsx"],"names":[],"mappings":";;;;;AAKA,wBAIE;AAWF,eAAO,MAAM,eAAe,+CAAiD,CAAC;AAC9E,eAAO,MAAM,sBAAsB,+CAAyD,CAAC;AAC7F,eAAO,MAAM,0BAA0B,+CAOrC,CAAC"}
|
|
@@ -8,8 +8,17 @@ import { Button, Tooltip } from '@servicetitan/design-system';
|
|
|
8
8
|
* return (
|
|
9
9
|
* <DisabledButton disabled="This button is disabled">knock knock</Button>
|
|
10
10
|
* )
|
|
11
|
-
*/
|
|
12
|
-
|
|
13
|
-
|
|
11
|
+
*/ export const DisabledButton = (props)=>{
|
|
12
|
+
return props.disabled && props.disabled !== true ? /*#__PURE__*/ _jsx(Tooltip, {
|
|
13
|
+
text: props.disabled,
|
|
14
|
+
children: /*#__PURE__*/ _jsx(Button, {
|
|
15
|
+
...props,
|
|
16
|
+
disabled: true
|
|
17
|
+
})
|
|
18
|
+
}) : /*#__PURE__*/ _jsx(Button, {
|
|
19
|
+
...props,
|
|
20
|
+
disabled: !!props.disabled
|
|
21
|
+
});
|
|
14
22
|
};
|
|
23
|
+
|
|
15
24
|
//# sourceMappingURL=disabled-button.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["../../../src/components/ui/disabled-button.tsx"],"sourcesContent":["import { FC } from 'react';\nimport { Button, ButtonProps, Tooltip } from '@servicetitan/design-system';\n\ninterface DisabledButtonProps extends Omit<ButtonProps, 'disabled'> {\n disabled?: string | boolean;\n}\n\n/**\n * Button that shows disabled reason as tooltip\n *\n * @component\n * @example\n * return (\n * <DisabledButton disabled=\"This button is disabled\">knock knock</Button>\n * )\n */\nexport const DisabledButton: FC<DisabledButtonProps> = props => {\n return props.disabled && props.disabled !== true ? (\n <Tooltip text={props.disabled}>\n <Button {...props} disabled />\n </Tooltip>\n ) : (\n <Button {...props} disabled={!!props.disabled} />\n );\n};\n"],"names":["Button","Tooltip","DisabledButton","props","disabled","text"],"mappings":";AACA,SAASA,MAAM,EAAeC,OAAO,QAAQ,8BAA8B;AAM3E;;;;;;;;CAQC,GACD,OAAO,MAAMC,iBAA0CC,CAAAA;IACnD,OAAOA,MAAMC,QAAQ,IAAID,MAAMC,QAAQ,KAAK,qBACxC,KAACH;QAAQI,MAAMF,MAAMC,QAAQ;kBACzB,cAAA,KAACJ;YAAQ,GAAGG,KAAK;YAAEC,QAAQ;;uBAG/B,KAACJ;QAAQ,GAAGG,KAAK;QAAEC,UAAU,CAAC,CAACD,MAAMC,QAAQ;;AAErD,EAAE"}
|
|
@@ -1,5 +1,27 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { BodyText, Icon, Stack, Tooltip } from '@servicetitan/design-system';
|
|
3
3
|
import { tokens } from '@servicetitan/tokens/core';
|
|
4
|
-
export const LabelWithHint = ({ label, textClassName, className, hint, textSize = 'small'
|
|
4
|
+
export const LabelWithHint = ({ label, textClassName, className, hint, textSize = 'small' })=>/*#__PURE__*/ _jsxs(Stack, {
|
|
5
|
+
spacing: 1,
|
|
6
|
+
alignItems: "flex-start",
|
|
7
|
+
className: className,
|
|
8
|
+
children: [
|
|
9
|
+
/*#__PURE__*/ _jsx(BodyText, {
|
|
10
|
+
size: textSize,
|
|
11
|
+
bold: true,
|
|
12
|
+
className: textClassName,
|
|
13
|
+
children: label
|
|
14
|
+
}),
|
|
15
|
+
!!hint && /*#__PURE__*/ _jsx(Tooltip, {
|
|
16
|
+
direction: "tr",
|
|
17
|
+
text: hint,
|
|
18
|
+
children: /*#__PURE__*/ _jsx(Icon, {
|
|
19
|
+
name: "info",
|
|
20
|
+
size: 18,
|
|
21
|
+
color: tokens.colorNeutral80
|
|
22
|
+
})
|
|
23
|
+
})
|
|
24
|
+
]
|
|
25
|
+
});
|
|
26
|
+
|
|
5
27
|
//# sourceMappingURL=label-with-hint.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/ui/label-with-hint/label-with-hint.tsx"],"sourcesContent":["import { BodyText, Icon, Stack, Tooltip } from '@servicetitan/design-system';\nimport { tokens } from '@servicetitan/tokens/core';\nimport { FC } from 'react';\n\nexport interface LabelWithHintProps {\n label: string;\n hint?: string;\n textClassName?: string;\n className?: string;\n textSize?: 'large' | 'medium' | 'small' | 'xsmall';\n}\n\nexport const LabelWithHint: FC<LabelWithHintProps> = ({\n label,\n textClassName,\n className,\n hint,\n textSize = 'small',\n}) => (\n <Stack spacing={1} alignItems=\"flex-start\" className={className}>\n <BodyText size={textSize} bold className={textClassName}>\n {label}\n </BodyText>\n {!!hint && (\n <Tooltip direction=\"tr\" text={hint}>\n <Icon name=\"info\" size={18} color={tokens.colorNeutral80} />\n </Tooltip>\n )}\n </Stack>\n);\n"],"names":["BodyText","Icon","Stack","Tooltip","tokens","LabelWithHint","label","textClassName","className","hint","textSize","spacing","alignItems","size","bold","direction","text","name","color","colorNeutral80"],"mappings":";AAAA,SAASA,QAAQ,EAAEC,IAAI,EAAEC,KAAK,EAAEC,OAAO,QAAQ,8BAA8B;AAC7E,SAASC,MAAM,QAAQ,4BAA4B;AAWnD,OAAO,MAAMC,gBAAwC,CAAC,EAClDC,KAAK,EACLC,aAAa,EACbC,SAAS,EACTC,IAAI,EACJC,WAAW,OAAO,EACrB,iBACG,MAACR;QAAMS,SAAS;QAAGC,YAAW;QAAaJ,WAAWA;;0BAClD,KAACR;gBAASa,MAAMH;gBAAUI,IAAI;gBAACN,WAAWD;0BACrCD;;YAEJ,CAAC,CAACG,sBACC,KAACN;gBAAQY,WAAU;gBAAKC,MAAMP;0BAC1B,cAAA,KAACR;oBAAKgB,MAAK;oBAAOJ,MAAM;oBAAIK,OAAOd,OAAOe,cAAc;;;;OAItE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"label-with-hint.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/label-with-hint/label-with-hint.stories.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"label-with-hint.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/label-with-hint/label-with-hint.stories.tsx"],"names":[],"mappings":";;;;;AAGA,wBAIE;AAEF,eAAO,MAAM,KAAK,+CAAoD,CAAC;AAEvE,eAAO,MAAM,MAAM,+CAQlB,CAAC;AAEF,eAAO,MAAM,KAAK,+CAOjB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/ui/line-text/index.tsx"],"sourcesContent":["export * from './line-text';\n"],"names":[],"mappings":"AAAA,cAAc,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"line-text-body.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/line-text/line-text-body.stories.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"line-text-body.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/line-text/line-text-body.stories.tsx"],"names":[],"mappings":";;;;;AAGA,wBAIE;AAMF,eAAO,MAAM,qBAAqB,+CAA+D,CAAC;AAClG,eAAO,MAAM,mBAAmB,+CAQ9B,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"line-text-head.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/line-text/line-text-head.stories.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"line-text-head.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/line-text/line-text-head.stories.tsx"],"names":[],"mappings":";;;;;AAGA,wBAIE;AAMF,eAAO,MAAM,qBAAqB,+CAA+D,CAAC;AAClG,eAAO,MAAM,mBAAmB,+CAQ9B,CAAC"}
|
|
@@ -1,38 +1,84 @@
|
|
|
1
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
2
|
-
var t = {};
|
|
3
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
4
|
-
t[p] = s[p];
|
|
5
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
6
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
7
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
8
|
-
t[p[i]] = s[p[i]];
|
|
9
|
-
}
|
|
10
|
-
return t;
|
|
11
|
-
};
|
|
12
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
2
|
import { useMemo } from 'react';
|
|
14
3
|
import classNames from 'classnames';
|
|
15
|
-
import { BodyText, Headline, MoreDetails
|
|
4
|
+
import { BodyText, Headline, MoreDetails } from '@servicetitan/design-system';
|
|
16
5
|
import { useClientRect } from '../../../utils/use-client-rect';
|
|
17
6
|
import * as Styles from './line-text.module.less';
|
|
18
|
-
const useLimited = ()
|
|
7
|
+
const useLimited = ()=>{
|
|
19
8
|
const [rect1, ref1] = useClientRect();
|
|
20
9
|
const [rect2, ref2] = useClientRect();
|
|
21
|
-
const limited = useMemo(()
|
|
22
|
-
|
|
10
|
+
const limited = useMemo(()=>!!(rect1 === null || rect1 === void 0 ? void 0 : rect1.width) && !!(rect2 === null || rect2 === void 0 ? void 0 : rect2.width) && ((rect2 === null || rect2 === void 0 ? void 0 : rect2.width) || 0) > ((rect1 === null || rect1 === void 0 ? void 0 : rect1.width) || 0), [
|
|
11
|
+
rect1,
|
|
12
|
+
rect2
|
|
13
|
+
]);
|
|
14
|
+
return [
|
|
15
|
+
ref1,
|
|
16
|
+
ref2,
|
|
17
|
+
limited
|
|
18
|
+
];
|
|
23
19
|
};
|
|
24
|
-
export const BodyTextLine = (
|
|
25
|
-
var { children, wrapperClassName } = _a, props = __rest(_a, ["children", "wrapperClassName"]);
|
|
20
|
+
export const BodyTextLine = ({ children, wrapperClassName, ...props })=>{
|
|
26
21
|
const [ref1, ref2, limited] = useLimited();
|
|
27
|
-
return
|
|
28
|
-
|
|
29
|
-
|
|
22
|
+
return /*#__PURE__*/ _jsxs("div", {
|
|
23
|
+
ref: ref1,
|
|
24
|
+
className: classNames(wrapperClassName, 'w-100 position-relative d-f flex-row of-x-hidden'),
|
|
25
|
+
children: [
|
|
26
|
+
/*#__PURE__*/ _jsx(BodyText, {
|
|
27
|
+
...props,
|
|
28
|
+
className: classNames(props.className, Styles.mainText, {
|
|
29
|
+
[Styles.mainTextHidden]: limited
|
|
30
|
+
}),
|
|
31
|
+
ref: ref2,
|
|
32
|
+
children: children
|
|
33
|
+
}),
|
|
34
|
+
limited && /*#__PURE__*/ _jsxs("div", {
|
|
35
|
+
className: Styles.moreDetailsWrapper,
|
|
36
|
+
children: [
|
|
37
|
+
/*#__PURE__*/ _jsx(BodyText, {
|
|
38
|
+
...props,
|
|
39
|
+
className: classNames(props.className, Styles.moreDetailsText, 't-truncate'),
|
|
40
|
+
children: children
|
|
41
|
+
}),
|
|
42
|
+
/*#__PURE__*/ _jsx(MoreDetails, {
|
|
43
|
+
full: children !== null && children !== void 0 ? children : '',
|
|
44
|
+
short: "",
|
|
45
|
+
size: props.size
|
|
46
|
+
})
|
|
47
|
+
]
|
|
48
|
+
})
|
|
49
|
+
]
|
|
50
|
+
});
|
|
30
51
|
};
|
|
31
|
-
export const HeadlineLine = (
|
|
32
|
-
var { children, wrapperClassName } = _a, props = __rest(_a, ["children", "wrapperClassName"]);
|
|
52
|
+
export const HeadlineLine = ({ children, wrapperClassName, ...props })=>{
|
|
33
53
|
const [ref1, ref2, limited] = useLimited();
|
|
34
|
-
return
|
|
35
|
-
|
|
36
|
-
|
|
54
|
+
return /*#__PURE__*/ _jsxs("div", {
|
|
55
|
+
ref: ref1,
|
|
56
|
+
className: classNames(wrapperClassName, 'w-100 position-relative d-f flex-row'),
|
|
57
|
+
children: [
|
|
58
|
+
/*#__PURE__*/ _jsx(Headline, {
|
|
59
|
+
...props,
|
|
60
|
+
className: classNames(props.className, Styles.mainText, {
|
|
61
|
+
[Styles.mainTextHidden]: limited
|
|
62
|
+
}),
|
|
63
|
+
ref: ref2,
|
|
64
|
+
children: children
|
|
65
|
+
}),
|
|
66
|
+
limited && /*#__PURE__*/ _jsxs("div", {
|
|
67
|
+
className: Styles.moreDetailsWrapper,
|
|
68
|
+
children: [
|
|
69
|
+
/*#__PURE__*/ _jsx(Headline, {
|
|
70
|
+
...props,
|
|
71
|
+
className: classNames(props.className, Styles.moreDetailsText, 't-truncate'),
|
|
72
|
+
children: children
|
|
73
|
+
}),
|
|
74
|
+
/*#__PURE__*/ _jsx(MoreDetails, {
|
|
75
|
+
full: children !== null && children !== void 0 ? children : '',
|
|
76
|
+
short: ""
|
|
77
|
+
})
|
|
78
|
+
]
|
|
79
|
+
})
|
|
80
|
+
]
|
|
81
|
+
});
|
|
37
82
|
};
|
|
83
|
+
|
|
38
84
|
//# sourceMappingURL=line-text.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/ui/line-text/line-text.tsx"],"sourcesContent":["import { useMemo, FC } from 'react';\nimport classNames from 'classnames';\nimport {\n BodyText,\n BodyTextPropsStrict,\n Headline,\n HeadlinePropsStrict,\n MoreDetails,\n} from '@servicetitan/design-system';\nimport { useClientRect } from '../../../utils/use-client-rect';\nimport * as Styles from './line-text.module.less';\n\nconst useLimited = (): [\n (node: HTMLElement | null) => void,\n (node: HTMLElement | null) => void,\n boolean,\n] => {\n const [rect1, ref1] = useClientRect();\n const [rect2, ref2] = useClientRect();\n const limited = useMemo(\n () => !!rect1?.width && !!rect2?.width && (rect2?.width || 0) > (rect1?.width || 0),\n [rect1, rect2]\n );\n\n return [ref1, ref2, limited];\n};\n\nexport interface BodyTextLineProps extends BodyTextPropsStrict {\n wrapperClassName?: string;\n children?: string;\n}\n\nexport const BodyTextLine: FC<BodyTextLineProps> = ({ children, wrapperClassName, ...props }) => {\n const [ref1, ref2, limited] = useLimited();\n\n return (\n <div\n ref={ref1}\n className={classNames(\n wrapperClassName,\n 'w-100 position-relative d-f flex-row of-x-hidden'\n )}\n >\n <BodyText\n {...props}\n className={classNames(props.className, Styles.mainText, {\n [Styles.mainTextHidden]: limited,\n })}\n ref={ref2}\n >\n {children}\n </BodyText>\n\n {limited && (\n <div className={Styles.moreDetailsWrapper}>\n <BodyText\n {...props}\n className={classNames(\n props.className,\n Styles.moreDetailsText,\n 't-truncate'\n )}\n >\n {children}\n </BodyText>\n <MoreDetails full={children ?? ''} short=\"\" size={props.size} />\n </div>\n )}\n </div>\n );\n};\n\nexport interface HeadlineLineProps extends HeadlinePropsStrict {\n wrapperClassName?: string;\n children?: string;\n}\n\nexport const HeadlineLine: FC<HeadlineLineProps> = ({ children, wrapperClassName, ...props }) => {\n const [ref1, ref2, limited] = useLimited();\n\n return (\n <div\n ref={ref1}\n className={classNames(wrapperClassName, 'w-100 position-relative d-f flex-row')}\n >\n <Headline\n {...props}\n className={classNames(props.className, Styles.mainText, {\n [Styles.mainTextHidden]: limited,\n })}\n ref={ref2}\n >\n {children}\n </Headline>\n\n {limited && (\n <div className={Styles.moreDetailsWrapper}>\n <Headline\n {...props}\n className={classNames(\n props.className,\n Styles.moreDetailsText,\n 't-truncate'\n )}\n >\n {children}\n </Headline>\n <MoreDetails full={children ?? ''} short=\"\" />\n </div>\n )}\n </div>\n );\n};\n"],"names":["useMemo","classNames","BodyText","Headline","MoreDetails","useClientRect","Styles","useLimited","rect1","ref1","rect2","ref2","limited","width","BodyTextLine","children","wrapperClassName","props","div","ref","className","mainText","mainTextHidden","moreDetailsWrapper","moreDetailsText","full","short","size","HeadlineLine"],"mappings":";AAAA,SAASA,OAAO,QAAY,QAAQ;AACpC,OAAOC,gBAAgB,aAAa;AACpC,SACIC,QAAQ,EAERC,QAAQ,EAERC,WAAW,QACR,8BAA8B;AACrC,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,YAAYC,YAAY,0BAA0B;AAElD,MAAMC,aAAa;IAKf,MAAM,CAACC,OAAOC,KAAK,GAAGJ;IACtB,MAAM,CAACK,OAAOC,KAAK,GAAGN;IACtB,MAAMO,UAAUZ,QACZ,IAAM,CAAC,EAACQ,kBAAAA,4BAAAA,MAAOK,KAAK,KAAI,CAAC,EAACH,kBAAAA,4BAAAA,MAAOG,KAAK,KAAI,AAACH,CAAAA,CAAAA,kBAAAA,4BAAAA,MAAOG,KAAK,KAAI,CAAA,IAAML,CAAAA,CAAAA,kBAAAA,4BAAAA,MAAOK,KAAK,KAAI,CAAA,GACjF;QAACL;QAAOE;KAAM;IAGlB,OAAO;QAACD;QAAME;QAAMC;KAAQ;AAChC;AAOA,OAAO,MAAME,eAAsC,CAAC,EAAEC,QAAQ,EAAEC,gBAAgB,EAAE,GAAGC,OAAO;IACxF,MAAM,CAACR,MAAME,MAAMC,QAAQ,GAAGL;IAE9B,qBACI,MAACW;QACGC,KAAKV;QACLW,WAAWnB,WACPe,kBACA;;0BAGJ,KAACd;gBACI,GAAGe,KAAK;gBACTG,WAAWnB,WAAWgB,MAAMG,SAAS,EAAEd,OAAOe,QAAQ,EAAE;oBACpD,CAACf,OAAOgB,cAAc,CAAC,EAAEV;gBAC7B;gBACAO,KAAKR;0BAEJI;;YAGJH,yBACG,MAACM;gBAAIE,WAAWd,OAAOiB,kBAAkB;;kCACrC,KAACrB;wBACI,GAAGe,KAAK;wBACTG,WAAWnB,WACPgB,MAAMG,SAAS,EACfd,OAAOkB,eAAe,EACtB;kCAGHT;;kCAEL,KAACX;wBAAYqB,MAAMV,qBAAAA,sBAAAA,WAAY;wBAAIW,OAAM;wBAAGC,MAAMV,MAAMU,IAAI;;;;;;AAKhF,EAAE;AAOF,OAAO,MAAMC,eAAsC,CAAC,EAAEb,QAAQ,EAAEC,gBAAgB,EAAE,GAAGC,OAAO;IACxF,MAAM,CAACR,MAAME,MAAMC,QAAQ,GAAGL;IAE9B,qBACI,MAACW;QACGC,KAAKV;QACLW,WAAWnB,WAAWe,kBAAkB;;0BAExC,KAACb;gBACI,GAAGc,KAAK;gBACTG,WAAWnB,WAAWgB,MAAMG,SAAS,EAAEd,OAAOe,QAAQ,EAAE;oBACpD,CAACf,OAAOgB,cAAc,CAAC,EAAEV;gBAC7B;gBACAO,KAAKR;0BAEJI;;YAGJH,yBACG,MAACM;gBAAIE,WAAWd,OAAOiB,kBAAkB;;kCACrC,KAACpB;wBACI,GAAGc,KAAK;wBACTG,WAAWnB,WACPgB,MAAMG,SAAS,EACfd,OAAOkB,eAAe,EACtB;kCAGHT;;kCAEL,KAACX;wBAAYqB,MAAMV,qBAAAA,sBAAAA,WAAY;wBAAIW,OAAM;;;;;;AAK7D,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/ui/title-popover/index.tsx"],"sourcesContent":["export * from './title-popover';\n"],"names":[],"mappings":"AAAA,cAAc,kBAAkB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"title-popover.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/title-popover/title-popover.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAa,SAAS,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAKhE,UAAU,iBAAkB,SAAQ,iBAAiB,CAAC,EAAE,CAAC;IACrD,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,qBACa,YAAa,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IAC9C,MAAM,UAAS;IAE3B,QAAQ,4CAA+B;gBAE3B,KAAK,EAAE,iBAAiB;IAMpC,MAAM,aAEJ;IAGF,KAAK,aAEH;IAGF,WAAW,
|
|
1
|
+
{"version":3,"file":"title-popover.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/title-popover/title-popover.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAa,SAAS,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAKhE,UAAU,iBAAkB,SAAQ,iBAAiB,CAAC,EAAE,CAAC;IACrD,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,qBACa,YAAa,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IAC9C,MAAM,UAAS;IAE3B,QAAQ,4CAA+B;gBAE3B,KAAK,EAAE,iBAAiB;IAMpC,MAAM,aAEJ;IAGF,KAAK,aAEH;IAGF,WAAW,GAAI,OAAO,UAAU,UAU9B;IAEF,iBAAiB;IAIjB,oBAAoB;IAIpB,MAAM;CAgCT"}
|