@umplabs/truncated-value 0.1.0 → 0.2.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/README.md +22 -0
- package/dist/react.cjs +16 -6
- package/dist/react.cjs.map +1 -1
- package/dist/react.d.cts +2 -0
- package/dist/react.d.ts +2 -0
- package/dist/react.js +16 -6
- package/dist/react.js.map +1 -1
- package/dist/truncated-value.iife.global.js +18 -12
- package/dist/truncated-value.iife.global.js.map +1 -1
- package/dist/web-component.cjs +15 -5
- package/dist/web-component.cjs.map +1 -1
- package/dist/web-component.d.cts +3 -0
- package/dist/web-component.d.ts +3 -0
- package/dist/web-component.js +15 -5
- package/dist/web-component.js.map +1 -1
- package/package.json +24 -16
package/README.md
CHANGED
|
@@ -116,6 +116,22 @@ import "@umplabs/truncated-value/web-component";
|
|
|
116
116
|
/>
|
|
117
117
|
```
|
|
118
118
|
|
|
119
|
+
To style the visual ellipsis in React:
|
|
120
|
+
|
|
121
|
+
```css
|
|
122
|
+
.my-custom-class .tv-ellipsis {
|
|
123
|
+
letter-spacing: 0.12em;
|
|
124
|
+
}
|
|
125
|
+
```
|
|
126
|
+
|
|
127
|
+
For the web component, use the exposed shadow part:
|
|
128
|
+
|
|
129
|
+
```css
|
|
130
|
+
truncated-value::part(ellipsis) {
|
|
131
|
+
letter-spacing: 0.12em;
|
|
132
|
+
}
|
|
133
|
+
```
|
|
134
|
+
|
|
119
135
|
## Features
|
|
120
136
|
|
|
121
137
|
- **Smart truncation**: Shows start and end characters, visually collapses the middle
|
|
@@ -138,6 +154,7 @@ This component ships with **no visual opinions** — no colors, fonts, sizes, or
|
|
|
138
154
|
| `value` | `string` | `""` | The string value to display and potentially truncate |
|
|
139
155
|
| `startLength` | `number` | `6` | Number of characters to show at the start |
|
|
140
156
|
| `endLength` | `number` | `4` | Number of characters to show at the end |
|
|
157
|
+
| `ellipsis` | `string` | `"..."` | Ellipsis indicator shown when truncated |
|
|
141
158
|
| `expandable` | `boolean` | `false` | Whether the component expands on focus/click |
|
|
142
159
|
| `className` | `string` | - | Additional CSS class name |
|
|
143
160
|
|
|
@@ -148,6 +165,7 @@ This component ships with **no visual opinions** — no colors, fonts, sizes, or
|
|
|
148
165
|
| `value` | `string` | `""` | The string value to display |
|
|
149
166
|
| `start-length` | `number` | `6` | Characters to show at the start |
|
|
150
167
|
| `end-length` | `number` | `4` | Characters to show at the end |
|
|
168
|
+
| `ellipsis` | `string` | `"..."` | Ellipsis indicator shown when truncated |
|
|
151
169
|
| `expandable` | `boolean` | `false` | Whether the component expands on focus/click |
|
|
152
170
|
|
|
153
171
|
### Shadow DOM Parts (Web Component)
|
|
@@ -167,6 +185,10 @@ truncated-value::part(end) {
|
|
|
167
185
|
truncated-value::part(middle) {
|
|
168
186
|
color: #666;
|
|
169
187
|
}
|
|
188
|
+
|
|
189
|
+
truncated-value::part(ellipsis) {
|
|
190
|
+
letter-spacing: 0.12em;
|
|
191
|
+
}
|
|
170
192
|
```
|
|
171
193
|
|
|
172
194
|
## Browser Support
|
package/dist/react.cjs
CHANGED
|
@@ -44,14 +44,15 @@ var styles = `
|
|
|
44
44
|
[tabindex].truncated-value { --isTruncated: 0; }
|
|
45
45
|
[tabindex].truncated-value:not(:is(:active, :focus-within, [data-is-truncated="false"])) { --isTruncated: 1; cursor: zoom-in; }
|
|
46
46
|
[tabindex="-1"].truncated-value:not([data-is-truncated="false"]) { --isTruncated: 1 !important; cursor: default !important; }
|
|
47
|
-
[tabindex].truncated-value > .tv-middle >
|
|
48
|
-
[tabindex].truncated-value > .tv-middle >
|
|
49
|
-
[tabindex].truncated-value > .tv-middle >
|
|
47
|
+
[tabindex].truncated-value > .tv-middle > .tv-middle-text { font-size: calc((1 - var(--isTruncated)) * 1em); }
|
|
48
|
+
[tabindex].truncated-value > .tv-middle > .tv-ellipsis { font-size: calc(var(--isTruncated) * 1em); pointer-events: none; }
|
|
49
|
+
[tabindex].truncated-value > .tv-middle > .tv-ellipsis::after { content: attr(data-ellipsis); }
|
|
50
50
|
`;
|
|
51
51
|
var TruncatedValue = ({
|
|
52
52
|
value = "",
|
|
53
53
|
startLength = 6,
|
|
54
54
|
endLength = 4,
|
|
55
|
+
ellipsis = "...",
|
|
55
56
|
expandable = false,
|
|
56
57
|
className,
|
|
57
58
|
style
|
|
@@ -61,6 +62,8 @@ var TruncatedValue = ({
|
|
|
61
62
|
startLength,
|
|
62
63
|
endLength
|
|
63
64
|
});
|
|
65
|
+
const middleFirstHalf = middle.slice(0, middle.length / 2);
|
|
66
|
+
const middleSecondHalf = middle.slice(middle.length / 2);
|
|
64
67
|
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
65
68
|
/* @__PURE__ */ jsxRuntime.jsx("style", { children: styles }),
|
|
66
69
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
@@ -73,9 +76,16 @@ var TruncatedValue = ({
|
|
|
73
76
|
children: [
|
|
74
77
|
/* @__PURE__ */ jsxRuntime.jsx("span", { children: start }),
|
|
75
78
|
/* @__PURE__ */ jsxRuntime.jsxs("span", { className: "tv-middle", children: [
|
|
76
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", {
|
|
77
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
78
|
-
|
|
79
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "tv-middle-text", children: middleFirstHalf }),
|
|
80
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
81
|
+
"span",
|
|
82
|
+
{
|
|
83
|
+
className: "tv-ellipsis",
|
|
84
|
+
"aria-hidden": "true",
|
|
85
|
+
"data-ellipsis": ellipsis
|
|
86
|
+
}
|
|
87
|
+
),
|
|
88
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "tv-middle-text", children: middleSecondHalf })
|
|
79
89
|
] }),
|
|
80
90
|
/* @__PURE__ */ jsxRuntime.jsx("span", { children: end })
|
|
81
91
|
]
|
package/dist/react.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/core/truncate.ts","../src/core/styles.ts","../src/TruncatedValue.tsx"],"names":["jsxs","Fragment","jsx"],"mappings":";;;;;AAuBO,SAAS,SAAS,OAAA,EAA0C;AACjE,EAAA,MAAM,EAAE,KAAA,EAAO,WAAA,GAAc,CAAA,EAAG,SAAA,GAAY,GAAE,GAAI,OAAA;AAGlD,EAAA,IAAI,CAAC,KAAA,EAAO;AACV,IAAA,OAAO;AAAA,MACL,KAAA,EAAO,EAAA;AAAA,MACP,MAAA,EAAQ,EAAA;AAAA,MACR,GAAA,EAAK,EAAA;AAAA,MACL,WAAA,EAAa;AAAA,KACf;AAAA,EACF;AAGA,EAAA,MAAM,WAAA,GAAc,WAAA,GAAc,SAAA,GAAY,KAAA,CAAM,MAAA;AAGpD,EAAA,MAAM,SAAS,IAAA,CAAK,GAAA,CAAI,GAAG,WAAA,GAAc,SAAA,GAAY,MAAM,MAAM,CAAA;AAGjE,EAAA,MAAM,mBAAA,GACJ,eACC,WAAA,GAAc,SAAA,GAAY,KAAK,IAAA,GAAO,IAAA,CAAK,KAAA,EAAO,MAAA,GAAS,CAAC,CAAA;AAC/D,EAAA,MAAM,iBAAA,GACJ,aAAa,WAAA,GAAc,SAAA,GAAY,KAAK,KAAA,GAAQ,IAAA,CAAK,IAAA,EAAM,MAAA,GAAS,CAAC,CAAA;AAG3E,EAAA,MAAM,kBAAkB,IAAA,CAAK,GAAA;AAAA,IAC3B,CAAA;AAAA,IACA,IAAA,CAAK,GAAA,CAAI,mBAAA,EAAqB,KAAA,CAAM,MAAM;AAAA,GAC5C;AACA,EAAA,MAAM,gBAAgB,IAAA,CAAK,GAAA;AAAA,IACzB,CAAA;AAAA,IACA,IAAA,CAAK,GAAA,CAAI,iBAAA,EAAmB,KAAA,CAAM,SAAS,eAAe;AAAA,GAC5D;AAGA,EAAA,MAAM,KAAA,GAAQ,KAAA,CAAM,KAAA,CAAM,CAAA,EAAG,eAAe,CAAA;AAC5C,EAAA,MAAM,MAAM,aAAA,GAAgB,CAAA,GAAI,MAAM,KAAA,CAAM,CAAC,aAAa,CAAA,GAAI,EAAA;AAC9D,EAAA,MAAM,SAAS,KAAA,CAAM,KAAA;AAAA,IACnB,eAAA;AAAA,IACA,aAAA,GAAgB,CAAA,GAAI,CAAC,aAAA,GAAgB,KAAA,CAAM;AAAA,GAC7C;AAEA,EAAA,OAAO;AAAA,IACL,KAAA;AAAA,IACA,MAAA;AAAA,IACA,GAAA;AAAA,IACA;AAAA,GACF;AACF;;;AC9DO,IAAM,MAAA,GAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAA;AC4Bf,IAAM,iBAAgD,CAAC;AAAA,EAC5D,KAAA,GAAQ,EAAA;AAAA,EACR,WAAA,GAAc,CAAA;AAAA,EACd,SAAA,GAAY,CAAA;AAAA,EACZ,UAAA,GAAa,KAAA;AAAA,EACb,SAAA;AAAA,EACA;AACF,CAAA,KAAM;AACJ,EAAA,MAAM,EAAE,KAAA,EAAO,MAAA,EAAQ,GAAA,EAAK,WAAA,KAAgB,QAAA,CAAS;AAAA,IACnD,KAAA;AAAA,IACA,WAAA;AAAA,IACA;AAAA,GACD,CAAA;
|
|
1
|
+
{"version":3,"sources":["../src/core/truncate.ts","../src/core/styles.ts","../src/TruncatedValue.tsx"],"names":["jsxs","Fragment","jsx"],"mappings":"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","file":"react.cjs","sourcesContent":["import type { TruncateOptions, TruncateResult } from \"./types\";\n\n/**\n * Truncates a string value intelligently, preserving the start and end portions.\n *\n * The function handles edge cases like:\n * - Strings shorter than the requested lengths (adjusts proportionally)\n * - Zero or very large length values\n * - Empty strings\n *\n * @example\n * ```ts\n * const result = truncate({\n * value: \"0x1234567890abcdef1234567890abcdef12345678\",\n * startLength: 6,\n * endLength: 4\n * });\n * // result.start = \"0x1234\"\n * // result.middle = \"567890abcdef1234567890abcdef1234\"\n * // result.end = \"5678\"\n * // result.isTruncated = true\n * ```\n */\nexport function truncate(options: TruncateOptions): TruncateResult {\n const { value, startLength = 6, endLength = 4 } = options;\n\n // Handle empty or undefined values\n if (!value) {\n return {\n start: \"\",\n middle: \"\",\n end: \"\",\n isTruncated: false,\n };\n }\n\n // Determine if truncation is needed\n const isTruncated = startLength + endLength < value.length;\n\n // Calculate excess characters when string is shorter than requested lengths\n const excess = Math.max(0, startLength + endLength - value.length);\n\n // Adjust lengths proportionally when string is too short\n const adjustedStartLength =\n startLength -\n (startLength > endLength ? Math.ceil : Math.floor)(excess / 2);\n const adjustedEndLength =\n endLength - (startLength > endLength ? Math.floor : Math.ceil)(excess / 2);\n\n // Ensure we don't get negative lengths\n const safeStartLength = Math.max(\n 0,\n Math.min(adjustedStartLength, value.length)\n );\n const safeEndLength = Math.max(\n 0,\n Math.min(adjustedEndLength, value.length - safeStartLength)\n );\n\n // Split the value into start, middle, and end segments\n const start = value.slice(0, safeStartLength);\n const end = safeEndLength > 0 ? value.slice(-safeEndLength) : \"\";\n const middle = value.slice(\n safeStartLength,\n safeEndLength > 0 ? -safeEndLength : value.length\n );\n\n return {\n start,\n middle,\n end,\n isTruncated,\n };\n}\n","/**\n * CSS styles for the TruncatedValue component.\n *\n * How it works:\n * - `--isTruncated` CSS variable (0=expanded, 1=truncated) represents state\n * - Visual default is truncated; expands on :active or :focus-within\n * - Short values (data-is-truncated=\"false\") stay expanded\n * - Non-expandable (tabindex=\"-1\") stays truncated unless value is short\n * - Middle text: font-size set to 0 when truncated (hidden but searchable)\n * - Ellipsis: decorative span uses `data-ellipsis` via ::after content\n */\nexport const styles = `\n[tabindex].truncated-value { --isTruncated: 0; }\n[tabindex].truncated-value:not(:is(:active, :focus-within, [data-is-truncated=\"false\"])) { --isTruncated: 1; cursor: zoom-in; }\n[tabindex=\"-1\"].truncated-value:not([data-is-truncated=\"false\"]) { --isTruncated: 1 !important; cursor: default !important; }\n[tabindex].truncated-value > .tv-middle > .tv-middle-text { font-size: calc((1 - var(--isTruncated)) * 1em); }\n[tabindex].truncated-value > .tv-middle > .tv-ellipsis { font-size: calc(var(--isTruncated) * 1em); pointer-events: none; }\n[tabindex].truncated-value > .tv-middle > .tv-ellipsis::after { content: attr(data-ellipsis); }\n`;\n","import * as React from \"react\";\nimport { truncate, styles, type TruncatedValueBaseProps } from \"./core\";\n\n/**\n * Props for the TruncatedValue React component\n */\nexport interface TruncatedValueProps extends TruncatedValueBaseProps {\n /** Additional CSS class name applied to the interactive element */\n className?: string;\n /** Inline styles applied to the component */\n style?: React.CSSProperties;\n}\n\n/**\n * A component that intelligently truncates long string values, displaying the start and end\n * while hiding the middle portion. Features interactive focus states that reveal the full value.\n * The complete text remains searchable via browser find functionality even when truncated.\n *\n * Commonly used for displaying addresses, hashes, or other long identifiers where the beginning\n * and end are most important for identification.\n *\n * @example\n * ```tsx\n * <TruncatedValue\n * value=\"0x1234567890abcdef1234567890abcdef12345678\"\n * startLength={8}\n * endLength={6}\n * expandable\n * />\n * // Displays: 0x123456...345678 (expandable on focus)\n *\n * <TruncatedValue\n * value=\"0x1234567890abcdef1234567890abcdef12345678\"\n * expandable={false}\n * />\n * // Displays: 0x1234...5678 (always truncated)\n * // Full text remains searchable with Ctrl+F/Cmd+F\n * ```\n */\nexport const TruncatedValue: React.FC<TruncatedValueProps> = ({\n value = \"\",\n startLength = 6,\n endLength = 4,\n ellipsis = \"...\",\n expandable = false,\n className,\n style,\n}) => {\n const { start, middle, end, isTruncated } = truncate({\n value,\n startLength,\n endLength,\n });\n const middleFirstHalf = middle.slice(0, middle.length / 2);\n const middleSecondHalf = middle.slice(middle.length / 2);\n\n return (\n <>\n <style>{styles}</style>\n <span\n data-is-truncated={isTruncated}\n tabIndex={expandable ? 0 : -1}\n className={`truncated-value${className ? ` ${className}` : \"\"}`}\n style={style}\n >\n <span>{start}</span>\n <span className=\"tv-middle\">\n <span className=\"tv-middle-text\">{middleFirstHalf}</span>\n <span\n className=\"tv-ellipsis\"\n aria-hidden=\"true\"\n data-ellipsis={ellipsis}\n ></span>\n <span className=\"tv-middle-text\">{middleSecondHalf}</span>\n </span>\n <span>{end}</span>\n </span>\n </>\n );\n};\n"]}
|
package/dist/react.d.cts
CHANGED
|
@@ -10,6 +10,8 @@ interface TruncatedValueBaseProps {
|
|
|
10
10
|
startLength?: number;
|
|
11
11
|
/** Number of characters to show at the end when truncated (default: 4) */
|
|
12
12
|
endLength?: number;
|
|
13
|
+
/** Ellipsis indicator shown between start and end when truncated (default: "...") */
|
|
14
|
+
ellipsis?: string;
|
|
13
15
|
/** Whether the component should expand on focus/click (default: false) */
|
|
14
16
|
expandable?: boolean;
|
|
15
17
|
}
|
package/dist/react.d.ts
CHANGED
|
@@ -10,6 +10,8 @@ interface TruncatedValueBaseProps {
|
|
|
10
10
|
startLength?: number;
|
|
11
11
|
/** Number of characters to show at the end when truncated (default: 4) */
|
|
12
12
|
endLength?: number;
|
|
13
|
+
/** Ellipsis indicator shown between start and end when truncated (default: "...") */
|
|
14
|
+
ellipsis?: string;
|
|
13
15
|
/** Whether the component should expand on focus/click (default: false) */
|
|
14
16
|
expandable?: boolean;
|
|
15
17
|
}
|
package/dist/react.js
CHANGED
|
@@ -42,14 +42,15 @@ var styles = `
|
|
|
42
42
|
[tabindex].truncated-value { --isTruncated: 0; }
|
|
43
43
|
[tabindex].truncated-value:not(:is(:active, :focus-within, [data-is-truncated="false"])) { --isTruncated: 1; cursor: zoom-in; }
|
|
44
44
|
[tabindex="-1"].truncated-value:not([data-is-truncated="false"]) { --isTruncated: 1 !important; cursor: default !important; }
|
|
45
|
-
[tabindex].truncated-value > .tv-middle >
|
|
46
|
-
[tabindex].truncated-value > .tv-middle >
|
|
47
|
-
[tabindex].truncated-value > .tv-middle >
|
|
45
|
+
[tabindex].truncated-value > .tv-middle > .tv-middle-text { font-size: calc((1 - var(--isTruncated)) * 1em); }
|
|
46
|
+
[tabindex].truncated-value > .tv-middle > .tv-ellipsis { font-size: calc(var(--isTruncated) * 1em); pointer-events: none; }
|
|
47
|
+
[tabindex].truncated-value > .tv-middle > .tv-ellipsis::after { content: attr(data-ellipsis); }
|
|
48
48
|
`;
|
|
49
49
|
var TruncatedValue = ({
|
|
50
50
|
value = "",
|
|
51
51
|
startLength = 6,
|
|
52
52
|
endLength = 4,
|
|
53
|
+
ellipsis = "...",
|
|
53
54
|
expandable = false,
|
|
54
55
|
className,
|
|
55
56
|
style
|
|
@@ -59,6 +60,8 @@ var TruncatedValue = ({
|
|
|
59
60
|
startLength,
|
|
60
61
|
endLength
|
|
61
62
|
});
|
|
63
|
+
const middleFirstHalf = middle.slice(0, middle.length / 2);
|
|
64
|
+
const middleSecondHalf = middle.slice(middle.length / 2);
|
|
62
65
|
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
63
66
|
/* @__PURE__ */ jsx("style", { children: styles }),
|
|
64
67
|
/* @__PURE__ */ jsxs(
|
|
@@ -71,9 +74,16 @@ var TruncatedValue = ({
|
|
|
71
74
|
children: [
|
|
72
75
|
/* @__PURE__ */ jsx("span", { children: start }),
|
|
73
76
|
/* @__PURE__ */ jsxs("span", { className: "tv-middle", children: [
|
|
74
|
-
/* @__PURE__ */ jsx("span", {
|
|
75
|
-
/* @__PURE__ */ jsx(
|
|
76
|
-
|
|
77
|
+
/* @__PURE__ */ jsx("span", { className: "tv-middle-text", children: middleFirstHalf }),
|
|
78
|
+
/* @__PURE__ */ jsx(
|
|
79
|
+
"span",
|
|
80
|
+
{
|
|
81
|
+
className: "tv-ellipsis",
|
|
82
|
+
"aria-hidden": "true",
|
|
83
|
+
"data-ellipsis": ellipsis
|
|
84
|
+
}
|
|
85
|
+
),
|
|
86
|
+
/* @__PURE__ */ jsx("span", { className: "tv-middle-text", children: middleSecondHalf })
|
|
77
87
|
] }),
|
|
78
88
|
/* @__PURE__ */ jsx("span", { children: end })
|
|
79
89
|
]
|
package/dist/react.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/core/truncate.ts","../src/core/styles.ts","../src/TruncatedValue.tsx"],"names":[],"mappings":";;;AAuBO,SAAS,SAAS,OAAA,EAA0C;AACjE,EAAA,MAAM,EAAE,KAAA,EAAO,WAAA,GAAc,CAAA,EAAG,SAAA,GAAY,GAAE,GAAI,OAAA;AAGlD,EAAA,IAAI,CAAC,KAAA,EAAO;AACV,IAAA,OAAO;AAAA,MACL,KAAA,EAAO,EAAA;AAAA,MACP,MAAA,EAAQ,EAAA;AAAA,MACR,GAAA,EAAK,EAAA;AAAA,MACL,WAAA,EAAa;AAAA,KACf;AAAA,EACF;AAGA,EAAA,MAAM,WAAA,GAAc,WAAA,GAAc,SAAA,GAAY,KAAA,CAAM,MAAA;AAGpD,EAAA,MAAM,SAAS,IAAA,CAAK,GAAA,CAAI,GAAG,WAAA,GAAc,SAAA,GAAY,MAAM,MAAM,CAAA;AAGjE,EAAA,MAAM,mBAAA,GACJ,eACC,WAAA,GAAc,SAAA,GAAY,KAAK,IAAA,GAAO,IAAA,CAAK,KAAA,EAAO,MAAA,GAAS,CAAC,CAAA;AAC/D,EAAA,MAAM,iBAAA,GACJ,aAAa,WAAA,GAAc,SAAA,GAAY,KAAK,KAAA,GAAQ,IAAA,CAAK,IAAA,EAAM,MAAA,GAAS,CAAC,CAAA;AAG3E,EAAA,MAAM,kBAAkB,IAAA,CAAK,GAAA;AAAA,IAC3B,CAAA;AAAA,IACA,IAAA,CAAK,GAAA,CAAI,mBAAA,EAAqB,KAAA,CAAM,MAAM;AAAA,GAC5C;AACA,EAAA,MAAM,gBAAgB,IAAA,CAAK,GAAA;AAAA,IACzB,CAAA;AAAA,IACA,IAAA,CAAK,GAAA,CAAI,iBAAA,EAAmB,KAAA,CAAM,SAAS,eAAe;AAAA,GAC5D;AAGA,EAAA,MAAM,KAAA,GAAQ,KAAA,CAAM,KAAA,CAAM,CAAA,EAAG,eAAe,CAAA;AAC5C,EAAA,MAAM,MAAM,aAAA,GAAgB,CAAA,GAAI,MAAM,KAAA,CAAM,CAAC,aAAa,CAAA,GAAI,EAAA;AAC9D,EAAA,MAAM,SAAS,KAAA,CAAM,KAAA;AAAA,IACnB,eAAA;AAAA,IACA,aAAA,GAAgB,CAAA,GAAI,CAAC,aAAA,GAAgB,KAAA,CAAM;AAAA,GAC7C;AAEA,EAAA,OAAO;AAAA,IACL,KAAA;AAAA,IACA,MAAA;AAAA,IACA,GAAA;AAAA,IACA;AAAA,GACF;AACF;;;AC9DO,IAAM,MAAA,GAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAA;AC4Bf,IAAM,iBAAgD,CAAC;AAAA,EAC5D,KAAA,GAAQ,EAAA;AAAA,EACR,WAAA,GAAc,CAAA;AAAA,EACd,SAAA,GAAY,CAAA;AAAA,EACZ,UAAA,GAAa,KAAA;AAAA,EACb,SAAA;AAAA,EACA;AACF,CAAA,KAAM;AACJ,EAAA,MAAM,EAAE,KAAA,EAAO,MAAA,EAAQ,GAAA,EAAK,WAAA,KAAgB,QAAA,CAAS;AAAA,IACnD,KAAA;AAAA,IACA,WAAA;AAAA,IACA;AAAA,GACD,CAAA;
|
|
1
|
+
{"version":3,"sources":["../src/core/truncate.ts","../src/core/styles.ts","../src/TruncatedValue.tsx"],"names":[],"mappings":"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","file":"react.js","sourcesContent":["import type { TruncateOptions, TruncateResult } from \"./types\";\n\n/**\n * Truncates a string value intelligently, preserving the start and end portions.\n *\n * The function handles edge cases like:\n * - Strings shorter than the requested lengths (adjusts proportionally)\n * - Zero or very large length values\n * - Empty strings\n *\n * @example\n * ```ts\n * const result = truncate({\n * value: \"0x1234567890abcdef1234567890abcdef12345678\",\n * startLength: 6,\n * endLength: 4\n * });\n * // result.start = \"0x1234\"\n * // result.middle = \"567890abcdef1234567890abcdef1234\"\n * // result.end = \"5678\"\n * // result.isTruncated = true\n * ```\n */\nexport function truncate(options: TruncateOptions): TruncateResult {\n const { value, startLength = 6, endLength = 4 } = options;\n\n // Handle empty or undefined values\n if (!value) {\n return {\n start: \"\",\n middle: \"\",\n end: \"\",\n isTruncated: false,\n };\n }\n\n // Determine if truncation is needed\n const isTruncated = startLength + endLength < value.length;\n\n // Calculate excess characters when string is shorter than requested lengths\n const excess = Math.max(0, startLength + endLength - value.length);\n\n // Adjust lengths proportionally when string is too short\n const adjustedStartLength =\n startLength -\n (startLength > endLength ? Math.ceil : Math.floor)(excess / 2);\n const adjustedEndLength =\n endLength - (startLength > endLength ? Math.floor : Math.ceil)(excess / 2);\n\n // Ensure we don't get negative lengths\n const safeStartLength = Math.max(\n 0,\n Math.min(adjustedStartLength, value.length)\n );\n const safeEndLength = Math.max(\n 0,\n Math.min(adjustedEndLength, value.length - safeStartLength)\n );\n\n // Split the value into start, middle, and end segments\n const start = value.slice(0, safeStartLength);\n const end = safeEndLength > 0 ? value.slice(-safeEndLength) : \"\";\n const middle = value.slice(\n safeStartLength,\n safeEndLength > 0 ? -safeEndLength : value.length\n );\n\n return {\n start,\n middle,\n end,\n isTruncated,\n };\n}\n","/**\n * CSS styles for the TruncatedValue component.\n *\n * How it works:\n * - `--isTruncated` CSS variable (0=expanded, 1=truncated) represents state\n * - Visual default is truncated; expands on :active or :focus-within\n * - Short values (data-is-truncated=\"false\") stay expanded\n * - Non-expandable (tabindex=\"-1\") stays truncated unless value is short\n * - Middle text: font-size set to 0 when truncated (hidden but searchable)\n * - Ellipsis: decorative span uses `data-ellipsis` via ::after content\n */\nexport const styles = `\n[tabindex].truncated-value { --isTruncated: 0; }\n[tabindex].truncated-value:not(:is(:active, :focus-within, [data-is-truncated=\"false\"])) { --isTruncated: 1; cursor: zoom-in; }\n[tabindex=\"-1\"].truncated-value:not([data-is-truncated=\"false\"]) { --isTruncated: 1 !important; cursor: default !important; }\n[tabindex].truncated-value > .tv-middle > .tv-middle-text { font-size: calc((1 - var(--isTruncated)) * 1em); }\n[tabindex].truncated-value > .tv-middle > .tv-ellipsis { font-size: calc(var(--isTruncated) * 1em); pointer-events: none; }\n[tabindex].truncated-value > .tv-middle > .tv-ellipsis::after { content: attr(data-ellipsis); }\n`;\n","import * as React from \"react\";\nimport { truncate, styles, type TruncatedValueBaseProps } from \"./core\";\n\n/**\n * Props for the TruncatedValue React component\n */\nexport interface TruncatedValueProps extends TruncatedValueBaseProps {\n /** Additional CSS class name applied to the interactive element */\n className?: string;\n /** Inline styles applied to the component */\n style?: React.CSSProperties;\n}\n\n/**\n * A component that intelligently truncates long string values, displaying the start and end\n * while hiding the middle portion. Features interactive focus states that reveal the full value.\n * The complete text remains searchable via browser find functionality even when truncated.\n *\n * Commonly used for displaying addresses, hashes, or other long identifiers where the beginning\n * and end are most important for identification.\n *\n * @example\n * ```tsx\n * <TruncatedValue\n * value=\"0x1234567890abcdef1234567890abcdef12345678\"\n * startLength={8}\n * endLength={6}\n * expandable\n * />\n * // Displays: 0x123456...345678 (expandable on focus)\n *\n * <TruncatedValue\n * value=\"0x1234567890abcdef1234567890abcdef12345678\"\n * expandable={false}\n * />\n * // Displays: 0x1234...5678 (always truncated)\n * // Full text remains searchable with Ctrl+F/Cmd+F\n * ```\n */\nexport const TruncatedValue: React.FC<TruncatedValueProps> = ({\n value = \"\",\n startLength = 6,\n endLength = 4,\n ellipsis = \"...\",\n expandable = false,\n className,\n style,\n}) => {\n const { start, middle, end, isTruncated } = truncate({\n value,\n startLength,\n endLength,\n });\n const middleFirstHalf = middle.slice(0, middle.length / 2);\n const middleSecondHalf = middle.slice(middle.length / 2);\n\n return (\n <>\n <style>{styles}</style>\n <span\n data-is-truncated={isTruncated}\n tabIndex={expandable ? 0 : -1}\n className={`truncated-value${className ? ` ${className}` : \"\"}`}\n style={style}\n >\n <span>{start}</span>\n <span className=\"tv-middle\">\n <span className=\"tv-middle-text\">{middleFirstHalf}</span>\n <span\n className=\"tv-ellipsis\"\n aria-hidden=\"true\"\n data-ellipsis={ellipsis}\n ></span>\n <span className=\"tv-middle-text\">{middleSecondHalf}</span>\n </span>\n <span>{end}</span>\n </span>\n </>\n );\n};\n"]}
|
|
@@ -1,29 +1,35 @@
|
|
|
1
|
-
"use strict";var TruncatedValue=(()=>{var tt=Object.defineProperty;var Nt=Object.getOwnPropertyDescriptor;var ne=Object.getOwnPropertyNames;var ae=Object.prototype.hasOwnProperty;var oe=(r,t)=>{for(var e in t)tt(r,e,{get:t[e],enumerable:!0})},le=(r,t,e,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of ne(t))!ae.call(r,i)&&i!==e&&tt(r,i,{get:()=>t[i],enumerable:!(s=Nt(t,i))||s.enumerable});return r};var he=r=>le(tt({},"__esModule",{value:!0}),r),
|
|
2
|
-
Make sure to test your application with a production build as repeat registrations will throw in production.`);else throw new Error(`Failed to execute 'define' on 'CustomElementRegistry': the name "${t}" has already been used with this registry`);if(this.__reverseDefinitions.has(e))throw new Error(`Failed to execute 'define' on 'CustomElementRegistry': the constructor has already been used with this registry for the tag name ${this.__reverseDefinitions.get(e)}`);e.__localName=t,this.__definitions.set(t,{ctor:e,observedAttributes:e.observedAttributes??[]}),this.__reverseDefinitions.set(e,t),this.__pendingWhenDefineds.get(t)?.resolve(e),this.__pendingWhenDefineds.delete(t)}get(t){return this.__definitions.get(t)?.ctor}getName(t){return this.__reverseDefinitions.get(t)??null}upgrade(t){throw new Error("customElements.upgrade is not currently supported in SSR. Please file a bug if you need it.")}async whenDefined(t){let e=this.__definitions.get(t);if(e)return e.ctor;let s=this.__pendingWhenDefineds.get(t);return s||(s=
|
|
3
|
-
\f\r]`,K=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,Vt=/-->/g,Kt=/>/g,
|
|
4
|
-
\f\r"'\`<>=]|("|')|))|$)`,"g"),Yt=/'/g,Zt=/"/g,te=/^(?:script|style|textarea|title)$/i,Ct=r=>(t,...e)=>({_$litType$:r,strings:t,values:e}),ee=Ct(1),as=Ct(2),os=Ct(3),
|
|
1
|
+
"use strict";var TruncatedValue=(()=>{var tt=Object.defineProperty;var Nt=Object.getOwnPropertyDescriptor;var ne=Object.getOwnPropertyNames;var ae=Object.prototype.hasOwnProperty;var oe=(r,t)=>{for(var e in t)tt(r,e,{get:t[e],enumerable:!0})},le=(r,t,e,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of ne(t))!ae.call(r,i)&&i!==e&&tt(r,i,{get:()=>t[i],enumerable:!(s=Nt(t,i))||s.enumerable});return r};var he=r=>le(tt({},"__esModule",{value:!0}),r),T=(r,t,e,s)=>{for(var i=s>1?void 0:s?Nt(t,e):t,n=r.length-1,a;n>=0;n--)(a=r[n])&&(i=(s?a(t,e,i):a(i))||i);return s&&i&&tt(t,e,i),i};var Pe={};oe(Pe,{TruncatedValueElement:()=>v});var Ot=class{get shadowRoot(){return this.__host.__shadowRoot}constructor(t){this.ariaActiveDescendantElement=null,this.ariaAtomic="",this.ariaAutoComplete="",this.ariaBrailleLabel="",this.ariaBrailleRoleDescription="",this.ariaBusy="",this.ariaChecked="",this.ariaColCount="",this.ariaColIndex="",this.ariaColIndexText="",this.ariaColSpan="",this.ariaControlsElements=null,this.ariaCurrent="",this.ariaDescribedByElements=null,this.ariaDescription="",this.ariaDetailsElements=null,this.ariaDisabled="",this.ariaErrorMessageElements=null,this.ariaExpanded="",this.ariaFlowToElements=null,this.ariaHasPopup="",this.ariaHidden="",this.ariaInvalid="",this.ariaKeyShortcuts="",this.ariaLabel="",this.ariaLabelledByElements=null,this.ariaLevel="",this.ariaLive="",this.ariaModal="",this.ariaMultiLine="",this.ariaMultiSelectable="",this.ariaOrientation="",this.ariaOwnsElements=null,this.ariaPlaceholder="",this.ariaPosInSet="",this.ariaPressed="",this.ariaReadOnly="",this.ariaRelevant="",this.ariaRequired="",this.ariaRoleDescription="",this.ariaRowCount="",this.ariaRowIndex="",this.ariaRowIndexText="",this.ariaRowSpan="",this.ariaSelected="",this.ariaSetSize="",this.ariaSort="",this.ariaValueMax="",this.ariaValueMin="",this.ariaValueNow="",this.ariaValueText="",this.role="",this.form=null,this.labels=[],this.states=new Set,this.validationMessage="",this.validity={},this.willValidate=!0,this.__host=t}checkValidity(){return console.warn("`ElementInternals.checkValidity()` was called on the server.This method always returns true."),!0}reportValidity(){return!0}setFormValue(){}setValidity(){}};var y=function(r,t,e,s,i){if(s==="m")throw new TypeError("Private method is not writable");if(s==="a"&&!i)throw new TypeError("Private accessor was defined without a setter");if(typeof t=="function"?r!==t||!i:!t.has(r))throw new TypeError("Cannot write private member to an object whose class did not declare it");return s==="a"?i.call(r,e):i?i.value=e:t.set(r,e),e},_=function(r,t,e,s){if(e==="a"&&!s)throw new TypeError("Private accessor was defined without a getter");if(typeof t=="function"?r!==t||!s:!t.has(r))throw new TypeError("Cannot read private member from an object whose class did not declare it");return e==="m"?s:e==="a"?s.call(r):s?s.value:t.get(r)},O,et,st,j,ut,W,it,P,k,w,rt,Ht,It=r=>typeof r=="boolean"?r:r?.capture??!1;var pt=class{constructor(){this.__eventListeners=new Map,this.__captureEventListeners=new Map}addEventListener(t,e,s){if(e==null)return;let i=It(s)?this.__captureEventListeners:this.__eventListeners,n=i.get(t);if(n===void 0)n=new Map,i.set(t,n);else if(n.has(e))return;let a=typeof s=="object"&&s?s:{};a.signal?.addEventListener("abort",()=>this.removeEventListener(t,e,s)),n.set(e,a??{})}removeEventListener(t,e,s){if(e==null)return;let i=It(s)?this.__captureEventListeners:this.__eventListeners,n=i.get(t);n!==void 0&&(n.delete(e),n.size||i.delete(t))}dispatchEvent(t){let e=[this],s=this.__eventTargetParent;if(t.composed)for(;s;)e.push(s),s=s.__eventTargetParent;else for(;s&&s!==this.__host;)e.push(s),s=s.__eventTargetParent;let i=!1,n=!1,a=0,l=null,o=null,h=null,u=t.stopPropagation,c=t.stopImmediatePropagation;Object.defineProperties(t,{target:{get(){return l??o},...d},srcElement:{get(){return t.target},...d},currentTarget:{get(){return h},...d},eventPhase:{get(){return a},...d},composedPath:{value:()=>e,...d},stopPropagation:{value:()=>{i=!0,u.call(t)},...d},stopImmediatePropagation:{value:()=>{n=!0,c.call(t)},...d}});let f=(p,A,B)=>{typeof p=="function"?p(t):typeof p?.handleEvent=="function"&&p.handleEvent(t),A.once&&B.delete(p)},g=()=>(h=null,a=0,!t.defaultPrevented),b=e.slice().reverse();l=!this.__host||!t.composed?this:null;let Ut=p=>{for(o=this;o.__host&&p.includes(o.__host);)o=o.__host};for(let p of b){!l&&(!o||o===p.__host)&&Ut(b.slice(b.indexOf(p))),h=p,a=p===t.target?2:1;let A=p.__captureEventListeners.get(t.type);if(A){for(let[B,dt]of A)if(f(B,dt,A),n)return g()}if(i)return g()}let ct=t.bubbles?e:[this];o=null;for(let p of ct){!l&&(!o||p===o.__host)&&Ut(ct.slice(0,ct.indexOf(p)+1)),h=p,a=p===t.target?2:3;let A=p.__eventListeners.get(t.type);if(A){for(let[B,dt]of A)if(f(B,dt,A),n)return g()}if(i)return g()}return g()}},mt=pt;var d={__proto__:null};d.enumerable=!0;Object.freeze(d);var _t=(w=class{constructor(t,e={}){if(O.set(this,!1),et.set(this,!1),st.set(this,!1),j.set(this,!1),ut.set(this,Date.now()),W.set(this,!1),it.set(this,void 0),P.set(this,void 0),k.set(this,void 0),this.NONE=0,this.CAPTURING_PHASE=1,this.AT_TARGET=2,this.BUBBLING_PHASE=3,arguments.length===0)throw new Error("The type argument must be specified");if(typeof e!="object"||!e)throw new Error('The "options" argument must be an object');let{bubbles:s,cancelable:i,composed:n}=e;y(this,O,!!i,"f"),y(this,et,!!s,"f"),y(this,st,!!n,"f"),y(this,it,`${t}`,"f"),y(this,P,null,"f"),y(this,k,!1,"f")}initEvent(t,e,s){throw new Error("Method not implemented.")}stopImmediatePropagation(){this.stopPropagation()}preventDefault(){y(this,j,!0,"f")}get target(){return _(this,P,"f")}get currentTarget(){return _(this,P,"f")}get srcElement(){return _(this,P,"f")}get type(){return _(this,it,"f")}get cancelable(){return _(this,O,"f")}get defaultPrevented(){return _(this,O,"f")&&_(this,j,"f")}get timeStamp(){return _(this,ut,"f")}composedPath(){return _(this,k,"f")?[_(this,P,"f")]:[]}get returnValue(){return!_(this,O,"f")||!_(this,j,"f")}get bubbles(){return _(this,et,"f")}get composed(){return _(this,st,"f")}get eventPhase(){return _(this,k,"f")?w.AT_TARGET:w.NONE}get cancelBubble(){return _(this,W,"f")}set cancelBubble(t){t&&y(this,W,!0,"f")}stopPropagation(){y(this,W,!0,"f")}get isTrusted(){return!1}},O=new WeakMap,et=new WeakMap,st=new WeakMap,j=new WeakMap,ut=new WeakMap,W=new WeakMap,it=new WeakMap,P=new WeakMap,k=new WeakMap,w.NONE=0,w.CAPTURING_PHASE=1,w.AT_TARGET=2,w.BUBBLING_PHASE=3,w);Object.defineProperties(_t.prototype,{initEvent:d,stopImmediatePropagation:d,preventDefault:d,target:d,currentTarget:d,srcElement:d,type:d,cancelable:d,defaultPrevented:d,timeStamp:d,composedPath:d,returnValue:d,bubbles:d,composed:d,eventPhase:d,cancelBubble:d,stopPropagation:d,isTrusted:d});var Dt=(Ht=class extends _t{constructor(t,e={}){super(t,e),rt.set(this,void 0),y(this,rt,e?.detail??null,"f")}initCustomEvent(t,e,s,i){throw new Error("Method not implemented.")}get detail(){return _(this,rt,"f")}},rt=new WeakMap,Ht);Object.defineProperties(Dt.prototype,{detail:d});var ft=_t,gt=Dt;var E;var He=(E=class{constructor(){this.STYLE_RULE=1,this.CHARSET_RULE=2,this.IMPORT_RULE=3,this.MEDIA_RULE=4,this.FONT_FACE_RULE=5,this.PAGE_RULE=6,this.NAMESPACE_RULE=10,this.KEYFRAMES_RULE=7,this.KEYFRAME_RULE=8,this.SUPPORTS_RULE=12,this.COUNTER_STYLE_RULE=11,this.FONT_FEATURE_VALUES_RULE=14,this.__parentStyleSheet=null,this.cssText=""}get parentRule(){return null}get parentStyleSheet(){return this.__parentStyleSheet}get type(){return 0}},E.STYLE_RULE=1,E.CHARSET_RULE=2,E.IMPORT_RULE=3,E.MEDIA_RULE=4,E.FONT_FACE_RULE=5,E.PAGE_RULE=6,E.NAMESPACE_RULE=10,E.KEYFRAMES_RULE=7,E.KEYFRAME_RULE=8,E.SUPPORTS_RULE=12,E.COUNTER_STYLE_RULE=11,E.FONT_FEATURE_VALUES_RULE=14,E);globalThis.Event??(globalThis.Event=ft);globalThis.CustomEvent??(globalThis.CustomEvent=gt);var Bt=new WeakMap,F=r=>{let t=Bt.get(r);return t===void 0&&Bt.set(r,t=new Map),t},ce=class extends mt{constructor(){super(...arguments),this.__shadowRootMode=null,this.__shadowRoot=null,this.__internals=null}get attributes(){return Array.from(F(this)).map(([t,e])=>({name:t,value:e}))}get shadowRoot(){return this.__shadowRootMode==="closed"?null:this.__shadowRoot}get localName(){return this.constructor.__localName}get tagName(){return this.localName?.toUpperCase()}setAttribute(t,e){F(this).set(t,String(e))}removeAttribute(t){F(this).delete(t)}toggleAttribute(t,e){if(this.hasAttribute(t)){if(e===void 0||!e)return this.removeAttribute(t),!1}else return e===void 0||e?(this.setAttribute(t,""),!0):!1;return!0}hasAttribute(t){return F(this).has(t)}attachShadow(t){let e={host:this};return this.__shadowRootMode=t.mode,t&&t.mode==="open"&&(this.__shadowRoot=e),e}attachInternals(){if(this.__internals!==null)throw new Error("Failed to execute 'attachInternals' on 'HTMLElement': ElementInternals for the specified element was already attached.");let t=new Ot(this);return this.__internals=t,t}getAttribute(t){return F(this).get(t)??null}};var de=class extends ce{},St=de;globalThis.litServerRoot??(globalThis.litServerRoot=Object.defineProperty(new St,"localName",{get(){return"lit-server-root"}}));function ue(){let r,t;return{promise:new Promise((s,i)=>{r=s,t=i}),resolve:r,reject:t}}var Et=class{constructor(){this.__definitions=new Map,this.__reverseDefinitions=new Map,this.__pendingWhenDefineds=new Map}define(t,e){if(this.__definitions.has(t))if(process.env.NODE_ENV==="development")console.warn(`'CustomElementRegistry' already has "${t}" defined. This may have been caused by live reload or hot module replacement in which case it can be safely ignored.
|
|
2
|
+
Make sure to test your application with a production build as repeat registrations will throw in production.`);else throw new Error(`Failed to execute 'define' on 'CustomElementRegistry': the name "${t}" has already been used with this registry`);if(this.__reverseDefinitions.has(e))throw new Error(`Failed to execute 'define' on 'CustomElementRegistry': the constructor has already been used with this registry for the tag name ${this.__reverseDefinitions.get(e)}`);e.__localName=t,this.__definitions.set(t,{ctor:e,observedAttributes:e.observedAttributes??[]}),this.__reverseDefinitions.set(e,t),this.__pendingWhenDefineds.get(t)?.resolve(e),this.__pendingWhenDefineds.delete(t)}get(t){return this.__definitions.get(t)?.ctor}getName(t){return this.__reverseDefinitions.get(t)??null}upgrade(t){throw new Error("customElements.upgrade is not currently supported in SSR. Please file a bug if you need it.")}async whenDefined(t){let e=this.__definitions.get(t);if(e)return e.ctor;let s=this.__pendingWhenDefineds.get(t);return s||(s=ue(),this.__pendingWhenDefineds.set(t,s)),s.promise}},pe=Et;var jt=new pe;var G=globalThis,nt=G.ShadowRoot&&(G.ShadyCSS===void 0||G.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,vt=Symbol(),Wt=new WeakMap,q=class{constructor(t,e,s){if(this._$cssResult$=!0,s!==vt)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e}get styleSheet(){let t=this.o,e=this.t;if(nt&&t===void 0){let s=e!==void 0&&e.length===1;s&&(t=Wt.get(e)),t===void 0&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),s&&Wt.set(e,t))}return t}toString(){return this.cssText}},at=r=>new q(typeof r=="string"?r:r+"",void 0,vt),yt=(r,...t)=>{let e=r.length===1?r[0]:t.reduce((s,i,n)=>s+(a=>{if(a._$cssResult$===!0)return a.cssText;if(typeof a=="number")return a;throw Error("Value passed to 'css' function must be a 'css' function result: "+a+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(i)+r[n+1],r[0]);return new q(e,r,vt)},kt=(r,t)=>{if(nt)r.adoptedStyleSheets=t.map(e=>e instanceof CSSStyleSheet?e:e.styleSheet);else for(let e of t){let s=document.createElement("style"),i=G.litNonce;i!==void 0&&s.setAttribute("nonce",i),s.textContent=e.cssText,r.appendChild(s)}},At=nt||G.CSSStyleSheet===void 0?r=>r:r=>r instanceof CSSStyleSheet?(t=>{let e="";for(let s of t.cssRules)e+=s.cssText;return at(e)})(r):r;var{is:me,defineProperty:_e,getOwnPropertyDescriptor:fe,getOwnPropertyNames:ge,getOwnPropertySymbols:Ee,getPrototypeOf:Se}=Object,S=globalThis;S.customElements??(S.customElements=jt);var Ft=S.trustedTypes,ve=Ft?Ft.emptyScript:"",ye=S.reactiveElementPolyfillSupport,z=(r,t)=>r,V={toAttribute(r,t){switch(t){case Boolean:r=r?ve:null;break;case Object:case Array:r=r==null?r:JSON.stringify(r)}return r},fromAttribute(r,t){let e=r;switch(t){case Boolean:e=r!==null;break;case Number:e=r===null?null:Number(r);break;case Object:case Array:try{e=JSON.parse(r)}catch{e=null}}return e}},ot=(r,t)=>!me(r,t),Gt={attribute:!0,type:String,converter:V,reflect:!1,useDefault:!1,hasChanged:ot};Symbol.metadata??(Symbol.metadata=Symbol("metadata")),S.litPropertyMetadata??(S.litPropertyMetadata=new WeakMap);var $=class extends(globalThis.HTMLElement??St){static addInitializer(t){this._$Ei(),(this.l??(this.l=[])).push(t)}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(t,e=Gt){if(e.state&&(e.attribute=!1),this._$Ei(),this.prototype.hasOwnProperty(t)&&((e=Object.create(e)).wrapped=!0),this.elementProperties.set(t,e),!e.noAccessor){let s=Symbol(),i=this.getPropertyDescriptor(t,s,e);i!==void 0&&_e(this.prototype,t,i)}}static getPropertyDescriptor(t,e,s){let{get:i,set:n}=fe(this.prototype,t)??{get(){return this[e]},set(a){this[e]=a}};return{get:i,set(a){let l=i?.call(this);n?.call(this,a),this.requestUpdate(t,l,s)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)??Gt}static _$Ei(){if(this.hasOwnProperty(z("elementProperties")))return;let t=Se(this);t.finalize(),t.l!==void 0&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties)}static finalize(){if(this.hasOwnProperty(z("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(z("properties"))){let e=this.properties,s=[...ge(e),...Ee(e)];for(let i of s)this.createProperty(i,e[i])}let t=this[Symbol.metadata];if(t!==null){let e=litPropertyMetadata.get(t);if(e!==void 0)for(let[s,i]of e)this.elementProperties.set(s,i)}this._$Eh=new Map;for(let[e,s]of this.elementProperties){let i=this._$Eu(e,s);i!==void 0&&this._$Eh.set(i,e)}this.elementStyles=this.finalizeStyles(this.styles)}static finalizeStyles(t){let e=[];if(Array.isArray(t)){let s=new Set(t.flat(1/0).reverse());for(let i of s)e.unshift(At(i))}else t!==void 0&&e.push(At(t));return e}static _$Eu(t,e){let s=e.attribute;return s===!1?void 0:typeof s=="string"?s:typeof t=="string"?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Em=null,this._$Ev()}_$Ev(){this._$ES=new Promise(t=>this.enableUpdating=t),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach(t=>t(this))}addController(t){(this._$EO??(this._$EO=new Set)).add(t),this.renderRoot!==void 0&&this.isConnected&&t.hostConnected?.()}removeController(t){this._$EO?.delete(t)}_$E_(){let t=new Map,e=this.constructor.elementProperties;for(let s of e.keys())this.hasOwnProperty(s)&&(t.set(s,this[s]),delete this[s]);t.size>0&&(this._$Ep=t)}createRenderRoot(){let t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return kt(t,this.constructor.elementStyles),t}connectedCallback(){this.renderRoot??(this.renderRoot=this.createRenderRoot()),this.enableUpdating(!0),this._$EO?.forEach(t=>t.hostConnected?.())}enableUpdating(t){}disconnectedCallback(){this._$EO?.forEach(t=>t.hostDisconnected?.())}attributeChangedCallback(t,e,s){this._$AK(t,s)}_$ET(t,e){let s=this.constructor.elementProperties.get(t),i=this.constructor._$Eu(t,s);if(i!==void 0&&s.reflect===!0){let n=(s.converter?.toAttribute!==void 0?s.converter:V).toAttribute(e,s.type);this._$Em=t,n==null?this.removeAttribute(i):this.setAttribute(i,n),this._$Em=null}}_$AK(t,e){let s=this.constructor,i=s._$Eh.get(t);if(i!==void 0&&this._$Em!==i){let n=s.getPropertyOptions(i),a=typeof n.converter=="function"?{fromAttribute:n.converter}:n.converter?.fromAttribute!==void 0?n.converter:V;this._$Em=i;let l=a.fromAttribute(e,n.type);this[i]=l??this._$Ej?.get(i)??l,this._$Em=null}}requestUpdate(t,e,s,i=!1,n){if(t!==void 0){let a=this.constructor;if(i===!1&&(n=this[t]),s??(s=a.getPropertyOptions(t)),!((s.hasChanged??ot)(n,e)||s.useDefault&&s.reflect&&n===this._$Ej?.get(t)&&!this.hasAttribute(a._$Eu(t,s))))return;this.C(t,e,s)}this.isUpdatePending===!1&&(this._$ES=this._$EP())}C(t,e,{useDefault:s,reflect:i,wrapped:n},a){s&&!(this._$Ej??(this._$Ej=new Map)).has(t)&&(this._$Ej.set(t,a??e??this[t]),n!==!0||a!==void 0)||(this._$AL.has(t)||(this.hasUpdated||s||(e=void 0),this._$AL.set(t,e)),i===!0&&this._$Em!==t&&(this._$Eq??(this._$Eq=new Set)).add(t))}async _$EP(){this.isUpdatePending=!0;try{await this._$ES}catch(e){Promise.reject(e)}let t=this.scheduleUpdate();return t!=null&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??(this.renderRoot=this.createRenderRoot()),this._$Ep){for(let[i,n]of this._$Ep)this[i]=n;this._$Ep=void 0}let s=this.constructor.elementProperties;if(s.size>0)for(let[i,n]of s){let{wrapped:a}=n,l=this[i];a!==!0||this._$AL.has(i)||l===void 0||this.C(i,void 0,n,l)}}let t=!1,e=this._$AL;try{t=this.shouldUpdate(e),t?(this.willUpdate(e),this._$EO?.forEach(s=>s.hostUpdate?.()),this.update(e)):this._$EM()}catch(s){throw t=!1,this._$EM(),s}t&&this._$AE(e)}willUpdate(t){}_$AE(t){this._$EO?.forEach(e=>e.hostUpdated?.()),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t)}_$EM(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return!0}update(t){this._$Eq&&(this._$Eq=this._$Eq.forEach(e=>this._$ET(e,this[e]))),this._$EM()}updated(t){}firstUpdated(t){}};$.elementStyles=[],$.shadowRootOptions={mode:"open"},$[z("elementProperties")]=new Map,$[z("finalized")]=new Map,ye?.({ReactiveElement:$}),(S.reactiveElementVersions??(S.reactiveElementVersions=[])).push("2.1.2");var H=globalThis,qt=r=>r,lt=H.trustedTypes,zt=lt?lt.createPolicy("lit-html",{createHTML:r=>r}):void 0,Xt="$lit$",R=`lit$${Math.random().toFixed(9).slice(2)}$`,Qt="?"+R,Ae=`<${Qt}>`,M=H.document===void 0?{createTreeWalker:()=>({})}:document,Y=()=>M.createComment(""),Z=r=>r===null||typeof r!="object"&&typeof r!="function",Pt=Array.isArray,$e=r=>Pt(r)||typeof r?.[Symbol.iterator]=="function",$t=`[
|
|
3
|
+
\f\r]`,K=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,Vt=/-->/g,Kt=/>/g,C=RegExp(`>|${$t}(?:([^\\s"'>=/]+)(${$t}*=${$t}*(?:[^
|
|
4
|
+
\f\r"'\`<>=]|("|')|))|$)`,"g"),Yt=/'/g,Zt=/"/g,te=/^(?:script|style|textarea|title)$/i,Ct=r=>(t,...e)=>({_$litType$:r,strings:t,values:e}),ee=Ct(1),as=Ct(2),os=Ct(3),U=Symbol.for("lit-noChange"),m=Symbol.for("lit-nothing"),Jt=new WeakMap,L=M.createTreeWalker(M,129);function se(r,t){if(!Pt(r)||!r.hasOwnProperty("raw"))throw Error("invalid template strings array");return zt!==void 0?zt.createHTML(t):t}var be=(r,t)=>{let e=r.length-1,s=[],i,n=t===2?"<svg>":t===3?"<math>":"",a=K;for(let l=0;l<e;l++){let o=r[l],h,u,c=-1,f=0;for(;f<o.length&&(a.lastIndex=f,u=a.exec(o),u!==null);)f=a.lastIndex,a===K?u[1]==="!--"?a=Vt:u[1]!==void 0?a=Kt:u[2]!==void 0?(te.test(u[2])&&(i=RegExp("</"+u[2],"g")),a=C):u[3]!==void 0&&(a=C):a===C?u[0]===">"?(a=i??K,c=-1):u[1]===void 0?c=-2:(c=a.lastIndex-u[2].length,h=u[1],a=u[3]===void 0?C:u[3]==='"'?Zt:Yt):a===Zt||a===Yt?a=C:a===Vt||a===Kt?a=K:(a=C,i=void 0);let g=a===C&&r[l+1].startsWith("/>")?" ":"";n+=a===K?o+Ae:c>=0?(s.push(h),o.slice(0,c)+Xt+o.slice(c)+R+g):o+R+(c===-2?l:g)}return[se(r,n+(r[e]||"<?>")+(t===2?"</svg>":t===3?"</math>":"")),s]},J=class r{constructor({strings:t,_$litType$:e},s){let i;this.parts=[];let n=0,a=0,l=t.length-1,o=this.parts,[h,u]=be(t,e);if(this.el=r.createElement(h,s),L.currentNode=this.el.content,e===2||e===3){let c=this.el.content.firstChild;c.replaceWith(...c.childNodes)}for(;(i=L.nextNode())!==null&&o.length<l;){if(i.nodeType===1){if(i.hasAttributes())for(let c of i.getAttributeNames())if(c.endsWith(Xt)){let f=u[a++],g=i.getAttribute(c).split(R),b=/([.?@])?(.*)/.exec(f);o.push({type:1,index:n,name:b[2],strings:g,ctor:b[1]==="."?wt:b[1]==="?"?Rt:b[1]==="@"?xt:D}),i.removeAttribute(c)}else c.startsWith(R)&&(o.push({type:6,index:n}),i.removeAttribute(c));if(te.test(i.tagName)){let c=i.textContent.split(R),f=c.length-1;if(f>0){i.textContent=lt?lt.emptyScript:"";for(let g=0;g<f;g++)i.append(c[g],Y()),L.nextNode(),o.push({type:2,index:++n});i.append(c[f],Y())}}}else if(i.nodeType===8)if(i.data===Qt)o.push({type:2,index:n});else{let c=-1;for(;(c=i.data.indexOf(R,c+1))!==-1;)o.push({type:7,index:n}),c+=R.length-1}n++}}static createElement(t,e){let s=M.createElement("template");return s.innerHTML=t,s}};function I(r,t,e=r,s){if(t===U)return t;let i=s!==void 0?e._$Co?.[s]:e._$Cl,n=Z(t)?void 0:t._$litDirective$;return i?.constructor!==n&&(i?._$AO?.(!1),n===void 0?i=void 0:(i=new n(r),i._$AT(r,e,s)),s!==void 0?(e._$Co??(e._$Co=[]))[s]=i:e._$Cl=i),i!==void 0&&(t=I(r,i._$AS(r,t.values),i,s)),t}var bt=class{constructor(t,e){this._$AV=[],this._$AN=void 0,this._$AD=t,this._$AM=e}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(t){let{el:{content:e},parts:s}=this._$AD,i=(t?.creationScope??M).importNode(e,!0);L.currentNode=i;let n=L.nextNode(),a=0,l=0,o=s[0];for(;o!==void 0;){if(a===o.index){let h;o.type===2?h=new X(n,n.nextSibling,this,t):o.type===1?h=new o.ctor(n,o.name,o.strings,this,t):o.type===6&&(h=new Tt(n,this,t)),this._$AV.push(h),o=s[++l]}a!==o?.index&&(n=L.nextNode(),a++)}return L.currentNode=M,i}p(t){let e=0;for(let s of this._$AV)s!==void 0&&(s.strings!==void 0?(s._$AI(t,s,e),e+=s.strings.length-2):s._$AI(t[e])),e++}},X=class r{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(t,e,s,i){this.type=2,this._$AH=m,this._$AN=void 0,this._$AA=t,this._$AB=e,this._$AM=s,this.options=i,this._$Cv=i?.isConnected??!0}get parentNode(){let t=this._$AA.parentNode,e=this._$AM;return e!==void 0&&t?.nodeType===11&&(t=e.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,e=this){t=I(this,t,e),Z(t)?t===m||t==null||t===""?(this._$AH!==m&&this._$AR(),this._$AH=m):t!==this._$AH&&t!==U&&this._(t):t._$litType$!==void 0?this.$(t):t.nodeType!==void 0?this.T(t):$e(t)?this.k(t):this._(t)}O(t){return this._$AA.parentNode.insertBefore(t,this._$AB)}T(t){this._$AH!==t&&(this._$AR(),this._$AH=this.O(t))}_(t){this._$AH!==m&&Z(this._$AH)?this._$AA.nextSibling.data=t:this.T(M.createTextNode(t)),this._$AH=t}$(t){let{values:e,_$litType$:s}=t,i=typeof s=="number"?this._$AC(t):(s.el===void 0&&(s.el=J.createElement(se(s.h,s.h[0]),this.options)),s);if(this._$AH?._$AD===i)this._$AH.p(e);else{let n=new bt(i,this),a=n.u(this.options);n.p(e),this.T(a),this._$AH=n}}_$AC(t){let e=Jt.get(t.strings);return e===void 0&&Jt.set(t.strings,e=new J(t)),e}k(t){Pt(this._$AH)||(this._$AH=[],this._$AR());let e=this._$AH,s,i=0;for(let n of t)i===e.length?e.push(s=new r(this.O(Y()),this.O(Y()),this,this.options)):s=e[i],s._$AI(n),i++;i<e.length&&(this._$AR(s&&s._$AB.nextSibling,i),e.length=i)}_$AR(t=this._$AA.nextSibling,e){for(this._$AP?.(!1,!0,e);t!==this._$AB;){let s=qt(t).nextSibling;qt(t).remove(),t=s}}setConnected(t){this._$AM===void 0&&(this._$Cv=t,this._$AP?.(t))}},D=class{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(t,e,s,i,n){this.type=1,this._$AH=m,this._$AN=void 0,this.element=t,this.name=e,this._$AM=i,this.options=n,s.length>2||s[0]!==""||s[1]!==""?(this._$AH=Array(s.length-1).fill(new String),this.strings=s):this._$AH=m}_$AI(t,e=this,s,i){let n=this.strings,a=!1;if(n===void 0)t=I(this,t,e,0),a=!Z(t)||t!==this._$AH&&t!==U,a&&(this._$AH=t);else{let l=t,o,h;for(t=n[0],o=0;o<n.length-1;o++)h=I(this,l[s+o],e,o),h===U&&(h=this._$AH[o]),a||(a=!Z(h)||h!==this._$AH[o]),h===m?t=m:t!==m&&(t+=(h??"")+n[o+1]),this._$AH[o]=h}a&&!i&&this.j(t)}j(t){t===m?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,t??"")}},wt=class extends D{constructor(){super(...arguments),this.type=3}j(t){this.element[this.name]=t===m?void 0:t}},Rt=class extends D{constructor(){super(...arguments),this.type=4}j(t){this.element.toggleAttribute(this.name,!!t&&t!==m)}},xt=class extends D{constructor(t,e,s,i,n){super(t,e,s,i,n),this.type=5}_$AI(t,e=this){if((t=I(this,t,e,0)??m)===U)return;let s=this._$AH,i=t===m&&s!==m||t.capture!==s.capture||t.once!==s.once||t.passive!==s.passive,n=t!==m&&(s===m||i);i&&this.element.removeEventListener(this.name,this,s),n&&this.element.addEventListener(this.name,this,t),this._$AH=t}handleEvent(t){typeof this._$AH=="function"?this._$AH.call(this.options?.host??this.element,t):this._$AH.handleEvent(t)}},Tt=class{constructor(t,e,s){this.element=t,this.type=6,this._$AN=void 0,this._$AM=e,this.options=s}get _$AU(){return this._$AM._$AU}_$AI(t){I(this,t)}};var we=H.litHtmlPolyfillSupport;we?.(J,X),(H.litHtmlVersions??(H.litHtmlVersions=[])).push("3.3.2");var ie=(r,t,e)=>{let s=e?.renderBefore??t,i=s._$litPart$;if(i===void 0){let n=e?.renderBefore??null;s._$litPart$=i=new X(t.insertBefore(Y(),n),n,void 0,e??{})}return i._$AI(r),i};var Q=globalThis,x=class extends ${constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0}createRenderRoot(){var e;let t=super.createRenderRoot();return(e=this.renderOptions).renderBefore??(e.renderBefore=t.firstChild),t}update(t){let e=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=ie(e,this.renderRoot,this.renderOptions)}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(!0)}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(!1)}render(){return U}};x._$litElement$=!0,x.finalized=!0,Q.litElementHydrateSupport?.({LitElement:x});var Re=Q.litElementPolyfillSupport;Re?.({LitElement:x});(Q.litElementVersions??(Q.litElementVersions=[])).push("4.2.2");var re=r=>(t,e)=>{e!==void 0?e.addInitializer(()=>{customElements.define(r,t)}):customElements.define(r,t)};var xe={attribute:!0,type:String,converter:V,reflect:!1,hasChanged:ot},Te=(r=xe,t,e)=>{let{kind:s,metadata:i}=e,n=globalThis.litPropertyMetadata.get(i);if(n===void 0&&globalThis.litPropertyMetadata.set(i,n=new Map),s==="setter"&&((r=Object.create(r)).wrapped=!0),n.set(e.name,r),s==="accessor"){let{name:a}=e;return{set(l){let o=t.get.call(this);t.set.call(this,l),this.requestUpdate(a,o,r,!0,l)},init(l){return l!==void 0&&this.C(a,void 0,r,l),l}}}if(s==="setter"){let{name:a}=e;return function(l){let o=this[a];t.call(this,l),this.requestUpdate(a,o,r,!0,l)}}throw Error("Unsupported decorator location: "+s)};function N(r){return(t,e)=>typeof e=="object"?Te(r,t,e):((s,i,n)=>{let a=i.hasOwnProperty(n);return i.constructor.createProperty(n,s),a?Object.getOwnPropertyDescriptor(i,n):void 0})(r,t,e)}function Lt(r){let{value:t,startLength:e=6,endLength:s=4}=r;if(!t)return{start:"",middle:"",end:"",isTruncated:!1};let i=e+s<t.length,n=Math.max(0,e+s-t.length),a=e-(e>s?Math.ceil:Math.floor)(n/2),l=s-(e>s?Math.floor:Math.ceil)(n/2),o=Math.max(0,Math.min(a,t.length)),h=Math.max(0,Math.min(l,t.length-o)),u=t.slice(0,o),c=h>0?t.slice(-h):"",f=t.slice(o,h>0?-h:t.length);return{start:u,middle:f,end:c,isTruncated:i}}var Mt=`
|
|
5
5
|
[tabindex].truncated-value { --isTruncated: 0; }
|
|
6
6
|
[tabindex].truncated-value:not(:is(:active, :focus-within, [data-is-truncated="false"])) { --isTruncated: 1; cursor: zoom-in; }
|
|
7
7
|
[tabindex="-1"].truncated-value:not([data-is-truncated="false"]) { --isTruncated: 1 !important; cursor: default !important; }
|
|
8
|
-
[tabindex].truncated-value > .tv-middle >
|
|
9
|
-
[tabindex].truncated-value > .tv-middle >
|
|
10
|
-
[tabindex].truncated-value > .tv-middle >
|
|
11
|
-
`;var v=class extends x{constructor(){super(...arguments);this.value="";this.startLength=6;this.endLength=4;this.expandable=!1}render(){let{start:e,middle:s,end:i,isTruncated:n}=Lt({value:this.value,startLength:this.startLength,endLength:this.endLength}),a=s.slice(0,s.length/2),l=s.slice(s.length/2);return ee`<span
|
|
8
|
+
[tabindex].truncated-value > .tv-middle > .tv-middle-text { font-size: calc((1 - var(--isTruncated)) * 1em); }
|
|
9
|
+
[tabindex].truncated-value > .tv-middle > .tv-ellipsis { font-size: calc(var(--isTruncated) * 1em); pointer-events: none; }
|
|
10
|
+
[tabindex].truncated-value > .tv-middle > .tv-ellipsis::after { content: attr(data-ellipsis); }
|
|
11
|
+
`;var v=class extends x{constructor(){super(...arguments);this.value="";this.startLength=6;this.endLength=4;this.ellipsis="...";this.expandable=!1}render(){let{start:e,middle:s,end:i,isTruncated:n}=Lt({value:this.value,startLength:this.startLength,endLength:this.endLength}),a=s.slice(0,s.length/2),l=s.slice(s.length/2);return ee`<span
|
|
12
12
|
part="container"
|
|
13
13
|
data-is-truncated="${n}"
|
|
14
14
|
tabindex="${this.expandable?0:-1}"
|
|
15
15
|
class="truncated-value"
|
|
16
16
|
><span part="start">${e}</span
|
|
17
17
|
><span part="middle" class="tv-middle"
|
|
18
|
-
><span>${a}</span
|
|
19
|
-
><span
|
|
18
|
+
><span class="tv-middle-text">${a}</span
|
|
19
|
+
><span
|
|
20
|
+
part="ellipsis"
|
|
21
|
+
class="tv-ellipsis"
|
|
22
|
+
aria-hidden="true"
|
|
23
|
+
data-ellipsis="${this.ellipsis}"
|
|
24
|
+
></span
|
|
25
|
+
><span class="tv-middle-text">${l}</span></span
|
|
20
26
|
><span part="end">${i}</span></span
|
|
21
|
-
>`}};v.styles=
|
|
27
|
+
>`}};v.styles=yt`
|
|
22
28
|
:host {
|
|
23
29
|
display: inline-block;
|
|
24
30
|
}
|
|
25
31
|
${at(Mt)}
|
|
26
|
-
`,
|
|
32
|
+
`,T([N({type:String})],v.prototype,"value",2),T([N({type:Number,attribute:"start-length"})],v.prototype,"startLength",2),T([N({type:Number,attribute:"end-length"})],v.prototype,"endLength",2),T([N({type:String})],v.prototype,"ellipsis",2),T([N({type:Boolean})],v.prototype,"expandable",2),v=T([re("truncated-value")],v);return he(Pe);})();
|
|
27
33
|
/*! Bundled license information:
|
|
28
34
|
|
|
29
35
|
@lit-labs/ssr-dom-shim/lib/element-internals.js:
|