@xsmusices/ui 1.42.0 → 1.43.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/fesm2022/{xsmusices-ui-xs-navbar.xsstory-DZrnLMId.mjs → xsmusices-ui-xs-navbar.xsstory-BDW0nLAH.mjs} +16 -6
- package/fesm2022/xsmusices-ui-xs-navbar.xsstory-BDW0nLAH.mjs.map +1 -0
- package/fesm2022/xsmusices-ui.mjs +6 -4
- package/fesm2022/xsmusices-ui.mjs.map +1 -1
- package/index.d.ts +2 -1
- package/package.json +1 -1
- package/fesm2022/xsmusices-ui-xs-navbar.xsstory-DZrnLMId.mjs.map +0 -1
|
@@ -44,6 +44,12 @@ const story = {
|
|
|
44
44
|
type: 'boolean',
|
|
45
45
|
default: true,
|
|
46
46
|
},
|
|
47
|
+
{
|
|
48
|
+
key: 'contextual',
|
|
49
|
+
label: 'Modo contextual (XS-770: oculta título y bandera)',
|
|
50
|
+
type: 'boolean',
|
|
51
|
+
default: false,
|
|
52
|
+
},
|
|
47
53
|
{
|
|
48
54
|
key: 'showMenu',
|
|
49
55
|
label: 'Mostrar botón menú lateral',
|
|
@@ -180,8 +186,8 @@ const story = {
|
|
|
180
186
|
},
|
|
181
187
|
},
|
|
182
188
|
{
|
|
183
|
-
name: 'App: Navbar contextual de perfil
|
|
184
|
-
description: 'XS-770: navbar
|
|
189
|
+
name: 'App: Navbar contextual de perfil',
|
|
190
|
+
description: 'XS-770: navbar contextual de perfil en móvil y desktop. El slot leading lleva la identidad (miniatura 36px en móvil, 40px en desktop + nombre + país) y sustituye al título tradicional; la bandera se oculta mientras hay contexto.',
|
|
185
191
|
inputs: {
|
|
186
192
|
title: 'XSMusic',
|
|
187
193
|
mobileTitle: 'Nombre del artista',
|
|
@@ -190,9 +196,13 @@ const story = {
|
|
|
190
196
|
showLanguage: true,
|
|
191
197
|
currentLang: 'es',
|
|
192
198
|
},
|
|
193
|
-
template: `<xs-navbar title="XSMusic" mobileTitle="Nombre del artista" mobileSubtitle="España" [showBack]="true" [showLanguage]="true" currentLang="es">
|
|
194
|
-
<div leading>
|
|
195
|
-
<img src="https://api-v2.xsmusic.es/uploads/artist/small/artist.webp" alt="Nombre del artista" class="w-
|
|
199
|
+
template: `<xs-navbar title="XSMusic" mobileTitle="Nombre del artista" mobileSubtitle="España" [contextual]="true" [showBack]="true" [showLanguage]="true" currentLang="es">
|
|
200
|
+
<div leading class="flex min-w-0 flex-1 items-center gap-2">
|
|
201
|
+
<img src="https://api-v2.xsmusic.es/uploads/artist/small/artist.webp" alt="Nombre del artista" class="h-9 w-9 flex-none rounded-xl object-cover lg:h-10 lg:w-10" />
|
|
202
|
+
<span class="flex min-w-0 flex-1 flex-col justify-center gap-[2px]">
|
|
203
|
+
<span class="truncate text-sm font-semibold leading-tight text-white lg:text-base">Nombre del artista</span>
|
|
204
|
+
<span class="truncate text-[11px] font-normal leading-none tracking-normal text-zinc-400">España</span>
|
|
205
|
+
</span>
|
|
196
206
|
</div>
|
|
197
207
|
</xs-navbar>`,
|
|
198
208
|
},
|
|
@@ -200,4 +210,4 @@ const story = {
|
|
|
200
210
|
};
|
|
201
211
|
|
|
202
212
|
export { story };
|
|
203
|
-
//# sourceMappingURL=xsmusices-ui-xs-navbar.xsstory-
|
|
213
|
+
//# sourceMappingURL=xsmusices-ui-xs-navbar.xsstory-BDW0nLAH.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"xsmusices-ui-xs-navbar.xsstory-BDW0nLAH.mjs","sources":["../../../projects/xs-ui/src/lib/components/base/navbar/xs-navbar.xsstory.ts"],"sourcesContent":["import { StoryMeta } from '../../../story.types';\nimport { XSNavbarComponent } from './xs-navbar.component';\n\nexport const story: StoryMeta = {\n id: 'navbar',\n name: 'Navbar',\n type: 'component',\n subtype: 'Base',\n status: 'active',\n usage: ['app', 'admin'],\n updated: '2026-05-17T12:00:00.000Z',\n created: '2026-04-25T12:00:00.000Z',\n description:\n 'Barra de navegación superior reutilizable. Usada tanto en App (top bar con título + acciones) como en Admin (top bar + sidebar toggle).',\n component: XSNavbarComponent,\n selector: 'xs-navbar',\n inputs: [\n { key: 'title', label: 'Título', type: 'text', default: '' },\n {\n key: 'subtitle',\n label: 'Subtítulo',\n type: 'text',\n default: '',\n },\n {\n key: 'showBorder',\n label: 'Mostrar borde inferior',\n type: 'boolean',\n default: false,\n },\n {\n key: 'transparent',\n label: 'Fondo transparente',\n type: 'boolean',\n default: false,\n },\n {\n key: 'sticky',\n label: 'Encabezado sticky',\n type: 'boolean',\n default: true,\n },\n {\n key: 'showBack',\n label: 'Mostrar botón retroceso',\n type: 'boolean',\n default: true,\n },\n {\n key: 'contextual',\n label: 'Modo contextual (XS-770: oculta título y bandera)',\n type: 'boolean',\n default: false,\n },\n {\n key: 'showMenu',\n label: 'Mostrar botón menú lateral',\n type: 'boolean',\n default: false,\n },\n {\n key: 'menuIcon',\n label: 'Icono del botón menú',\n type: 'text',\n default: 'bars',\n },\n {\n key: 'showLanguage',\n label: 'Mostrar selector de idioma',\n type: 'boolean',\n default: true,\n },\n {\n key: 'showNotifications',\n label: 'Mostrar campanita notificaciones',\n type: 'boolean',\n default: false,\n },\n {\n key: 'hideEnvBadge',\n label: 'Ocultar badge de entorno (dev/uat)',\n type: 'boolean',\n default: false,\n },\n {\n key: 'currentLang',\n label: 'Idioma actual',\n type: 'select',\n options: ['es', 'en'],\n default: 'es',\n },\n ],\n slots: [\n {\n name: 'actions',\n description:\n 'Contenido proyectado en el lado derecho (botones, avatar, notificaciones)',\n },\n {\n name: 'leading',\n description:\n 'Contenido contextual junto al botón de retroceso, solo visible en móvil (XS-770: miniatura de perfil en navbars contextuales)',\n },\n {\n name: 'bottom',\n description:\n 'Contenido proyectado debajo de la barra principal (tabs, buscador)',\n },\n ],\n examples: [\n {\n name: 'App: Pantalla de inicio',\n description:\n 'Navbar usada en la app principal. Título \"XSMusic\", subtítulo, botón de retroceso, selector de idioma y campanita de notificaciones.',\n inputs: {\n title: 'XSMusic',\n subtitle: 'Descubre',\n showBack: true,\n showLanguage: true,\n showNotifications: true,\n currentLang: 'es',\n },\n },\n {\n name: 'App: Pantalla con tabs',\n description:\n 'Navbar en la app con contenido adicional en el slot bottom (tabs de navegación).',\n inputs: {\n title: 'XSMusic',\n subtitle: 'Artistas',\n showBack: true,\n showLanguage: true,\n showNotifications: true,\n currentLang: 'en',\n },\n template: `<xs-navbar title=\"XSMusic\" subtitle=\"Artistas\" [showBack]=\"true\" [showLanguage]=\"true\" [showNotifications]=\"true\" currentLang=\"en\">\n <div bottom>\n <div class=\"flex gap-4 text-sm text-zinc-400\">\n <span class=\"text-white font-semibold\">Todos</span>\n <span>Populares</span>\n <span>Nuevos</span>\n </div>\n </div>\n</xs-navbar>`,\n },\n {\n name: 'Admin: Dashboard',\n description:\n 'Navbar usada en el panel de administración. Sin retroceso, con botón de menú lateral (hamburguesa) para abrir el sidebar. Las acciones (búsqueda, perfil) van en el slot actions.',\n inputs: {\n title: 'XSADMIN',\n showBack: false,\n showMenu: true,\n menuIcon: 'bars',\n showLanguage: false,\n showNotifications: false,\n },\n },\n {\n name: 'Admin: Menú colapsado',\n description:\n 'Navbar en admin con el sidebar colapsado. El icono del menú cambia a \"chevron-right\" para indicar que se puede expandir.',\n inputs: {\n title: 'XSADMIN',\n showBack: false,\n showMenu: true,\n menuIcon: 'chevron-right',\n showLanguage: false,\n showNotifications: false,\n },\n },\n {\n name: 'Admin: Detalle con retroceso',\n description:\n 'Navbar en admin cuando se navega a una página de detalle. El botón de menú se reemplaza por el de retroceso.',\n inputs: {\n title: 'XSADMIN',\n subtitle: 'Editar Usuario',\n showBack: true,\n showMenu: false,\n showLanguage: false,\n showNotifications: false,\n },\n },\n {\n name: 'Transparente sin sticky',\n description:\n 'Navbar con fondo transparente y sin sticky, ideal para landing pages o perfiles.',\n inputs: {\n title: 'XSMusic',\n subtitle: 'Perfil',\n showBack: true,\n transparent: true,\n sticky: false,\n showLanguage: true,\n currentLang: 'es',\n },\n },\n {\n name: 'App: Navbar contextual de perfil',\n description:\n 'XS-770: navbar contextual de perfil en móvil y desktop. El slot leading lleva la identidad (miniatura 36px en móvil, 40px en desktop + nombre + país) y sustituye al título tradicional; la bandera se oculta mientras hay contexto.',\n inputs: {\n title: 'XSMusic',\n mobileTitle: 'Nombre del artista',\n mobileSubtitle: 'España',\n showBack: true,\n showLanguage: true,\n currentLang: 'es',\n },\n template: `<xs-navbar title=\"XSMusic\" mobileTitle=\"Nombre del artista\" mobileSubtitle=\"España\" [contextual]=\"true\" [showBack]=\"true\" [showLanguage]=\"true\" currentLang=\"es\">\n <div leading class=\"flex min-w-0 flex-1 items-center gap-2\">\n <img src=\"https://api-v2.xsmusic.es/uploads/artist/small/artist.webp\" alt=\"Nombre del artista\" class=\"h-9 w-9 flex-none rounded-xl object-cover lg:h-10 lg:w-10\" />\n <span class=\"flex min-w-0 flex-1 flex-col justify-center gap-[2px]\">\n <span class=\"truncate text-sm font-semibold leading-tight text-white lg:text-base\">Nombre del artista</span>\n <span class=\"truncate text-[11px] font-normal leading-none tracking-normal text-zinc-400\">España</span>\n </span>\n </div>\n</xs-navbar>`,\n },\n ],\n};\n"],"names":[],"mappings":"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"}
|
|
@@ -16022,6 +16022,7 @@ class XSNavbarComponent {
|
|
|
16022
16022
|
showBack = input(true, ...(ngDevMode ? [{ debugName: "showBack" }] : []));
|
|
16023
16023
|
showMenu = input(false, ...(ngDevMode ? [{ debugName: "showMenu" }] : []));
|
|
16024
16024
|
menuIcon = input('bars', ...(ngDevMode ? [{ debugName: "menuIcon" }] : []));
|
|
16025
|
+
contextual = input(false, ...(ngDevMode ? [{ debugName: "contextual" }] : []));
|
|
16025
16026
|
showLanguage = input(true, ...(ngDevMode ? [{ debugName: "showLanguage" }] : []));
|
|
16026
16027
|
showNotifications = input(false, ...(ngDevMode ? [{ debugName: "showNotifications" }] : []));
|
|
16027
16028
|
showChat = input(false, ...(ngDevMode ? [{ debugName: "showChat" }] : []));
|
|
@@ -16080,7 +16081,7 @@ class XSNavbarComponent {
|
|
|
16080
16081
|
this.translateService.setLanguage(newLang);
|
|
16081
16082
|
}
|
|
16082
16083
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: XSNavbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
16083
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.33", type: XSNavbarComponent, isStandalone: true, selector: "xs-navbar", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, mobileTitle: { classPropertyName: "mobileTitle", publicName: "mobileTitle", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, mobileSubtitle: { classPropertyName: "mobileSubtitle", publicName: "mobileSubtitle", isSignal: true, isRequired: false, transformFunction: null }, showBorder: { classPropertyName: "showBorder", publicName: "showBorder", isSignal: true, isRequired: false, transformFunction: null }, transparent: { classPropertyName: "transparent", publicName: "transparent", isSignal: true, isRequired: false, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null }, showBack: { classPropertyName: "showBack", publicName: "showBack", isSignal: true, isRequired: false, transformFunction: null }, showMenu: { classPropertyName: "showMenu", publicName: "showMenu", isSignal: true, isRequired: false, transformFunction: null }, menuIcon: { classPropertyName: "menuIcon", publicName: "menuIcon", isSignal: true, isRequired: false, transformFunction: null }, showLanguage: { classPropertyName: "showLanguage", publicName: "showLanguage", isSignal: true, isRequired: false, transformFunction: null }, showNotifications: { classPropertyName: "showNotifications", publicName: "showNotifications", isSignal: true, isRequired: false, transformFunction: null }, showChat: { classPropertyName: "showChat", publicName: "showChat", isSignal: true, isRequired: false, transformFunction: null }, showImpersonation: { classPropertyName: "showImpersonation", publicName: "showImpersonation", isSignal: true, isRequired: false, transformFunction: null }, unreadChatMessages: { classPropertyName: "unreadChatMessages", publicName: "unreadChatMessages", isSignal: true, isRequired: false, transformFunction: null }, unreadNotifications: { classPropertyName: "unreadNotifications", publicName: "unreadNotifications", isSignal: true, isRequired: false, transformFunction: null }, homeRoute: { classPropertyName: "homeRoute", publicName: "homeRoute", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null }, hideEnvBadge: { classPropertyName: "hideEnvBadge", publicName: "hideEnvBadge", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { back: "back", menuToggle: "menuToggle", titleClick: "titleClick", notificationsClick: "notificationsClick", chatClick: "chatClick", impersonationClick: "impersonationClick" }, host: { attributes: { "role": "banner" }, properties: { "class.sticky": "sticky()", "class.top-0": "sticky()", "class.z-50": "sticky()" } }, queries: [{ propertyName: "bottomContent", first: true, predicate: ["[bottom]"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@if (!hidden()) {\n<header\n [class.bg-black/80]=\"!transparent()\"\n [class.backdrop-blur-xl]=\"!transparent()\"\n class=\"ease-in-out transition-all duration-300\"\n [attr.aria-label]=\"ariaLabel() || title()\"\n>\n <div\n class=\"mx-auto px-4 pt-3 pb-2\"\n [class.border-b]=\"showBorder()\"\n [class.border-white/5]=\"showBorder()\"\n [style.max-width]=\"maxWidth()\"\n >\n <div class=\"flex items-center justify-between gap-4 w-full\">\n <div class=\"flex items-center min-w-0 flex-1\">\n @if (showLeftButton) {\n <xs-button\n (onClick)=\"showBack() ? back.emit() : menuToggle.emit()\"\n [icon]=\"{ name: showBack() ? 'arrow-left' : (menuIcon()) }\"\n layout=\"iconOnlyHeader\"\n variant=\"custom\"\n customClass=\"flex-none p-2 -ml-2 text-zinc-400 hover:text-white active:scale-90 rounded-xl hover:bg-zinc-900/50\"\n [title]=\"showBack() ? t('GO_BACK') : t('OPEN_MENU')\"\n />\n }\n\n <div class=\"navbar-leading lg:hidden flex-none\">\n <ng-content select=\"[leading]\"></ng-content>\n </div>\n\n <div class=\"navbar-title-wrap flex flex-col min-w-0 flex-1\">\n <a\n [routerLink]=\"homeRoute()\"\n (click)=\"titleClick.emit()\"\n class=\"navbar-default-title inline-block text-2xl sm:text-3xl font-black tracking-[0.01em] text-white uppercase leading-none truncate transition-[letter-spacing_0.5s_ease-out,color_0.2s_ease] hover:tracking-[0.05em] hover:text-zinc-300 will-change-[letter-spacing] no-underline\"\n [attr.aria-label]=\"t('GO_TO') + ' ' + (homeRoute() || t('HOME'))\"\n >\n @if (mobileTitle()) {\n <span class=\"lg:hidden\">{{ mobileTitle() }}</span>\n <span class=\"hidden lg:inline\">{{ title() }}</span>\n } @else {\n {{ title() }}\n }\n </a>\n\n @if (subtitle()) {\n <div\n class=\"navbar-default-subtitle flex items-center gap-2 mt-1 animate-in fade-in slide-in-from-left-2 duration-500 min-w-0\"\n >\n <div\n class=\"text-zinc-400 text-[10px] font-black tracking-[0.2em] uppercase leading-none truncate\"\n >\n @if (mobileSubtitle()) {\n <span class=\"lg:hidden\">{{ mobileSubtitle() }}</span>\n <span class=\"hidden lg:inline\">{{ subtitle() }}</span>\n } @else {\n {{ subtitle() }}\n }\n </div>\n </div>\n }\n </div>\n </div>\n\n <div class=\"flex items-center justify-end gap-3 min-w-0\">\n <ng-content select=\"[actions]\"></ng-content>\n\n @if (envName !== 'prod' && !hideEnvBadge() && !isCapacitorNative) {\n <span\n class=\"hidden sm:flex flex-none items-center justify-center w-9 h-9 rounded-xl border text-[9px] font-black tracking-[0.1em] select-none\"\n [class.bg-amber-500/10]=\"envName === 'dev'\"\n [class.border-amber-500/20]=\"envName === 'dev'\"\n [class.text-amber-500]=\"envName === 'dev'\"\n [class.bg-orange-500/10]=\"envName === 'uat'\"\n [class.border-orange-500/20]=\"envName === 'uat'\"\n [class.text-orange-500]=\"envName === 'uat'\"\n [title]=\"envName\"\n >{{ envName }}</span>\n }\n\n @if (showChat()) {\n <button\n (click)=\"chatClick.emit()\"\n class=\"relative flex-none flex items-center justify-center w-9 h-9 bg-zinc-900/40 rounded-xl border border-white/5 hover:bg-zinc-800 active:scale-95 transition-all\"\n type=\"button\"\n [attr.aria-label]=\"t('CHAT')\"\n >\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\" class=\"w-4 h-4\">\n <path d=\"M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H5.17L4 17.17V4h16v12z\"/>\n </svg>\n @if (unreadChatMessages() > 0) {\n <span\n class=\"absolute -top-1 -right-1 min-w-[16px] h-4 px-1 bg-green-500 rounded-full text-[8px] font-bold text-white flex items-center justify-center\"\n [attr.aria-label]=\"unreadChatMessages() + ' ' + t('UNREAD_MESSAGES')\"\n >\n {{ unreadChatMessages() > 9 ? '9+' : unreadChatMessages() }}\n </span>\n }\n </button>\n }\n\n @if (showNotifications()) {\n <xs-button\n (onClick)=\"notificationsClick.emit()\"\n icon=\"bell\"\n layout=\"iconOnly\"\n variant=\"custom\"\n customClass=\"w-9 h-9 bg-zinc-900/40 rounded-xl border border-white/5 hover:bg-zinc-800 active:scale-95\"\n [title]=\"t('NOTIFICATIONS')\"\n [badgeCount]=\"unreadNotifications()\"\n />\n }\n\n @if (showImpersonation()) {\n <button\n (click)=\"impersonationClick.emit()\"\n class=\"flex-none flex items-center justify-center w-9 h-9 bg-amber-500/10 rounded-xl border border-amber-500/20 hover:bg-amber-500/20 active:scale-95 transition-all\"\n type=\"button\"\n [attr.aria-label]=\"t('BACK_TO_ADMIN')\"\n >\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\" class=\"w-4 h-4 text-amber-500\">\n <path d=\"M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z\"/>\n </svg>\n </button>\n }\n\n @if (showLanguage()) {\n <button\n (click)=\"onToggleLang()\"\n class=\"flex-none flex items-center justify-center w-9 h-9 bg-zinc-900/40 rounded-xl border border-white/5 hover:bg-zinc-800 active:scale-95 transition-all\"\n type=\"button\"\n [attr.aria-label]=\"t('SWITCH_LANG_TO') + ' ' + (langSignal() === 'es' ? t('ENGLISH') : t('SPANISH'))\"\n >\n <img\n [src]=\"\n langSignal() === 'es'\n ? ('es' | countryFlag)\n : ('us' | countryFlag)\n \"\n class=\"w-4 h-3 object-cover rounded-[1px] shadow-sm\"\n [alt]=\"langSignal() === 'es' ? t('SPANISH') : t('ENGLISH')\"\n />\n </button>\n }\n </div>\n </div>\n\n @if (hasBottom) {\n <div\n class=\"mt-6 animate-in fade-in slide-in-from-top-2 duration-700\"\n >\n <ng-content select=\"[bottom]\"></ng-content>\n </div>\n }\n </div>\n</header>\n}\n", styles: [":host{display:block;width:100%}:host(.sticky){position:sticky}header{-webkit-backdrop-filter:blur(20px)}button:focus-visible{outline:2px solid rgb(113 113 122);outline-offset:2px}@media(max-width:1023.98px){.navbar-leading:has(>*)+.navbar-title-wrap .navbar-default-title{font-size:1rem;line-height:1.25rem;letter-spacing:.01em}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: XSButtonComponent, selector: "xs-button", inputs: ["id", "label", "type", "icon", "action", "customClass", "variant", "layout", "badgeCount", "isFull", "disabled", "loading", "title", "ariaLabel", "borderRadius", "isGrouped", "groupPosition"], outputs: ["isGroupedChange", "groupPositionChange", "click", "onClick"] }, { kind: "pipe", type: CountryFlagPipe, name: "countryFlag" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
16084
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.33", type: XSNavbarComponent, isStandalone: true, selector: "xs-navbar", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, mobileTitle: { classPropertyName: "mobileTitle", publicName: "mobileTitle", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, mobileSubtitle: { classPropertyName: "mobileSubtitle", publicName: "mobileSubtitle", isSignal: true, isRequired: false, transformFunction: null }, showBorder: { classPropertyName: "showBorder", publicName: "showBorder", isSignal: true, isRequired: false, transformFunction: null }, transparent: { classPropertyName: "transparent", publicName: "transparent", isSignal: true, isRequired: false, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null }, showBack: { classPropertyName: "showBack", publicName: "showBack", isSignal: true, isRequired: false, transformFunction: null }, showMenu: { classPropertyName: "showMenu", publicName: "showMenu", isSignal: true, isRequired: false, transformFunction: null }, menuIcon: { classPropertyName: "menuIcon", publicName: "menuIcon", isSignal: true, isRequired: false, transformFunction: null }, contextual: { classPropertyName: "contextual", publicName: "contextual", isSignal: true, isRequired: false, transformFunction: null }, showLanguage: { classPropertyName: "showLanguage", publicName: "showLanguage", isSignal: true, isRequired: false, transformFunction: null }, showNotifications: { classPropertyName: "showNotifications", publicName: "showNotifications", isSignal: true, isRequired: false, transformFunction: null }, showChat: { classPropertyName: "showChat", publicName: "showChat", isSignal: true, isRequired: false, transformFunction: null }, showImpersonation: { classPropertyName: "showImpersonation", publicName: "showImpersonation", isSignal: true, isRequired: false, transformFunction: null }, unreadChatMessages: { classPropertyName: "unreadChatMessages", publicName: "unreadChatMessages", isSignal: true, isRequired: false, transformFunction: null }, unreadNotifications: { classPropertyName: "unreadNotifications", publicName: "unreadNotifications", isSignal: true, isRequired: false, transformFunction: null }, homeRoute: { classPropertyName: "homeRoute", publicName: "homeRoute", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null }, hideEnvBadge: { classPropertyName: "hideEnvBadge", publicName: "hideEnvBadge", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { back: "back", menuToggle: "menuToggle", titleClick: "titleClick", notificationsClick: "notificationsClick", chatClick: "chatClick", impersonationClick: "impersonationClick" }, host: { attributes: { "role": "banner" }, properties: { "class.sticky": "sticky()", "class.top-0": "sticky()", "class.z-50": "sticky()", "class.navbar-contextual": "contextual()" } }, queries: [{ propertyName: "bottomContent", first: true, predicate: ["[bottom]"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@if (!hidden()) {\n<header\n [class.bg-black/80]=\"!transparent()\"\n [class.backdrop-blur-xl]=\"!transparent()\"\n class=\"ease-in-out transition-all duration-300\"\n [attr.aria-label]=\"ariaLabel() || title()\"\n>\n <div\n class=\"mx-auto px-4 pt-3 pb-2\"\n [class.border-b]=\"showBorder()\"\n [class.border-white/5]=\"showBorder()\"\n [style.max-width]=\"maxWidth()\"\n >\n <div class=\"flex items-center justify-between gap-4 w-full\">\n <div class=\"navbar-left flex items-center min-w-0 flex-1\">\n @if (showLeftButton) {\n <xs-button\n (onClick)=\"showBack() ? back.emit() : menuToggle.emit()\"\n [icon]=\"{ name: showBack() ? 'arrow-left' : (menuIcon()) }\"\n layout=\"iconOnlyHeader\"\n variant=\"custom\"\n customClass=\"flex-none p-2 -ml-2 text-zinc-400 hover:text-white active:scale-90 rounded-xl hover:bg-zinc-900/50\"\n [title]=\"showBack() ? t('GO_BACK') : t('OPEN_MENU')\"\n />\n }\n\n <div class=\"navbar-leading flex-none\">\n <ng-content select=\"[leading]\"></ng-content>\n </div>\n\n <div class=\"navbar-title-wrap flex flex-col min-w-0 flex-1\">\n <a\n [routerLink]=\"homeRoute()\"\n (click)=\"titleClick.emit()\"\n class=\"navbar-default-title inline-block text-2xl sm:text-3xl font-black tracking-[0.01em] text-white uppercase leading-none truncate transition-[letter-spacing_0.5s_ease-out,color_0.2s_ease] hover:tracking-[0.05em] hover:text-zinc-300 will-change-[letter-spacing] no-underline\"\n [attr.aria-label]=\"t('GO_TO') + ' ' + (homeRoute() || t('HOME'))\"\n >\n @if (mobileTitle()) {\n <span class=\"lg:hidden\">{{ mobileTitle() }}</span>\n <span class=\"hidden lg:inline\">{{ title() }}</span>\n } @else {\n {{ title() }}\n }\n </a>\n\n @if (subtitle()) {\n <div\n class=\"navbar-default-subtitle flex items-center gap-2 mt-1 animate-in fade-in slide-in-from-left-2 duration-500 min-w-0\"\n >\n <div\n class=\"text-zinc-400 text-[10px] font-black tracking-[0.2em] uppercase leading-none truncate\"\n >\n @if (mobileSubtitle()) {\n <span class=\"lg:hidden\">{{ mobileSubtitle() }}</span>\n <span class=\"hidden lg:inline\">{{ subtitle() }}</span>\n } @else {\n {{ subtitle() }}\n }\n </div>\n </div>\n }\n </div>\n </div>\n\n <div class=\"navbar-right flex items-center justify-end gap-3 min-w-0\">\n <ng-content select=\"[actions]\"></ng-content>\n\n @if (envName !== 'prod' && !hideEnvBadge() && !isCapacitorNative) {\n <span\n class=\"hidden sm:flex flex-none items-center justify-center w-9 h-9 rounded-xl border text-[9px] font-black tracking-[0.1em] select-none\"\n [class.bg-amber-500/10]=\"envName === 'dev'\"\n [class.border-amber-500/20]=\"envName === 'dev'\"\n [class.text-amber-500]=\"envName === 'dev'\"\n [class.bg-orange-500/10]=\"envName === 'uat'\"\n [class.border-orange-500/20]=\"envName === 'uat'\"\n [class.text-orange-500]=\"envName === 'uat'\"\n [title]=\"envName\"\n >{{ envName }}</span>\n }\n\n @if (showChat()) {\n <button\n (click)=\"chatClick.emit()\"\n class=\"relative flex-none flex items-center justify-center w-9 h-9 bg-zinc-900/40 rounded-xl border border-white/5 hover:bg-zinc-800 active:scale-95 transition-all\"\n type=\"button\"\n [attr.aria-label]=\"t('CHAT')\"\n >\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\" class=\"w-4 h-4\">\n <path d=\"M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H5.17L4 17.17V4h16v12z\"/>\n </svg>\n @if (unreadChatMessages() > 0) {\n <span\n class=\"absolute -top-1 -right-1 min-w-[16px] h-4 px-1 bg-green-500 rounded-full text-[8px] font-bold text-white flex items-center justify-center\"\n [attr.aria-label]=\"unreadChatMessages() + ' ' + t('UNREAD_MESSAGES')\"\n >\n {{ unreadChatMessages() > 9 ? '9+' : unreadChatMessages() }}\n </span>\n }\n </button>\n }\n\n @if (showNotifications()) {\n <xs-button\n (onClick)=\"notificationsClick.emit()\"\n icon=\"bell\"\n layout=\"iconOnly\"\n variant=\"custom\"\n customClass=\"w-9 h-9 bg-zinc-900/40 rounded-xl border border-white/5 hover:bg-zinc-800 active:scale-95\"\n [title]=\"t('NOTIFICATIONS')\"\n [badgeCount]=\"unreadNotifications()\"\n />\n }\n\n @if (showImpersonation()) {\n <button\n (click)=\"impersonationClick.emit()\"\n class=\"flex-none flex items-center justify-center w-9 h-9 bg-amber-500/10 rounded-xl border border-amber-500/20 hover:bg-amber-500/20 active:scale-95 transition-all\"\n type=\"button\"\n [attr.aria-label]=\"t('BACK_TO_ADMIN')\"\n >\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\" class=\"w-4 h-4 text-amber-500\">\n <path d=\"M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z\"/>\n </svg>\n </button>\n }\n\n @if (showLanguage()) {\n <button\n (click)=\"onToggleLang()\"\n class=\"navbar-lang flex-none flex items-center justify-center w-9 h-9 bg-zinc-900/40 rounded-xl border border-white/5 hover:bg-zinc-800 active:scale-95 transition-all\"\n type=\"button\"\n [attr.aria-label]=\"t('SWITCH_LANG_TO') + ' ' + (langSignal() === 'es' ? t('ENGLISH') : t('SPANISH'))\"\n >\n <img\n [src]=\"\n langSignal() === 'es'\n ? ('es' | countryFlag)\n : ('us' | countryFlag)\n \"\n class=\"w-4 h-3 object-cover rounded-[1px] shadow-sm\"\n [alt]=\"langSignal() === 'es' ? t('SPANISH') : t('ENGLISH')\"\n />\n </button>\n }\n </div>\n </div>\n\n @if (hasBottom) {\n <div\n class=\"mt-6 animate-in fade-in slide-in-from-top-2 duration-700\"\n >\n <ng-content select=\"[bottom]\"></ng-content>\n </div>\n }\n </div>\n</header>\n}\n", styles: [":host{display:block;width:100%}:host(.sticky){position:sticky}header{-webkit-backdrop-filter:blur(20px)}button:focus-visible{outline:2px solid rgb(113 113 122);outline-offset:2px}.navbar-leading:has(>*){margin-left:4px}:host(.navbar-contextual) .navbar-title-wrap{display:none}:host(.navbar-contextual) .navbar-lang{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: XSButtonComponent, selector: "xs-button", inputs: ["id", "label", "type", "icon", "action", "customClass", "variant", "layout", "badgeCount", "isFull", "disabled", "loading", "title", "ariaLabel", "borderRadius", "isGrouped", "groupPosition"], outputs: ["isGroupedChange", "groupPositionChange", "click", "onClick"] }, { kind: "pipe", type: CountryFlagPipe, name: "countryFlag" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
16084
16085
|
}
|
|
16085
16086
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", ngImport: i0, type: XSNavbarComponent, decorators: [{
|
|
16086
16087
|
type: Component,
|
|
@@ -16094,8 +16095,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.33", ngImpo
|
|
|
16094
16095
|
'[class.sticky]': 'sticky()',
|
|
16095
16096
|
'[class.top-0]': 'sticky()',
|
|
16096
16097
|
'[class.z-50]': 'sticky()',
|
|
16097
|
-
|
|
16098
|
-
|
|
16098
|
+
'[class.navbar-contextual]': 'contextual()',
|
|
16099
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (!hidden()) {\n<header\n [class.bg-black/80]=\"!transparent()\"\n [class.backdrop-blur-xl]=\"!transparent()\"\n class=\"ease-in-out transition-all duration-300\"\n [attr.aria-label]=\"ariaLabel() || title()\"\n>\n <div\n class=\"mx-auto px-4 pt-3 pb-2\"\n [class.border-b]=\"showBorder()\"\n [class.border-white/5]=\"showBorder()\"\n [style.max-width]=\"maxWidth()\"\n >\n <div class=\"flex items-center justify-between gap-4 w-full\">\n <div class=\"navbar-left flex items-center min-w-0 flex-1\">\n @if (showLeftButton) {\n <xs-button\n (onClick)=\"showBack() ? back.emit() : menuToggle.emit()\"\n [icon]=\"{ name: showBack() ? 'arrow-left' : (menuIcon()) }\"\n layout=\"iconOnlyHeader\"\n variant=\"custom\"\n customClass=\"flex-none p-2 -ml-2 text-zinc-400 hover:text-white active:scale-90 rounded-xl hover:bg-zinc-900/50\"\n [title]=\"showBack() ? t('GO_BACK') : t('OPEN_MENU')\"\n />\n }\n\n <div class=\"navbar-leading flex-none\">\n <ng-content select=\"[leading]\"></ng-content>\n </div>\n\n <div class=\"navbar-title-wrap flex flex-col min-w-0 flex-1\">\n <a\n [routerLink]=\"homeRoute()\"\n (click)=\"titleClick.emit()\"\n class=\"navbar-default-title inline-block text-2xl sm:text-3xl font-black tracking-[0.01em] text-white uppercase leading-none truncate transition-[letter-spacing_0.5s_ease-out,color_0.2s_ease] hover:tracking-[0.05em] hover:text-zinc-300 will-change-[letter-spacing] no-underline\"\n [attr.aria-label]=\"t('GO_TO') + ' ' + (homeRoute() || t('HOME'))\"\n >\n @if (mobileTitle()) {\n <span class=\"lg:hidden\">{{ mobileTitle() }}</span>\n <span class=\"hidden lg:inline\">{{ title() }}</span>\n } @else {\n {{ title() }}\n }\n </a>\n\n @if (subtitle()) {\n <div\n class=\"navbar-default-subtitle flex items-center gap-2 mt-1 animate-in fade-in slide-in-from-left-2 duration-500 min-w-0\"\n >\n <div\n class=\"text-zinc-400 text-[10px] font-black tracking-[0.2em] uppercase leading-none truncate\"\n >\n @if (mobileSubtitle()) {\n <span class=\"lg:hidden\">{{ mobileSubtitle() }}</span>\n <span class=\"hidden lg:inline\">{{ subtitle() }}</span>\n } @else {\n {{ subtitle() }}\n }\n </div>\n </div>\n }\n </div>\n </div>\n\n <div class=\"navbar-right flex items-center justify-end gap-3 min-w-0\">\n <ng-content select=\"[actions]\"></ng-content>\n\n @if (envName !== 'prod' && !hideEnvBadge() && !isCapacitorNative) {\n <span\n class=\"hidden sm:flex flex-none items-center justify-center w-9 h-9 rounded-xl border text-[9px] font-black tracking-[0.1em] select-none\"\n [class.bg-amber-500/10]=\"envName === 'dev'\"\n [class.border-amber-500/20]=\"envName === 'dev'\"\n [class.text-amber-500]=\"envName === 'dev'\"\n [class.bg-orange-500/10]=\"envName === 'uat'\"\n [class.border-orange-500/20]=\"envName === 'uat'\"\n [class.text-orange-500]=\"envName === 'uat'\"\n [title]=\"envName\"\n >{{ envName }}</span>\n }\n\n @if (showChat()) {\n <button\n (click)=\"chatClick.emit()\"\n class=\"relative flex-none flex items-center justify-center w-9 h-9 bg-zinc-900/40 rounded-xl border border-white/5 hover:bg-zinc-800 active:scale-95 transition-all\"\n type=\"button\"\n [attr.aria-label]=\"t('CHAT')\"\n >\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\" class=\"w-4 h-4\">\n <path d=\"M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H5.17L4 17.17V4h16v12z\"/>\n </svg>\n @if (unreadChatMessages() > 0) {\n <span\n class=\"absolute -top-1 -right-1 min-w-[16px] h-4 px-1 bg-green-500 rounded-full text-[8px] font-bold text-white flex items-center justify-center\"\n [attr.aria-label]=\"unreadChatMessages() + ' ' + t('UNREAD_MESSAGES')\"\n >\n {{ unreadChatMessages() > 9 ? '9+' : unreadChatMessages() }}\n </span>\n }\n </button>\n }\n\n @if (showNotifications()) {\n <xs-button\n (onClick)=\"notificationsClick.emit()\"\n icon=\"bell\"\n layout=\"iconOnly\"\n variant=\"custom\"\n customClass=\"w-9 h-9 bg-zinc-900/40 rounded-xl border border-white/5 hover:bg-zinc-800 active:scale-95\"\n [title]=\"t('NOTIFICATIONS')\"\n [badgeCount]=\"unreadNotifications()\"\n />\n }\n\n @if (showImpersonation()) {\n <button\n (click)=\"impersonationClick.emit()\"\n class=\"flex-none flex items-center justify-center w-9 h-9 bg-amber-500/10 rounded-xl border border-amber-500/20 hover:bg-amber-500/20 active:scale-95 transition-all\"\n type=\"button\"\n [attr.aria-label]=\"t('BACK_TO_ADMIN')\"\n >\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\" class=\"w-4 h-4 text-amber-500\">\n <path d=\"M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z\"/>\n </svg>\n </button>\n }\n\n @if (showLanguage()) {\n <button\n (click)=\"onToggleLang()\"\n class=\"navbar-lang flex-none flex items-center justify-center w-9 h-9 bg-zinc-900/40 rounded-xl border border-white/5 hover:bg-zinc-800 active:scale-95 transition-all\"\n type=\"button\"\n [attr.aria-label]=\"t('SWITCH_LANG_TO') + ' ' + (langSignal() === 'es' ? t('ENGLISH') : t('SPANISH'))\"\n >\n <img\n [src]=\"\n langSignal() === 'es'\n ? ('es' | countryFlag)\n : ('us' | countryFlag)\n \"\n class=\"w-4 h-3 object-cover rounded-[1px] shadow-sm\"\n [alt]=\"langSignal() === 'es' ? t('SPANISH') : t('ENGLISH')\"\n />\n </button>\n }\n </div>\n </div>\n\n @if (hasBottom) {\n <div\n class=\"mt-6 animate-in fade-in slide-in-from-top-2 duration-700\"\n >\n <ng-content select=\"[bottom]\"></ng-content>\n </div>\n }\n </div>\n</header>\n}\n", styles: [":host{display:block;width:100%}:host(.sticky){position:sticky}header{-webkit-backdrop-filter:blur(20px)}button:focus-visible{outline:2px solid rgb(113 113 122);outline-offset:2px}.navbar-leading:has(>*){margin-left:4px}:host(.navbar-contextual) .navbar-title-wrap{display:none}:host(.navbar-contextual) .navbar-lang{display:none}\n"] }]
|
|
16100
|
+
}], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], mobileTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileTitle", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], mobileSubtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "mobileSubtitle", required: false }] }], showBorder: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBorder", required: false }] }], transparent: [{ type: i0.Input, args: [{ isSignal: true, alias: "transparent", required: false }] }], sticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "sticky", required: false }] }], showBack: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBack", required: false }] }], showMenu: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMenu", required: false }] }], menuIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuIcon", required: false }] }], contextual: [{ type: i0.Input, args: [{ isSignal: true, alias: "contextual", required: false }] }], showLanguage: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLanguage", required: false }] }], showNotifications: [{ type: i0.Input, args: [{ isSignal: true, alias: "showNotifications", required: false }] }], showChat: [{ type: i0.Input, args: [{ isSignal: true, alias: "showChat", required: false }] }], showImpersonation: [{ type: i0.Input, args: [{ isSignal: true, alias: "showImpersonation", required: false }] }], unreadChatMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "unreadChatMessages", required: false }] }], unreadNotifications: [{ type: i0.Input, args: [{ isSignal: true, alias: "unreadNotifications", required: false }] }], homeRoute: [{ type: i0.Input, args: [{ isSignal: true, alias: "homeRoute", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], hidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidden", required: false }] }], hideEnvBadge: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideEnvBadge", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], back: [{ type: i0.Output, args: ["back"] }], menuToggle: [{ type: i0.Output, args: ["menuToggle"] }], titleClick: [{ type: i0.Output, args: ["titleClick"] }], notificationsClick: [{ type: i0.Output, args: ["notificationsClick"] }], chatClick: [{ type: i0.Output, args: ["chatClick"] }], impersonationClick: [{ type: i0.Output, args: ["impersonationClick"] }], bottomContent: [{ type: i0.ContentChild, args: ['[bottom]', { ...{
|
|
16099
16101
|
read: ElementRef,
|
|
16100
16102
|
}, isSignal: true }] }] } });
|
|
16101
16103
|
|
|
@@ -23141,7 +23143,7 @@ const LIB_STORIES = [
|
|
|
23141
23143
|
() => import('./xsmusices-ui-xs-icon.xsstory-asFaHy5H.mjs').then((m) => m.story),
|
|
23142
23144
|
() => import('./xsmusices-ui-xs-image.xsstory-BaeUg3Zp.mjs').then((m) => m.story),
|
|
23143
23145
|
() => import('./xsmusices-ui-xs-modal.xsstory-B96CYHF0.mjs').then((m) => m.story),
|
|
23144
|
-
() => import('./xsmusices-ui-xs-navbar.xsstory-
|
|
23146
|
+
() => import('./xsmusices-ui-xs-navbar.xsstory-BDW0nLAH.mjs').then((m) => m.story),
|
|
23145
23147
|
() => import('./xsmusices-ui-xs-navbar-sidebar.xsstory-DHmPSARx.mjs').then((m) => m.story),
|
|
23146
23148
|
() => import('./xsmusices-ui-stats-card.xsstory-PWTUDysc.mjs').then((m) => m.story),
|
|
23147
23149
|
() => import('./xsmusices-ui-xs-toast.xsstory-BBhGu-j4.mjs').then((m) => m.story),
|