@lukso/web-components 1.102.2 → 1.103.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.
Files changed (72) hide show
  1. package/dist/components/index.cjs +4 -4
  2. package/dist/components/index.js +4 -4
  3. package/dist/components/lukso-button/index.cjs +1 -1
  4. package/dist/components/lukso-button/index.js +1 -1
  5. package/dist/components/lukso-card/index.cjs +3 -3
  6. package/dist/components/lukso-card/index.js +3 -3
  7. package/dist/components/lukso-checkbox/index.cjs +1 -1
  8. package/dist/components/lukso-checkbox/index.js +1 -1
  9. package/dist/components/lukso-color-picker/index.cjs +2 -2
  10. package/dist/components/lukso-color-picker/index.js +2 -2
  11. package/dist/components/lukso-dropdown/index.cjs +4 -4
  12. package/dist/components/lukso-dropdown/index.js +4 -4
  13. package/dist/components/lukso-dropdown-option/index.cjs +1 -1
  14. package/dist/components/lukso-dropdown-option/index.js +1 -1
  15. package/dist/components/lukso-footer/index.cjs +1 -1
  16. package/dist/components/lukso-footer/index.js +1 -1
  17. package/dist/components/lukso-icon/icons/hammer.d.ts +3 -0
  18. package/dist/components/lukso-icon/icons/hammer.d.ts.map +1 -0
  19. package/dist/components/lukso-icon/index.cjs +40 -3
  20. package/dist/components/lukso-icon/index.d.ts.map +1 -1
  21. package/dist/components/lukso-icon/index.js +40 -3
  22. package/dist/components/lukso-image/index.cjs +2 -2
  23. package/dist/components/lukso-image/index.js +2 -2
  24. package/dist/components/lukso-input/index.cjs +2 -2
  25. package/dist/components/lukso-input/index.js +2 -2
  26. package/dist/components/lukso-modal/index.cjs +1 -1
  27. package/dist/components/lukso-modal/index.js +1 -1
  28. package/dist/components/lukso-navbar/index.cjs +3 -3
  29. package/dist/components/lukso-navbar/index.js +3 -3
  30. package/dist/components/lukso-pagination/index.cjs +2 -2
  31. package/dist/components/lukso-pagination/index.js +2 -2
  32. package/dist/components/lukso-profile/index.cjs +2 -2
  33. package/dist/components/lukso-profile/index.js +2 -2
  34. package/dist/components/lukso-progress/index.cjs +2 -2
  35. package/dist/components/lukso-progress/index.js +2 -2
  36. package/dist/components/lukso-sanitize/index.cjs +1 -1
  37. package/dist/components/lukso-sanitize/index.js +1 -1
  38. package/dist/components/lukso-search/index.cjs +4 -4
  39. package/dist/components/lukso-search/index.js +4 -4
  40. package/dist/components/lukso-select/index.cjs +72 -72
  41. package/dist/components/lukso-select/index.js +72 -72
  42. package/dist/components/lukso-share/index.cjs +26 -23
  43. package/dist/components/lukso-share/index.js +26 -23
  44. package/dist/components/lukso-switch/index.cjs +10 -7
  45. package/dist/components/lukso-switch/index.js +10 -7
  46. package/dist/components/lukso-tag/index.cjs +34 -31
  47. package/dist/components/lukso-tag/index.js +34 -31
  48. package/dist/components/lukso-terms/index.cjs +8 -5
  49. package/dist/components/lukso-terms/index.js +8 -5
  50. package/dist/components/lukso-test/index.cjs +15 -12
  51. package/dist/components/lukso-test/index.js +15 -12
  52. package/dist/components/lukso-textarea/index.cjs +84 -81
  53. package/dist/components/lukso-textarea/index.js +84 -81
  54. package/dist/components/lukso-tooltip/index.cjs +36 -33
  55. package/dist/components/lukso-tooltip/index.js +36 -33
  56. package/dist/components/lukso-username/index.cjs +52 -49
  57. package/dist/components/lukso-username/index.js +52 -49
  58. package/dist/components/lukso-wizard/index.cjs +44 -41
  59. package/dist/components/lukso-wizard/index.js +44 -41
  60. package/dist/{index-b9bc3bbb.cjs → index-17879e5a.cjs} +1 -1
  61. package/dist/{index-1ce46c50.cjs → index-474fac60.cjs} +1 -1
  62. package/dist/{index-15b30335.js → index-6349a8aa.js} +1 -1
  63. package/dist/{index-f62a47db.js → index-7e82dcae.js} +1 -1
  64. package/dist/{index-89eb56eb.cjs → index-8ccda1e9.cjs} +5 -3
  65. package/dist/{index-c154a31c.js → index-d89cc6bc.js} +5 -3
  66. package/dist/index.cjs +4 -4
  67. package/dist/index.js +4 -4
  68. package/dist/shared/tailwind-element/index.cjs +1 -1
  69. package/dist/shared/tailwind-element/index.js +1 -1
  70. package/dist/{style-map-3dd58f82.cjs → style-map-12def811.cjs} +1 -1
  71. package/dist/{style-map-d46cc789.js → style-map-cf4f4350.js} +1 -1
  72. package/package.json +1 -1
@@ -1,4 +1,4 @@
1
- import { T as TailwindStyledElement, x, A } from '../../index-c154a31c.js';
1
+ import { T as TailwindStyledElement, x, A } from '../../index-d89cc6bc.js';
2
2
  import { n, e } from '../../query-assigned-elements-1c8c9e90.js';
3
3
  import { t } from '../../state-b9ca4e74.js';
4
4
  import { c as ce } from '../../index-ca8e900d.js';
@@ -6,7 +6,7 @@ import '../../tailwind-config.js';
6
6
  import { c as cn } from '../../cn-b54dcc61.js';
7
7
  import '../lukso-icon/index.js';
8
8
  import '../../bundle-mjs-fbc6e2a8.js';
9
- import '../../style-map-d46cc789.js';
9
+ import '../../style-map-cf4f4350.js';
10
10
  import '../../directive-2bb7789e.js';
11
11
 
12
12
  const style = ":host {\n\n display: inline-flex\n}\n\n:host([is-full-width]) {\n\n display: flex;\n\n width: 100%\n}";
@@ -24,92 +24,95 @@ var __decorateClass = (decorators, target, key, kind) => {
24
24
  };
25
25
  const FOCUS_DELAY_MS = 10;
26
26
  let LuksoTextarea = class extends TailwindStyledElement(style) {
27
- value = "";
28
- name = "";
29
- placeholder = "";
30
- label = "";
31
- id = "";
32
- ref = void 0;
33
- description = "";
34
- error = "";
35
- customClass = "";
36
- isFullWidth = false;
37
- isReadonly = false;
38
- isDisabled = false;
39
- autofocus = false;
40
- borderless = false;
41
- isNonResizable = false;
42
- keepFocusOnEscape = false;
43
- size = "medium";
44
- rows = 4;
45
- hasFocus = false;
46
- hasHighlight = false;
47
- styles = ce({
48
- slots: {
49
- wrapper: "group flex",
50
- input: `bg-neutral-100 border-solid placeholder:text-neutral-70 w-full
27
+ constructor() {
28
+ super(...arguments);
29
+ this.value = "";
30
+ this.name = "";
31
+ this.placeholder = "";
32
+ this.label = "";
33
+ this.id = "";
34
+ this.ref = void 0;
35
+ this.description = "";
36
+ this.error = "";
37
+ this.customClass = "";
38
+ this.isFullWidth = false;
39
+ this.isReadonly = false;
40
+ this.isDisabled = false;
41
+ this.autofocus = false;
42
+ this.borderless = false;
43
+ this.isNonResizable = false;
44
+ this.keepFocusOnEscape = false;
45
+ this.size = "medium";
46
+ this.rows = 4;
47
+ this.hasFocus = false;
48
+ this.hasHighlight = false;
49
+ this.styles = ce({
50
+ slots: {
51
+ wrapper: "group flex",
52
+ input: `bg-neutral-100 border-solid placeholder:text-neutral-70 w-full
51
53
  outline-none transition transition-all duration-150 appearance-none`
52
- },
53
- variants: {
54
- hasError: {
55
- true: {
56
- input: "border-red-85"
57
- },
58
- false: {
59
- input: "border-neutral-90"
60
- }
61
- },
62
- hasHighlight: {
63
- true: {
64
- input: "border-neutral-35"
65
- }
66
- },
67
- borderless: {
68
- true: { input: "border-0" },
69
- false: { input: "border" }
70
- },
71
- isReadonly: {
72
- true: { input: "cursor-not-allowed" }
73
54
  },
74
- isDisabled: {
75
- true: {
76
- input: "text-neutral-60 cursor-not-allowed"
55
+ variants: {
56
+ hasError: {
57
+ true: {
58
+ input: "border-red-85"
59
+ },
60
+ false: {
61
+ input: "border-neutral-90"
62
+ }
77
63
  },
78
- false: { input: "text-neutral-20" }
79
- },
80
- isFullWidth: {
81
- true: { wrapper: "w-full" },
82
- false: { wrapper: "w-[350px]" }
83
- },
84
- size: {
85
- small: {
86
- input: "min-h-[28px] px-2 py-1 paragraph-inter-12-regular rounded-8"
64
+ hasHighlight: {
65
+ true: {
66
+ input: "border-neutral-35"
67
+ }
87
68
  },
88
- medium: {
89
- input: "min-h-[48px] px-4 py-3 paragraph-inter-14-regular rounded-12"
90
- }
91
- },
92
- isNonResizable: {
93
- true: {
94
- input: "resize-none"
69
+ borderless: {
70
+ true: { input: "border-0" },
71
+ false: { input: "border" }
72
+ },
73
+ isReadonly: {
74
+ true: { input: "cursor-not-allowed" }
75
+ },
76
+ isDisabled: {
77
+ true: {
78
+ input: "text-neutral-60 cursor-not-allowed"
79
+ },
80
+ false: { input: "text-neutral-20" }
81
+ },
82
+ isFullWidth: {
83
+ true: { wrapper: "w-full" },
84
+ false: { wrapper: "w-[350px]" }
85
+ },
86
+ size: {
87
+ small: {
88
+ input: "min-h-[28px] px-2 py-1 paragraph-inter-12-regular rounded-8"
89
+ },
90
+ medium: {
91
+ input: "min-h-[48px] px-4 py-3 paragraph-inter-14-regular rounded-12"
92
+ }
93
+ },
94
+ isNonResizable: {
95
+ true: {
96
+ input: "resize-none"
97
+ }
95
98
  }
96
- }
97
- },
98
- compoundVariants: [
99
- {
100
- isFullWidth: false,
101
- size: "small",
102
- class: { wrapper: "w-[210px]" }
103
99
  },
104
- {
105
- hasHighlight: true,
106
- hasError: true,
107
- class: {
108
- input: "border-red-65"
100
+ compoundVariants: [
101
+ {
102
+ isFullWidth: false,
103
+ size: "small",
104
+ class: { wrapper: "w-[210px]" }
105
+ },
106
+ {
107
+ hasHighlight: true,
108
+ hasError: true,
109
+ class: {
110
+ input: "border-red-65"
111
+ }
109
112
  }
110
- }
111
- ]
112
- });
113
+ ]
114
+ });
115
+ }
113
116
  connectedCallback() {
114
117
  super.connectedCallback();
115
118
  if (this.autofocus) {
@@ -2,11 +2,11 @@
2
2
 
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
- const shared_tailwindElement_index = require('../../index-89eb56eb.cjs');
5
+ const shared_tailwindElement_index = require('../../index-8ccda1e9.cjs');
6
6
  const queryAssignedElements = require('../../query-assigned-elements-d5e45650.cjs');
7
7
  const state = require('../../state-d9fb972b.cjs');
8
8
  const index = require('../../index-1d3f4a5a.cjs');
9
- const styleMap = require('../../style-map-3dd58f82.cjs');
9
+ const styleMap = require('../../style-map-12def811.cjs');
10
10
  require('../../bundle-mjs-d58a83c6.cjs');
11
11
  require('../../directive-8278ab14.cjs');
12
12
 
@@ -3461,39 +3461,42 @@ var __decorateClass = (decorators, target, key, kind) => {
3461
3461
  return result;
3462
3462
  };
3463
3463
  exports.LuksoTooltip = class LuksoTooltip extends shared_tailwindElement_index.TailwindStyledElement(style) {
3464
- variant = "light";
3465
- size = "medium";
3466
- placement = "top";
3467
- trigger = "mouseenter";
3468
- text = "";
3469
- maxWidth = 300;
3470
- show = false;
3471
- hideOnClick = "true";
3472
- isClipboardCopy = false;
3473
- copyText = "";
3474
- copyValue = "";
3475
- offset = 10;
3476
- options = "";
3477
- showArrow = true;
3478
- showDelay = 300;
3479
- hideDelay = 300;
3480
- showCopy = false;
3481
- optionsParsed = [];
3482
- tooltipInstance = void 0;
3483
- styles = index.ce({
3484
- slots: {
3485
- tooltip: "hidden",
3486
- trigger: "cursor-pointer flex flex-col items-center",
3487
- options: "rounded-4 hover:bg-neutral-95"
3488
- },
3489
- variants: {
3490
- hasNoText: {
3491
- true: {
3492
- trigger: "cursor-default"
3464
+ constructor() {
3465
+ super(...arguments);
3466
+ this.variant = "light";
3467
+ this.size = "medium";
3468
+ this.placement = "top";
3469
+ this.trigger = "mouseenter";
3470
+ this.text = "";
3471
+ this.maxWidth = 300;
3472
+ this.show = false;
3473
+ this.hideOnClick = "true";
3474
+ this.isClipboardCopy = false;
3475
+ this.copyText = "";
3476
+ this.copyValue = "";
3477
+ this.offset = 10;
3478
+ this.options = "";
3479
+ this.showArrow = true;
3480
+ this.showDelay = 300;
3481
+ this.hideDelay = 300;
3482
+ this.showCopy = false;
3483
+ this.optionsParsed = [];
3484
+ this.tooltipInstance = void 0;
3485
+ this.styles = index.ce({
3486
+ slots: {
3487
+ tooltip: "hidden",
3488
+ trigger: "cursor-pointer flex flex-col items-center",
3489
+ options: "rounded-4 hover:bg-neutral-95"
3490
+ },
3491
+ variants: {
3492
+ hasNoText: {
3493
+ true: {
3494
+ trigger: "cursor-default"
3495
+ }
3493
3496
  }
3494
3497
  }
3495
- }
3496
- });
3498
+ });
3499
+ }
3497
3500
  hideOnClickCheck() {
3498
3501
  if (this.hideOnClick === "toggle") {
3499
3502
  return this.hideOnClick;
@@ -1,8 +1,8 @@
1
- import { T as TailwindStyledElement, x } from '../../index-c154a31c.js';
1
+ import { T as TailwindStyledElement, x } from '../../index-d89cc6bc.js';
2
2
  import { n, e } from '../../query-assigned-elements-1c8c9e90.js';
3
3
  import { t } from '../../state-b9ca4e74.js';
4
4
  import { c as ce } from '../../index-ca8e900d.js';
5
- import { o } from '../../style-map-d46cc789.js';
5
+ import { o } from '../../style-map-cf4f4350.js';
6
6
  import '../../bundle-mjs-fbc6e2a8.js';
7
7
  import '../../directive-2bb7789e.js';
8
8
 
@@ -3457,39 +3457,42 @@ var __decorateClass = (decorators, target, key, kind) => {
3457
3457
  return result;
3458
3458
  };
3459
3459
  let LuksoTooltip = class extends TailwindStyledElement(style) {
3460
- variant = "light";
3461
- size = "medium";
3462
- placement = "top";
3463
- trigger = "mouseenter";
3464
- text = "";
3465
- maxWidth = 300;
3466
- show = false;
3467
- hideOnClick = "true";
3468
- isClipboardCopy = false;
3469
- copyText = "";
3470
- copyValue = "";
3471
- offset = 10;
3472
- options = "";
3473
- showArrow = true;
3474
- showDelay = 300;
3475
- hideDelay = 300;
3476
- showCopy = false;
3477
- optionsParsed = [];
3478
- tooltipInstance = void 0;
3479
- styles = ce({
3480
- slots: {
3481
- tooltip: "hidden",
3482
- trigger: "cursor-pointer flex flex-col items-center",
3483
- options: "rounded-4 hover:bg-neutral-95"
3484
- },
3485
- variants: {
3486
- hasNoText: {
3487
- true: {
3488
- trigger: "cursor-default"
3460
+ constructor() {
3461
+ super(...arguments);
3462
+ this.variant = "light";
3463
+ this.size = "medium";
3464
+ this.placement = "top";
3465
+ this.trigger = "mouseenter";
3466
+ this.text = "";
3467
+ this.maxWidth = 300;
3468
+ this.show = false;
3469
+ this.hideOnClick = "true";
3470
+ this.isClipboardCopy = false;
3471
+ this.copyText = "";
3472
+ this.copyValue = "";
3473
+ this.offset = 10;
3474
+ this.options = "";
3475
+ this.showArrow = true;
3476
+ this.showDelay = 300;
3477
+ this.hideDelay = 300;
3478
+ this.showCopy = false;
3479
+ this.optionsParsed = [];
3480
+ this.tooltipInstance = void 0;
3481
+ this.styles = ce({
3482
+ slots: {
3483
+ tooltip: "hidden",
3484
+ trigger: "cursor-pointer flex flex-col items-center",
3485
+ options: "rounded-4 hover:bg-neutral-95"
3486
+ },
3487
+ variants: {
3488
+ hasNoText: {
3489
+ true: {
3490
+ trigger: "cursor-default"
3491
+ }
3489
3492
  }
3490
3493
  }
3491
- }
3492
- });
3494
+ });
3495
+ }
3493
3496
  hideOnClickCheck() {
3494
3497
  if (this.hideOnClick === "toggle") {
3495
3498
  return this.hideOnClick;
@@ -2,10 +2,10 @@
2
2
 
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
- const shared_tailwindElement_index = require('../../index-89eb56eb.cjs');
5
+ const shared_tailwindElement_index = require('../../index-8ccda1e9.cjs');
6
6
  const queryAssignedElements = require('../../query-assigned-elements-d5e45650.cjs');
7
7
  const index = require('../../index-1d3f4a5a.cjs');
8
- const index$1 = require('../../index-b9bc3bbb.cjs');
8
+ const index$1 = require('../../index-17879e5a.cjs');
9
9
  require('../../tailwind-config.cjs');
10
10
  const cn = require('../../cn-5ceac001.cjs');
11
11
  require('../../bundle-mjs-d58a83c6.cjs');
@@ -1179,57 +1179,60 @@ var __decorateClass = (decorators, target, key, kind) => {
1179
1179
  return result;
1180
1180
  };
1181
1181
  exports.LuksoUsername = class LuksoUsername extends shared_tailwindElement_index.TailwindStyledElement(style) {
1182
- name = "";
1183
- address = "";
1184
- maxWidth = 200;
1185
- size = "large";
1186
- sliceBy = 8;
1187
- addressColor = "";
1188
- nameColor = "";
1189
- customClass = "";
1190
- hidePrefix = false;
1191
- prefix = "@";
1192
- noTransform = false;
1193
- /** Width of the first 4 bytes of the address */
1194
- bytesWidth = 52;
1195
- styles = index.ce({
1196
- slots: {
1197
- wrapper: "inline-flex",
1198
- name: "inline-block whitespace-nowrap overflow-hidden text-ellipsis",
1199
- address: "inline-block",
1200
- bytes: "inline-block"
1201
- },
1202
- variants: {
1203
- size: {
1204
- "x-small": {
1205
- wrapper: "paragraph-ptmono-10-bold"
1206
- },
1207
- small: {
1208
- wrapper: "paragraph-ptmono-12-bold"
1209
- },
1210
- medium: {
1211
- wrapper: "paragraph-ptmono-14-bold"
1182
+ constructor() {
1183
+ super(...arguments);
1184
+ this.name = "";
1185
+ this.address = "";
1186
+ this.maxWidth = 200;
1187
+ this.size = "large";
1188
+ this.sliceBy = 8;
1189
+ this.addressColor = "";
1190
+ this.nameColor = "";
1191
+ this.customClass = "";
1192
+ this.hidePrefix = false;
1193
+ this.prefix = "@";
1194
+ this.noTransform = false;
1195
+ /** Width of the first 4 bytes of the address */
1196
+ this.bytesWidth = 52;
1197
+ this.styles = index.ce({
1198
+ slots: {
1199
+ wrapper: "inline-flex",
1200
+ name: "inline-block whitespace-nowrap overflow-hidden text-ellipsis",
1201
+ address: "inline-block",
1202
+ bytes: "inline-block"
1203
+ },
1204
+ variants: {
1205
+ size: {
1206
+ "x-small": {
1207
+ wrapper: "paragraph-ptmono-10-bold"
1208
+ },
1209
+ small: {
1210
+ wrapper: "paragraph-ptmono-12-bold"
1211
+ },
1212
+ medium: {
1213
+ wrapper: "paragraph-ptmono-14-bold"
1214
+ },
1215
+ large: {
1216
+ wrapper: "paragraph-ptmono-16-bold"
1217
+ },
1218
+ "x-large": {
1219
+ wrapper: "paragraph-ptmono-24-bold"
1220
+ }
1212
1221
  },
1213
- large: {
1214
- wrapper: "paragraph-ptmono-16-bold"
1222
+ hasNameColor: {
1223
+ false: {
1224
+ name: "text-transparent bg-clip-text bg-gradient-to-r from-gradient-1-start to-gradient-1-end"
1225
+ }
1215
1226
  },
1216
- "x-large": {
1217
- wrapper: "paragraph-ptmono-24-bold"
1218
- }
1219
- },
1220
- hasNameColor: {
1221
- false: {
1222
- name: "text-transparent bg-clip-text bg-gradient-to-r from-gradient-1-start to-gradient-1-end"
1223
- }
1224
- },
1225
- hasAddressColor: {
1226
- false: {
1227
- address: "text-neutral-20",
1228
- bytes: "text-neutral-60"
1227
+ hasAddressColor: {
1228
+ false: {
1229
+ address: "text-neutral-20",
1230
+ bytes: "text-neutral-60"
1231
+ }
1229
1232
  }
1230
1233
  }
1231
- }
1232
- });
1234
+ });
1235
+ }
1233
1236
  transformName(name) {
1234
1237
  if (this.noTransform) {
1235
1238
  return name;
@@ -1,7 +1,7 @@
1
- import { T as TailwindStyledElement, x, A } from '../../index-c154a31c.js';
1
+ import { T as TailwindStyledElement, x, A } from '../../index-d89cc6bc.js';
2
2
  import { n, e } from '../../query-assigned-elements-1c8c9e90.js';
3
3
  import { c as ce } from '../../index-ca8e900d.js';
4
- import { c as customStyleMap } from '../../index-15b30335.js';
4
+ import { c as customStyleMap } from '../../index-6349a8aa.js';
5
5
  import '../../tailwind-config.js';
6
6
  import { c as cn } from '../../cn-b54dcc61.js';
7
7
  import '../../bundle-mjs-fbc6e2a8.js';
@@ -1175,57 +1175,60 @@ var __decorateClass = (decorators, target, key, kind) => {
1175
1175
  return result;
1176
1176
  };
1177
1177
  let LuksoUsername = class extends TailwindStyledElement(style) {
1178
- name = "";
1179
- address = "";
1180
- maxWidth = 200;
1181
- size = "large";
1182
- sliceBy = 8;
1183
- addressColor = "";
1184
- nameColor = "";
1185
- customClass = "";
1186
- hidePrefix = false;
1187
- prefix = "@";
1188
- noTransform = false;
1189
- /** Width of the first 4 bytes of the address */
1190
- bytesWidth = 52;
1191
- styles = ce({
1192
- slots: {
1193
- wrapper: "inline-flex",
1194
- name: "inline-block whitespace-nowrap overflow-hidden text-ellipsis",
1195
- address: "inline-block",
1196
- bytes: "inline-block"
1197
- },
1198
- variants: {
1199
- size: {
1200
- "x-small": {
1201
- wrapper: "paragraph-ptmono-10-bold"
1202
- },
1203
- small: {
1204
- wrapper: "paragraph-ptmono-12-bold"
1205
- },
1206
- medium: {
1207
- wrapper: "paragraph-ptmono-14-bold"
1178
+ constructor() {
1179
+ super(...arguments);
1180
+ this.name = "";
1181
+ this.address = "";
1182
+ this.maxWidth = 200;
1183
+ this.size = "large";
1184
+ this.sliceBy = 8;
1185
+ this.addressColor = "";
1186
+ this.nameColor = "";
1187
+ this.customClass = "";
1188
+ this.hidePrefix = false;
1189
+ this.prefix = "@";
1190
+ this.noTransform = false;
1191
+ /** Width of the first 4 bytes of the address */
1192
+ this.bytesWidth = 52;
1193
+ this.styles = ce({
1194
+ slots: {
1195
+ wrapper: "inline-flex",
1196
+ name: "inline-block whitespace-nowrap overflow-hidden text-ellipsis",
1197
+ address: "inline-block",
1198
+ bytes: "inline-block"
1199
+ },
1200
+ variants: {
1201
+ size: {
1202
+ "x-small": {
1203
+ wrapper: "paragraph-ptmono-10-bold"
1204
+ },
1205
+ small: {
1206
+ wrapper: "paragraph-ptmono-12-bold"
1207
+ },
1208
+ medium: {
1209
+ wrapper: "paragraph-ptmono-14-bold"
1210
+ },
1211
+ large: {
1212
+ wrapper: "paragraph-ptmono-16-bold"
1213
+ },
1214
+ "x-large": {
1215
+ wrapper: "paragraph-ptmono-24-bold"
1216
+ }
1208
1217
  },
1209
- large: {
1210
- wrapper: "paragraph-ptmono-16-bold"
1218
+ hasNameColor: {
1219
+ false: {
1220
+ name: "text-transparent bg-clip-text bg-gradient-to-r from-gradient-1-start to-gradient-1-end"
1221
+ }
1211
1222
  },
1212
- "x-large": {
1213
- wrapper: "paragraph-ptmono-24-bold"
1214
- }
1215
- },
1216
- hasNameColor: {
1217
- false: {
1218
- name: "text-transparent bg-clip-text bg-gradient-to-r from-gradient-1-start to-gradient-1-end"
1219
- }
1220
- },
1221
- hasAddressColor: {
1222
- false: {
1223
- address: "text-neutral-20",
1224
- bytes: "text-neutral-60"
1223
+ hasAddressColor: {
1224
+ false: {
1225
+ address: "text-neutral-20",
1226
+ bytes: "text-neutral-60"
1227
+ }
1225
1228
  }
1226
1229
  }
1227
- }
1228
- });
1230
+ });
1231
+ }
1229
1232
  transformName(name) {
1230
1233
  if (this.noTransform) {
1231
1234
  return name;