@neural-ui/core 1.7.5 → 1.8.0

package/fesm2022/neural-ui-core-tabs.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, ElementRef, PLATFORM_ID, signal, effect, input, output, computed, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
-import { isPlatformBrowser } from '@angular/common';
+import { InjectionToken, Directive, contentChild, inject, ElementRef, PLATFORM_ID, signal, effect, input, output, computed, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
+import { isPlatformBrowser, NgTemplateOutlet } from '@angular/common';
 import { NeuUrlStateService } from '@neural-ui/core/url-state';
 
 // ----------------------------------------------------------------
@@ -8,6 +8,18 @@ import { NeuUrlStateService } from '@neural-ui/core/url-state';
 // la instancia padre sin pasar signals manualmente.
 // ----------------------------------------------------------------
 const NEU_TABS_CONTEXT = new InjectionToken('NeuTabsContext');
+class NeuTabLabelDirective {
+    templateRef;
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: NeuTabLabelDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.17", type: NeuTabLabelDirective, isStandalone: true, selector: "ng-template[neuTabLabel]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: NeuTabLabelDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[neuTabLabel]' }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
 /**
  * NeuralUI Tabs Component
  *
@@ -21,6 +33,7 @@ const NEU_TABS_CONTEXT = new InjectionToken('NeuTabsContext');
  *   </neu-tabs>
  */
 class NeuTabsComponent {
+    labelTpl = contentChild(NeuTabLabelDirective, ...(ngDevMode ? [{ debugName: "labelTpl" }] : /* istanbul ignore next */ []));
     urlState = inject(NeuUrlStateService);
     elRef = inject(ElementRef);
     platformId = inject(PLATFORM_ID);
@@ -193,7 +206,7 @@ class NeuTabsComponent {
         btn?.focus();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: NeuTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: NeuTabsComponent, isStandalone: true, selector: "neu-tabs", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null }, tabParam: { classPropertyName: "tabParam", publicName: "tabParam", isSignal: true, isRequired: false, transformFunction: null }, flush: { classPropertyName: "flush", publicName: "flush", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tabChange: "tabChange" }, providers: [{ provide: NEU_TABS_CONTEXT, useExisting: NeuTabsComponent }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: NeuTabsComponent, isStandalone: true, selector: "neu-tabs", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null }, tabParam: { classPropertyName: "tabParam", publicName: "tabParam", isSignal: true, isRequired: false, transformFunction: null }, flush: { classPropertyName: "flush", publicName: "flush", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tabChange: "tabChange" }, providers: [{ provide: NEU_TABS_CONTEXT, useExisting: NeuTabsComponent }], queries: [{ propertyName: "labelTpl", first: true, predicate: NeuTabLabelDirective, descendants: true, isSignal: true }], ngImport: i0, template: `
     <!-- Barra de pestañas -->
     <div class="neu-tabs" [class.neu-tabs--flush]="flush()">
       <div
@@ -225,7 +238,7 @@ class NeuTabsComponent {
             (keydown.home)="focusTab($any($event), 'first')"
             (keydown.end)="focusTab($any($event), 'last')"
           >
-            {{ tab.label }}
+            @if (labelTpl()) { <ng-container [ngTemplateOutlet]="labelTpl()!.templateRef" [ngTemplateOutletContext]="{ $implicit: tab, active: activeTabId() === tab.id }" /> } @else { {{ tab.label }} }
             @if (tab.badge) {
               <span class="neu-tabs__tab-badge">{{ tab.badge }}</span>
             }
@@ -240,11 +253,11 @@ class NeuTabsComponent {
         <ng-content />
       </div>
     </div>
-  `, isInline: true, styles: [".neu-tabs{display:flex;flex-direction:column}.neu-tabs__nav{position:relative;display:flex;border-bottom:1.5px solid var(--neu-border);overflow-x:auto;cursor:grab;touch-action:pan-x;scrollbar-width:none}.neu-tabs__nav::-webkit-scrollbar{display:none}.neu-tabs__nav--dragging{cursor:grabbing;-webkit-user-select:none;user-select:none}.neu-tabs__tab{position:relative;display:inline-flex;align-items:center;gap:var(--neu-space-2);padding:var(--neu-space-3) var(--neu-space-5);background:transparent;border:none;font-family:var(--neu-font-sans);font-size:var(--neu-text-sm);font-weight:500;color:color-mix(in srgb,var(--neu-text) 72%,var(--neu-surface) 28%);cursor:pointer;white-space:nowrap;flex-shrink:0;transition:color var(--neu-transition),background-color var(--neu-transition);outline:none}.neu-tabs__tab:hover:not(:disabled){color:var(--neu-text);background:var(--neu-surface-2)}.neu-tabs__tab:focus-visible{outline:2px solid var(--neu-primary);outline-offset:-2px;border-radius:var(--neu-radius-sm) var(--neu-radius-sm) 0 0}.neu-tabs__tab--active{color:var(--neu-primary-dark, var(--neu-primary));font-weight:600}.neu-tabs__tab--disabled{opacity:.4;cursor:not-allowed}.neu-tabs__tab-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:var(--neu-radius-full);background:var(--neu-primary-100);color:var(--neu-primary-dark, var(--neu-primary));font-size:10px;font-weight:700;line-height:1}.neu-tabs__indicator{position:absolute;bottom:-1.5px;height:2.5px;background:var(--neu-primary);border-radius:var(--neu-radius-full) var(--neu-radius-full) 0 0;transition:left var(--neu-transition-slow),width var(--neu-transition-slow);pointer-events:none}.neu-tabs__panels{flex:1}.neu-tab-panel{padding-top:1.5rem;animation:neu-tab-fade .18s ease}@keyframes neu-tab-fade{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [".neu-tabs{display:flex;flex-direction:column}.neu-tabs__nav{position:relative;display:flex;border-bottom:1.5px solid var(--neu-border);overflow-x:auto;cursor:grab;touch-action:pan-x;scrollbar-width:none}.neu-tabs__nav::-webkit-scrollbar{display:none}.neu-tabs__nav--dragging{cursor:grabbing;-webkit-user-select:none;user-select:none}.neu-tabs__tab{position:relative;display:inline-flex;align-items:center;gap:var(--neu-space-2);padding:var(--neu-space-3) var(--neu-space-5);background:transparent;border:none;font-family:var(--neu-font-sans);font-size:var(--neu-text-sm);font-weight:500;color:color-mix(in srgb,var(--neu-text) 72%,var(--neu-surface) 28%);cursor:pointer;white-space:nowrap;flex-shrink:0;transition:color var(--neu-transition),background-color var(--neu-transition);outline:none}.neu-tabs__tab:hover:not(:disabled){color:var(--neu-text);background:var(--neu-surface-2)}.neu-tabs__tab:focus-visible{outline:2px solid var(--neu-primary);outline-offset:-2px;border-radius:var(--neu-radius-sm) var(--neu-radius-sm) 0 0}.neu-tabs__tab--active{color:var(--neu-primary-dark, var(--neu-primary));font-weight:600}.neu-tabs__tab--disabled{opacity:.4;cursor:not-allowed}.neu-tabs__tab-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:var(--neu-radius-full);background:var(--neu-primary-100);color:var(--neu-primary-dark, var(--neu-primary));font-size:10px;font-weight:700;line-height:1}.neu-tabs__indicator{position:absolute;bottom:-1.5px;height:2.5px;background:var(--neu-primary);border-radius:var(--neu-radius-full) var(--neu-radius-full) 0 0;transition:left var(--neu-transition-slow),width var(--neu-transition-slow);pointer-events:none}.neu-tabs__panels{flex:1}.neu-tab-panel{padding-top:1.5rem;animation:neu-tab-fade .18s ease}@keyframes neu-tab-fade{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: NeuTabsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'neu-tabs', imports: [], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: NEU_TABS_CONTEXT, useExisting: NeuTabsComponent }], template: `
+            args: [{ selector: 'neu-tabs', imports: [NgTemplateOutlet], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: NEU_TABS_CONTEXT, useExisting: NeuTabsComponent }], template: `
     <!-- Barra de pestañas -->
     <div class="neu-tabs" [class.neu-tabs--flush]="flush()">
       <div
@@ -276,7 +289,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
             (keydown.home)="focusTab($any($event), 'first')"
             (keydown.end)="focusTab($any($event), 'last')"
           >
-            {{ tab.label }}
+            @if (labelTpl()) { <ng-container [ngTemplateOutlet]="labelTpl()!.templateRef" [ngTemplateOutletContext]="{ $implicit: tab, active: activeTabId() === tab.id }" /> } @else { {{ tab.label }} }
             @if (tab.badge) {
               <span class="neu-tabs__tab-badge">{{ tab.badge }}</span>
             }
@@ -292,7 +305,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
       </div>
     </div>
   `, styles: [".neu-tabs{display:flex;flex-direction:column}.neu-tabs__nav{position:relative;display:flex;border-bottom:1.5px solid var(--neu-border);overflow-x:auto;cursor:grab;touch-action:pan-x;scrollbar-width:none}.neu-tabs__nav::-webkit-scrollbar{display:none}.neu-tabs__nav--dragging{cursor:grabbing;-webkit-user-select:none;user-select:none}.neu-tabs__tab{position:relative;display:inline-flex;align-items:center;gap:var(--neu-space-2);padding:var(--neu-space-3) var(--neu-space-5);background:transparent;border:none;font-family:var(--neu-font-sans);font-size:var(--neu-text-sm);font-weight:500;color:color-mix(in srgb,var(--neu-text) 72%,var(--neu-surface) 28%);cursor:pointer;white-space:nowrap;flex-shrink:0;transition:color var(--neu-transition),background-color var(--neu-transition);outline:none}.neu-tabs__tab:hover:not(:disabled){color:var(--neu-text);background:var(--neu-surface-2)}.neu-tabs__tab:focus-visible{outline:2px solid var(--neu-primary);outline-offset:-2px;border-radius:var(--neu-radius-sm) var(--neu-radius-sm) 0 0}.neu-tabs__tab--active{color:var(--neu-primary-dark, var(--neu-primary));font-weight:600}.neu-tabs__tab--disabled{opacity:.4;cursor:not-allowed}.neu-tabs__tab-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:var(--neu-radius-full);background:var(--neu-primary-100);color:var(--neu-primary-dark, var(--neu-primary));font-size:10px;font-weight:700;line-height:1}.neu-tabs__indicator{position:absolute;bottom:-1.5px;height:2.5px;background:var(--neu-primary);border-radius:var(--neu-radius-full) var(--neu-radius-full) 0 0;transition:left var(--neu-transition-slow),width var(--neu-transition-slow);pointer-events:none}.neu-tabs__panels{flex:1}.neu-tab-panel{padding-top:1.5rem;animation:neu-tab-fade .18s ease}@keyframes neu-tab-fade{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: false }] }], tabParam: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabParam", required: false }] }], flush: [{ type: i0.Input, args: [{ isSignal: true, alias: "flush", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], tabChange: [{ type: i0.Output, args: ["tabChange"] }] } });
+        }], ctorParameters: () => [], propDecorators: { labelTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NeuTabLabelDirective), { isSignal: true }] }], tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: false }] }], tabParam: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabParam", required: false }] }], flush: [{ type: i0.Input, args: [{ isSignal: true, alias: "flush", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], tabChange: [{ type: i0.Output, args: ["tabChange"] }] } });
 // ----------------------------------------------------------------
 // NeuTabPanelComponent — panel individual (usa DI para el contexto)
 // ----------------------------------------------------------------
@@ -350,5 +363,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { NEU_TABS_CONTEXT, NeuTabPanelComponent, NeuTabsComponent };
+export { NEU_TABS_CONTEXT, NeuTabLabelDirective, NeuTabPanelComponent, NeuTabsComponent };
 //# sourceMappingURL=neural-ui-core-tabs.mjs.map

package/fesm2022/neural-ui-core-tabs.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"neural-ui-core-tabs.mjs","sources":["../../../../projects/ui-core/tabs/neu-tabs.component.ts","../../../../projects/ui-core/tabs/neural-ui-core-tabs.ts"],"sourcesContent":["import {\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  InjectionToken,\n  OnDestroy,\n  PLATFORM_ID,\n  Signal,\n  ViewEncapsulation,\n  computed,\n  effect,\n  inject,\n  input,\n  output,\n  signal,\n} from '@angular/core';\nimport { isPlatformBrowser } from '@angular/common';\nimport { NeuUrlStateService } from '@neural-ui/core/url-state';\n\n// ----------------------------------------------------------------\n// Token de contexto — permite a NeuTabPanelComponent inyectar\n// la instancia padre sin pasar signals manualmente.\n// ----------------------------------------------------------------\nexport const NEU_TABS_CONTEXT = new InjectionToken<NeuTabsComponent>('NeuTabsContext');\n\nexport interface NeuTab {\n  /** ID único de la pestaña — se usa como valor en la URL / Unique tab ID — used as the URL value */\n  id: string;\n  /** Etiqueta visible / Visible label */\n  label: string;\n  /** Badge opcional junto al label / Optional badge next to the label */\n  badge?: string;\n  /** Deshabilita la pestaña sin ocultarla / Disables the tab without hiding it */\n  disabled?: boolean;\n}\n\n/**\n * NeuralUI Tabs Component\n *\n * Sistema de pestañas con estado sincronizado a la URL via NeuUrlStateService. / Tab system with state synchronized to the URL via NeuUrlStateService.\n * El panel activo se determina por ?{tabParam}={tabId}. / The active panel is determined by ?{tabParam}={tabId}.\n *\n * Uso:\n *   <neu-tabs [tabs]=\"tabs\" tabParam=\"tab\">\n *     <neu-tab-panel tabId=\"preview\">...</neu-tab-panel>\n *     <neu-tab-panel tabId=\"api\">...</neu-tab-panel>\n *   </neu-tabs>\n */\n@Component({\n  selector: 'neu-tabs',\n  imports: [],\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [{ provide: NEU_TABS_CONTEXT, useExisting: NeuTabsComponent }],\n  template: `\n    <!-- Barra de pestañas -->\n    <div class=\"neu-tabs\" [class.neu-tabs--flush]=\"flush()\">\n      <div\n        class=\"neu-tabs__nav\"\n        role=\"tablist\"\n        [attr.aria-label]=\"ariaLabel()\"\n        [class.neu-tabs__nav--dragging]=\"isDraggingNav()\"\n        #navRef\n        (pointerdown)=\"startNavDrag($event)\"\n        (pointermove)=\"moveNavDrag($event)\"\n        (pointerup)=\"endNavDrag($event)\"\n        (pointercancel)=\"endNavDrag($event)\"\n      >\n        @for (tab of tabs(); track tab.id) {\n          <button\n            class=\"neu-tabs__tab\"\n            [class.neu-tabs__tab--active]=\"activeTabId() === tab.id\"\n            [class.neu-tabs__tab--disabled]=\"tab.disabled\"\n            role=\"tab\"\n            [id]=\"'neu-tab-' + tab.id\"\n            [attr.aria-selected]=\"activeTabId() === tab.id\"\n            [attr.aria-controls]=\"'neu-tabpanel-' + tab.id\"\n            [attr.tabindex]=\"activeTabId() === tab.id ? '0' : '-1'\"\n            [disabled]=\"tab.disabled\"\n            type=\"button\"\n            (click)=\"handleTabClick($event, tab)\"\n            (keydown.arrowRight)=\"focusTab($any($event), 1)\"\n            (keydown.arrowLeft)=\"focusTab($any($event), -1)\"\n            (keydown.home)=\"focusTab($any($event), 'first')\"\n            (keydown.end)=\"focusTab($any($event), 'last')\"\n          >\n            {{ tab.label }}\n            @if (tab.badge) {\n              <span class=\"neu-tabs__tab-badge\">{{ tab.badge }}</span>\n            }\n          </button>\n        }\n        <!-- Indicador deslizante -->\n        <span class=\"neu-tabs__indicator\" [style]=\"indicatorStyle()\"></span>\n      </div>\n\n      <!-- Paneles (proyectados desde NeuTabPanelComponent) -->\n      <div class=\"neu-tabs__panels\">\n        <ng-content />\n      </div>\n    </div>\n  `,\n  styleUrl: './neu-tabs.component.scss',\n})\nexport class NeuTabsComponent implements AfterViewInit, OnDestroy {\n  private readonly urlState = inject(NeuUrlStateService);\n  private readonly elRef = inject(ElementRef);\n  private readonly platformId = inject(PLATFORM_ID);\n  private resizeObserver?: ResizeObserver;\n  private readonly _urlParamSignals = new Map<string, Signal<string | null>>();\n  private _dragPointerId: number | null = null;\n  private _dragStartX = 0;\n  private _dragStartScrollLeft = 0;\n  private _suppressNextClick = false;\n  private readonly _optimisticActiveTabId = signal<string | null>(null);\n  readonly isDraggingNav = signal(false);\n\n  private _getUrlParamSignal(key: string): Signal<string | null> {\n    let paramSignal = this._urlParamSignals.get(key);\n    if (!paramSignal) {\n      paramSignal = this.urlState.getParam(key);\n      this._urlParamSignals.set(key, paramSignal);\n    }\n    return paramSignal;\n  }\n\n  private _readUrlParam(key: string): string | null {\n    return this._getUrlParamSignal(key)();\n  }\n\n  private _requestFrame(callback: FrameRequestCallback): void {\n    if (isPlatformBrowser(this.platformId)) {\n      requestAnimationFrame(callback);\n    }\n  }\n\n  constructor() {\n    // Actualizar indicador cuando activeTabId cambie — debe estar en el constructor (injection context)\n    effect(() => {\n      this.activeTabId(); // dependencia reactiva\n      this._requestFrame(() => this._updateIndicator());\n    });\n  }\n\n  /** Definición de pestañas / Tab definitions */\n  tabs = input<NeuTab[]>([]);\n\n  /** QueryParam que almacena la pestaña activa / QueryParam that stores the active tab */\n  tabParam = input<string>('tab');\n\n  /** Si true, elimina el padding interno de los paneles / If true, removes the internal padding from panels */\n  flush = input<boolean>(false);\n\n  /** Etiqueta accesible del rol tablist / Accessible label for the tablist role */\n  ariaLabel = input<string>('Pestañas de contenido');\n\n  /** Emite al cambiar de pestaña / Emits when the tab changes */\n  tabChange = output<string>();\n\n  /** ID de la pestaña activa (de la URL o la primera disponible) / Active tab ID (from the URL or the first available) */\n  readonly activeTabId = computed(() => {\n    const tabList = this.tabs();\n    const fromUrl = this._readUrlParam(this.tabParam());\n    const available = tabList.find((t) => t.id === fromUrl && !t.disabled);\n    if (available) return available.id;\n\n    const optimistic = this._optimisticActiveTabId();\n    const optimisticAvailable = tabList.find((t) => t.id === optimistic && !t.disabled);\n    if (optimisticAvailable) return optimisticAvailable.id;\n\n    // Fallback: primera pestaña no deshabilitada\n    return tabList.find((t) => !t.disabled)?.id ?? '';\n  });\n\n  /** Posición del indicador calculada mediante medición DOM / Indicator position calculated via DOM measurement */\n  private readonly _indicatorLeft = signal('0px');\n  private readonly _indicatorWidth = signal('0px');\n\n  readonly indicatorStyle = computed(\n    () => `left: ${this._indicatorLeft()}; width: ${this._indicatorWidth()}`,\n  );\n\n  ngAfterViewInit(): void {\n    this._updateIndicator();\n    // Actualizar cuando cambie el tamaño del nav (p.ej. resize de ventana)\n    const nav = this.elRef.nativeElement.querySelector('.neu-tabs__nav');\n    if (nav && typeof ResizeObserver !== 'undefined') {\n      this.resizeObserver = new ResizeObserver(() => this._updateIndicator());\n      this.resizeObserver.observe(nav);\n    }\n  }\n\n  ngOnDestroy(): void {\n    this.resizeObserver?.disconnect();\n  }\n\n  private _updateIndicator(): void {\n    const nav: HTMLElement | null = this.elRef.nativeElement.querySelector('.neu-tabs__nav');\n    if (!nav) return;\n    const tabEls = nav.querySelectorAll<HTMLElement>('.neu-tabs__tab');\n    const idx = this.tabs().findIndex((t) => t.id === this.activeTabId());\n    const tabEl = tabEls[idx];\n    if (tabEl) {\n      this._indicatorLeft.set(tabEl.offsetLeft + 'px');\n      this._indicatorWidth.set(tabEl.offsetWidth + 'px');\n      if (typeof tabEl.scrollIntoView === 'function') {\n        tabEl.scrollIntoView({\n          behavior: 'smooth',\n          block: 'nearest',\n          inline: 'nearest',\n        });\n      }\n    }\n  }\n\n  handleTabClick(event: Event, tab: NeuTab): void {\n    if (this._suppressNextClick) {\n      event.preventDefault();\n      event.stopPropagation();\n      this._suppressNextClick = false;\n      return;\n    }\n    this.selectTab(tab);\n  }\n\n  selectTab(tab: NeuTab): void {\n    if (tab.disabled) return;\n    this._optimisticActiveTabId.set(tab.id);\n    this.urlState.setParam(this.tabParam(), tab.id);\n    this.tabChange.emit(tab.id);\n    this._requestFrame(() => this._updateIndicator());\n  }\n\n  startNavDrag(event: PointerEvent): void {\n    if (event.pointerType === 'mouse' && event.button !== 0) return;\n    const target = event.target as HTMLElement | null;\n    if (!target?.closest('.neu-tabs__nav')) return;\n    if (target.closest('.neu-tabs__tab')) return;\n\n    const nav = event.currentTarget as HTMLElement;\n    this._dragPointerId = event.pointerId;\n    this._dragStartX = event.clientX;\n    this._dragStartScrollLeft = nav.scrollLeft;\n    this.isDraggingNav.set(false);\n    nav.setPointerCapture(event.pointerId);\n  }\n\n  moveNavDrag(event: PointerEvent): void {\n    if (this._dragPointerId !== event.pointerId) return;\n\n    const nav = event.currentTarget as HTMLElement;\n    const deltaX = event.clientX - this._dragStartX;\n    if (!this.isDraggingNav() && Math.abs(deltaX) > 6) {\n      this.isDraggingNav.set(true);\n      this._suppressNextClick = true;\n    }\n    if (!this.isDraggingNav()) return;\n\n    nav.scrollLeft = this._dragStartScrollLeft - deltaX;\n    event.preventDefault();\n  }\n\n  endNavDrag(event: PointerEvent): void {\n    if (this._dragPointerId !== event.pointerId) return;\n\n    const nav = event.currentTarget as HTMLElement;\n    if (nav.hasPointerCapture(event.pointerId)) {\n      nav.releasePointerCapture(event.pointerId);\n    }\n    this._dragPointerId = null;\n    if (this.isDraggingNav()) {\n      this._requestFrame(() => this.isDraggingNav.set(false));\n    }\n  }\n\n  /** Mueve el foco entre tabs con flechas (roving tabindex — WAI-ARIA Tabs Pattern) / Moves focus between tabs with arrows (roving tabindex — WAI-ARIA Tabs Pattern) */\n  focusTab(event: Event, dir: 1 | -1 | 'first' | 'last'): void {\n    event.preventDefault();\n    const enabledTabs = this.tabs().filter((t) => !t.disabled);\n    const currentIdx = enabledTabs.findIndex((t) => t.id === this.activeTabId());\n    let nextIdx: number;\n    if (dir === 'first') {\n      nextIdx = 0;\n    } else if (dir === 'last') {\n      nextIdx = enabledTabs.length - 1;\n    } else {\n      nextIdx = (currentIdx + dir + enabledTabs.length) % enabledTabs.length;\n    }\n    const next = enabledTabs[nextIdx];\n    this.selectTab(next);\n    const btn = (this.elRef.nativeElement as HTMLElement).querySelector(\n      `#neu-tab-${next.id}`,\n    ) as HTMLElement | null;\n    btn?.focus();\n  }\n}\n\n// ----------------------------------------------------------------\n// NeuTabPanelComponent — panel individual (usa DI para el contexto)\n// ----------------------------------------------------------------\n\n/**\n * NeuralUI Tab Panel\n *\n * Panel de contenido asociado a una pestaña de NeuTabsComponent. / Content panel associated with a NeuTabsComponent tab.\n * Solo se renderiza (no oculta con CSS) cuando la pestaña está activa. / Only rendered (not hidden with CSS) when the tab is active.\n *\n * Uso: hijo directo de <neu-tabs>\n *   <neu-tab-panel tabId=\"api\">...</neu-tab-panel>\n */\n@Component({\n  selector: 'neu-tab-panel',\n  imports: [],\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  template: `\n    @if (isActive()) {\n      <div\n        class=\"neu-tab-panel\"\n        role=\"tabpanel\"\n        [id]=\"'neu-tabpanel-' + tabId()\"\n        [attr.aria-labelledby]=\"'neu-tab-' + tabId()\"\n      >\n        <ng-content />\n      </div>\n    }\n  `,\n})\nexport class NeuTabPanelComponent {\n  private readonly tabs = inject(NEU_TABS_CONTEXT, { optional: true });\n\n  /** ID que debe coincidir con NeuTab.id del padre / ID that must match the parent NeuTab.id */\n  tabId = input.required<string>();\n\n  readonly isActive = computed(() => this.tabs?.activeTabId() === this.tabId());\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"neural-ui-core-tabs.mjs","sources":["../../../../projects/ui-core/tabs/neu-tabs.component.ts","../../../../projects/ui-core/tabs/neural-ui-core-tabs.ts"],"sourcesContent":["import {\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  Component,\n  Directive,\n  ElementRef,\n  InjectionToken,\n  OnDestroy,\n  PLATFORM_ID,\n  Signal,\n  TemplateRef,\n  ViewEncapsulation,\n  computed,\n  contentChild,\n  effect,\n  inject,\n  input,\n  output,\n  signal,\n} from '@angular/core';\nimport { isPlatformBrowser, NgTemplateOutlet } from '@angular/common';\nimport { NeuUrlStateService } from '@neural-ui/core/url-state';\n\n// ----------------------------------------------------------------\n// Token de contexto — permite a NeuTabPanelComponent inyectar\n// la instancia padre sin pasar signals manualmente.\n// ----------------------------------------------------------------\nexport const NEU_TABS_CONTEXT = new InjectionToken<NeuTabsComponent>('NeuTabsContext');\n\nexport interface NeuTab {\n  /** ID único de la pestaña — se usa como valor en la URL / Unique tab ID — used as the URL value */\n  id: string;\n  /** Etiqueta visible / Visible label */\n  label: string;\n  /** Badge opcional junto al label / Optional badge next to the label */\n  badge?: string;\n  /** Deshabilita la pestaña sin ocultarla / Disables the tab without hiding it */\n  disabled?: boolean;\n}\n@Directive({ selector: 'ng-template[neuTabLabel]' })\nexport class NeuTabLabelDirective { constructor(readonly templateRef: TemplateRef<{ $implicit: NeuTab; active: boolean }>) {} }\n\n/**\n * NeuralUI Tabs Component\n *\n * Sistema de pestañas con estado sincronizado a la URL via NeuUrlStateService. / Tab system with state synchronized to the URL via NeuUrlStateService.\n * El panel activo se determina por ?{tabParam}={tabId}. / The active panel is determined by ?{tabParam}={tabId}.\n *\n * Uso:\n *   <neu-tabs [tabs]=\"tabs\" tabParam=\"tab\">\n *     <neu-tab-panel tabId=\"preview\">...</neu-tab-panel>\n *     <neu-tab-panel tabId=\"api\">...</neu-tab-panel>\n *   </neu-tabs>\n */\n@Component({\n  selector: 'neu-tabs',\n  imports: [NgTemplateOutlet],\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [{ provide: NEU_TABS_CONTEXT, useExisting: NeuTabsComponent }],\n  template: `\n    <!-- Barra de pestañas -->\n    <div class=\"neu-tabs\" [class.neu-tabs--flush]=\"flush()\">\n      <div\n        class=\"neu-tabs__nav\"\n        role=\"tablist\"\n        [attr.aria-label]=\"ariaLabel()\"\n        [class.neu-tabs__nav--dragging]=\"isDraggingNav()\"\n        #navRef\n        (pointerdown)=\"startNavDrag($event)\"\n        (pointermove)=\"moveNavDrag($event)\"\n        (pointerup)=\"endNavDrag($event)\"\n        (pointercancel)=\"endNavDrag($event)\"\n      >\n        @for (tab of tabs(); track tab.id) {\n          <button\n            class=\"neu-tabs__tab\"\n            [class.neu-tabs__tab--active]=\"activeTabId() === tab.id\"\n            [class.neu-tabs__tab--disabled]=\"tab.disabled\"\n            role=\"tab\"\n            [id]=\"'neu-tab-' + tab.id\"\n            [attr.aria-selected]=\"activeTabId() === tab.id\"\n            [attr.aria-controls]=\"'neu-tabpanel-' + tab.id\"\n            [attr.tabindex]=\"activeTabId() === tab.id ? '0' : '-1'\"\n            [disabled]=\"tab.disabled\"\n            type=\"button\"\n            (click)=\"handleTabClick($event, tab)\"\n            (keydown.arrowRight)=\"focusTab($any($event), 1)\"\n            (keydown.arrowLeft)=\"focusTab($any($event), -1)\"\n            (keydown.home)=\"focusTab($any($event), 'first')\"\n            (keydown.end)=\"focusTab($any($event), 'last')\"\n          >\n            @if (labelTpl()) { <ng-container [ngTemplateOutlet]=\"labelTpl()!.templateRef\" [ngTemplateOutletContext]=\"{ $implicit: tab, active: activeTabId() === tab.id }\" /> } @else { {{ tab.label }} }\n            @if (tab.badge) {\n              <span class=\"neu-tabs__tab-badge\">{{ tab.badge }}</span>\n            }\n          </button>\n        }\n        <!-- Indicador deslizante -->\n        <span class=\"neu-tabs__indicator\" [style]=\"indicatorStyle()\"></span>\n      </div>\n\n      <!-- Paneles (proyectados desde NeuTabPanelComponent) -->\n      <div class=\"neu-tabs__panels\">\n        <ng-content />\n      </div>\n    </div>\n  `,\n  styleUrl: './neu-tabs.component.scss',\n})\nexport class NeuTabsComponent implements AfterViewInit, OnDestroy {\n  readonly labelTpl = contentChild(NeuTabLabelDirective);\n  private readonly urlState = inject(NeuUrlStateService);\n  private readonly elRef = inject(ElementRef);\n  private readonly platformId = inject(PLATFORM_ID);\n  private resizeObserver?: ResizeObserver;\n  private readonly _urlParamSignals = new Map<string, Signal<string | null>>();\n  private _dragPointerId: number | null = null;\n  private _dragStartX = 0;\n  private _dragStartScrollLeft = 0;\n  private _suppressNextClick = false;\n  private readonly _optimisticActiveTabId = signal<string | null>(null);\n  readonly isDraggingNav = signal(false);\n\n  private _getUrlParamSignal(key: string): Signal<string | null> {\n    let paramSignal = this._urlParamSignals.get(key);\n    if (!paramSignal) {\n      paramSignal = this.urlState.getParam(key);\n      this._urlParamSignals.set(key, paramSignal);\n    }\n    return paramSignal;\n  }\n\n  private _readUrlParam(key: string): string | null {\n    return this._getUrlParamSignal(key)();\n  }\n\n  private _requestFrame(callback: FrameRequestCallback): void {\n    if (isPlatformBrowser(this.platformId)) {\n      requestAnimationFrame(callback);\n    }\n  }\n\n  constructor() {\n    // Actualizar indicador cuando activeTabId cambie — debe estar en el constructor (injection context)\n    effect(() => {\n      this.activeTabId(); // dependencia reactiva\n      this._requestFrame(() => this._updateIndicator());\n    });\n  }\n\n  /** Definición de pestañas / Tab definitions */\n  tabs = input<NeuTab[]>([]);\n\n  /** QueryParam que almacena la pestaña activa / QueryParam that stores the active tab */\n  tabParam = input<string>('tab');\n\n  /** Si true, elimina el padding interno de los paneles / If true, removes the internal padding from panels */\n  flush = input<boolean>(false);\n\n  /** Etiqueta accesible del rol tablist / Accessible label for the tablist role */\n  ariaLabel = input<string>('Pestañas de contenido');\n\n  /** Emite al cambiar de pestaña / Emits when the tab changes */\n  tabChange = output<string>();\n\n  /** ID de la pestaña activa (de la URL o la primera disponible) / Active tab ID (from the URL or the first available) */\n  readonly activeTabId = computed(() => {\n    const tabList = this.tabs();\n    const fromUrl = this._readUrlParam(this.tabParam());\n    const available = tabList.find((t) => t.id === fromUrl && !t.disabled);\n    if (available) return available.id;\n\n    const optimistic = this._optimisticActiveTabId();\n    const optimisticAvailable = tabList.find((t) => t.id === optimistic && !t.disabled);\n    if (optimisticAvailable) return optimisticAvailable.id;\n\n    // Fallback: primera pestaña no deshabilitada\n    return tabList.find((t) => !t.disabled)?.id ?? '';\n  });\n\n  /** Posición del indicador calculada mediante medición DOM / Indicator position calculated via DOM measurement */\n  private readonly _indicatorLeft = signal('0px');\n  private readonly _indicatorWidth = signal('0px');\n\n  readonly indicatorStyle = computed(\n    () => `left: ${this._indicatorLeft()}; width: ${this._indicatorWidth()}`,\n  );\n\n  ngAfterViewInit(): void {\n    this._updateIndicator();\n    // Actualizar cuando cambie el tamaño del nav (p.ej. resize de ventana)\n    const nav = this.elRef.nativeElement.querySelector('.neu-tabs__nav');\n    if (nav && typeof ResizeObserver !== 'undefined') {\n      this.resizeObserver = new ResizeObserver(() => this._updateIndicator());\n      this.resizeObserver.observe(nav);\n    }\n  }\n\n  ngOnDestroy(): void {\n    this.resizeObserver?.disconnect();\n  }\n\n  private _updateIndicator(): void {\n    const nav: HTMLElement | null = this.elRef.nativeElement.querySelector('.neu-tabs__nav');\n    if (!nav) return;\n    const tabEls = nav.querySelectorAll<HTMLElement>('.neu-tabs__tab');\n    const idx = this.tabs().findIndex((t) => t.id === this.activeTabId());\n    const tabEl = tabEls[idx];\n    if (tabEl) {\n      this._indicatorLeft.set(tabEl.offsetLeft + 'px');\n      this._indicatorWidth.set(tabEl.offsetWidth + 'px');\n      if (typeof tabEl.scrollIntoView === 'function') {\n        tabEl.scrollIntoView({\n          behavior: 'smooth',\n          block: 'nearest',\n          inline: 'nearest',\n        });\n      }\n    }\n  }\n\n  handleTabClick(event: Event, tab: NeuTab): void {\n    if (this._suppressNextClick) {\n      event.preventDefault();\n      event.stopPropagation();\n      this._suppressNextClick = false;\n      return;\n    }\n    this.selectTab(tab);\n  }\n\n  selectTab(tab: NeuTab): void {\n    if (tab.disabled) return;\n    this._optimisticActiveTabId.set(tab.id);\n    this.urlState.setParam(this.tabParam(), tab.id);\n    this.tabChange.emit(tab.id);\n    this._requestFrame(() => this._updateIndicator());\n  }\n\n  startNavDrag(event: PointerEvent): void {\n    if (event.pointerType === 'mouse' && event.button !== 0) return;\n    const target = event.target as HTMLElement | null;\n    if (!target?.closest('.neu-tabs__nav')) return;\n    if (target.closest('.neu-tabs__tab')) return;\n\n    const nav = event.currentTarget as HTMLElement;\n    this._dragPointerId = event.pointerId;\n    this._dragStartX = event.clientX;\n    this._dragStartScrollLeft = nav.scrollLeft;\n    this.isDraggingNav.set(false);\n    nav.setPointerCapture(event.pointerId);\n  }\n\n  moveNavDrag(event: PointerEvent): void {\n    if (this._dragPointerId !== event.pointerId) return;\n\n    const nav = event.currentTarget as HTMLElement;\n    const deltaX = event.clientX - this._dragStartX;\n    if (!this.isDraggingNav() && Math.abs(deltaX) > 6) {\n      this.isDraggingNav.set(true);\n      this._suppressNextClick = true;\n    }\n    if (!this.isDraggingNav()) return;\n\n    nav.scrollLeft = this._dragStartScrollLeft - deltaX;\n    event.preventDefault();\n  }\n\n  endNavDrag(event: PointerEvent): void {\n    if (this._dragPointerId !== event.pointerId) return;\n\n    const nav = event.currentTarget as HTMLElement;\n    if (nav.hasPointerCapture(event.pointerId)) {\n      nav.releasePointerCapture(event.pointerId);\n    }\n    this._dragPointerId = null;\n    if (this.isDraggingNav()) {\n      this._requestFrame(() => this.isDraggingNav.set(false));\n    }\n  }\n\n  /** Mueve el foco entre tabs con flechas (roving tabindex — WAI-ARIA Tabs Pattern) / Moves focus between tabs with arrows (roving tabindex — WAI-ARIA Tabs Pattern) */\n  focusTab(event: Event, dir: 1 | -1 | 'first' | 'last'): void {\n    event.preventDefault();\n    const enabledTabs = this.tabs().filter((t) => !t.disabled);\n    const currentIdx = enabledTabs.findIndex((t) => t.id === this.activeTabId());\n    let nextIdx: number;\n    if (dir === 'first') {\n      nextIdx = 0;\n    } else if (dir === 'last') {\n      nextIdx = enabledTabs.length - 1;\n    } else {\n      nextIdx = (currentIdx + dir + enabledTabs.length) % enabledTabs.length;\n    }\n    const next = enabledTabs[nextIdx];\n    this.selectTab(next);\n    const btn = (this.elRef.nativeElement as HTMLElement).querySelector(\n      `#neu-tab-${next.id}`,\n    ) as HTMLElement | null;\n    btn?.focus();\n  }\n}\n\n// ----------------------------------------------------------------\n// NeuTabPanelComponent — panel individual (usa DI para el contexto)\n// ----------------------------------------------------------------\n\n/**\n * NeuralUI Tab Panel\n *\n * Panel de contenido asociado a una pestaña de NeuTabsComponent. / Content panel associated with a NeuTabsComponent tab.\n * Solo se renderiza (no oculta con CSS) cuando la pestaña está activa. / Only rendered (not hidden with CSS) when the tab is active.\n *\n * Uso: hijo directo de <neu-tabs>\n *   <neu-tab-panel tabId=\"api\">...</neu-tab-panel>\n */\n@Component({\n  selector: 'neu-tab-panel',\n  imports: [],\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  template: `\n    @if (isActive()) {\n      <div\n        class=\"neu-tab-panel\"\n        role=\"tabpanel\"\n        [id]=\"'neu-tabpanel-' + tabId()\"\n        [attr.aria-labelledby]=\"'neu-tab-' + tabId()\"\n      >\n        <ng-content />\n      </div>\n    }\n  `,\n})\nexport class NeuTabPanelComponent {\n  private readonly tabs = inject(NEU_TABS_CONTEXT, { optional: true });\n\n  /** ID que debe coincidir con NeuTab.id del padre / ID that must match the parent NeuTab.id */\n  tabId = input.required<string>();\n\n  readonly isActive = computed(() => this.tabs?.activeTabId() === this.tabId());\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}

package/fesm2022/neural-ui-core-tags.mjs

@@ -1,8 +1,35 @@
 import * as i0 from '@angular/core';
-import { input, output, signal, computed, forwardRef, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
+import { Directive, contentChild, input, output, signal, computed, forwardRef, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 
+class NeuTagItemDirective {
+    templateRef;
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: NeuTagItemDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.17", type: NeuTagItemDirective, isStandalone: true, selector: "ng-template[neuTagItem]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: NeuTagItemDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[neuTagItem]' }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+class NeuTagSuggestionDirective {
+    templateRef;
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: NeuTagSuggestionDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.17", type: NeuTagSuggestionDirective, isStandalone: true, selector: "ng-template[neuTagSuggestion]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: NeuTagSuggestionDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[neuTagSuggestion]' }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
 class NeuTagsComponent {
+    tagTpl = contentChild(NeuTagItemDirective, ...(ngDevMode ? [{ debugName: "tagTpl" }] : /* istanbul ignore next */ []));
+    suggestionTpl = contentChild(NeuTagSuggestionDirective, ...(ngDevMode ? [{ debugName: "suggestionTpl" }] : /* istanbul ignore next */ []));
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     placeholder = input('Add tag...', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
@@ -16,7 +43,7 @@ class NeuTagsComponent {
     cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
     filteredSuggestions = computed(() => {
         const q = this.draft().toLowerCase();
-        return this.suggestions().filter((item) => item.toLowerCase().includes(q) && !this.value().includes(item));
+        return this.suggestions().map((item) => typeof item === 'string' ? { label: item, value: item } : item).filter((item) => item.label.toLowerCase().includes(q) && !this.value().includes(item.value));
     }, ...(ngDevMode ? [{ debugName: "filteredSuggestions" }] : /* istanbul ignore next */ []));
     onChange = () => { };
     onTouched = () => { };
@@ -63,14 +90,14 @@ class NeuTagsComponent {
         this.valueChange.emit(value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: NeuTagsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: NeuTagsComponent, isStandalone: true, selector: "neu-tags", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, suggestions: { classPropertyName: "suggestions", publicName: "suggestions", isSignal: true, isRequired: false, transformFunction: null }, separators: { classPropertyName: "separators", publicName: "separators", isSignal: true, isRequired: false, transformFunction: null }, removeLabel: { classPropertyName: "removeLabel", publicName: "removeLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { classAttribute: "neu-tags" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NeuTagsComponent), multi: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: NeuTagsComponent, isStandalone: true, selector: "neu-tags", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, suggestions: { classPropertyName: "suggestions", publicName: "suggestions", isSignal: true, isRequired: false, transformFunction: null }, separators: { classPropertyName: "separators", publicName: "separators", isSignal: true, isRequired: false, transformFunction: null }, removeLabel: { classPropertyName: "removeLabel", publicName: "removeLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { classAttribute: "neu-tags" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NeuTagsComponent), multi: true }], queries: [{ propertyName: "tagTpl", first: true, predicate: NeuTagItemDirective, descendants: true, isSignal: true }, { propertyName: "suggestionTpl", first: true, predicate: NeuTagSuggestionDirective, descendants: true, isSignal: true }], ngImport: i0, template: `
     @if (label()) {
       <label class="neu-tags__label" [for]="inputId">{{ label() }}</label>
     }
     <div class="neu-tags__box" [class.neu-tags__box--disabled]="disabled() || cvaDisabled()">
       @for (tag of value(); track tag) {
         <span class="neu-tags__tag">
-          {{ tag }}
+          @if (tagTpl()) { <ng-container [ngTemplateOutlet]="tagTpl()!.templateRef" [ngTemplateOutletContext]="{ $implicit: tag, remove: remove.bind(this, tag) }" /> } @else { {{ tag }} }
           <button type="button" [attr.aria-label]="removeLabel() + ' ' + tag" (click)="remove(tag)">×</button>
         </span>
       }
@@ -86,23 +113,23 @@ class NeuTagsComponent {
     </div>
     @if (suggestions().length && draft()) {
       <div class="neu-tags__suggestions">
-        @for (suggestion of filteredSuggestions(); track suggestion) {
-          <button type="button" (click)="add(suggestion)">{{ suggestion }}</button>
+        @for (suggestion of filteredSuggestions(); track suggestion.value) {
+          <button type="button" (click)="add(suggestion.value)">@if (suggestionTpl()) { <ng-container [ngTemplateOutlet]="suggestionTpl()!.templateRef" [ngTemplateOutletContext]="{ $implicit: suggestion }" /> } @else { {{ suggestion.label }} }</button>
         }
       </div>
     }
-  `, isInline: true, styles: [".neu-tags{display:grid;gap:.375rem}.neu-tags__label{font-size:.875rem;font-weight:600;color:var(--neu-text, #111827)}.neu-tags__box{display:flex;flex-wrap:wrap;gap:.375rem;align-items:center;min-height:2.5rem;border:1px solid var(--neu-border, #d1d5db);border-radius:.625rem;background:var(--neu-surface, #fff);padding:.25rem}.neu-tags__tag{display:inline-flex;align-items:center;gap:.25rem;border-radius:999px;background:var(--neu-surface-2, #f3f4f6);color:var(--neu-text, #111827);padding:.25rem .5rem}.neu-tags__tag button,.neu-tags__suggestions button{border:0;background:transparent;color:inherit}.neu-tags__box input{flex:1;min-width:8rem;border:0;outline:0;background:transparent;color:inherit}.neu-tags__suggestions{display:flex;flex-wrap:wrap;gap:.375rem}.neu-tags__suggestions button{border:1px solid var(--neu-border, #d1d5db);color:var(--neu-text, #111827);border-radius:999px;padding:.25rem .5rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [".neu-tags{display:grid;gap:.375rem}.neu-tags__label{font-size:.875rem;font-weight:600;color:var(--neu-text, #111827)}.neu-tags__box{display:flex;flex-wrap:wrap;gap:.375rem;align-items:center;min-height:2.5rem;border:1px solid var(--neu-border, #d1d5db);border-radius:.625rem;background:var(--neu-surface, #fff);padding:.25rem}.neu-tags__tag{display:inline-flex;align-items:center;gap:.25rem;border-radius:999px;background:var(--neu-surface-2, #f3f4f6);color:var(--neu-text, #111827);padding:.25rem .5rem}.neu-tags__tag button,.neu-tags__suggestions button{border:0;background:transparent;color:inherit}.neu-tags__box input{flex:1;min-width:8rem;border:0;outline:0;background:transparent;color:inherit}.neu-tags__suggestions{display:flex;flex-wrap:wrap;gap:.375rem}.neu-tags__suggestions button{border:1px solid var(--neu-border, #d1d5db);color:var(--neu-text, #111827);border-radius:999px;padding:.25rem .5rem}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: NeuTagsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'neu-tags', imports: [], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NeuTagsComponent), multi: true }], host: { class: 'neu-tags' }, template: `
+            args: [{ selector: 'neu-tags', imports: [NgTemplateOutlet], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NeuTagsComponent), multi: true }], host: { class: 'neu-tags' }, template: `
     @if (label()) {
       <label class="neu-tags__label" [for]="inputId">{{ label() }}</label>
     }
     <div class="neu-tags__box" [class.neu-tags__box--disabled]="disabled() || cvaDisabled()">
       @for (tag of value(); track tag) {
         <span class="neu-tags__tag">
-          {{ tag }}
+          @if (tagTpl()) { <ng-container [ngTemplateOutlet]="tagTpl()!.templateRef" [ngTemplateOutletContext]="{ $implicit: tag, remove: remove.bind(this, tag) }" /> } @else { {{ tag }} }
           <button type="button" [attr.aria-label]="removeLabel() + ' ' + tag" (click)="remove(tag)">×</button>
         </span>
       }
@@ -118,17 +145,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
     </div>
     @if (suggestions().length && draft()) {
       <div class="neu-tags__suggestions">
-        @for (suggestion of filteredSuggestions(); track suggestion) {
-          <button type="button" (click)="add(suggestion)">{{ suggestion }}</button>
+        @for (suggestion of filteredSuggestions(); track suggestion.value) {
+          <button type="button" (click)="add(suggestion.value)">@if (suggestionTpl()) { <ng-container [ngTemplateOutlet]="suggestionTpl()!.templateRef" [ngTemplateOutletContext]="{ $implicit: suggestion }" /> } @else { {{ suggestion.label }} }</button>
         }
       </div>
     }
   `, styles: [".neu-tags{display:grid;gap:.375rem}.neu-tags__label{font-size:.875rem;font-weight:600;color:var(--neu-text, #111827)}.neu-tags__box{display:flex;flex-wrap:wrap;gap:.375rem;align-items:center;min-height:2.5rem;border:1px solid var(--neu-border, #d1d5db);border-radius:.625rem;background:var(--neu-surface, #fff);padding:.25rem}.neu-tags__tag{display:inline-flex;align-items:center;gap:.25rem;border-radius:999px;background:var(--neu-surface-2, #f3f4f6);color:var(--neu-text, #111827);padding:.25rem .5rem}.neu-tags__tag button,.neu-tags__suggestions button{border:0;background:transparent;color:inherit}.neu-tags__box input{flex:1;min-width:8rem;border:0;outline:0;background:transparent;color:inherit}.neu-tags__suggestions{display:flex;flex-wrap:wrap;gap:.375rem}.neu-tags__suggestions button{border:1px solid var(--neu-border, #d1d5db);color:var(--neu-text, #111827);border-radius:999px;padding:.25rem .5rem}\n"] }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], suggestions: [{ type: i0.Input, args: [{ isSignal: true, alias: "suggestions", required: false }] }], separators: [{ type: i0.Input, args: [{ isSignal: true, alias: "separators", required: false }] }], removeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeLabel", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
+        }], propDecorators: { tagTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NeuTagItemDirective), { isSignal: true }] }], suggestionTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NeuTagSuggestionDirective), { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], suggestions: [{ type: i0.Input, args: [{ isSignal: true, alias: "suggestions", required: false }] }], separators: [{ type: i0.Input, args: [{ isSignal: true, alias: "separators", required: false }] }], removeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "removeLabel", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { NeuTagsComponent };
+export { NeuTagItemDirective, NeuTagSuggestionDirective, NeuTagsComponent };
 //# sourceMappingURL=neural-ui-core-tags.mjs.map

package/fesm2022/neural-ui-core-tags.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"neural-ui-core-tags.mjs","sources":["../../../../projects/ui-core/tags/neu-tags.component.ts","../../../../projects/ui-core/tags/neural-ui-core-tags.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, ViewEncapsulation, computed, forwardRef, input, output, signal } from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n\n@Component({\n  selector: 'neu-tags',\n  imports: [],\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NeuTagsComponent), multi: true }],\n  host: { class: 'neu-tags' },\n  template: `\n    @if (label()) {\n      <label class=\"neu-tags__label\" [for]=\"inputId\">{{ label() }}</label>\n    }\n    <div class=\"neu-tags__box\" [class.neu-tags__box--disabled]=\"disabled() || cvaDisabled()\">\n      @for (tag of value(); track tag) {\n        <span class=\"neu-tags__tag\">\n          {{ tag }}\n          <button type=\"button\" [attr.aria-label]=\"removeLabel() + ' ' + tag\" (click)=\"remove(tag)\">×</button>\n        </span>\n      }\n      <input\n        [id]=\"inputId\"\n        [placeholder]=\"value().length ? '' : placeholder()\"\n        [value]=\"draft()\"\n        [disabled]=\"disabled() || cvaDisabled()\"\n        (input)=\"draft.set($any($event.target).value)\"\n        (keydown)=\"onKeyDown($event)\"\n        (blur)=\"commitDraft()\"\n      />\n    </div>\n    @if (suggestions().length && draft()) {\n      <div class=\"neu-tags__suggestions\">\n        @for (suggestion of filteredSuggestions(); track suggestion) {\n          <button type=\"button\" (click)=\"add(suggestion)\">{{ suggestion }}</button>\n        }\n      </div>\n    }\n  `,\n  styleUrl: './neu-tags.component.scss',\n})\nexport class NeuTagsComponent implements ControlValueAccessor {\n  readonly label = input('');\n  readonly placeholder = input('Add tag...');\n  readonly disabled = input(false);\n  readonly suggestions = input<string[]>([]);\n  readonly separators = input<string[]>(['Enter', ',']);\n  readonly removeLabel = input('Remove');\n  readonly valueChange = output<string[]>();\n  readonly inputId = `neu-tags-${Math.random().toString(36).slice(2)}`;\n  readonly value = signal<string[]>([]);\n  readonly draft = signal('');\n  readonly cvaDisabled = signal(false);\n  readonly filteredSuggestions = computed(() => {\n    const q = this.draft().toLowerCase();\n    return this.suggestions().filter((item) => item.toLowerCase().includes(q) && !this.value().includes(item));\n  });\n  private onChange: (value: string[]) => void = () => {};\n  private onTouched: () => void = () => {};\n\n  writeValue(value: string[] | null): void {\n    this.value.set(value ?? []);\n  }\n  registerOnChange(fn: (value: string[]) => void): void {\n    this.onChange = fn;\n  }\n  registerOnTouched(fn: () => void): void {\n    this.onTouched = fn;\n  }\n  setDisabledState(isDisabled: boolean): void {\n    this.cvaDisabled.set(isDisabled);\n  }\n  onKeyDown(event: KeyboardEvent): void {\n    if (this.separators().includes(event.key)) {\n      event.preventDefault();\n      this.commitDraft();\n    }\n    if (event.key === 'Backspace' && !this.draft() && this.value().length) {\n      this.remove(this.value()[this.value().length - 1]!);\n    }\n  }\n  commitDraft(): void {\n    const tag = this.draft().trim().replace(/,$/, '');\n    if (tag) {\n      this.add(tag);\n    }\n    this.onTouched();\n  }\n  add(tag: string): void {\n    if (!this.value().includes(tag)) {\n      this.commit([...this.value(), tag]);\n    }\n    this.draft.set('');\n  }\n  remove(tag: string): void {\n    this.commit(this.value().filter((item) => item !== tag));\n  }\n  private commit(value: string[]): void {\n    this.value.set(value);\n    this.onChange(value);\n    this.valueChange.emit(value);\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"neural-ui-core-tags.mjs","sources":["../../../../projects/ui-core/tags/neu-tags.component.ts","../../../../projects/ui-core/tags/neural-ui-core-tags.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, Directive, TemplateRef, ViewEncapsulation, computed, contentChild, forwardRef, input, output, signal } from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nexport interface NeuTagSuggestion { label: string; value: string; data?: unknown; }\n@Directive({ selector: 'ng-template[neuTagItem]' })\nexport class NeuTagItemDirective { constructor(readonly templateRef: TemplateRef<{ $implicit: string; remove: () => void }>) {} }\n@Directive({ selector: 'ng-template[neuTagSuggestion]' })\nexport class NeuTagSuggestionDirective { constructor(readonly templateRef: TemplateRef<{ $implicit: NeuTagSuggestion }>) {} }\n\n@Component({\n  selector: 'neu-tags',\n  imports: [NgTemplateOutlet],\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NeuTagsComponent), multi: true }],\n  host: { class: 'neu-tags' },\n  template: `\n    @if (label()) {\n      <label class=\"neu-tags__label\" [for]=\"inputId\">{{ label() }}</label>\n    }\n    <div class=\"neu-tags__box\" [class.neu-tags__box--disabled]=\"disabled() || cvaDisabled()\">\n      @for (tag of value(); track tag) {\n        <span class=\"neu-tags__tag\">\n          @if (tagTpl()) { <ng-container [ngTemplateOutlet]=\"tagTpl()!.templateRef\" [ngTemplateOutletContext]=\"{ $implicit: tag, remove: remove.bind(this, tag) }\" /> } @else { {{ tag }} }\n          <button type=\"button\" [attr.aria-label]=\"removeLabel() + ' ' + tag\" (click)=\"remove(tag)\">×</button>\n        </span>\n      }\n      <input\n        [id]=\"inputId\"\n        [placeholder]=\"value().length ? '' : placeholder()\"\n        [value]=\"draft()\"\n        [disabled]=\"disabled() || cvaDisabled()\"\n        (input)=\"draft.set($any($event.target).value)\"\n        (keydown)=\"onKeyDown($event)\"\n        (blur)=\"commitDraft()\"\n      />\n    </div>\n    @if (suggestions().length && draft()) {\n      <div class=\"neu-tags__suggestions\">\n        @for (suggestion of filteredSuggestions(); track suggestion.value) {\n          <button type=\"button\" (click)=\"add(suggestion.value)\">@if (suggestionTpl()) { <ng-container [ngTemplateOutlet]=\"suggestionTpl()!.templateRef\" [ngTemplateOutletContext]=\"{ $implicit: suggestion }\" /> } @else { {{ suggestion.label }} }</button>\n        }\n      </div>\n    }\n  `,\n  styleUrl: './neu-tags.component.scss',\n})\nexport class NeuTagsComponent implements ControlValueAccessor {\n  readonly tagTpl = contentChild(NeuTagItemDirective);\n  readonly suggestionTpl = contentChild(NeuTagSuggestionDirective);\n  readonly label = input('');\n  readonly placeholder = input('Add tag...');\n  readonly disabled = input(false);\n  readonly suggestions = input<Array<string | NeuTagSuggestion>>([]);\n  readonly separators = input<string[]>(['Enter', ',']);\n  readonly removeLabel = input('Remove');\n  readonly valueChange = output<string[]>();\n  readonly inputId = `neu-tags-${Math.random().toString(36).slice(2)}`;\n  readonly value = signal<string[]>([]);\n  readonly draft = signal('');\n  readonly cvaDisabled = signal(false);\n  readonly filteredSuggestions = computed(() => {\n    const q = this.draft().toLowerCase();\n    return this.suggestions().map((item) => typeof item === 'string' ? { label: item, value: item } : item).filter((item) => item.label.toLowerCase().includes(q) && !this.value().includes(item.value));\n  });\n  private onChange: (value: string[]) => void = () => {};\n  private onTouched: () => void = () => {};\n\n  writeValue(value: string[] | null): void {\n    this.value.set(value ?? []);\n  }\n  registerOnChange(fn: (value: string[]) => void): void {\n    this.onChange = fn;\n  }\n  registerOnTouched(fn: () => void): void {\n    this.onTouched = fn;\n  }\n  setDisabledState(isDisabled: boolean): void {\n    this.cvaDisabled.set(isDisabled);\n  }\n  onKeyDown(event: KeyboardEvent): void {\n    if (this.separators().includes(event.key)) {\n      event.preventDefault();\n      this.commitDraft();\n    }\n    if (event.key === 'Backspace' && !this.draft() && this.value().length) {\n      this.remove(this.value()[this.value().length - 1]!);\n    }\n  }\n  commitDraft(): void {\n    const tag = this.draft().trim().replace(/,$/, '');\n    if (tag) {\n      this.add(tag);\n    }\n    this.onTouched();\n  }\n  add(tag: string): void {\n    if (!this.value().includes(tag)) {\n      this.commit([...this.value(), tag]);\n    }\n    this.draft.set('');\n  }\n  remove(tag: string): void {\n    this.commit(this.value().filter((item) => item !== tag));\n  }\n  private commit(value: string[]): void {\n    this.value.set(value);\n    this.onChange(value);\n    this.valueChange.emit(value);\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}

package/fesm2022/neural-ui-core-timeline.mjs

@@ -1,6 +1,31 @@
 import * as i0 from '@angular/core';
-import { input, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
+import { Directive, contentChild, input, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
 
+class NeuTimelineItemDirective {
+    templateRef;
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: NeuTimelineItemDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.17", type: NeuTimelineItemDirective, isStandalone: true, selector: "ng-template[neuTimelineItem]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: NeuTimelineItemDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[neuTimelineItem]' }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
+class NeuTimelineMarkerDirective {
+    templateRef;
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: NeuTimelineMarkerDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.17", type: NeuTimelineMarkerDirective, isStandalone: true, selector: "ng-template[neuTimelineMarker]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: NeuTimelineMarkerDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[neuTimelineMarker]' }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }] });
 /**
  * NeuralUI Timeline Component
  *
@@ -11,10 +36,12 @@ import { input, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@a
  *   <neu-timeline [items]="events" align="right" />
  */
 class NeuTimelineComponent {
+    itemTpl = contentChild(NeuTimelineItemDirective, ...(ngDevMode ? [{ debugName: "itemTpl" }] : /* istanbul ignore next */ []));
+    markerTpl = contentChild(NeuTimelineMarkerDirective, ...(ngDevMode ? [{ debugName: "markerTpl" }] : /* istanbul ignore next */ []));
     /** Eventos a mostrar / Events to display */
     items = input([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: NeuTimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: NeuTimelineComponent, isStandalone: true, selector: "neu-timeline", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: NeuTimelineComponent, isStandalone: true, selector: "neu-timeline", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "itemTpl", first: true, predicate: NeuTimelineItemDirective, descendants: true, isSignal: true }, { propertyName: "markerTpl", first: true, predicate: NeuTimelineMarkerDirective, descendants: true, isSignal: true }], ngImport: i0, template: `
     <ol class="neu-timeline">
       @for (item of items(); track item.title; let last = $last) {
         <li class="neu-timeline__item" [class.neu-timeline__item--last]="last">
@@ -24,7 +51,7 @@ class NeuTimelineComponent {
               class="neu-timeline__dot"
               [class]="'neu-timeline__dot--' + (item.variant ?? 'default')"
             >
-              @if (item.icon) {
+              @if (markerTpl()) { <ng-container [ngTemplateOutlet]="markerTpl()!.templateRef" [ngTemplateOutletContext]="{ $implicit: item }" /> } @else if (item.icon) {
                 <svg
                   class="neu-timeline__dot-icon"
                   viewBox="0 0 24 24"
@@ -45,7 +72,7 @@ class NeuTimelineComponent {
 
           <!-- Contenido -->
           <div class="neu-timeline__content">
-            <div class="neu-timeline__header">
+            @if (itemTpl()) { <ng-container [ngTemplateOutlet]="itemTpl()!.templateRef" [ngTemplateOutletContext]="{ $implicit: item, index: $index }" /> } @else { <div class="neu-timeline__header">
               <span class="neu-timeline__title">{{ item.title }}</span>
               @if (item.time) {
                 <span class="neu-timeline__time">{{ item.time }}</span>
@@ -54,15 +81,16 @@ class NeuTimelineComponent {
             @if (item.description) {
               <p class="neu-timeline__desc">{{ item.description }}</p>
             }
+            }
           </div>
         </li>
       }
     </ol>
-  `, isInline: true, styles: [".neu-timeline{list-style:none;margin:0;padding:0;font-family:var(--neu-font-sans)}.neu-timeline__item{display:flex;gap:var(--neu-space-4);min-height:56px}.neu-timeline__axis{display:flex;flex-direction:column;align-items:center;flex-shrink:0;width:24px}.neu-timeline__dot{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;border:2.5px solid;background:var(--neu-surface)}.neu-timeline__dot--default{border-color:var(--neu-border);color:var(--neu-text-disabled);background:var(--neu-surface-2)}.neu-timeline__dot--success{border-color:var(--neu-success);color:var(--neu-success)}.neu-timeline__dot--warning{border-color:var(--neu-warning);color:var(--neu-warning)}.neu-timeline__dot--danger{border-color:var(--neu-error);color:var(--neu-error)}.neu-timeline__dot--info{border-color:var(--neu-primary);color:var(--neu-primary)}.neu-timeline__dot-icon{width:12px;height:12px}.neu-timeline__line{width:2px;flex:1;background:var(--neu-border);margin:4px 0;min-height:16px}.neu-timeline__content{flex:1;padding-bottom:var(--neu-space-5);padding-top:2px}.neu-timeline__header{display:flex;align-items:baseline;justify-content:space-between;gap:var(--neu-space-3);margin-bottom:4px}.neu-timeline__title{font-size:var(--neu-text-sm);font-weight:600;color:var(--neu-text)}.neu-timeline__time{font-size:var(--neu-text-xs);color:var(--neu-text-disabled);white-space:nowrap;flex-shrink:0}.neu-timeline__desc{font-size:var(--neu-text-sm);color:var(--neu-text-muted);line-height:1.6;margin:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [".neu-timeline{list-style:none;margin:0;padding:0;font-family:var(--neu-font-sans)}.neu-timeline__item{display:flex;gap:var(--neu-space-4);min-height:56px}.neu-timeline__axis{display:flex;flex-direction:column;align-items:center;flex-shrink:0;width:24px}.neu-timeline__dot{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;border:2.5px solid;background:var(--neu-surface)}.neu-timeline__dot--default{border-color:var(--neu-border);color:var(--neu-text-disabled);background:var(--neu-surface-2)}.neu-timeline__dot--success{border-color:var(--neu-success);color:var(--neu-success)}.neu-timeline__dot--warning{border-color:var(--neu-warning);color:var(--neu-warning)}.neu-timeline__dot--danger{border-color:var(--neu-error);color:var(--neu-error)}.neu-timeline__dot--info{border-color:var(--neu-primary);color:var(--neu-primary)}.neu-timeline__dot-icon{width:12px;height:12px}.neu-timeline__line{width:2px;flex:1;background:var(--neu-border);margin:4px 0;min-height:16px}.neu-timeline__content{flex:1;padding-bottom:var(--neu-space-5);padding-top:2px}.neu-timeline__header{display:flex;align-items:baseline;justify-content:space-between;gap:var(--neu-space-3);margin-bottom:4px}.neu-timeline__title{font-size:var(--neu-text-sm);font-weight:600;color:var(--neu-text)}.neu-timeline__time{font-size:var(--neu-text-xs);color:var(--neu-text-disabled);white-space:nowrap;flex-shrink:0}.neu-timeline__desc{font-size:var(--neu-text-sm);color:var(--neu-text-muted);line-height:1.6;margin:0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: NeuTimelineComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'neu-timeline', imports: [], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+            args: [{ selector: 'neu-timeline', imports: [NgTemplateOutlet], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: `
     <ol class="neu-timeline">
       @for (item of items(); track item.title; let last = $last) {
         <li class="neu-timeline__item" [class.neu-timeline__item--last]="last">
@@ -72,7 +100,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
               class="neu-timeline__dot"
               [class]="'neu-timeline__dot--' + (item.variant ?? 'default')"
             >
-              @if (item.icon) {
+              @if (markerTpl()) { <ng-container [ngTemplateOutlet]="markerTpl()!.templateRef" [ngTemplateOutletContext]="{ $implicit: item }" /> } @else if (item.icon) {
                 <svg
                   class="neu-timeline__dot-icon"
                   viewBox="0 0 24 24"
@@ -93,7 +121,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
 
           <!-- Contenido -->
           <div class="neu-timeline__content">
-            <div class="neu-timeline__header">
+            @if (itemTpl()) { <ng-container [ngTemplateOutlet]="itemTpl()!.templateRef" [ngTemplateOutletContext]="{ $implicit: item, index: $index }" /> } @else { <div class="neu-timeline__header">
               <span class="neu-timeline__title">{{ item.title }}</span>
               @if (item.time) {
                 <span class="neu-timeline__time">{{ item.time }}</span>
@@ -102,16 +130,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
             @if (item.description) {
               <p class="neu-timeline__desc">{{ item.description }}</p>
             }
+            }
           </div>
         </li>
       }
     </ol>
   `, styles: [".neu-timeline{list-style:none;margin:0;padding:0;font-family:var(--neu-font-sans)}.neu-timeline__item{display:flex;gap:var(--neu-space-4);min-height:56px}.neu-timeline__axis{display:flex;flex-direction:column;align-items:center;flex-shrink:0;width:24px}.neu-timeline__dot{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;border:2.5px solid;background:var(--neu-surface)}.neu-timeline__dot--default{border-color:var(--neu-border);color:var(--neu-text-disabled);background:var(--neu-surface-2)}.neu-timeline__dot--success{border-color:var(--neu-success);color:var(--neu-success)}.neu-timeline__dot--warning{border-color:var(--neu-warning);color:var(--neu-warning)}.neu-timeline__dot--danger{border-color:var(--neu-error);color:var(--neu-error)}.neu-timeline__dot--info{border-color:var(--neu-primary);color:var(--neu-primary)}.neu-timeline__dot-icon{width:12px;height:12px}.neu-timeline__line{width:2px;flex:1;background:var(--neu-border);margin:4px 0;min-height:16px}.neu-timeline__content{flex:1;padding-bottom:var(--neu-space-5);padding-top:2px}.neu-timeline__header{display:flex;align-items:baseline;justify-content:space-between;gap:var(--neu-space-3);margin-bottom:4px}.neu-timeline__title{font-size:var(--neu-text-sm);font-weight:600;color:var(--neu-text)}.neu-timeline__time{font-size:var(--neu-text-xs);color:var(--neu-text-disabled);white-space:nowrap;flex-shrink:0}.neu-timeline__desc{font-size:var(--neu-text-sm);color:var(--neu-text-muted);line-height:1.6;margin:0}\n"] }]
-        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }] } });
+        }], propDecorators: { itemTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NeuTimelineItemDirective), { isSignal: true }] }], markerTpl: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NeuTimelineMarkerDirective), { isSignal: true }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }] } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { NeuTimelineComponent };
+export { NeuTimelineComponent, NeuTimelineItemDirective, NeuTimelineMarkerDirective };
 //# sourceMappingURL=neural-ui-core-timeline.mjs.map

package/fesm2022/neural-ui-core-timeline.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"neural-ui-core-timeline.mjs","sources":["../../../../projects/ui-core/timeline/neu-timeline.component.ts","../../../../projects/ui-core/timeline/neural-ui-core-timeline.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, ViewEncapsulation, input } from '@angular/core';\n\nexport type NeuTimelineItemVariant = 'default' | 'success' | 'warning' | 'danger' | 'info';\n\nexport interface NeuTimelineItem {\n  /** Etiqueta de tiempo (ej. \"Hace 2h\", \"12 Mar\") / Time label (e.g. \"2h ago\", \"Mar 12\") */\n  time?: string;\n  /** Título del evento / Event title */\n  title: string;\n  /** Descripción opcional / Optional description */\n  description?: string;\n  /** Variante de color del punto / Dot color variant */\n  variant?: NeuTimelineItemVariant;\n  /** Icono SVG path opcional / Optional SVG path icon */\n  icon?: string;\n}\n\n/**\n * NeuralUI Timeline Component\n *\n * Lista vertical de eventos cronológicos con línea conectora. / Vertical list of chronological events with a connector line.\n *\n * Uso:\n *   <neu-timeline [items]=\"events\" />\n *   <neu-timeline [items]=\"events\" align=\"right\" />\n */\n@Component({\n  selector: 'neu-timeline',\n  imports: [],\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  template: `\n    <ol class=\"neu-timeline\">\n      @for (item of items(); track item.title; let last = $last) {\n        <li class=\"neu-timeline__item\" [class.neu-timeline__item--last]=\"last\">\n          <!-- Eje izquierdo (punto + línea) -->\n          <div class=\"neu-timeline__axis\">\n            <div\n              class=\"neu-timeline__dot\"\n              [class]=\"'neu-timeline__dot--' + (item.variant ?? 'default')\"\n            >\n              @if (item.icon) {\n                <svg\n                  class=\"neu-timeline__dot-icon\"\n                  viewBox=\"0 0 24 24\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"2\"\n                  stroke-linecap=\"round\"\n                  aria-hidden=\"true\"\n                >\n                  <path [attr.d]=\"item.icon\" />\n                </svg>\n              }\n            </div>\n            @if (!last) {\n              <div class=\"neu-timeline__line\"></div>\n            }\n          </div>\n\n          <!-- Contenido -->\n          <div class=\"neu-timeline__content\">\n            <div class=\"neu-timeline__header\">\n              <span class=\"neu-timeline__title\">{{ item.title }}</span>\n              @if (item.time) {\n                <span class=\"neu-timeline__time\">{{ item.time }}</span>\n              }\n            </div>\n            @if (item.description) {\n              <p class=\"neu-timeline__desc\">{{ item.description }}</p>\n            }\n          </div>\n        </li>\n      }\n    </ol>\n  `,\n  styleUrl: './neu-timeline.component.scss',\n})\nexport class NeuTimelineComponent {\n  /** Eventos a mostrar / Events to display */\n  items = input<NeuTimelineItem[]>([]);\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;AAiBA;;;;;;;;AAQG;MAqDU,oBAAoB,CAAA;;AAE/B,IAAA,KAAK,GAAG,KAAK,CAAoB,EAAE,4EAAC;wGAFzB,oBAAoB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAApB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,oBAAoB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EA/CrB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4CT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,qgDAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;4FAGU,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBApDhC,SAAS;+BACE,cAAc,EAAA,OAAA,EACf,EAAE,EAAA,aAAA,EACI,iBAAiB,CAAC,IAAI,EAAA,eAAA,EACpB,uBAAuB,CAAC,MAAM,EAAA,QAAA,EACrC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4CT,EAAA,CAAA,EAAA,MAAA,EAAA,CAAA,qgDAAA,CAAA,EAAA;;;AC3EH;;AAEG;;;;"}
+{"version":3,"file":"neural-ui-core-timeline.mjs","sources":["../../../../projects/ui-core/timeline/neu-timeline.component.ts","../../../../projects/ui-core/timeline/neural-ui-core-timeline.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, Directive, TemplateRef, ViewEncapsulation, contentChild, input } from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\n\nexport type NeuTimelineItemVariant = 'default' | 'success' | 'warning' | 'danger' | 'info';\n\nexport interface NeuTimelineItem {\n  /** Etiqueta de tiempo (ej. \"Hace 2h\", \"12 Mar\") / Time label (e.g. \"2h ago\", \"Mar 12\") */\n  time?: string;\n  /** Título del evento / Event title */\n  title: string;\n  /** Descripción opcional / Optional description */\n  description?: string;\n  /** Variante de color del punto / Dot color variant */\n  variant?: NeuTimelineItemVariant;\n  /** Icono SVG path opcional / Optional SVG path icon */\n  icon?: string;\n}\n@Directive({ selector: 'ng-template[neuTimelineItem]' })\nexport class NeuTimelineItemDirective { constructor(readonly templateRef: TemplateRef<{ $implicit: NeuTimelineItem; index: number }>) {} }\n@Directive({ selector: 'ng-template[neuTimelineMarker]' })\nexport class NeuTimelineMarkerDirective { constructor(readonly templateRef: TemplateRef<{ $implicit: NeuTimelineItem }>) {} }\n\n/**\n * NeuralUI Timeline Component\n *\n * Lista vertical de eventos cronológicos con línea conectora. / Vertical list of chronological events with a connector line.\n *\n * Uso:\n *   <neu-timeline [items]=\"events\" />\n *   <neu-timeline [items]=\"events\" align=\"right\" />\n */\n@Component({\n  selector: 'neu-timeline',\n  imports: [NgTemplateOutlet],\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  template: `\n    <ol class=\"neu-timeline\">\n      @for (item of items(); track item.title; let last = $last) {\n        <li class=\"neu-timeline__item\" [class.neu-timeline__item--last]=\"last\">\n          <!-- Eje izquierdo (punto + línea) -->\n          <div class=\"neu-timeline__axis\">\n            <div\n              class=\"neu-timeline__dot\"\n              [class]=\"'neu-timeline__dot--' + (item.variant ?? 'default')\"\n            >\n              @if (markerTpl()) { <ng-container [ngTemplateOutlet]=\"markerTpl()!.templateRef\" [ngTemplateOutletContext]=\"{ $implicit: item }\" /> } @else if (item.icon) {\n                <svg\n                  class=\"neu-timeline__dot-icon\"\n                  viewBox=\"0 0 24 24\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"2\"\n                  stroke-linecap=\"round\"\n                  aria-hidden=\"true\"\n                >\n                  <path [attr.d]=\"item.icon\" />\n                </svg>\n              }\n            </div>\n            @if (!last) {\n              <div class=\"neu-timeline__line\"></div>\n            }\n          </div>\n\n          <!-- Contenido -->\n          <div class=\"neu-timeline__content\">\n            @if (itemTpl()) { <ng-container [ngTemplateOutlet]=\"itemTpl()!.templateRef\" [ngTemplateOutletContext]=\"{ $implicit: item, index: $index }\" /> } @else { <div class=\"neu-timeline__header\">\n              <span class=\"neu-timeline__title\">{{ item.title }}</span>\n              @if (item.time) {\n                <span class=\"neu-timeline__time\">{{ item.time }}</span>\n              }\n            </div>\n            @if (item.description) {\n              <p class=\"neu-timeline__desc\">{{ item.description }}</p>\n            }\n            }\n          </div>\n        </li>\n      }\n    </ol>\n  `,\n  styleUrl: './neu-timeline.component.scss',\n})\nexport class NeuTimelineComponent {\n  readonly itemTpl = contentChild(NeuTimelineItemDirective);\n  readonly markerTpl = contentChild(NeuTimelineMarkerDirective);\n  /** Eventos a mostrar / Events to display */\n  items = input<NeuTimelineItem[]>([]);\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}

package/fesm2022/neural-ui-core-toast.mjs

@@ -133,7 +133,7 @@ class NeuToastContainerComponent {
         </button>
       </div>
     }
-  `, isInline: true, styles: [".neu-toast-container{position:fixed;z-index:var(--neu-z-toast);display:flex;flex-direction:column;gap:var(--neu-space-3);pointer-events:none;bottom:var(--neu-space-6);left:50%;transform:translate(-50%);width:calc(100vw - var(--neu-space-8));max-width:400px;align-items:stretch}@media(min-width:400px){.neu-toast-container{bottom:auto;left:auto;transform:none;width:360px;align-items:flex-end}}@media(min-width:400px){.neu-toast-container--top-right{top:calc(var(--neu-header-height, 64px) + var(--neu-space-4));right:var(--neu-space-6);align-items:flex-end}.neu-toast-container--top-left{top:calc(var(--neu-header-height, 64px) + var(--neu-space-4));left:var(--neu-space-6);align-items:flex-start}.neu-toast-container--bottom-right{top:auto;bottom:var(--neu-space-6);right:var(--neu-space-6);align-items:flex-end}.neu-toast-container--bottom-left{top:auto;bottom:var(--neu-space-6);left:var(--neu-space-6);align-items:flex-start}}.neu-toast{display:flex;align-items:flex-start;gap:var(--neu-space-3);padding:var(--neu-space-4);background:var(--neu-toast-bg, var(--neu-surface));border-radius:var(--neu-toast-radius, 10px);box-shadow:var(--neu-toast-shadow, 0 8px 24px rgba(15, 23, 42, .12), 0 2px 6px rgba(15, 23, 42, .06));border-left:3px solid transparent;pointer-events:all;animation:neu-toast-in .25s cubic-bezier(.34,1.56,.64,1) forwards;width:100%}.neu-toast--success{border-color:var(--neu-success)}.neu-toast--success .neu-toast__icon-wrap{color:var(--neu-success)}.neu-toast--error{border-color:var(--neu-error)}.neu-toast--error .neu-toast__icon-wrap{color:var(--neu-error)}.neu-toast--warning{border-color:var(--neu-warning)}.neu-toast--warning .neu-toast__icon-wrap{color:var(--neu-warning)}.neu-toast--info{border-color:var(--neu-info)}.neu-toast--info .neu-toast__icon-wrap{color:var(--neu-info)}.neu-toast__icon-wrap{flex-shrink:0;display:flex;align-items:center;margin-top:1px}.neu-toast__body{flex:1;min-width:0}.neu-toast__title{margin:0 0 var(--neu-space-1);font-family:var(--neu-font-sans);font-size:var(--neu-text-sm);font-weight:600;color:var(--neu-text);line-height:1.3}.neu-toast__message{margin:0;font-family:var(--neu-font-sans);font-size:var(--neu-text-sm);color:var(--neu-text-muted);line-height:1.4;word-break:break-word}.neu-toast__close{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;background:transparent;border:none;border-radius:var(--neu-radius-sm);color:var(--neu-text-muted);cursor:pointer;transition:background-color var(--neu-transition),color var(--neu-transition);margin-top:-2px;margin-right:-4px}.neu-toast__close:hover{background:var(--neu-surface-2);color:var(--neu-text)}.neu-toast__close:focus-visible{outline:2px solid var(--neu-primary);outline-offset:1px}@keyframes neu-toast-in{0%{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}@media(min-width:400px){@keyframes neu-toast-in{0%{opacity:0;transform:translate(20px) scale(.96)}to{opacity:1;transform:translate(0) scale(1)}}}\n"], dependencies: [{ kind: "component", type: NeuIconComponent, selector: "neu-icon", inputs: ["name", "strokeWidth", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [".neu-toast-container{position:fixed;z-index:var(--neu-z-toast);display:flex;flex-direction:column;gap:var(--neu-space-3);pointer-events:none;bottom:var(--neu-space-6);left:50%;transform:translate(-50%);width:calc(100vw - var(--neu-space-8));max-width:400px;align-items:stretch}@media(min-width:400px){.neu-toast-container{bottom:auto;left:auto;transform:none;width:360px;align-items:flex-end}}@media(min-width:400px){.neu-toast-container--top-right{top:calc(var(--neu-header-height, 64px) + var(--neu-space-4));right:var(--neu-space-6);align-items:flex-end}.neu-toast-container--top-left{top:calc(var(--neu-header-height, 64px) + var(--neu-space-4));left:var(--neu-space-6);align-items:flex-start}.neu-toast-container--bottom-right{top:auto;bottom:var(--neu-space-6);right:var(--neu-space-6);align-items:flex-end}.neu-toast-container--bottom-left{top:auto;bottom:var(--neu-space-6);left:var(--neu-space-6);align-items:flex-start}}.neu-toast{display:flex;align-items:flex-start;gap:var(--neu-space-3);padding:var(--neu-space-4);background:var(--neu-toast-bg, var(--neu-surface));border-radius:var(--neu-toast-radius, 10px);box-shadow:var(--neu-toast-shadow, 0 8px 24px rgba(15, 23, 42, .12), 0 2px 6px rgba(15, 23, 42, .06));border-left:3px solid transparent;pointer-events:all;animation:neu-toast-in .25s cubic-bezier(.34,1.56,.64,1) forwards;width:100%}.neu-toast--success{border-color:var(--neu-success)}.neu-toast--success .neu-toast__icon-wrap{color:var(--neu-success)}.neu-toast--error{border-color:var(--neu-error)}.neu-toast--error .neu-toast__icon-wrap{color:var(--neu-error)}.neu-toast--warning{border-color:var(--neu-warning)}.neu-toast--warning .neu-toast__icon-wrap{color:var(--neu-warning)}.neu-toast--info{border-color:var(--neu-info)}.neu-toast--info .neu-toast__icon-wrap{color:var(--neu-info)}.neu-toast__icon-wrap{flex-shrink:0;display:flex;align-items:center;margin-top:1px}.neu-toast__body{flex:1;min-width:0}.neu-toast__title{margin:0 0 var(--neu-space-1);font-family:var(--neu-font-sans);font-size:var(--neu-text-sm);font-weight:600;color:var(--neu-text);line-height:1.3}.neu-toast__message{margin:0;font-family:var(--neu-font-sans);font-size:var(--neu-text-sm);color:var(--neu-text-muted);line-height:1.4;word-break:break-word}.neu-toast__close{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;background:transparent;border:none;border-radius:var(--neu-radius-sm);color:var(--neu-text-muted);cursor:pointer;transition:background-color var(--neu-transition),color var(--neu-transition);margin-top:-2px;margin-right:-4px}.neu-toast__close:hover{background:var(--neu-surface-2);color:var(--neu-text)}.neu-toast__close:focus-visible{outline:2px solid var(--neu-primary);outline-offset:1px}@keyframes neu-toast-in{0%{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}@media(min-width:400px){@keyframes neu-toast-in{0%{opacity:0;transform:translate(20px) scale(.96)}to{opacity:1;transform:translate(0) scale(1)}}}\n"], dependencies: [{ kind: "component", type: NeuIconComponent, selector: "neu-icon", inputs: ["name", "decorative", "ariaLabel", "strokeWidth", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: NeuToastContainerComponent, decorators: [{
             type: Component,