@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.
- package/dist/components/index.cjs +3 -3
- package/dist/components/index.js +3 -3
- package/dist/components/lukso-button/index.cjs +1 -1
- package/dist/components/lukso-button/index.js +1 -1
- package/dist/components/lukso-card/index.cjs +2 -2
- package/dist/components/lukso-card/index.js +2 -2
- package/dist/components/lukso-checkbox/index.cjs +1 -1
- package/dist/components/lukso-checkbox/index.js +1 -1
- package/dist/components/lukso-footer/index.cjs +1 -1
- package/dist/components/lukso-footer/index.js +1 -1
- package/dist/components/lukso-icon/index.cjs +2 -2
- package/dist/components/lukso-icon/index.js +2 -2
- package/dist/components/lukso-input/index.cjs +1 -1
- package/dist/components/lukso-input/index.js +1 -1
- package/dist/components/lukso-modal/index.cjs +1 -1
- package/dist/components/lukso-modal/index.js +1 -1
- package/dist/components/lukso-navbar/index.cjs +37 -24
- package/dist/components/lukso-navbar/index.d.ts +1 -0
- package/dist/components/lukso-navbar/index.d.ts.map +1 -1
- package/dist/components/lukso-navbar/index.js +37 -24
- package/dist/components/lukso-navbar/lukso-navbar.stories.d.ts +7 -7
- package/dist/components/lukso-navbar/lukso-navbar.stories.d.ts.map +1 -1
- package/dist/components/lukso-profile/index.cjs +2 -2
- package/dist/components/lukso-profile/index.js +2 -2
- package/dist/components/lukso-progress/index.cjs +2 -2
- package/dist/components/lukso-progress/index.js +2 -2
- package/dist/components/lukso-sanitize/index.cjs +1 -1
- package/dist/components/lukso-sanitize/index.js +1 -1
- package/dist/components/lukso-search/index.cjs +2 -2
- package/dist/components/lukso-search/index.js +2 -2
- package/dist/components/lukso-share/index.cjs +1 -1
- package/dist/components/lukso-share/index.js +1 -1
- package/dist/components/lukso-switch/index.cjs +2 -2
- package/dist/components/lukso-switch/index.js +2 -2
- package/dist/components/lukso-tag/index.cjs +2 -2
- package/dist/components/lukso-tag/index.js +2 -2
- package/dist/components/lukso-terms/index.cjs +2 -2
- package/dist/components/lukso-terms/index.js +2 -2
- package/dist/components/lukso-test/index.cjs +2 -2
- package/dist/components/lukso-test/index.js +2 -2
- package/dist/components/lukso-username/index.cjs +2 -2
- package/dist/components/lukso-username/index.js +2 -2
- package/dist/components/lukso-wizard/index.cjs +2 -2
- package/dist/components/lukso-wizard/index.js +2 -2
- package/dist/{directive-helpers-c00f5d40.cjs → directive-helpers-3445f03f.cjs} +1 -1
- package/dist/{directive-helpers-63c6ddf6.js → directive-helpers-3b8282aa.js} +1 -1
- package/dist/{index-51cfbd32.js → index-12d3b4a1.js} +1 -1
- package/dist/{index-c00a1316.cjs → index-26918474.cjs} +1 -1
- package/dist/index.cjs +3 -3
- package/dist/index.js +3 -3
- package/dist/shared/tailwind-element/index.cjs +1 -1
- package/dist/shared/tailwind-element/index.js +1 -1
- package/dist/{style-map-bcba103a.js → style-map-7d8d33bb.js} +1 -1
- package/dist/{style-map-f36ae803.cjs → style-map-bdd4a4b4.cjs} +1 -1
- 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-
|
|
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-
|
|
30
|
-
require('../directive-helpers-
|
|
29
|
+
require('../style-map-bdd4a4b4.cjs');
|
|
30
|
+
require('../directive-helpers-3445f03f.cjs');
|
|
31
31
|
|
|
32
32
|
|
|
33
33
|
|
package/dist/components/index.js
CHANGED
|
@@ -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-
|
|
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-
|
|
26
|
-
import '../directive-helpers-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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
|
|
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
4
4
|
|
|
5
|
-
const shared_tailwindElement_index = require('../../index-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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="
|
|
110
|
-
|
|
108
|
+
class="flex cursor-pointer group"
|
|
109
|
+
@click=${this.handleBrandClick}
|
|
111
110
|
>
|
|
112
|
-
<
|
|
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.
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
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;
|
|
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-
|
|
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-
|
|
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="
|
|
106
|
-
|
|
104
|
+
class="flex cursor-pointer group"
|
|
105
|
+
@click=${this.handleBrandClick}
|
|
107
106
|
>
|
|
108
|
-
<
|
|
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.
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
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.
|
|
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`
|
|
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`
|
|
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`
|
|
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`
|
|
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`
|
|
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`
|
|
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,
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
8
|
+
import '../../style-map-7d8d33bb.js';
|
|
9
9
|
|
|
10
10
|
const style = ":host {\n display: flex;\n height: 100%\n}";
|
|
11
11
|
|