@shibui-ui/ui 1.19.8 → 1.20.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1004 -1
- 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 +14 -32
- package/dist/index352.js.map +1 -1
- package/dist/index353.js +27 -24
- package/dist/index353.js.map +1 -1
- package/dist/index354.js +58 -6
- package/dist/index354.js.map +1 -1
- package/dist/index355.js +60 -24
- package/dist/index355.js.map +1 -1
- package/dist/index356.js +24 -65
- package/dist/index356.js.map +1 -1
- package/dist/index357.js +32 -64
- package/dist/index357.js.map +1 -1
- package/dist/index360.js +143 -32
- package/dist/index360.js.map +1 -1
- package/dist/index361.js +115 -131
- package/dist/index361.js.map +1 -1
- package/dist/index362.js +34 -129
- package/dist/index362.js.map +1 -1
- package/package.json +1 -1
package/dist/index281.js
CHANGED
package/dist/index307.js
CHANGED
package/dist/index316.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { renderClassic } from "./
|
|
2
|
-
import { renderCentered } from "./
|
|
3
|
-
import { renderMega } from "./
|
|
4
|
-
import { renderAppBar } from "./
|
|
1
|
+
import { renderClassic } from "./index352.js";
|
|
2
|
+
import { renderCentered } from "./index353.js";
|
|
3
|
+
import { renderMega } from "./index354.js";
|
|
4
|
+
import { renderAppBar } from "./index355.js";
|
|
5
5
|
function headerTemplate(ctx) {
|
|
6
6
|
switch (ctx.variant) {
|
|
7
7
|
case "centered":
|
package/dist/index332.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { noChange as E } from "./index358.js";
|
|
2
2
|
import { directive as e, Directive as i, PartType as t } from "./index359.js";
|
|
3
|
-
import { getCommittedValue as M, setChildPartValue as u$1, insertPart as v, removePart as h, setCommittedValue as p } from "./
|
|
3
|
+
import { getCommittedValue as M, setChildPartValue as u$1, insertPart as v, removePart as h, setCommittedValue as p } from "./index362.js";
|
|
4
4
|
/**
|
|
5
5
|
* @license
|
|
6
6
|
* Copyright 2017 Google LLC
|
package/dist/index352.js
CHANGED
|
@@ -1,35 +1,17 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
return " " + Object.keys(t2).filter((s) => t2[s]).join(" ") + " ";
|
|
15
|
-
}
|
|
16
|
-
update(s, [i2]) {
|
|
17
|
-
var _a, _b;
|
|
18
|
-
if (void 0 === this.st) {
|
|
19
|
-
this.st = /* @__PURE__ */ new Set(), void 0 !== s.strings && (this.nt = new Set(s.strings.join(" ").split(/\s/).filter((t2) => "" !== t2)));
|
|
20
|
-
for (const t2 in i2) i2[t2] && !((_a = this.nt) == null ? void 0 : _a.has(t2)) && this.st.add(t2);
|
|
21
|
-
return this.render(i2);
|
|
22
|
-
}
|
|
23
|
-
const r = s.element.classList;
|
|
24
|
-
for (const t2 of this.st) t2 in i2 || (r.remove(t2), this.st.delete(t2));
|
|
25
|
-
for (const t2 in i2) {
|
|
26
|
-
const s2 = !!i2[t2];
|
|
27
|
-
s2 === this.st.has(t2) || ((_b = this.nt) == null ? void 0 : _b.has(t2)) || (s2 ? (r.add(t2), this.st.add(t2)) : (r.remove(t2), this.st.delete(t2)));
|
|
28
|
-
}
|
|
29
|
-
return E;
|
|
30
|
-
}
|
|
31
|
-
});
|
|
1
|
+
import { html } from "lit";
|
|
2
|
+
import { renderLogo, renderLinks, renderActions } from "./index360.js";
|
|
3
|
+
import { renderHamburger, renderMobileDrawer } from "./index361.js";
|
|
4
|
+
function renderClassic(ctx) {
|
|
5
|
+
return html`
|
|
6
|
+
<div class="hdr">
|
|
7
|
+
${renderLogo(ctx)}
|
|
8
|
+
<nav class="hdr-nav">${renderLinks(ctx, ctx.links)}</nav>
|
|
9
|
+
${renderActions(ctx)}
|
|
10
|
+
${renderHamburger(ctx)}
|
|
11
|
+
</div>
|
|
12
|
+
${renderMobileDrawer(ctx)}`;
|
|
13
|
+
}
|
|
32
14
|
export {
|
|
33
|
-
|
|
15
|
+
renderClassic
|
|
34
16
|
};
|
|
35
17
|
//# sourceMappingURL=index352.js.map
|
package/dist/index352.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index352.js","sources":["
|
|
1
|
+
{"version":3,"file":"index352.js","sources":["../src/components/molecules/header/templates/header-classic.html.ts"],"sourcesContent":["import { html, TemplateResult } from 'lit';\nimport type { LibHeader } from '../lib-header.component';\nimport { renderLogo, renderLinks, renderActions } from './header-shared.html';\nimport { renderHamburger, renderMobileDrawer } from './header-mobile.html';\n\n/**\n * Template compartido por las variantes de layout simple:\n * classic · dark · transparent · kintsugi · glitch · minimal · shrink\n *\n * Estructura: logo | nav | actions | hamburger (móvil)\n */\nexport function renderClassic(ctx: LibHeader): TemplateResult {\n return html`\n <div class=\"hdr\">\n ${renderLogo(ctx)}\n <nav class=\"hdr-nav\">${renderLinks(ctx, ctx.links)}</nav>\n ${renderActions(ctx)}\n ${renderHamburger(ctx)}\n </div>\n ${renderMobileDrawer(ctx)}`;\n}"],"names":[],"mappings":";;;AAWO,SAAS,cAAc,KAAgC;AAC5D,SAAO;AAAA;AAAA,QAED,WAAW,GAAG,CAAC;AAAA,6BACM,YAAY,KAAK,IAAI,KAAK,CAAC;AAAA,QAChD,cAAc,GAAG,CAAC;AAAA,QAClB,gBAAgB,GAAG,CAAC;AAAA;AAAA,MAEtB,mBAAmB,GAAG,CAAC;AAC7B;"}
|
package/dist/index353.js
CHANGED
|
@@ -1,28 +1,31 @@
|
|
|
1
|
-
import { nothing
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
1
|
+
import { nothing, html } from "lit";
|
|
2
|
+
import { renderLinks, renderLogo, renderActions } from "./index360.js";
|
|
3
|
+
import { renderHamburger, renderMobileDrawer } from "./index361.js";
|
|
4
|
+
function renderCentered(ctx) {
|
|
5
|
+
const mid = Math.floor(ctx.links.length / 2);
|
|
6
|
+
const leftLinks = ctx.links.slice(0, mid);
|
|
7
|
+
const rightLinks = ctx.links.slice(mid);
|
|
8
|
+
return html`
|
|
9
|
+
${ctx.announcement ? html`
|
|
10
|
+
<div class="hdr-announcement">
|
|
11
|
+
<span>${ctx.announcement}</span>
|
|
12
|
+
${ctx.announcementHref ? html`<a href="${ctx.announcementHref}">Ver →</a>` : nothing}
|
|
13
|
+
</div>` : nothing}
|
|
14
|
+
|
|
15
|
+
<div class="hdr">
|
|
16
|
+
<nav class="hdr-nav hdr-nav--centered-left">
|
|
17
|
+
${renderLinks(ctx, leftLinks)}
|
|
18
|
+
</nav>
|
|
19
|
+
${renderLogo(ctx)}
|
|
20
|
+
<nav class="hdr-nav hdr-nav--right">
|
|
21
|
+
${renderLinks(ctx, rightLinks)}
|
|
22
|
+
${renderActions(ctx)}
|
|
23
|
+
</nav>
|
|
24
|
+
${renderHamburger(ctx)}
|
|
25
|
+
</div>
|
|
26
|
+
${renderMobileDrawer(ctx)}`;
|
|
21
27
|
}
|
|
22
|
-
e.directiveName = "unsafeHTML", e.resultType = 1;
|
|
23
|
-
const o = e$1(e);
|
|
24
28
|
export {
|
|
25
|
-
|
|
26
|
-
o as unsafeHTML
|
|
29
|
+
renderCentered
|
|
27
30
|
};
|
|
28
31
|
//# sourceMappingURL=index353.js.map
|
package/dist/index353.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index353.js","sources":["
|
|
1
|
+
{"version":3,"file":"index353.js","sources":["../src/components/molecules/header/templates/header-centered.html.ts"],"sourcesContent":["import { html, nothing, TemplateResult } from 'lit';\nimport type { LibHeader } from '../lib-header.component';\nimport { renderLogo, renderLinks, renderActions } from './header-shared.html';\nimport { renderHamburger, renderMobileDrawer } from './header-mobile.html';\n\n/**\n * Template variante centered:\n * [nav-izquierda] | [logo-central] | [nav-derecha + actions]\n * En móvil colapsa a: [logo] | [hamburger]\n */\nexport function renderCentered(ctx: LibHeader): TemplateResult {\n const mid = Math.floor(ctx.links.length / 2);\n const leftLinks = ctx.links.slice(0, mid);\n const rightLinks = ctx.links.slice(mid);\n\n return html`\n ${ctx.announcement ? html`\n <div class=\"hdr-announcement\">\n <span>${ctx.announcement}</span>\n ${ctx.announcementHref\n ? html`<a href=\"${ctx.announcementHref}\">Ver →</a>`\n : nothing}\n </div>` : nothing}\n\n <div class=\"hdr\">\n <nav class=\"hdr-nav hdr-nav--centered-left\">\n ${renderLinks(ctx, leftLinks)}\n </nav>\n ${renderLogo(ctx)}\n <nav class=\"hdr-nav hdr-nav--right\">\n ${renderLinks(ctx, rightLinks)}\n ${renderActions(ctx)}\n </nav>\n ${renderHamburger(ctx)}\n </div>\n ${renderMobileDrawer(ctx)}`;\n}"],"names":[],"mappings":";;;AAUO,SAAS,eAAe,KAAgC;AAC7D,QAAM,MAAa,KAAK,MAAM,IAAI,MAAM,SAAS,CAAC;AAClD,QAAM,YAAa,IAAI,MAAM,MAAM,GAAG,GAAG;AACzC,QAAM,aAAa,IAAI,MAAM,MAAM,GAAG;AAEtC,SAAO;AAAA,MACH,IAAI,eAAe;AAAA;AAAA,gBAET,IAAI,YAAY;AAAA,UACtB,IAAI,mBACF,gBAAgB,IAAI,gBAAgB,gBACpC,OAAO;AAAA,gBACH,OAAO;AAAA;AAAA;AAAA;AAAA,UAIb,YAAY,KAAK,SAAS,CAAC;AAAA;AAAA,QAE7B,WAAW,GAAG,CAAC;AAAA;AAAA,UAEb,YAAY,KAAK,UAAU,CAAC;AAAA,UAC5B,cAAc,GAAG,CAAC;AAAA;AAAA,QAEpB,gBAAgB,GAAG,CAAC;AAAA;AAAA,MAEtB,mBAAmB,GAAG,CAAC;AAC7B;"}
|
package/dist/index354.js
CHANGED
|
@@ -1,17 +1,69 @@
|
|
|
1
|
-
import { html } from "lit";
|
|
2
|
-
import { renderLogo,
|
|
3
|
-
import { renderHamburger, renderMobileDrawer } from "./
|
|
4
|
-
function
|
|
1
|
+
import { nothing, html } from "lit";
|
|
2
|
+
import { renderLogo, svgChevron, renderActions } from "./index360.js";
|
|
3
|
+
import { renderHamburger, renderMobileDrawer } from "./index361.js";
|
|
4
|
+
function renderMega(ctx) {
|
|
5
5
|
return html`
|
|
6
6
|
<div class="hdr">
|
|
7
7
|
${renderLogo(ctx)}
|
|
8
|
-
<nav class="hdr-nav"
|
|
8
|
+
<nav class="hdr-nav">
|
|
9
|
+
${ctx.links.map(
|
|
10
|
+
(link) => {
|
|
11
|
+
var _a;
|
|
12
|
+
return ((_a = link.dropdown) == null ? void 0 : _a.length) ? html`
|
|
13
|
+
<div
|
|
14
|
+
class="hdr-dd"
|
|
15
|
+
@mouseenter="${() => ctx._openMega()}"
|
|
16
|
+
@mouseleave="${() => ctx._closeMega()}"
|
|
17
|
+
>
|
|
18
|
+
<span class="hdr-link">
|
|
19
|
+
${link.label} ${svgChevron}
|
|
20
|
+
</span>
|
|
21
|
+
</div>` : html`<a href="${link.href || "#"}" class="hdr-link">${link.label}</a>`;
|
|
22
|
+
}
|
|
23
|
+
)}
|
|
24
|
+
</nav>
|
|
9
25
|
${renderActions(ctx)}
|
|
10
26
|
${renderHamburger(ctx)}
|
|
11
27
|
</div>
|
|
28
|
+
|
|
29
|
+
<!-- Overlay detrás del panel -->
|
|
30
|
+
<div
|
|
31
|
+
class="hdr-mega-overlay ${ctx._megaOpen ? "is-open" : ""}"
|
|
32
|
+
@mouseenter="${() => ctx._closeMega()}"
|
|
33
|
+
></div>
|
|
34
|
+
|
|
35
|
+
<!-- Panel full-width -->
|
|
36
|
+
<div
|
|
37
|
+
class="hdr-mega-panel ${ctx._megaOpen ? "is-open" : ""}"
|
|
38
|
+
@mouseenter="${() => ctx._openMega()}"
|
|
39
|
+
@mouseleave="${() => ctx._closeMega()}"
|
|
40
|
+
>
|
|
41
|
+
<div class="hdr-mega-inner">
|
|
42
|
+
${ctx.megaColumns.map((col) => html`
|
|
43
|
+
<div>
|
|
44
|
+
<div class="hdr-mega-group-title">${col.title}</div>
|
|
45
|
+
${col.items.map((item) => html`
|
|
46
|
+
<a href="${item.href || "#"}" class="hdr-mega-link">${item.label}</a>
|
|
47
|
+
`)}
|
|
48
|
+
</div>
|
|
49
|
+
`)}
|
|
50
|
+
${ctx.megaCta ? html`
|
|
51
|
+
<div class="hdr-mega-cta">
|
|
52
|
+
<div class="hdr-mega-cta-label">${ctx.megaCta.label}</div>
|
|
53
|
+
<div class="hdr-mega-cta-title">${ctx.megaCta.title}</div>
|
|
54
|
+
<div class="hdr-mega-cta-desc">${ctx.megaCta.desc}</div>
|
|
55
|
+
<a href="${ctx.megaCta.href || "#"}"
|
|
56
|
+
class="hdr-action hdr-action--kaki"
|
|
57
|
+
style="height:32px;font-size:8px;"
|
|
58
|
+
>${ctx.megaCta.cta}</a>
|
|
59
|
+
</div>
|
|
60
|
+
` : nothing}
|
|
61
|
+
</div>
|
|
62
|
+
</div>
|
|
63
|
+
|
|
12
64
|
${renderMobileDrawer(ctx)}`;
|
|
13
65
|
}
|
|
14
66
|
export {
|
|
15
|
-
|
|
67
|
+
renderMega
|
|
16
68
|
};
|
|
17
69
|
//# sourceMappingURL=index354.js.map
|
package/dist/index354.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index354.js","sources":["../src/components/molecules/header/templates/header-
|
|
1
|
+
{"version":3,"file":"index354.js","sources":["../src/components/molecules/header/templates/header-mega.html.ts"],"sourcesContent":["import { html, nothing, TemplateResult } from 'lit';\nimport type { LibHeader } from '../lib-header.component';\nimport { renderLogo, renderActions, svgChevron } from './header-shared.html';\nimport { renderHamburger, renderMobileDrawer } from './header-mobile.html';\n\n/**\n * Template variante mega:\n * Panel full-width al hover sobre el link con dropdown.\n * En móvil el panel se oculta y el drawer cubre los mega-columns.\n */\nexport function renderMega(ctx: LibHeader): TemplateResult {\n return html`\n <div class=\"hdr\">\n ${renderLogo(ctx)}\n <nav class=\"hdr-nav\">\n ${ctx.links.map(link =>\n link.dropdown?.length\n ? html`\n <div\n class=\"hdr-dd\"\n @mouseenter=\"${(): void => ctx._openMega()}\"\n @mouseleave=\"${(): void => ctx._closeMega()}\"\n >\n <span class=\"hdr-link\">\n ${link.label} ${svgChevron}\n </span>\n </div>`\n : html`<a href=\"${link.href || '#'}\" class=\"hdr-link\">${link.label}</a>`\n )}\n </nav>\n ${renderActions(ctx)}\n ${renderHamburger(ctx)}\n </div>\n\n <!-- Overlay detrás del panel -->\n <div\n class=\"hdr-mega-overlay ${ctx._megaOpen ? 'is-open' : ''}\"\n @mouseenter=\"${(): void => ctx._closeMega()}\"\n ></div>\n\n <!-- Panel full-width -->\n <div\n class=\"hdr-mega-panel ${ctx._megaOpen ? 'is-open' : ''}\"\n @mouseenter=\"${(): void => ctx._openMega()}\"\n @mouseleave=\"${(): void => ctx._closeMega()}\"\n >\n <div class=\"hdr-mega-inner\">\n ${ctx.megaColumns.map(col => html`\n <div>\n <div class=\"hdr-mega-group-title\">${col.title}</div>\n ${col.items.map(item => html`\n <a href=\"${item.href || '#'}\" class=\"hdr-mega-link\">${item.label}</a>\n `)}\n </div>\n `)}\n ${ctx.megaCta ? html`\n <div class=\"hdr-mega-cta\">\n <div class=\"hdr-mega-cta-label\">${ctx.megaCta.label}</div>\n <div class=\"hdr-mega-cta-title\">${ctx.megaCta.title}</div>\n <div class=\"hdr-mega-cta-desc\">${ctx.megaCta.desc}</div>\n <a href=\"${ctx.megaCta.href || '#'}\"\n class=\"hdr-action hdr-action--kaki\"\n style=\"height:32px;font-size:8px;\"\n >${ctx.megaCta.cta}</a>\n </div>\n ` : nothing}\n </div>\n </div>\n\n ${renderMobileDrawer(ctx)}`;\n}"],"names":[],"mappings":";;;AAUO,SAAS,WAAW,KAAgC;AACzD,SAAO;AAAA;AAAA,QAED,WAAW,GAAG,CAAC;AAAA;AAAA,UAEb,IAAI,MAAM;AAAA,IAAI,CAAA,SAAA;;AACd,yBAAK,aAAL,mBAAe,UACX;AAAA;AAAA;AAAA,iCAGmB,MAAY,IAAI,WAAW;AAAA,iCAC3B,MAAY,IAAI,YAAY;AAAA;AAAA;AAAA,sBAGvC,KAAK,KAAK,IAAI,UAAU;AAAA;AAAA,0BAGhC,gBAAgB,KAAK,QAAQ,GAAG,sBAAsB,KAAK,KAAK;AAAA;AAAA,EAAA,CACrE;AAAA;AAAA,QAED,cAAc,GAAG,CAAC;AAAA,QAClB,gBAAgB,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,gCAKI,IAAI,YAAY,YAAY,EAAE;AAAA,qBACzC,MAAY,IAAI,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA,8BAKnB,IAAI,YAAY,YAAY,EAAE;AAAA,qBACvC,MAAY,IAAI,WAAW;AAAA,qBAC3B,MAAY,IAAI,YAAY;AAAA;AAAA;AAAA,UAGvC,IAAI,YAAY,IAAI,CAAA,QAAO;AAAA;AAAA,gDAEW,IAAI,KAAK;AAAA,cAC3C,IAAI,MAAM,IAAI,CAAA,SAAQ;AAAA,yBACX,KAAK,QAAQ,GAAG,2BAA2B,KAAK,KAAK;AAAA,aACjE,CAAC;AAAA;AAAA,SAEL,CAAC;AAAA,UACA,IAAI,UAAU;AAAA;AAAA,8CAEsB,IAAI,QAAQ,KAAK;AAAA,8CACjB,IAAI,QAAQ,KAAK;AAAA,6CAClB,IAAI,QAAQ,IAAI;AAAA,uBACtC,IAAI,QAAQ,QAAQ,GAAG;AAAA;AAAA;AAAA,eAG/B,IAAI,QAAQ,GAAG;AAAA;AAAA,YAElB,OAAO;AAAA;AAAA;AAAA;AAAA,MAIb,mBAAmB,GAAG,CAAC;AAC7B;"}
|
package/dist/index355.js
CHANGED
|
@@ -1,31 +1,67 @@
|
|
|
1
1
|
import { nothing, html } from "lit";
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
function renderCentered(ctx) {
|
|
5
|
-
const mid = Math.floor(ctx.links.length / 2);
|
|
6
|
-
const leftLinks = ctx.links.slice(0, mid);
|
|
7
|
-
const rightLinks = ctx.links.slice(mid);
|
|
2
|
+
import { svgBell, renderBreadcrumbs, svgSearch } from "./index360.js";
|
|
3
|
+
function renderAppBar(ctx) {
|
|
8
4
|
return html`
|
|
9
|
-
${ctx.announcement ? html`
|
|
10
|
-
<div class="hdr-announcement">
|
|
11
|
-
<span>${ctx.announcement}</span>
|
|
12
|
-
${ctx.announcementHref ? html`<a href="${ctx.announcementHref}">Ver →</a>` : nothing}
|
|
13
|
-
</div>` : nothing}
|
|
14
|
-
|
|
15
5
|
<div class="hdr">
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
6
|
+
|
|
7
|
+
<!-- Logo mark (sin texto) -->
|
|
8
|
+
<div class="hdr-logo-mark" style="flex-shrink:0;"></div>
|
|
9
|
+
|
|
10
|
+
<!-- Breadcrumbs -->
|
|
11
|
+
${ctx.breadcrumbs.length ? renderBreadcrumbs(ctx.breadcrumbs) : nothing}
|
|
12
|
+
|
|
13
|
+
<!-- Divider — oculto en móvil -->
|
|
14
|
+
<div class="hdr-divider hdr-divider--desktop"></div>
|
|
15
|
+
|
|
16
|
+
<!-- Search — full en desktop, icono en móvil -->
|
|
17
|
+
${ctx.showSearch ? html`
|
|
18
|
+
<div class="hdr-search">
|
|
19
|
+
${svgSearch}
|
|
20
|
+
<input
|
|
21
|
+
type="search"
|
|
22
|
+
placeholder="${ctx.searchPlaceholder}"
|
|
23
|
+
@input="${(e) => ctx._onSearch(e.target.value)}"
|
|
24
|
+
/>
|
|
25
|
+
<span class="hdr-search-kbd">⌘K</span>
|
|
26
|
+
</div>
|
|
27
|
+
` : nothing}
|
|
28
|
+
|
|
29
|
+
<div class="hdr-spacer"></div>
|
|
30
|
+
|
|
31
|
+
<!-- Context actions — ocultos en móvil -->
|
|
32
|
+
${ctx.actions.length ? html`
|
|
33
|
+
<div class="hdr-actions hdr-actions--desktop">
|
|
34
|
+
${ctx.actions.map((action) => html`
|
|
35
|
+
<a href="${action.href || "#"}"
|
|
36
|
+
class="hdr-action ${action.variant === "outline" ? "hdr-action--outline" : "hdr-action--kaki"}"
|
|
37
|
+
style="height:32px;font-size:8px;"
|
|
38
|
+
>${action.label}</a>
|
|
39
|
+
`)}
|
|
40
|
+
</div>
|
|
41
|
+
` : nothing}
|
|
42
|
+
|
|
43
|
+
<!-- Status (compact mode) — oculto en móvil -->
|
|
44
|
+
${ctx.compact ? html`
|
|
45
|
+
<div class="hdr-status hdr-status--desktop">
|
|
46
|
+
<div class="hdr-status-dot"></div>
|
|
47
|
+
<span class="hdr-status-text">Online · 42ms</span>
|
|
48
|
+
</div>
|
|
49
|
+
` : nothing}
|
|
50
|
+
|
|
51
|
+
<div class="hdr-divider"></div>
|
|
52
|
+
|
|
53
|
+
<!-- Notificaciones -->
|
|
54
|
+
<div class="hdr-notif">
|
|
55
|
+
${svgBell}
|
|
56
|
+
${ctx.notifications ? html`<span class="hdr-notif-dot"></span>` : nothing}
|
|
57
|
+
</div>
|
|
58
|
+
|
|
59
|
+
<!-- Avatar -->
|
|
60
|
+
<div class="hdr-avatar">${ctx.userInitials || ctx.userName.slice(0, 1)}</div>
|
|
61
|
+
|
|
62
|
+
</div>`;
|
|
27
63
|
}
|
|
28
64
|
export {
|
|
29
|
-
|
|
65
|
+
renderAppBar
|
|
30
66
|
};
|
|
31
67
|
//# sourceMappingURL=index355.js.map
|
package/dist/index355.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index355.js","sources":["../src/components/molecules/header/templates/header-
|
|
1
|
+
{"version":3,"file":"index355.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/index356.js
CHANGED
|
@@ -1,69 +1,28 @@
|
|
|
1
|
-
import { nothing,
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
(
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
</div>` : html`<a href="${link.href || "#"}" class="hdr-link">${link.label}</a>`;
|
|
22
|
-
}
|
|
23
|
-
)}
|
|
24
|
-
</nav>
|
|
25
|
-
${renderActions(ctx)}
|
|
26
|
-
${renderHamburger(ctx)}
|
|
27
|
-
</div>
|
|
28
|
-
|
|
29
|
-
<!-- Overlay detrás del panel -->
|
|
30
|
-
<div
|
|
31
|
-
class="hdr-mega-overlay ${ctx._megaOpen ? "is-open" : ""}"
|
|
32
|
-
@mouseenter="${() => ctx._closeMega()}"
|
|
33
|
-
></div>
|
|
34
|
-
|
|
35
|
-
<!-- Panel full-width -->
|
|
36
|
-
<div
|
|
37
|
-
class="hdr-mega-panel ${ctx._megaOpen ? "is-open" : ""}"
|
|
38
|
-
@mouseenter="${() => ctx._openMega()}"
|
|
39
|
-
@mouseleave="${() => ctx._closeMega()}"
|
|
40
|
-
>
|
|
41
|
-
<div class="hdr-mega-inner">
|
|
42
|
-
${ctx.megaColumns.map((col) => html`
|
|
43
|
-
<div>
|
|
44
|
-
<div class="hdr-mega-group-title">${col.title}</div>
|
|
45
|
-
${col.items.map((item) => html`
|
|
46
|
-
<a href="${item.href || "#"}" class="hdr-mega-link">${item.label}</a>
|
|
47
|
-
`)}
|
|
48
|
-
</div>
|
|
49
|
-
`)}
|
|
50
|
-
${ctx.megaCta ? html`
|
|
51
|
-
<div class="hdr-mega-cta">
|
|
52
|
-
<div class="hdr-mega-cta-label">${ctx.megaCta.label}</div>
|
|
53
|
-
<div class="hdr-mega-cta-title">${ctx.megaCta.title}</div>
|
|
54
|
-
<div class="hdr-mega-cta-desc">${ctx.megaCta.desc}</div>
|
|
55
|
-
<a href="${ctx.megaCta.href || "#"}"
|
|
56
|
-
class="hdr-action hdr-action--kaki"
|
|
57
|
-
style="height:32px;font-size:8px;"
|
|
58
|
-
>${ctx.megaCta.cta}</a>
|
|
59
|
-
</div>
|
|
60
|
-
` : nothing}
|
|
61
|
-
</div>
|
|
62
|
-
</div>
|
|
63
|
-
|
|
64
|
-
${renderMobileDrawer(ctx)}`;
|
|
1
|
+
import { nothing as A, noChange as E } from "./index358.js";
|
|
2
|
+
import { Directive as i, PartType as t, directive as e$1 } from "./index359.js";
|
|
3
|
+
/**
|
|
4
|
+
* @license
|
|
5
|
+
* Copyright 2017 Google LLC
|
|
6
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
7
|
+
*/
|
|
8
|
+
class e extends i {
|
|
9
|
+
constructor(i2) {
|
|
10
|
+
if (super(i2), this.it = A, i2.type !== t.CHILD) throw Error(this.constructor.directiveName + "() can only be used in child bindings");
|
|
11
|
+
}
|
|
12
|
+
render(r) {
|
|
13
|
+
if (r === A || null == r) return this._t = void 0, this.it = r;
|
|
14
|
+
if (r === E) return r;
|
|
15
|
+
if ("string" != typeof r) throw Error(this.constructor.directiveName + "() called with a non-string value");
|
|
16
|
+
if (r === this.it) return this._t;
|
|
17
|
+
this.it = r;
|
|
18
|
+
const s = [r];
|
|
19
|
+
return s.raw = s, this._t = { _$litType$: this.constructor.resultType, strings: s, values: [] };
|
|
20
|
+
}
|
|
65
21
|
}
|
|
22
|
+
e.directiveName = "unsafeHTML", e.resultType = 1;
|
|
23
|
+
const o = e$1(e);
|
|
66
24
|
export {
|
|
67
|
-
|
|
25
|
+
e as UnsafeHTMLDirective,
|
|
26
|
+
o as unsafeHTML
|
|
68
27
|
};
|
|
69
28
|
//# sourceMappingURL=index356.js.map
|
package/dist/index356.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index356.js","sources":["
|
|
1
|
+
{"version":3,"file":"index356.js","sources":["../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directives/unsafe-html.js"],"sourcesContent":["import{nothing as t,noChange as i}from\"../lit-html.js\";import{directive as r,Directive as s,PartType as n}from\"../directive.js\";\n/**\n * @license\n * Copyright 2017 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */class e extends s{constructor(i){if(super(i),this.it=t,i.type!==n.CHILD)throw Error(this.constructor.directiveName+\"() can only be used in child bindings\")}render(r){if(r===t||null==r)return this._t=void 0,this.it=r;if(r===i)return r;if(\"string\"!=typeof r)throw Error(this.constructor.directiveName+\"() called with a non-string value\");if(r===this.it)return this._t;this.it=r;const s=[r];return s.raw=s,this._t={_$litType$:this.constructor.resultType,strings:s,values:[]}}}e.directiveName=\"unsafeHTML\",e.resultType=1;const o=r(e);export{e as UnsafeHTMLDirective,o as unsafeHTML};\n//# sourceMappingURL=unsafe-html.js.map\n"],"names":["s","i","t","n","r"],"mappings":";;AACA;AAAA;AAAA;AAAA;AAAA;AAIG,MAAM,UAAUA,EAAC;AAAA,EAAC,YAAYC,IAAE;AAAC,QAAG,MAAMA,EAAC,GAAE,KAAK,KAAGC,GAAED,GAAE,SAAOE,EAAE,MAAM,OAAM,MAAM,KAAK,YAAY,gBAAc,uCAAuC;AAAA,EAAC;AAAA,EAAC,OAAO,GAAE;AAAC,QAAG,MAAID,KAAG,QAAM,EAAE,QAAO,KAAK,KAAG,QAAO,KAAK,KAAG;AAAE,QAAG,MAAID,EAAE,QAAO;AAAE,QAAG,YAAU,OAAO,EAAE,OAAM,MAAM,KAAK,YAAY,gBAAc,mCAAmC;AAAE,QAAG,MAAI,KAAK,GAAG,QAAO,KAAK;AAAG,SAAK,KAAG;AAAE,UAAM,IAAE,CAAC,CAAC;AAAE,WAAO,EAAE,MAAI,GAAE,KAAK,KAAG,EAAC,YAAW,KAAK,YAAY,YAAW,SAAQ,GAAE,QAAO,CAAA,EAAE;AAAA,EAAC;AAAC;AAAC,EAAE,gBAAc,cAAa,EAAE,aAAW;AAAO,MAAC,IAAEG,IAAE,CAAC;","x_google_ignoreList":[0]}
|
package/dist/index357.js
CHANGED
|
@@ -1,67 +1,35 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
${ctx.actions.length ? html`
|
|
33
|
-
<div class="hdr-actions hdr-actions--desktop">
|
|
34
|
-
${ctx.actions.map((action) => html`
|
|
35
|
-
<a href="${action.href || "#"}"
|
|
36
|
-
class="hdr-action ${action.variant === "outline" ? "hdr-action--outline" : "hdr-action--kaki"}"
|
|
37
|
-
style="height:32px;font-size:8px;"
|
|
38
|
-
>${action.label}</a>
|
|
39
|
-
`)}
|
|
40
|
-
</div>
|
|
41
|
-
` : nothing}
|
|
42
|
-
|
|
43
|
-
<!-- Status (compact mode) — oculto en móvil -->
|
|
44
|
-
${ctx.compact ? html`
|
|
45
|
-
<div class="hdr-status hdr-status--desktop">
|
|
46
|
-
<div class="hdr-status-dot"></div>
|
|
47
|
-
<span class="hdr-status-text">Online · 42ms</span>
|
|
48
|
-
</div>
|
|
49
|
-
` : nothing}
|
|
50
|
-
|
|
51
|
-
<div class="hdr-divider"></div>
|
|
52
|
-
|
|
53
|
-
<!-- Notificaciones -->
|
|
54
|
-
<div class="hdr-notif">
|
|
55
|
-
${svgBell}
|
|
56
|
-
${ctx.notifications ? html`<span class="hdr-notif-dot"></span>` : nothing}
|
|
57
|
-
</div>
|
|
58
|
-
|
|
59
|
-
<!-- Avatar -->
|
|
60
|
-
<div class="hdr-avatar">${ctx.userInitials || ctx.userName.slice(0, 1)}</div>
|
|
61
|
-
|
|
62
|
-
</div>`;
|
|
63
|
-
}
|
|
1
|
+
import { noChange as E } from "./index358.js";
|
|
2
|
+
import { directive as e$1, Directive as i, PartType as t } from "./index359.js";
|
|
3
|
+
/**
|
|
4
|
+
* @license
|
|
5
|
+
* Copyright 2018 Google LLC
|
|
6
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
7
|
+
*/
|
|
8
|
+
const e = e$1(class extends i {
|
|
9
|
+
constructor(t$1) {
|
|
10
|
+
var _a;
|
|
11
|
+
if (super(t$1), t$1.type !== t.ATTRIBUTE || "class" !== t$1.name || ((_a = t$1.strings) == null ? void 0 : _a.length) > 2) throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.");
|
|
12
|
+
}
|
|
13
|
+
render(t2) {
|
|
14
|
+
return " " + Object.keys(t2).filter((s) => t2[s]).join(" ") + " ";
|
|
15
|
+
}
|
|
16
|
+
update(s, [i2]) {
|
|
17
|
+
var _a, _b;
|
|
18
|
+
if (void 0 === this.st) {
|
|
19
|
+
this.st = /* @__PURE__ */ new Set(), void 0 !== s.strings && (this.nt = new Set(s.strings.join(" ").split(/\s/).filter((t2) => "" !== t2)));
|
|
20
|
+
for (const t2 in i2) i2[t2] && !((_a = this.nt) == null ? void 0 : _a.has(t2)) && this.st.add(t2);
|
|
21
|
+
return this.render(i2);
|
|
22
|
+
}
|
|
23
|
+
const r = s.element.classList;
|
|
24
|
+
for (const t2 of this.st) t2 in i2 || (r.remove(t2), this.st.delete(t2));
|
|
25
|
+
for (const t2 in i2) {
|
|
26
|
+
const s2 = !!i2[t2];
|
|
27
|
+
s2 === this.st.has(t2) || ((_b = this.nt) == null ? void 0 : _b.has(t2)) || (s2 ? (r.add(t2), this.st.add(t2)) : (r.remove(t2), this.st.delete(t2)));
|
|
28
|
+
}
|
|
29
|
+
return E;
|
|
30
|
+
}
|
|
31
|
+
});
|
|
64
32
|
export {
|
|
65
|
-
|
|
33
|
+
e as classMap
|
|
66
34
|
};
|
|
67
35
|
//# sourceMappingURL=index357.js.map
|