@lukso/web-components 1.46.0 → 1.47.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 (55) hide show
  1. package/dist/components/index.cjs +3 -3
  2. package/dist/components/index.js +3 -3
  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 +2 -2
  6. package/dist/components/lukso-card/index.js +2 -2
  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-footer/index.cjs +1 -1
  10. package/dist/components/lukso-footer/index.js +1 -1
  11. package/dist/components/lukso-icon/index.cjs +2 -2
  12. package/dist/components/lukso-icon/index.js +2 -2
  13. package/dist/components/lukso-input/index.cjs +1 -1
  14. package/dist/components/lukso-input/index.js +1 -1
  15. package/dist/components/lukso-modal/index.cjs +1 -1
  16. package/dist/components/lukso-modal/index.js +1 -1
  17. package/dist/components/lukso-navbar/index.cjs +37 -24
  18. package/dist/components/lukso-navbar/index.d.ts +1 -0
  19. package/dist/components/lukso-navbar/index.d.ts.map +1 -1
  20. package/dist/components/lukso-navbar/index.js +37 -24
  21. package/dist/components/lukso-navbar/lukso-navbar.stories.d.ts +7 -7
  22. package/dist/components/lukso-navbar/lukso-navbar.stories.d.ts.map +1 -1
  23. package/dist/components/lukso-profile/index.cjs +2 -2
  24. package/dist/components/lukso-profile/index.js +2 -2
  25. package/dist/components/lukso-progress/index.cjs +2 -2
  26. package/dist/components/lukso-progress/index.js +2 -2
  27. package/dist/components/lukso-sanitize/index.cjs +1 -1
  28. package/dist/components/lukso-sanitize/index.js +1 -1
  29. package/dist/components/lukso-search/index.cjs +2 -2
  30. package/dist/components/lukso-search/index.js +2 -2
  31. package/dist/components/lukso-share/index.cjs +1 -1
  32. package/dist/components/lukso-share/index.js +1 -1
  33. package/dist/components/lukso-switch/index.cjs +2 -2
  34. package/dist/components/lukso-switch/index.js +2 -2
  35. package/dist/components/lukso-tag/index.cjs +2 -2
  36. package/dist/components/lukso-tag/index.js +2 -2
  37. package/dist/components/lukso-terms/index.cjs +2 -2
  38. package/dist/components/lukso-terms/index.js +2 -2
  39. package/dist/components/lukso-test/index.cjs +2 -2
  40. package/dist/components/lukso-test/index.js +2 -2
  41. package/dist/components/lukso-username/index.cjs +2 -2
  42. package/dist/components/lukso-username/index.js +2 -2
  43. package/dist/components/lukso-wizard/index.cjs +2 -2
  44. package/dist/components/lukso-wizard/index.js +2 -2
  45. package/dist/{directive-helpers-c00f5d40.cjs → directive-helpers-3445f03f.cjs} +1 -1
  46. package/dist/{directive-helpers-63c6ddf6.js → directive-helpers-3b8282aa.js} +1 -1
  47. package/dist/{index-51cfbd32.js → index-12d3b4a1.js} +1 -1
  48. package/dist/{index-c00a1316.cjs → index-26918474.cjs} +1 -1
  49. package/dist/index.cjs +3 -3
  50. package/dist/index.js +3 -3
  51. package/dist/shared/tailwind-element/index.cjs +1 -1
  52. package/dist/shared/tailwind-element/index.js +1 -1
  53. package/dist/{style-map-bcba103a.js → style-map-7d8d33bb.js} +1 -1
  54. package/dist/{style-map-f36ae803.cjs → style-map-bdd4a4b4.cjs} +1 -1
  55. package/package.json +1 -1
@@ -21,13 +21,13 @@ const components_luksoTerms_index = require('./lukso-terms/index.cjs');
21
21
  const components_luksoTest_index = require('./lukso-test/index.cjs');
22
22
  const components_luksoUsername_index = require('./lukso-username/index.cjs');
23
23
  const components_luksoWizard_index = require('./lukso-wizard/index.cjs');
24
- const shared_tailwindElement_index = require('../index-c00a1316.cjs');
24
+ const shared_tailwindElement_index = require('../index-26918474.cjs');
25
25
  require('../query-assigned-elements-5200f974.cjs');
26
26
  require('../state-51b50a6b.cjs');
27
27
  require('../index-e9668573.cjs');
28
28
  require('../directive-8278ab14.cjs');
29
- require('../style-map-f36ae803.cjs');
30
- require('../directive-helpers-c00f5d40.cjs');
29
+ require('../style-map-bdd4a4b4.cjs');
30
+ require('../directive-helpers-3445f03f.cjs');
31
31
 
32
32
 
33
33
 
@@ -17,10 +17,10 @@ export { LuksoTerms } from './lukso-terms/index.js';
17
17
  export { LuksoTest } from './lukso-test/index.js';
18
18
  export { LuksoUsername } from './lukso-username/index.js';
19
19
  export { LuksoWizard } from './lukso-wizard/index.js';
20
- export { a as TailwindElement, T as TailwindStyledElement } from '../index-51cfbd32.js';
20
+ export { a as TailwindElement, T as TailwindStyledElement } from '../index-12d3b4a1.js';
21
21
  import '../query-assigned-elements-e36df787.js';
22
22
  import '../state-02a92ffa.js';
23
23
  import '../index-5e194caf.js';
24
24
  import '../directive-2bb7789e.js';
25
- import '../style-map-bcba103a.js';
26
- import '../directive-helpers-63c6ddf6.js';
25
+ import '../style-map-7d8d33bb.js';
26
+ import '../directive-helpers-3b8282aa.js';
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
- const shared_tailwindElement_index = require('../../index-c00a1316.cjs');
5
+ const shared_tailwindElement_index = require('../../index-26918474.cjs');
6
6
  const queryAssignedElements = require('../../query-assigned-elements-5200f974.cjs');
7
7
  const state = require('../../state-51b50a6b.cjs');
8
8
  const index = require('../../index-e9668573.cjs');
@@ -1,4 +1,4 @@
1
- import { T as TailwindStyledElement, x } from '../../index-51cfbd32.js';
1
+ import { T as TailwindStyledElement, x } from '../../index-12d3b4a1.js';
2
2
  import { e, a as e$1 } from '../../query-assigned-elements-e36df787.js';
3
3
  import { t } from '../../state-02a92ffa.js';
4
4
  import { c as customClassMap } from '../../index-5e194caf.js';
@@ -2,9 +2,9 @@
2
2
 
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
- const shared_tailwindElement_index = require('../../index-c00a1316.cjs');
5
+ const shared_tailwindElement_index = require('../../index-26918474.cjs');
6
6
  const queryAssignedElements = require('../../query-assigned-elements-5200f974.cjs');
7
- const styleMap = require('../../style-map-f36ae803.cjs');
7
+ const styleMap = require('../../style-map-bdd4a4b4.cjs');
8
8
  const index = require('../../index-e9668573.cjs');
9
9
  require('../lukso-profile/index.cjs');
10
10
  require('../../directive-8278ab14.cjs');
@@ -1,6 +1,6 @@
1
- import { T as TailwindStyledElement, x } from '../../index-51cfbd32.js';
1
+ import { T as TailwindStyledElement, x } from '../../index-12d3b4a1.js';
2
2
  import { e, a as e$1 } from '../../query-assigned-elements-e36df787.js';
3
- import { o } from '../../style-map-bcba103a.js';
3
+ import { o } from '../../style-map-7d8d33bb.js';
4
4
  import { c as customClassMap } from '../../index-5e194caf.js';
5
5
  import '../lukso-profile/index.js';
6
6
  import '../../directive-2bb7789e.js';
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
- const shared_tailwindElement_index = require('../../index-c00a1316.cjs');
5
+ const shared_tailwindElement_index = require('../../index-26918474.cjs');
6
6
  const queryAssignedElements = require('../../query-assigned-elements-5200f974.cjs');
7
7
  const state = require('../../state-51b50a6b.cjs');
8
8
  const index = require('../../index-e9668573.cjs');
@@ -1,4 +1,4 @@
1
- import { a as TailwindElement, x, A } from '../../index-51cfbd32.js';
1
+ import { a as TailwindElement, x, A } from '../../index-12d3b4a1.js';
2
2
  import { e, a as e$1 } from '../../query-assigned-elements-e36df787.js';
3
3
  import { t } from '../../state-02a92ffa.js';
4
4
  import { c as customClassMap } from '../../index-5e194caf.js';
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
- const shared_tailwindElement_index = require('../../index-c00a1316.cjs');
5
+ const shared_tailwindElement_index = require('../../index-26918474.cjs');
6
6
  const queryAssignedElements = require('../../query-assigned-elements-5200f974.cjs');
7
7
  require('../lukso-share/index.cjs');
8
8
 
@@ -1,4 +1,4 @@
1
- import { a as TailwindElement, x } from '../../index-51cfbd32.js';
1
+ import { a as TailwindElement, x } from '../../index-12d3b4a1.js';
2
2
  import { e, a as e$1 } from '../../query-assigned-elements-e36df787.js';
3
3
  import '../lukso-share/index.js';
4
4
 
@@ -2,9 +2,9 @@
2
2
 
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
- const shared_tailwindElement_index = require('../../index-c00a1316.cjs');
5
+ const shared_tailwindElement_index = require('../../index-26918474.cjs');
6
6
  const queryAssignedElements = require('../../query-assigned-elements-5200f974.cjs');
7
- const styleMap = require('../../style-map-f36ae803.cjs');
7
+ const styleMap = require('../../style-map-bdd4a4b4.cjs');
8
8
  require('../../directive-8278ab14.cjs');
9
9
 
10
10
  const style = ":host {\n display: inline-flex\n}";
@@ -1,6 +1,6 @@
1
- import { x, T as TailwindStyledElement } from '../../index-51cfbd32.js';
1
+ import { x, T as TailwindStyledElement } from '../../index-12d3b4a1.js';
2
2
  import { e, a as e$1 } from '../../query-assigned-elements-e36df787.js';
3
- import { o } from '../../style-map-bcba103a.js';
3
+ import { o } from '../../style-map-7d8d33bb.js';
4
4
  import '../../directive-2bb7789e.js';
5
5
 
6
6
  const style = ":host {\n display: inline-flex\n}";
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
- const shared_tailwindElement_index = require('../../index-c00a1316.cjs');
5
+ const shared_tailwindElement_index = require('../../index-26918474.cjs');
6
6
  const queryAssignedElements = require('../../query-assigned-elements-5200f974.cjs');
7
7
  const state = require('../../state-51b50a6b.cjs');
8
8
  const index = require('../../index-e9668573.cjs');
@@ -1,4 +1,4 @@
1
- import { a as TailwindElement, x, A } from '../../index-51cfbd32.js';
1
+ import { a as TailwindElement, x, A } from '../../index-12d3b4a1.js';
2
2
  import { e, a as e$1 } from '../../query-assigned-elements-e36df787.js';
3
3
  import { t } from '../../state-02a92ffa.js';
4
4
  import { c as customClassMap } from '../../index-5e194caf.js';
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
- const shared_tailwindElement_index = require('../../index-c00a1316.cjs');
5
+ const shared_tailwindElement_index = require('../../index-26918474.cjs');
6
6
  const queryAssignedElements = require('../../query-assigned-elements-5200f974.cjs');
7
7
  const index = require('../../index-e9668573.cjs');
8
8
  require('../../directive-8278ab14.cjs');
@@ -1,4 +1,4 @@
1
- import { a as TailwindElement, x } from '../../index-51cfbd32.js';
1
+ import { a as TailwindElement, x } from '../../index-12d3b4a1.js';
2
2
  import { e, a as e$1 } from '../../query-assigned-elements-e36df787.js';
3
3
  import { c as customClassMap } from '../../index-5e194caf.js';
4
4
  import '../../directive-2bb7789e.js';
@@ -2,14 +2,14 @@
2
2
 
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
- const shared_tailwindElement_index = require('../../index-c00a1316.cjs');
5
+ const shared_tailwindElement_index = require('../../index-26918474.cjs');
6
6
  const queryAssignedElements = require('../../query-assigned-elements-5200f974.cjs');
7
7
  const state = require('../../state-51b50a6b.cjs');
8
8
  const index = require('../../index-e9668573.cjs');
9
9
  require('../lukso-icon/index.cjs');
10
10
  require('../lukso-tag/index.cjs');
11
11
  require('../../directive-8278ab14.cjs');
12
- require('../../style-map-f36ae803.cjs');
12
+ require('../../style-map-bdd4a4b4.cjs');
13
13
 
14
14
  var __defProp = Object.defineProperty;
15
15
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -46,6 +46,13 @@ exports.LuksoNavbar = class LuksoNavbar extends shared_tailwindElement_index.Tai
46
46
  });
47
47
  this.dispatchEvent(event);
48
48
  }
49
+ handleIconClick() {
50
+ const event = new CustomEvent("on-icon-click", {
51
+ bubbles: true,
52
+ composed: true
53
+ });
54
+ this.dispatchEvent(event);
55
+ }
49
56
  handleMenuToggle() {
50
57
  this.isMenuOpen = !this.isMenuOpen;
51
58
  }
@@ -57,9 +64,7 @@ exports.LuksoNavbar = class LuksoNavbar extends shared_tailwindElement_index.Tai
57
64
  </div>`;
58
65
  }
59
66
  mobileMenuTemplate() {
60
- return shared_tailwindElement_index.x`<div
61
- class="w-full items-center justify-end pr-6 flex md:hidden"
62
- >
67
+ return shared_tailwindElement_index.x`<div class="items-center justify-end pr-6 flex md:hidden">
63
68
  <div
64
69
  class="flex items-center justify-center w-8 h-8 cursor-pointer"
65
70
  @click=${this.handleMenuToggle}
@@ -93,32 +98,40 @@ exports.LuksoNavbar = class LuksoNavbar extends shared_tailwindElement_index.Tai
93
98
  class="bg-neutral-100 shadow-pink-drop-shadow h-78 flex
94
99
  ${index.customClassMap({
95
100
  [this.centerStyles]: this.isCenter,
101
+ ["justify-between"]: !this.isCenter,
96
102
  [this.stickyStyles]: this.isSticky,
97
103
  [this.transparentStyles]: this.isTransparent
98
104
  })}"
99
105
  >
100
- <div
101
- class="flex items-center px-7 h-full cursor-pointer sm:px-10"
102
- @click=${this.handleBrandClick}
103
- >
104
- <img
105
- src="${this.logoUrl || this.defaultLogoUrl}"
106
- class="mr-2 h-[26px]"
107
- />
106
+ <div class="flex items-center px-7 h-full sm:px-10">
108
107
  <div
109
- class="text-purple-51 nav-apax-14-medium-uppercase
110
- whitespace-pre-line flex leading-none hover:text-purple-41"
108
+ class="flex cursor-pointer group"
109
+ @click=${this.handleBrandClick}
111
110
  >
112
- <span>${this.title}</span>
111
+ <img
112
+ src="${this.logoUrl || this.defaultLogoUrl}"
113
+ class="mr-2 h-[26px]"
114
+ />
115
+ <div
116
+ class="text-purple-51 nav-apax-14-medium-uppercase
117
+ whitespace-pre-line flex leading-none transition group-hover:text-purple-41"
118
+ >
119
+ <span>${this.title}</span>
120
+ </div>
121
+ ${this.isTestnet ? shared_tailwindElement_index.x`<lukso-tag background-color="yellow-65" class="ml-2">
122
+ TESTNET
123
+ </lukso-tag>` : ""}
113
124
  </div>
114
- ${this.isTestnet ? shared_tailwindElement_index.x`<lukso-tag background-color="yellow-65" class="ml-2">
115
- TESTNET
116
- </lukso-tag>` : ""}
117
- ${this.icon ? shared_tailwindElement_index.x`<lukso-icon
118
- class="border-l border-l-purple-82 h-7 items-center pl-3 ml-3"
119
- name="${this.icon}"
120
- color="purple-51"
121
- ></lukso-icon>` : ""}
125
+ ${this.icon ? shared_tailwindElement_index.x`<div
126
+ class="flex border-l border-l-purple-82 h-7 items-center pl-3 ml-3"
127
+ >
128
+ <lukso-icon
129
+ class="transition cursor-pointer hover:scale-105"
130
+ name="${this.icon}"
131
+ color="purple-51"
132
+ @click=${this.handleIconClick}
133
+ ></lukso-icon>
134
+ </div>` : ""}
122
135
  </div>
123
136
  ${this.isCenter ? shared_tailwindElement_index.x`` : this.hasMenu ? shared_tailwindElement_index.x`${this.desktopMenuTemplate()} ${this.mobileMenuTemplate()}` : shared_tailwindElement_index.x``}
124
137
  </nav>
@@ -14,6 +14,7 @@ export declare class LuksoNavbar extends TailwindElement {
14
14
  private stickyStyles;
15
15
  private transparentStyles;
16
16
  private handleBrandClick;
17
+ private handleIconClick;
17
18
  private handleMenuToggle;
18
19
  desktopMenuTemplate(): import("lit").TemplateResult<1>;
19
20
  mobileMenuTemplate(): import("lit").TemplateResult<1>;
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-navbar/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAA;AAE3D,OAAO,yBAAyB,CAAA;AAChC,OAAO,wBAAwB,CAAA;AAE/B,qBACa,WAAY,SAAQ,eAAe;IAE9C,KAAK,SAAK;IAGV,QAAQ,UAAQ;IAGhB,QAAQ,UAAQ;IAGhB,aAAa,UAAQ;IAGrB,SAAS,UAAQ;IAGjB,IAAI,SAAK;IAGT,OAAO,UAAQ;IAGf,OAAO,SAAK;IAGZ,OAAO,CAAC,UAAU,CAAQ;IAE1B,OAAO,CAAC,cAAc,CAA+B;IAErD,OAAO,CAAC,YAAY,CAAmB;IAEvC,OAAO,CAAC,YAAY,CAA0B;IAE9C,OAAO,CAAC,iBAAiB,CAAiC;IAE1D,OAAO,CAAC,gBAAgB;IAQxB,OAAO,CAAC,gBAAgB;IAIxB,mBAAmB;IAQnB,kBAAkB;IAgClB,MAAM;CA8CP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAA;KAC5B;CACF"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-navbar/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAA;AAE3D,OAAO,yBAAyB,CAAA;AAChC,OAAO,wBAAwB,CAAA;AAE/B,qBACa,WAAY,SAAQ,eAAe;IAE9C,KAAK,SAAK;IAGV,QAAQ,UAAQ;IAGhB,QAAQ,UAAQ;IAGhB,aAAa,UAAQ;IAGrB,SAAS,UAAQ;IAGjB,IAAI,SAAK;IAGT,OAAO,UAAQ;IAGf,OAAO,SAAK;IAGZ,OAAO,CAAC,UAAU,CAAQ;IAE1B,OAAO,CAAC,cAAc,CAA+B;IAErD,OAAO,CAAC,YAAY,CAAmB;IAEvC,OAAO,CAAC,YAAY,CAA0B;IAE9C,OAAO,CAAC,iBAAiB,CAAiC;IAE1D,OAAO,CAAC,gBAAgB;IAQxB,OAAO,CAAC,eAAe;IAQvB,OAAO,CAAC,gBAAgB;IAIxB,mBAAmB;IAQnB,kBAAkB;IA8BlB,MAAM;CAsDP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAA;KAC5B;CACF"}
@@ -1,11 +1,11 @@
1
- import { a as TailwindElement, x } from '../../index-51cfbd32.js';
1
+ import { a as TailwindElement, x } from '../../index-12d3b4a1.js';
2
2
  import { e, a as e$1 } from '../../query-assigned-elements-e36df787.js';
3
3
  import { t } from '../../state-02a92ffa.js';
4
4
  import { c as customClassMap } from '../../index-5e194caf.js';
5
5
  import '../lukso-icon/index.js';
6
6
  import '../lukso-tag/index.js';
7
7
  import '../../directive-2bb7789e.js';
8
- import '../../style-map-bcba103a.js';
8
+ import '../../style-map-7d8d33bb.js';
9
9
 
10
10
  var __defProp = Object.defineProperty;
11
11
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -42,6 +42,13 @@ let LuksoNavbar = class extends TailwindElement {
42
42
  });
43
43
  this.dispatchEvent(event);
44
44
  }
45
+ handleIconClick() {
46
+ const event = new CustomEvent("on-icon-click", {
47
+ bubbles: true,
48
+ composed: true
49
+ });
50
+ this.dispatchEvent(event);
51
+ }
45
52
  handleMenuToggle() {
46
53
  this.isMenuOpen = !this.isMenuOpen;
47
54
  }
@@ -53,9 +60,7 @@ let LuksoNavbar = class extends TailwindElement {
53
60
  </div>`;
54
61
  }
55
62
  mobileMenuTemplate() {
56
- return x`<div
57
- class="w-full items-center justify-end pr-6 flex md:hidden"
58
- >
63
+ return x`<div class="items-center justify-end pr-6 flex md:hidden">
59
64
  <div
60
65
  class="flex items-center justify-center w-8 h-8 cursor-pointer"
61
66
  @click=${this.handleMenuToggle}
@@ -89,32 +94,40 @@ let LuksoNavbar = class extends TailwindElement {
89
94
  class="bg-neutral-100 shadow-pink-drop-shadow h-78 flex
90
95
  ${customClassMap({
91
96
  [this.centerStyles]: this.isCenter,
97
+ ["justify-between"]: !this.isCenter,
92
98
  [this.stickyStyles]: this.isSticky,
93
99
  [this.transparentStyles]: this.isTransparent
94
100
  })}"
95
101
  >
96
- <div
97
- class="flex items-center px-7 h-full cursor-pointer sm:px-10"
98
- @click=${this.handleBrandClick}
99
- >
100
- <img
101
- src="${this.logoUrl || this.defaultLogoUrl}"
102
- class="mr-2 h-[26px]"
103
- />
102
+ <div class="flex items-center px-7 h-full sm:px-10">
104
103
  <div
105
- class="text-purple-51 nav-apax-14-medium-uppercase
106
- whitespace-pre-line flex leading-none hover:text-purple-41"
104
+ class="flex cursor-pointer group"
105
+ @click=${this.handleBrandClick}
107
106
  >
108
- <span>${this.title}</span>
107
+ <img
108
+ src="${this.logoUrl || this.defaultLogoUrl}"
109
+ class="mr-2 h-[26px]"
110
+ />
111
+ <div
112
+ class="text-purple-51 nav-apax-14-medium-uppercase
113
+ whitespace-pre-line flex leading-none transition group-hover:text-purple-41"
114
+ >
115
+ <span>${this.title}</span>
116
+ </div>
117
+ ${this.isTestnet ? x`<lukso-tag background-color="yellow-65" class="ml-2">
118
+ TESTNET
119
+ </lukso-tag>` : ""}
109
120
  </div>
110
- ${this.isTestnet ? x`<lukso-tag background-color="yellow-65" class="ml-2">
111
- TESTNET
112
- </lukso-tag>` : ""}
113
- ${this.icon ? x`<lukso-icon
114
- class="border-l border-l-purple-82 h-7 items-center pl-3 ml-3"
115
- name="${this.icon}"
116
- color="purple-51"
117
- ></lukso-icon>` : ""}
121
+ ${this.icon ? x`<div
122
+ class="flex border-l border-l-purple-82 h-7 items-center pl-3 ml-3"
123
+ >
124
+ <lukso-icon
125
+ class="transition cursor-pointer hover:scale-105"
126
+ name="${this.icon}"
127
+ color="purple-51"
128
+ @click=${this.handleIconClick}
129
+ ></lukso-icon>
130
+ </div>` : ""}
118
131
  </div>
119
132
  ${this.isCenter ? x`` : this.hasMenu ? x`${this.desktopMenuTemplate()} ${this.mobileMenuTemplate()}` : x``}
120
133
  </nav>
@@ -2,18 +2,18 @@ import { Meta } from '@storybook/web-components';
2
2
  /** Documentation and examples of `lukso-navbar` component. */
3
3
  declare const meta: Meta;
4
4
  export default meta;
5
- /** Example of default navbar. It support `@on-brand-click` event that is fired when clicking on the logo/title. */
5
+ /** Example of default navbar. */
6
6
  export declare const DefaultNavbar: any;
7
- /** Example of navbar with logo and title in center. You set this by adding `is-center` property. */
7
+ /** Example of navbar with logo and title in center. You set this by adding `is-center` attribute. */
8
8
  export declare const CenterNavbar: any;
9
- /** Example of navbar with transparent background and no shadow. You set this by adding `is-transparent` property. */
9
+ /** Example of navbar with transparent background and no shadow. You set this by adding `is-transparent` attribute. */
10
10
  export declare const TransparentNavbar: any;
11
- /** By default navbar stays at the top of the document. If you want it scroll with the content then ad `is-sticky` property. */
11
+ /** By default navbar stays at the top of the document. If you want it scroll with the content then ad `is-sticky` attribute. */
12
12
  export declare const StickyNavbar: any;
13
- /** Navbar with menu. It uses `desktop` and `mobile` slots for menus for different devices. It also require `has-menu` property to be set. */
13
+ /** Navbar with menu. It uses `desktop` and `mobile` slots for menus for different devices. It also require `has-menu` attribute to be set. */
14
14
  export declare const NavbarWithMenu: any;
15
- /** Example of navbar with testnet badge. You set this by adding `is-testnet` property. */
15
+ /** Example of navbar with testnet badge. You set this by adding `is-testnet` attribute. */
16
16
  export declare const TestnetNavbar: any;
17
- /** Example of navbar with custom logo. You set this by adding `logo-url` property. */
17
+ /** Example of navbar with custom logo. You set this by adding `logo-url` attribute. */
18
18
  export declare const CustomLogoNavbar: any;
19
19
  //# sourceMappingURL=lukso-navbar.stories.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"lukso-navbar.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-navbar/lukso-navbar.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAA;AAEhD,OAAO,SAAS,CAAA;AAChB,OAAO,uBAAuB,CAAA;AAC9B,OAAO,qBAAqB,CAAA;AAE5B,gEAAgE;AAChE,QAAA,MAAM,IAAI,EAAE,IAqHX,CAAA;AAED,eAAe,IAAI,CAAA;AA+EnB,mHAAmH;AACnH,eAAO,MAAM,aAAa,KAAoB,CAAA;AAE9C,oGAAoG;AACpG,eAAO,MAAM,YAAY,KAAoB,CAAA;AAK7C,qHAAqH;AACrH,eAAO,MAAM,iBAAiB,KAAoB,CAAA;AAMlD,gIAAgI;AAChI,eAAO,MAAM,YAAY,KAAoB,CAAA;AAK7C,8IAA8I;AAC9I,eAAO,MAAM,cAAc,KAAwB,CAAA;AAKnD,0FAA0F;AAC1F,eAAO,MAAM,aAAa,KAAoB,CAAA;AAK9C,sFAAsF;AACtF,eAAO,MAAM,gBAAgB,KAAoB,CAAA"}
1
+ {"version":3,"file":"lukso-navbar.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/lukso-navbar/lukso-navbar.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAA;AAEhD,OAAO,SAAS,CAAA;AAChB,OAAO,uBAAuB,CAAA;AAC9B,OAAO,qBAAqB,CAAA;AAE5B,gEAAgE;AAChE,QAAA,MAAM,IAAI,EAAE,IA8HX,CAAA;AAED,eAAe,IAAI,CAAA;AA0DnB,kCAAkC;AAClC,eAAO,MAAM,aAAa,KAAoB,CAAA;AAE9C,qGAAqG;AACrG,eAAO,MAAM,YAAY,KAAoB,CAAA;AAK7C,sHAAsH;AACtH,eAAO,MAAM,iBAAiB,KAAoB,CAAA;AAMlD,iIAAiI;AACjI,eAAO,MAAM,YAAY,KAAoB,CAAA;AAK7C,+IAA+I;AAC/I,eAAO,MAAM,cAAc,KAAoB,CAAA;AAK/C,2FAA2F;AAC3F,eAAO,MAAM,aAAa,KAAoB,CAAA;AAK9C,uFAAuF;AACvF,eAAO,MAAM,gBAAgB,KAAoB,CAAA"}
@@ -2,9 +2,9 @@
2
2
 
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
- const shared_tailwindElement_index = require('../../index-c00a1316.cjs');
5
+ const shared_tailwindElement_index = require('../../index-26918474.cjs');
6
6
  const queryAssignedElements = require('../../query-assigned-elements-5200f974.cjs');
7
- const styleMap = require('../../style-map-f36ae803.cjs');
7
+ const styleMap = require('../../style-map-bdd4a4b4.cjs');
8
8
  const index = require('../../index-e9668573.cjs');
9
9
  require('../../directive-8278ab14.cjs');
10
10
 
@@ -1,6 +1,6 @@
1
- import { a as TailwindElement, x } from '../../index-51cfbd32.js';
1
+ import { a as TailwindElement, x } from '../../index-12d3b4a1.js';
2
2
  import { e, a as e$1 } from '../../query-assigned-elements-e36df787.js';
3
- import { o } from '../../style-map-bcba103a.js';
3
+ import { o } from '../../style-map-7d8d33bb.js';
4
4
  import { c as customClassMap } from '../../index-5e194caf.js';
5
5
  import '../../directive-2bb7789e.js';
6
6
 
@@ -2,9 +2,9 @@
2
2
 
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
- const shared_tailwindElement_index = require('../../index-c00a1316.cjs');
5
+ const shared_tailwindElement_index = require('../../index-26918474.cjs');
6
6
  const queryAssignedElements = require('../../query-assigned-elements-5200f974.cjs');
7
- const styleMap = require('../../style-map-f36ae803.cjs');
7
+ const styleMap = require('../../style-map-bdd4a4b4.cjs');
8
8
  const index = require('../../index-e9668573.cjs');
9
9
  require('../../directive-8278ab14.cjs');
10
10
 
@@ -1,6 +1,6 @@
1
- import { a as TailwindElement, x } from '../../index-51cfbd32.js';
1
+ import { a as TailwindElement, x } from '../../index-12d3b4a1.js';
2
2
  import { e, a as e$1 } from '../../query-assigned-elements-e36df787.js';
3
- import { o } from '../../style-map-bcba103a.js';
3
+ import { o } from '../../style-map-7d8d33bb.js';
4
4
  import { c as customClassMap } from '../../index-5e194caf.js';
5
5
  import '../../directive-2bb7789e.js';
6
6
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
- const shared_tailwindElement_index = require('../../index-c00a1316.cjs');
5
+ const shared_tailwindElement_index = require('../../index-26918474.cjs');
6
6
  const queryAssignedElements = require('../../query-assigned-elements-5200f974.cjs');
7
7
  const directive = require('../../directive-8278ab14.cjs');
8
8
 
@@ -1,4 +1,4 @@
1
- import { c as A, b as T, a as TailwindElement, x } from '../../index-51cfbd32.js';
1
+ import { c as A, b as T, a as TailwindElement, x } from '../../index-12d3b4a1.js';
2
2
  import { e as e$2, a as e$3 } from '../../query-assigned-elements-e36df787.js';
3
3
  import { i, t, e as e$1 } from '../../directive-2bb7789e.js';
4
4
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
- const shared_tailwindElement_index = require('../../index-c00a1316.cjs');
5
+ const shared_tailwindElement_index = require('../../index-26918474.cjs');
6
6
  const queryAssignedElements = require('../../query-assigned-elements-5200f974.cjs');
7
7
  const state = require('../../state-51b50a6b.cjs');
8
8
  const index = require('../../index-e9668573.cjs');
@@ -10,7 +10,7 @@ require('../lukso-icon/index.cjs');
10
10
  require('../lukso-profile/index.cjs');
11
11
  require('../lukso-username/index.cjs');
12
12
  require('../../directive-8278ab14.cjs');
13
- require('../../style-map-f36ae803.cjs');
13
+ require('../../style-map-bdd4a4b4.cjs');
14
14
 
15
15
  const style = ":host {\n\n display: inline-flex\n}\n\n:host([is-full-width]) {\n\n display: flex;\n\n width: 100%\n}";
16
16
 
@@ -1,4 +1,4 @@
1
- import { T as TailwindStyledElement, x, A } from '../../index-51cfbd32.js';
1
+ import { T as TailwindStyledElement, x, A } from '../../index-12d3b4a1.js';
2
2
  import { e, a as e$1 } from '../../query-assigned-elements-e36df787.js';
3
3
  import { t } from '../../state-02a92ffa.js';
4
4
  import { c as customClassMap } from '../../index-5e194caf.js';
@@ -6,7 +6,7 @@ import '../lukso-icon/index.js';
6
6
  import '../lukso-profile/index.js';
7
7
  import '../lukso-username/index.js';
8
8
  import '../../directive-2bb7789e.js';
9
- import '../../style-map-bcba103a.js';
9
+ import '../../style-map-7d8d33bb.js';
10
10
 
11
11
  const style = ":host {\n\n display: inline-flex\n}\n\n:host([is-full-width]) {\n\n display: flex;\n\n width: 100%\n}";
12
12
 
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
- const shared_tailwindElement_index = require('../../index-c00a1316.cjs');
5
+ const shared_tailwindElement_index = require('../../index-26918474.cjs');
6
6
  const queryAssignedElements = require('../../query-assigned-elements-5200f974.cjs');
7
7
 
8
8
  const style = ":host {\n display: inline-flex\n}";
@@ -1,4 +1,4 @@
1
- import { T as TailwindStyledElement, x } from '../../index-51cfbd32.js';
1
+ import { T as TailwindStyledElement, x } from '../../index-12d3b4a1.js';
2
2
  import { e, a as e$1 } from '../../query-assigned-elements-e36df787.js';
3
3
 
4
4
  const style = ":host {\n display: inline-flex\n}";
@@ -2,9 +2,9 @@
2
2
 
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
- const shared_tailwindElement_index = require('../../index-c00a1316.cjs');
5
+ const shared_tailwindElement_index = require('../../index-26918474.cjs');
6
6
  const queryAssignedElements = require('../../query-assigned-elements-5200f974.cjs');
7
- const styleMap = require('../../style-map-f36ae803.cjs');
7
+ const styleMap = require('../../style-map-bdd4a4b4.cjs');
8
8
  const index = require('../../index-e9668573.cjs');
9
9
  require('../../directive-8278ab14.cjs');
10
10
 
@@ -1,6 +1,6 @@
1
- import { a as TailwindElement, x } from '../../index-51cfbd32.js';
1
+ import { a as TailwindElement, x } from '../../index-12d3b4a1.js';
2
2
  import { e, a as e$1 } from '../../query-assigned-elements-e36df787.js';
3
- import { o } from '../../style-map-bcba103a.js';
3
+ import { o } from '../../style-map-7d8d33bb.js';
4
4
  import { c as customClassMap } from '../../index-5e194caf.js';
5
5
  import '../../directive-2bb7789e.js';
6
6
 
@@ -2,9 +2,9 @@
2
2
 
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
- const shared_tailwindElement_index = require('../../index-c00a1316.cjs');
5
+ const shared_tailwindElement_index = require('../../index-26918474.cjs');
6
6
  const queryAssignedElements = require('../../query-assigned-elements-5200f974.cjs');
7
- const styleMap = require('../../style-map-f36ae803.cjs');
7
+ const styleMap = require('../../style-map-bdd4a4b4.cjs');
8
8
  const index = require('../../index-e9668573.cjs');
9
9
  require('../../directive-8278ab14.cjs');
10
10
 
@@ -1,6 +1,6 @@
1
- import { T as TailwindStyledElement, x } from '../../index-51cfbd32.js';
1
+ import { T as TailwindStyledElement, x } from '../../index-12d3b4a1.js';
2
2
  import { e, a as e$1 } from '../../query-assigned-elements-e36df787.js';
3
- import { o } from '../../style-map-bcba103a.js';
3
+ import { o } from '../../style-map-7d8d33bb.js';
4
4
  import { c as customClassMap } from '../../index-5e194caf.js';
5
5
  import '../../directive-2bb7789e.js';
6
6
 
@@ -2,14 +2,14 @@
2
2
 
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
- const shared_tailwindElement_index = require('../../index-c00a1316.cjs');
5
+ const shared_tailwindElement_index = require('../../index-26918474.cjs');
6
6
  const queryAssignedElements = require('../../query-assigned-elements-5200f974.cjs');
7
7
  const state = require('../../state-51b50a6b.cjs');
8
8
  const index = require('../../index-e9668573.cjs');
9
9
  require('../lukso-icon/index.cjs');
10
10
  require('../lukso-sanitize/index.cjs');
11
11
  require('../../directive-8278ab14.cjs');
12
- require('../../style-map-f36ae803.cjs');
12
+ require('../../style-map-bdd4a4b4.cjs');
13
13
 
14
14
  const style = ":host {\n display: flex;\n height: 100%\n}";
15
15
 
@@ -1,11 +1,11 @@
1
- import { T as TailwindStyledElement, x } from '../../index-51cfbd32.js';
1
+ import { T as TailwindStyledElement, x } from '../../index-12d3b4a1.js';
2
2
  import { e, a as e$1 } from '../../query-assigned-elements-e36df787.js';
3
3
  import { t } from '../../state-02a92ffa.js';
4
4
  import { c as customClassMap } from '../../index-5e194caf.js';
5
5
  import '../lukso-icon/index.js';
6
6
  import '../lukso-sanitize/index.js';
7
7
  import '../../directive-2bb7789e.js';
8
- import '../../style-map-bcba103a.js';
8
+ import '../../style-map-7d8d33bb.js';
9
9
 
10
10
  const style = ":host {\n display: flex;\n height: 100%\n}";
11
11