@shibui-ui/ui 1.20.0 → 1.21.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/index281.js +1 -1
- package/dist/index307.js +1 -1
- package/dist/index316.js +4 -4
- package/dist/index332.js +1 -1
- package/dist/index352.js +32 -14
- package/dist/index352.js.map +1 -1
- package/dist/index353.js +24 -27
- package/dist/index353.js.map +1 -1
- package/dist/index354.js +6 -58
- package/dist/index354.js.map +1 -1
- package/dist/index355.js +24 -60
- package/dist/index355.js.map +1 -1
- package/dist/index356.js +65 -24
- package/dist/index356.js.map +1 -1
- package/dist/index357.js +64 -32
- package/dist/index357.js.map +1 -1
- package/dist/index360.js +32 -143
- package/dist/index360.js.map +1 -1
- package/dist/index361.js +131 -115
- package/dist/index361.js.map +1 -1
- package/dist/index362.js +129 -34
- package/dist/index362.js.map +1 -1
- package/package.json +1 -1
package/dist/index357.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index357.js","sources":["
|
|
1
|
+
{"version":3,"file":"index357.js","sources":["../src/components/molecules/header/templates/header-app-bar.html.ts"],"sourcesContent":["import { html, nothing, TemplateResult } from 'lit';\nimport type { LibHeader } from '../lib-header.component';\nimport type { HeaderAction } from '../lib-header.types';\nimport { renderBreadcrumbs, svgSearch, svgBell } from './header-shared.html';\n\n/**\n * Template variante app-bar:\n * logomark | breadcrumbs | search | spacer | actions | notif | avatar\n * No usa el drawer móvil — sus acciones son contextuales.\n * En móvil: breadcrumbs se truncan, search colapsa a icono.\n */\nexport function renderAppBar(ctx: LibHeader): TemplateResult {\n return html`\n <div class=\"hdr\">\n\n <!-- Logo mark (sin texto) -->\n <div class=\"hdr-logo-mark\" style=\"flex-shrink:0;\"></div>\n\n <!-- Breadcrumbs -->\n ${ctx.breadcrumbs.length ? renderBreadcrumbs(ctx.breadcrumbs) : nothing}\n\n <!-- Divider — oculto en móvil -->\n <div class=\"hdr-divider hdr-divider--desktop\"></div>\n\n <!-- Search — full en desktop, icono en móvil -->\n ${ctx.showSearch ? html`\n <div class=\"hdr-search\">\n ${svgSearch}\n <input\n type=\"search\"\n placeholder=\"${ctx.searchPlaceholder}\"\n @input=\"${(e: Event): void =>\n ctx._onSearch((e.target as HTMLInputElement).value)}\"\n />\n <span class=\"hdr-search-kbd\">⌘K</span>\n </div>\n ` : nothing}\n\n <div class=\"hdr-spacer\"></div>\n\n <!-- Context actions — ocultos en móvil -->\n ${ctx.actions.length ? html`\n <div class=\"hdr-actions hdr-actions--desktop\">\n ${ctx.actions.map((action: HeaderAction) => html`\n <a href=\"${action.href || '#'}\"\n class=\"hdr-action ${action.variant === 'outline'\n ? 'hdr-action--outline' : 'hdr-action--kaki'}\"\n style=\"height:32px;font-size:8px;\"\n >${action.label}</a>\n `)}\n </div>\n ` : nothing}\n\n <!-- Status (compact mode) — oculto en móvil -->\n ${ctx.compact ? html`\n <div class=\"hdr-status hdr-status--desktop\">\n <div class=\"hdr-status-dot\"></div>\n <span class=\"hdr-status-text\">Online · 42ms</span>\n </div>\n ` : nothing}\n\n <div class=\"hdr-divider\"></div>\n\n <!-- Notificaciones -->\n <div class=\"hdr-notif\">\n ${svgBell}\n ${ctx.notifications ? html`<span class=\"hdr-notif-dot\"></span>` : nothing}\n </div>\n\n <!-- Avatar -->\n <div class=\"hdr-avatar\">${ctx.userInitials || ctx.userName.slice(0, 1)}</div>\n\n </div>`;\n}"],"names":[],"mappings":";;AAWO,SAAS,aAAa,KAAgC;AAC3D,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAOD,IAAI,YAAY,SAAS,kBAAkB,IAAI,WAAW,IAAI,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAMrE,IAAI,aAAa;AAAA;AAAA,YAEb,SAAS;AAAA;AAAA;AAAA,2BAGM,IAAI,iBAAiB;AAAA,sBAC1B,CAAC,MACT,IAAI,UAAW,EAAE,OAA4B,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA,UAIvD,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,QAKT,IAAI,QAAQ,SAAS;AAAA;AAAA,YAEjB,IAAI,QAAQ,IAAI,CAAC,WAAyB;AAAA,uBAC/B,OAAO,QAAQ,GAAG;AAAA,kCACP,OAAO,YAAY,YACnC,wBAAwB,kBAAkB;AAAA;AAAA,eAE7C,OAAO,KAAK;AAAA,WAChB,CAAC;AAAA;AAAA,UAEF,OAAO;AAAA;AAAA;AAAA,QAGT,IAAI,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,UAKZ,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAMP,OAAO;AAAA,UACP,IAAI,gBAAgB,4CAA4C,OAAO;AAAA;AAAA;AAAA;AAAA,gCAIjD,IAAI,gBAAgB,IAAI,SAAS,MAAM,GAAG,CAAC,CAAC;AAAA;AAAA;AAG5E;"}
|
package/dist/index360.js
CHANGED
|
@@ -1,149 +1,38 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
const
|
|
8
|
-
<svg width="12" height="12" viewBox="0 0 16 16" fill="none"
|
|
9
|
-
stroke="currentColor" stroke-width="1.6" stroke-linecap="round">
|
|
10
|
-
<circle cx="7" cy="7" r="5"/><line x1="11" y1="11" x2="14" y2="14"/>
|
|
11
|
-
</svg>`;
|
|
12
|
-
const svgBell = html`
|
|
13
|
-
<svg width="15" height="15" viewBox="0 0 16 16" fill="none"
|
|
14
|
-
stroke="currentColor" stroke-width="1.5" stroke-linecap="round">
|
|
15
|
-
<path d="M8 1a5 5 0 00-5 5v2l-1 2v1h12v-1l-1-2V6A5 5 0 008 1z"/>
|
|
16
|
-
<path d="M6 13a2 2 0 004 0"/>
|
|
17
|
-
</svg>`;
|
|
18
|
-
function renderLogoMark(ctx) {
|
|
19
|
-
if (ctx.variant === "kintsugi") {
|
|
20
|
-
return html`
|
|
21
|
-
<div class="hdr-logo-mark">
|
|
22
|
-
<span class="hdr-logo-mark-text">${ctx.logoMark}</span>
|
|
23
|
-
</div>`;
|
|
24
|
-
}
|
|
25
|
-
return html`<div class="hdr-logo-mark">${ctx.logoMark}</div>`;
|
|
26
|
-
}
|
|
27
|
-
function renderLogo(ctx) {
|
|
28
|
-
if (ctx.variant === "glitch") {
|
|
29
|
-
return html`
|
|
30
|
-
<a href="${ctx.logoHref}" class="hdr-logo-glitch">
|
|
31
|
-
⌗ ${ctx.brandName.toUpperCase()}
|
|
32
|
-
<span class="hdr-logo-glitch-badge">SYS</span>
|
|
33
|
-
</a>`;
|
|
34
|
-
}
|
|
35
|
-
if (ctx.variant === "minimal") {
|
|
36
|
-
return html`
|
|
37
|
-
<a href="${ctx.logoHref}" class="hdr-logo">
|
|
38
|
-
<span class="hdr-brand-name">${ctx.logoMark}</span>
|
|
39
|
-
</a>`;
|
|
40
|
-
}
|
|
41
|
-
return html`
|
|
42
|
-
<a href="${ctx.logoHref}" class="hdr-logo">
|
|
43
|
-
${renderLogoMark(ctx)}
|
|
44
|
-
<div>
|
|
45
|
-
<div class="hdr-brand-name">${ctx.brandName}
|
|
46
|
-
${ctx.variant === "kintsugi" ? html` <em style="font-style:italic;color:var(--color-kaki-400);">金</em>` : nothing}
|
|
47
|
-
</div>
|
|
48
|
-
${ctx.brandTagline && ctx.variant === "shrink" ? html`<div class="hdr-tagline">${ctx.brandTagline}</div>` : nothing}
|
|
49
|
-
</div>
|
|
50
|
-
${ctx.version && ctx.variant === "dark" ? html`<span class="hdr-version">${ctx.version}</span>` : nothing}
|
|
51
|
-
</a>`;
|
|
52
|
-
}
|
|
53
|
-
function renderDropdown(_ctx, link) {
|
|
1
|
+
import { _$LH as j } from "./index358.js";
|
|
2
|
+
/**
|
|
3
|
+
* @license
|
|
4
|
+
* Copyright 2020 Google LLC
|
|
5
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
6
|
+
*/
|
|
7
|
+
const { I: t } = j, i = (o) => o, s = () => document.createComment(""), v = (o, n, e) => {
|
|
54
8
|
var _a;
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
class="hdr-dd-item ${item.divider ? "hdr-dd-item--divider" : ""}">
|
|
65
|
-
${item.label}
|
|
66
|
-
</a>
|
|
67
|
-
`)}
|
|
68
|
-
</div>
|
|
69
|
-
</div>`;
|
|
70
|
-
}
|
|
71
|
-
function renderLinks(ctx, links) {
|
|
72
|
-
return html`
|
|
73
|
-
${links.map(
|
|
74
|
-
(link) => {
|
|
75
|
-
var _a;
|
|
76
|
-
return ((_a = link.dropdown) == null ? void 0 : _a.length) ? renderDropdown(ctx, link) : html`
|
|
77
|
-
<a href="${link.href || "#"}"
|
|
78
|
-
class="hdr-link ${link.active ? "is-active" : ""}"
|
|
79
|
-
@click="${(e) => {
|
|
80
|
-
e.preventDefault();
|
|
81
|
-
ctx._onLinkClick(link.id);
|
|
82
|
-
}}"
|
|
83
|
-
>
|
|
84
|
-
${ctx.variant === "glitch" ? html`<span>></span>` : nothing}
|
|
85
|
-
${link.label}
|
|
86
|
-
</a>`;
|
|
9
|
+
const l = o._$AA.parentNode, d = void 0 === n ? o._$AB : n._$AA;
|
|
10
|
+
if (void 0 === e) {
|
|
11
|
+
const i2 = l.insertBefore(s(), d), n2 = l.insertBefore(s(), d);
|
|
12
|
+
e = new t(i2, n2, o, o.options);
|
|
13
|
+
} else {
|
|
14
|
+
const t2 = e._$AB.nextSibling, n2 = e._$AM, c = n2 !== o;
|
|
15
|
+
if (c) {
|
|
16
|
+
let t3;
|
|
17
|
+
(_a = e._$AQ) == null ? void 0 : _a.call(e, o), e._$AM = o, void 0 !== e._$AP && (t3 = o._$AU) !== n2._$AU && e._$AP(t3);
|
|
87
18
|
}
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
minimal: ""
|
|
19
|
+
if (t2 !== d || c) {
|
|
20
|
+
let o2 = e._$AA;
|
|
21
|
+
for (; o2 !== t2; ) {
|
|
22
|
+
const t3 = i(o2).nextSibling;
|
|
23
|
+
i(l).insertBefore(o2, d), o2 = t3;
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
return e;
|
|
28
|
+
}, u = (o, t2, i2 = o) => (o._$AI(t2, i2), o), m = {}, p = (o, t2 = m) => o._$AH = t2, M = (o) => o._$AH, h = (o) => {
|
|
29
|
+
o._$AR(), o._$AA.remove();
|
|
100
30
|
};
|
|
101
|
-
function renderActions(ctx) {
|
|
102
|
-
return html`
|
|
103
|
-
<div class="hdr-actions">
|
|
104
|
-
${ctx.loginLabel ? html`
|
|
105
|
-
<a href="${ctx.loginHref || "#"}" class="hdr-login">${ctx.loginLabel}</a>
|
|
106
|
-
` : nothing}
|
|
107
|
-
|
|
108
|
-
${ctx.actions.map((action) => {
|
|
109
|
-
const cls = action.variant ? `hdr-action--${action.variant}` : `hdr-action--${ACTION_VARIANT_MAP[ctx.variant] || "kaki"}`;
|
|
110
|
-
return html`
|
|
111
|
-
<a href="${action.href || "#"}"
|
|
112
|
-
class="hdr-action ${cls}"
|
|
113
|
-
@click="${(e) => {
|
|
114
|
-
e.preventDefault();
|
|
115
|
-
ctx._onActionClick(action);
|
|
116
|
-
}}"
|
|
117
|
-
>${action.label}</a>`;
|
|
118
|
-
})}
|
|
119
|
-
|
|
120
|
-
${ctx.variant === "glitch" ? html`
|
|
121
|
-
<div class="hdr-online">● online</div>
|
|
122
|
-
` : nothing}
|
|
123
|
-
|
|
124
|
-
${ctx.variant === "minimal" && ctx.contactLabel ? html`
|
|
125
|
-
<a href="${ctx.contactHref || "#"}" class="hdr-contact">${ctx.contactLabel} →</a>
|
|
126
|
-
` : nothing}
|
|
127
|
-
</div>`;
|
|
128
|
-
}
|
|
129
|
-
function renderBreadcrumbs(items) {
|
|
130
|
-
return html`
|
|
131
|
-
<nav class="hdr-breadcrumbs" aria-label="breadcrumb">
|
|
132
|
-
${items.map((item, i) => html`
|
|
133
|
-
${i > 0 ? html`<span class="hdr-breadcrumb-sep">/</span>` : nothing}
|
|
134
|
-
${i < items.length - 1 ? html`<a href="${item.href || "#"}" class="hdr-breadcrumb-link">${item.label}</a>` : html`<span class="hdr-breadcrumb-current">${item.label}</span>`}
|
|
135
|
-
`)}
|
|
136
|
-
</nav>`;
|
|
137
|
-
}
|
|
138
31
|
export {
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
renderLogoMark,
|
|
145
|
-
svgBell,
|
|
146
|
-
svgChevron,
|
|
147
|
-
svgSearch
|
|
32
|
+
M as getCommittedValue,
|
|
33
|
+
v as insertPart,
|
|
34
|
+
h as removePart,
|
|
35
|
+
u as setChildPartValue,
|
|
36
|
+
p as setCommittedValue
|
|
148
37
|
};
|
|
149
38
|
//# sourceMappingURL=index360.js.map
|
package/dist/index360.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index360.js","sources":["
|
|
1
|
+
{"version":3,"file":"index360.js","sources":["../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directive-helpers.js"],"sourcesContent":["import{_$LH as o}from\"./lit-html.js\";\n/**\n * @license\n * Copyright 2020 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */const{I:t}=o,i=o=>o,n=o=>null===o||\"object\"!=typeof o&&\"function\"!=typeof o,e={HTML:1,SVG:2,MATHML:3},l=(o,t)=>void 0===t?void 0!==o?._$litType$:o?._$litType$===t,d=o=>null!=o?._$litType$?.h,c=o=>void 0!==o?._$litDirective$,f=o=>o?._$litDirective$,r=o=>void 0===o.strings,s=()=>document.createComment(\"\"),v=(o,n,e)=>{const l=o._$AA.parentNode,d=void 0===n?o._$AB:n._$AA;if(void 0===e){const i=l.insertBefore(s(),d),n=l.insertBefore(s(),d);e=new t(i,n,o,o.options)}else{const t=e._$AB.nextSibling,n=e._$AM,c=n!==o;if(c){let t;e._$AQ?.(o),e._$AM=o,void 0!==e._$AP&&(t=o._$AU)!==n._$AU&&e._$AP(t)}if(t!==d||c){let o=e._$AA;for(;o!==t;){const t=i(o).nextSibling;i(l).insertBefore(o,d),o=t}}}return e},u=(o,t,i=o)=>(o._$AI(t,i),o),m={},p=(o,t=m)=>o._$AH=t,M=o=>o._$AH,h=o=>{o._$AR(),o._$AA.remove()},j=o=>{o._$AR()};export{e as TemplateResultType,j as clearPart,M as getCommittedValue,f as getDirectiveClass,v as insertPart,d as isCompiledTemplateResult,c as isDirectiveResult,n as isPrimitive,r as isSingleExpression,l as isTemplateResult,h as removePart,u as setChildPartValue,p as setCommittedValue};\n//# sourceMappingURL=directive-helpers.js.map\n"],"names":["o","i","n","t"],"mappings":";AACA;AAAA;AAAA;AAAA;AAAA;AAIO,MAAC,EAAC,GAAE,EAAC,IAAEA,GAAE,IAAE,OAAG,GAA8P,IAAE,MAAI,SAAS,cAAc,EAAE,GAAE,IAAE,CAAC,GAAE,GAAE,MAAI;;AAAC,QAAM,IAAE,EAAE,KAAK,YAAW,IAAE,WAAS,IAAE,EAAE,OAAK,EAAE;AAAK,MAAG,WAAS,GAAE;AAAC,UAAMC,KAAE,EAAE,aAAa,EAAC,GAAG,CAAC,GAAEC,KAAE,EAAE,aAAa,EAAC,GAAG,CAAC;AAAE,QAAE,IAAI,EAAED,IAAEC,IAAE,GAAE,EAAE,OAAO;AAAA,EAAC,OAAK;AAAC,UAAMC,KAAE,EAAE,KAAK,aAAYD,KAAE,EAAE,MAAK,IAAEA,OAAI;AAAE,QAAG,GAAE;AAAC,UAAIC;AAAE,cAAE,SAAF,2BAAS,IAAG,EAAE,OAAK,GAAE,WAAS,EAAE,SAAOA,KAAE,EAAE,UAAQD,GAAE,QAAM,EAAE,KAAKC,EAAC;AAAA,IAAC;AAAC,QAAGA,OAAI,KAAG,GAAE;AAAC,UAAIH,KAAE,EAAE;AAAK,aAAKA,OAAIG,MAAG;AAAC,cAAMA,KAAE,EAAEH,EAAC,EAAE;AAAY,UAAE,CAAC,EAAE,aAAaA,IAAE,CAAC,GAAEA,KAAEG;AAAA,MAAC;AAAA,IAAC;AAAA,EAAC;AAAC,SAAO;AAAC,GAAE,IAAE,CAAC,GAAEA,IAAEF,KAAE,OAAK,EAAE,KAAKE,IAAEF,EAAC,GAAE,IAAG,IAAE,CAAA,GAAG,IAAE,CAAC,GAAEE,KAAE,MAAI,EAAE,OAAKA,IAAE,IAAE,OAAG,EAAE,MAAK,IAAE,OAAG;AAAC,IAAE,KAAI,GAAG,EAAE,KAAK;AAAQ;","x_google_ignoreList":[0]}
|
package/dist/index361.js
CHANGED
|
@@ -1,133 +1,149 @@
|
|
|
1
1
|
import { html, nothing } from "lit";
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
2
|
+
const svgChevron = html`
|
|
3
|
+
<svg class="hdr-link-chevron" width="9" height="6" viewBox="0 0 10 6"
|
|
4
|
+
fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round">
|
|
5
|
+
<polyline points="1,1 5,5 9,1"/>
|
|
6
|
+
</svg>`;
|
|
7
|
+
const svgSearch = html`
|
|
8
|
+
<svg width="12" height="12" viewBox="0 0 16 16" fill="none"
|
|
9
|
+
stroke="currentColor" stroke-width="1.6" stroke-linecap="round">
|
|
10
|
+
<circle cx="7" cy="7" r="5"/><line x1="11" y1="11" x2="14" y2="14"/>
|
|
11
|
+
</svg>`;
|
|
12
|
+
const svgBell = html`
|
|
13
|
+
<svg width="15" height="15" viewBox="0 0 16 16" fill="none"
|
|
14
|
+
stroke="currentColor" stroke-width="1.5" stroke-linecap="round">
|
|
15
|
+
<path d="M8 1a5 5 0 00-5 5v2l-1 2v1h12v-1l-1-2V6A5 5 0 008 1z"/>
|
|
16
|
+
<path d="M6 13a2 2 0 004 0"/>
|
|
17
|
+
</svg>`;
|
|
18
|
+
function renderLogoMark(ctx) {
|
|
19
|
+
if (ctx.variant === "kintsugi") {
|
|
20
|
+
return html`
|
|
21
|
+
<div class="hdr-logo-mark">
|
|
22
|
+
<span class="hdr-logo-mark-text">${ctx.logoMark}</span>
|
|
23
|
+
</div>`;
|
|
24
|
+
}
|
|
25
|
+
return html`<div class="hdr-logo-mark">${ctx.logoMark}</div>`;
|
|
26
|
+
}
|
|
27
|
+
function renderLogo(ctx) {
|
|
28
|
+
if (ctx.variant === "glitch") {
|
|
29
|
+
return html`
|
|
30
|
+
<a href="${ctx.logoHref}" class="hdr-logo-glitch">
|
|
31
|
+
⌗ ${ctx.brandName.toUpperCase()}
|
|
32
|
+
<span class="hdr-logo-glitch-badge">SYS</span>
|
|
33
|
+
</a>`;
|
|
34
|
+
}
|
|
35
|
+
if (ctx.variant === "minimal") {
|
|
36
|
+
return html`
|
|
37
|
+
<a href="${ctx.logoHref}" class="hdr-logo">
|
|
38
|
+
<span class="hdr-brand-name">${ctx.logoMark}</span>
|
|
39
|
+
</a>`;
|
|
40
|
+
}
|
|
5
41
|
return html`
|
|
6
|
-
<
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
<line class="hdr-burger-mid" x1="0" y1="7" x2="20" y2="7"/>
|
|
17
|
-
<line class="hdr-burger-bot" x1="0" y1="13" x2="20" y2="13"/>
|
|
18
|
-
</svg>
|
|
19
|
-
</button>`;
|
|
42
|
+
<a href="${ctx.logoHref}" class="hdr-logo">
|
|
43
|
+
${renderLogoMark(ctx)}
|
|
44
|
+
<div>
|
|
45
|
+
<div class="hdr-brand-name">${ctx.brandName}
|
|
46
|
+
${ctx.variant === "kintsugi" ? html` <em style="font-style:italic;color:var(--color-kaki-400);">金</em>` : nothing}
|
|
47
|
+
</div>
|
|
48
|
+
${ctx.brandTagline && ctx.variant === "shrink" ? html`<div class="hdr-tagline">${ctx.brandTagline}</div>` : nothing}
|
|
49
|
+
</div>
|
|
50
|
+
${ctx.version && ctx.variant === "dark" ? html`<span class="hdr-version">${ctx.version}</span>` : nothing}
|
|
51
|
+
</a>`;
|
|
20
52
|
}
|
|
21
|
-
function
|
|
53
|
+
function renderDropdown(_ctx, link) {
|
|
22
54
|
var _a;
|
|
23
|
-
if (!ctx._mobileOpen) return html``;
|
|
24
55
|
return html`
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
56
|
+
<div class="hdr-dd">
|
|
57
|
+
<span class="hdr-link">
|
|
58
|
+
${link.label}
|
|
59
|
+
${svgChevron}
|
|
60
|
+
</span>
|
|
61
|
+
<div class="hdr-dd-menu">
|
|
62
|
+
${(_a = link.dropdown) == null ? void 0 : _a.map((item) => html`
|
|
63
|
+
<a href="${item.href || "#"}"
|
|
64
|
+
class="hdr-dd-item ${item.divider ? "hdr-dd-item--divider" : ""}">
|
|
65
|
+
${item.label}
|
|
66
|
+
</a>
|
|
67
|
+
`)}
|
|
68
|
+
</div>
|
|
69
|
+
</div>`;
|
|
70
|
+
}
|
|
71
|
+
function renderLinks(ctx, links) {
|
|
72
|
+
return html`
|
|
73
|
+
${links.map(
|
|
74
|
+
(link) => {
|
|
75
|
+
var _a;
|
|
76
|
+
return ((_a = link.dropdown) == null ? void 0 : _a.length) ? renderDropdown(ctx, link) : html`
|
|
77
|
+
<a href="${link.href || "#"}"
|
|
78
|
+
class="hdr-link ${link.active ? "is-active" : ""}"
|
|
79
|
+
@click="${(e) => {
|
|
80
|
+
e.preventDefault();
|
|
81
|
+
ctx._onLinkClick(link.id);
|
|
82
|
+
}}"
|
|
83
|
+
>
|
|
84
|
+
${ctx.variant === "glitch" ? html`<span>></span>` : nothing}
|
|
85
|
+
${link.label}
|
|
86
|
+
</a>`;
|
|
87
|
+
}
|
|
88
|
+
)}`;
|
|
89
|
+
}
|
|
90
|
+
const ACTION_VARIANT_MAP = {
|
|
91
|
+
classic: "kaki",
|
|
92
|
+
centered: "outline",
|
|
93
|
+
dark: "kaki",
|
|
94
|
+
transparent: "kaki",
|
|
95
|
+
kintsugi: "kintsugi",
|
|
96
|
+
glitch: "glitch",
|
|
97
|
+
mega: "kaki",
|
|
98
|
+
shrink: "kaki",
|
|
99
|
+
minimal: ""
|
|
100
|
+
};
|
|
101
|
+
function renderActions(ctx) {
|
|
102
|
+
return html`
|
|
103
|
+
<div class="hdr-actions">
|
|
104
|
+
${ctx.loginLabel ? html`
|
|
105
|
+
<a href="${ctx.loginHref || "#"}" class="hdr-login">${ctx.loginLabel}</a>
|
|
106
|
+
` : nothing}
|
|
31
107
|
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
id="hdr-mobile-drawer"
|
|
35
|
-
class="hdr-mobile-drawer ${ctx._mobileOpen ? "is-open" : ""}"
|
|
36
|
-
aria-label="Menú principal"
|
|
37
|
-
>
|
|
38
|
-
<!-- Links principales -->
|
|
39
|
-
<div class="hdr-mobile-links">
|
|
40
|
-
${(ctx.links ?? []).map((link) => {
|
|
41
|
-
var _a2, _b;
|
|
108
|
+
${ctx.actions.map((action) => {
|
|
109
|
+
const cls = action.variant ? `hdr-action--${action.variant}` : `hdr-action--${ACTION_VARIANT_MAP[ctx.variant] || "kaki"}`;
|
|
42
110
|
return html`
|
|
43
|
-
<a
|
|
44
|
-
|
|
45
|
-
class="hdr-mobile-link"
|
|
111
|
+
<a href="${action.href || "#"}"
|
|
112
|
+
class="hdr-action ${cls}"
|
|
46
113
|
@click="${(e) => {
|
|
47
114
|
e.preventDefault();
|
|
48
|
-
ctx.
|
|
115
|
+
ctx._onActionClick(action);
|
|
49
116
|
}}"
|
|
50
|
-
|
|
51
|
-
${link.label}
|
|
52
|
-
${((_a2 = link.dropdown) == null ? void 0 : _a2.length) ? html`
|
|
53
|
-
<svg width="8" height="5" viewBox="0 0 10 6" fill="none"
|
|
54
|
-
stroke="currentColor" stroke-width="1.5" stroke-linecap="round">
|
|
55
|
-
<polyline points="1,1 5,5 9,1"/>
|
|
56
|
-
</svg>` : nothing}
|
|
57
|
-
</a>
|
|
58
|
-
|
|
59
|
-
<!-- Sub-items — siempre visibles en móvil -->
|
|
60
|
-
${((_b = link.dropdown) == null ? void 0 : _b.length) ? html`
|
|
61
|
-
<div class="hdr-mobile-sub">
|
|
62
|
-
${link.dropdown.map((item) => html`
|
|
63
|
-
<a href="${item.href ?? "#"}" class="hdr-mobile-sub-link">
|
|
64
|
-
› ${item.label}
|
|
65
|
-
</a>
|
|
66
|
-
`)}
|
|
67
|
-
</div>
|
|
68
|
-
` : nothing}
|
|
69
|
-
`;
|
|
117
|
+
>${action.label}</a>`;
|
|
70
118
|
})}
|
|
71
119
|
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
${ctx.megaColumns.map((col) => html`
|
|
76
|
-
<p class="hdr-mobile-col-title">${col.title}</p>
|
|
77
|
-
${col.items.map((item) => html`
|
|
78
|
-
<a href="${item.href ?? "#"}" class="hdr-mobile-sub-link">
|
|
79
|
-
› ${item.label}
|
|
80
|
-
</a>
|
|
81
|
-
`)}
|
|
82
|
-
`)}
|
|
83
|
-
</div>
|
|
84
|
-
` : nothing}
|
|
85
|
-
</div>
|
|
86
|
-
|
|
87
|
-
<!-- Divider -->
|
|
88
|
-
<div class="hdr-mobile-divider"></div>
|
|
89
|
-
|
|
90
|
-
<!-- Actions / CTAs -->
|
|
91
|
-
<div class="hdr-mobile-actions">
|
|
92
|
-
${ctx.loginLabel ? html`
|
|
93
|
-
<a href="${ctx.loginHref ?? "#"}" class="hdr-mobile-login">
|
|
94
|
-
${ctx.loginLabel}
|
|
95
|
-
</a>
|
|
96
|
-
` : nothing}
|
|
97
|
-
|
|
98
|
-
${(ctx.actions ?? []).map((action) => html`
|
|
99
|
-
<a
|
|
100
|
-
href="${action.href ?? "#"}"
|
|
101
|
-
class="hdr-mobile-cta"
|
|
102
|
-
@click="${(e) => {
|
|
103
|
-
e.preventDefault();
|
|
104
|
-
ctx._onActionClick(action);
|
|
105
|
-
}}"
|
|
106
|
-
>
|
|
107
|
-
${action.label}
|
|
108
|
-
</a>
|
|
109
|
-
`)}
|
|
110
|
-
|
|
111
|
-
${ctx.contactLabel ? html`
|
|
112
|
-
<a href="${ctx.contactHref ?? "#"}" class="hdr-mobile-login">
|
|
113
|
-
${ctx.contactLabel} →
|
|
114
|
-
</a>
|
|
115
|
-
` : nothing}
|
|
116
|
-
</div>
|
|
120
|
+
${ctx.variant === "glitch" ? html`
|
|
121
|
+
<div class="hdr-online">● online</div>
|
|
122
|
+
` : nothing}
|
|
117
123
|
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
124
|
+
${ctx.variant === "minimal" && ctx.contactLabel ? html`
|
|
125
|
+
<a href="${ctx.contactHref || "#"}" class="hdr-contact">${ctx.contactLabel} →</a>
|
|
126
|
+
` : nothing}
|
|
127
|
+
</div>`;
|
|
128
|
+
}
|
|
129
|
+
function renderBreadcrumbs(items) {
|
|
130
|
+
return html`
|
|
131
|
+
<nav class="hdr-breadcrumbs" aria-label="breadcrumb">
|
|
132
|
+
${items.map((item, i) => html`
|
|
133
|
+
${i > 0 ? html`<span class="hdr-breadcrumb-sep">/</span>` : nothing}
|
|
134
|
+
${i < items.length - 1 ? html`<a href="${item.href || "#"}" class="hdr-breadcrumb-link">${item.label}</a>` : html`<span class="hdr-breadcrumb-current">${item.label}</span>`}
|
|
135
|
+
`)}
|
|
127
136
|
</nav>`;
|
|
128
137
|
}
|
|
129
138
|
export {
|
|
130
|
-
|
|
131
|
-
|
|
139
|
+
renderActions,
|
|
140
|
+
renderBreadcrumbs,
|
|
141
|
+
renderDropdown,
|
|
142
|
+
renderLinks,
|
|
143
|
+
renderLogo,
|
|
144
|
+
renderLogoMark,
|
|
145
|
+
svgBell,
|
|
146
|
+
svgChevron,
|
|
147
|
+
svgSearch
|
|
132
148
|
};
|
|
133
149
|
//# sourceMappingURL=index361.js.map
|
package/dist/index361.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index361.js","sources":["../src/components/molecules/header/templates/header-
|
|
1
|
+
{"version":3,"file":"index361.js","sources":["../src/components/molecules/header/templates/header-shared.html.ts"],"sourcesContent":["import { html, nothing, TemplateResult } from 'lit';\nimport type { LibHeader } from '../lib-header.component';\nimport type { NavLink, DropdownItem, HeaderAction, BreadcrumbItem } from '../lib-header.types';\n\n/* ══════════════════════════════════════\n SVG HELPERS (cambiar a iconos phosfor)\n ══════════════════════════════════════ */\n\nexport const svgChevron = html`\n <svg class=\"hdr-link-chevron\" width=\"9\" height=\"6\" viewBox=\"0 0 10 6\"\n fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\">\n <polyline points=\"1,1 5,5 9,1\"/>\n </svg>`;\n\nexport const svgSearch = html`\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 16 16\" fill=\"none\"\n stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\">\n <circle cx=\"7\" cy=\"7\" r=\"5\"/><line x1=\"11\" y1=\"11\" x2=\"14\" y2=\"14\"/>\n </svg>`;\n\nexport const svgBell = html`\n <svg width=\"15\" height=\"15\" viewBox=\"0 0 16 16\" fill=\"none\"\n stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\">\n <path d=\"M8 1a5 5 0 00-5 5v2l-1 2v1h12v-1l-1-2V6A5 5 0 008 1z\"/>\n <path d=\"M6 13a2 2 0 004 0\"/>\n </svg>`;\n\n/* ══════════════════════════════════════\n LOGO MARK\n ══════════════════════════════════════ */\n\nexport function renderLogoMark(ctx: LibHeader): TemplateResult {\n if (ctx.variant === 'kintsugi') {\n return html`\n <div class=\"hdr-logo-mark\">\n <span class=\"hdr-logo-mark-text\">${ctx.logoMark}</span>\n </div>`;\n }\n return html`<div class=\"hdr-logo-mark\">${ctx.logoMark}</div>`;\n}\n\n/* ══════════════════════════════════════\n LOGO\n ══════════════════════════════════════ */\n\nexport function renderLogo(ctx: LibHeader): TemplateResult {\n if (ctx.variant === 'glitch') {\n return html`\n <a href=\"${ctx.logoHref}\" class=\"hdr-logo-glitch\">\n ⌗ ${ctx.brandName.toUpperCase()}\n <span class=\"hdr-logo-glitch-badge\">SYS</span>\n </a>`;\n }\n\n if (ctx.variant === 'minimal') {\n return html`\n <a href=\"${ctx.logoHref}\" class=\"hdr-logo\">\n <span class=\"hdr-brand-name\">${ctx.logoMark}</span>\n </a>`;\n }\n\n return html`\n <a href=\"${ctx.logoHref}\" class=\"hdr-logo\">\n ${renderLogoMark(ctx)}\n <div>\n <div class=\"hdr-brand-name\">${ctx.brandName}\n ${ctx.variant === 'kintsugi'\n ? html` <em style=\"font-style:italic;color:var(--color-kaki-400);\">金</em>`\n : nothing}\n </div>\n ${ctx.brandTagline && ctx.variant === 'shrink'\n ? html`<div class=\"hdr-tagline\">${ctx.brandTagline}</div>`\n : nothing}\n </div>\n ${ctx.version && ctx.variant === 'dark'\n ? html`<span class=\"hdr-version\">${ctx.version}</span>`\n : nothing}\n </a>`;\n}\n\n/* ══════════════════════════════════════\n DROPDOWN (desktop)\n ══════════════════════════════════════ */\n\nexport function renderDropdown(_ctx: LibHeader, link: NavLink): TemplateResult {\n return html`\n <div class=\"hdr-dd\">\n <span class=\"hdr-link\">\n ${link.label}\n ${svgChevron}\n </span>\n <div class=\"hdr-dd-menu\">\n ${link.dropdown?.map((item: DropdownItem) => html`\n <a href=\"${item.href || '#'}\"\n class=\"hdr-dd-item ${item.divider ? 'hdr-dd-item--divider' : ''}\">\n ${item.label}\n </a>\n `)}\n </div>\n </div>`;\n}\n\n/* ══════════════════════════════════════\n NAV LINKS (desktop)\n ══════════════════════════════════════ */\n\nexport function renderLinks(ctx: LibHeader, links: NavLink[]): TemplateResult {\n return html`\n ${links.map(link =>\n link.dropdown?.length\n ? renderDropdown(ctx, link)\n : html`\n <a href=\"${link.href || '#'}\"\n class=\"hdr-link ${link.active ? 'is-active' : ''}\"\n @click=\"${(e: Event): void => {\n e.preventDefault();\n ctx._onLinkClick(link.id);\n }}\"\n >\n ${ctx.variant === 'glitch' ? html`<span>></span>` : nothing}\n ${link.label}\n </a>`\n )}`;\n}\n\n/* ══════════════════════════════════════\n ACTIONS (desktop)\n ══════════════════════════════════════ */\n\nconst ACTION_VARIANT_MAP: Record<string, string> = {\n classic: 'kaki',\n centered: 'outline',\n dark: 'kaki',\n transparent: 'kaki',\n kintsugi: 'kintsugi',\n glitch: 'glitch',\n mega: 'kaki',\n shrink: 'kaki',\n minimal: '',\n};\n\nexport function renderActions(ctx: LibHeader): TemplateResult {\n return html`\n <div class=\"hdr-actions\">\n ${ctx.loginLabel ? html`\n <a href=\"${ctx.loginHref || '#'}\" class=\"hdr-login\">${ctx.loginLabel}</a>\n ` : nothing}\n\n ${ctx.actions.map((action: HeaderAction) => {\n const cls = action.variant\n ? `hdr-action--${action.variant}`\n : `hdr-action--${ACTION_VARIANT_MAP[ctx.variant] || 'kaki'}`;\n return html`\n <a href=\"${action.href || '#'}\"\n class=\"hdr-action ${cls}\"\n @click=\"${(e: Event): void => {\n e.preventDefault();\n ctx._onActionClick(action);\n }}\"\n >${action.label}</a>`;\n })}\n\n ${ctx.variant === 'glitch' ? html`\n <div class=\"hdr-online\">● online</div>\n ` : nothing}\n\n ${ctx.variant === 'minimal' && ctx.contactLabel ? html`\n <a href=\"${ctx.contactHref || '#'}\" class=\"hdr-contact\">${ctx.contactLabel} →</a>\n ` : nothing}\n </div>`;\n}\n\n/* ══════════════════════════════════════\n BREADCRUMBS (app-bar)\n ══════════════════════════════════════ */\n\nexport function renderBreadcrumbs(items: BreadcrumbItem[]): TemplateResult {\n return html`\n <nav class=\"hdr-breadcrumbs\" aria-label=\"breadcrumb\">\n ${items.map((item, i) => html`\n ${i > 0 ? html`<span class=\"hdr-breadcrumb-sep\">/</span>` : nothing}\n ${i < items.length - 1\n ? html`<a href=\"${item.href || '#'}\" class=\"hdr-breadcrumb-link\">${item.label}</a>`\n : html`<span class=\"hdr-breadcrumb-current\">${item.label}</span>`}\n `)}\n </nav>`;\n}"],"names":[],"mappings":"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"}
|