@neural-ui/core 1.3.2 → 1.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +14 -7
- package/calendar/package.json +4 -0
- package/fesm2022/neural-ui-core-accordion.mjs +8 -6
- package/fesm2022/neural-ui-core-accordion.mjs.map +1 -1
- package/fesm2022/neural-ui-core-autocomplete.mjs +121 -29
- package/fesm2022/neural-ui-core-autocomplete.mjs.map +1 -1
- package/fesm2022/neural-ui-core-badge.mjs +2 -2
- package/fesm2022/neural-ui-core-badge.mjs.map +1 -1
- package/fesm2022/neural-ui-core-block-ui.mjs +2 -2
- package/fesm2022/neural-ui-core-button.mjs +2 -2
- package/fesm2022/neural-ui-core-button.mjs.map +1 -1
- package/fesm2022/neural-ui-core-calendar.mjs +551 -0
- package/fesm2022/neural-ui-core-calendar.mjs.map +1 -0
- package/fesm2022/neural-ui-core-chip.mjs +2 -2
- package/fesm2022/neural-ui-core-chip.mjs.map +1 -1
- package/fesm2022/neural-ui-core-color-picker.mjs +3 -9
- package/fesm2022/neural-ui-core-color-picker.mjs.map +1 -1
- package/fesm2022/neural-ui-core-confirm-dialog.mjs +2 -2
- package/fesm2022/neural-ui-core-confirm-dialog.mjs.map +1 -1
- package/fesm2022/neural-ui-core-dashboard-grid.mjs +2 -2
- package/fesm2022/neural-ui-core-dashboard-grid.mjs.map +1 -1
- package/fesm2022/neural-ui-core-date-input.mjs +2 -2
- package/fesm2022/neural-ui-core-date-input.mjs.map +1 -1
- package/fesm2022/neural-ui-core-filter-bar.mjs +2 -2
- package/fesm2022/neural-ui-core-filter-bar.mjs.map +1 -1
- package/fesm2022/neural-ui-core-image-gallery.mjs +224 -0
- package/fesm2022/neural-ui-core-image-gallery.mjs.map +1 -0
- package/fesm2022/neural-ui-core-input.mjs +2 -2
- package/fesm2022/neural-ui-core-kanban.mjs +270 -0
- package/fesm2022/neural-ui-core-kanban.mjs.map +1 -0
- package/fesm2022/neural-ui-core-meter-group.mjs +2 -2
- package/fesm2022/neural-ui-core-modal.mjs +81 -31
- package/fesm2022/neural-ui-core-modal.mjs.map +1 -1
- package/fesm2022/neural-ui-core-multiselect.mjs +269 -99
- package/fesm2022/neural-ui-core-multiselect.mjs.map +1 -1
- package/fesm2022/neural-ui-core-nav.mjs +4 -6
- package/fesm2022/neural-ui-core-nav.mjs.map +1 -1
- package/fesm2022/neural-ui-core-number-input.mjs +2 -2
- package/fesm2022/neural-ui-core-pagination.mjs +2 -2
- package/fesm2022/neural-ui-core-pagination.mjs.map +1 -1
- package/fesm2022/neural-ui-core-progress-bar.mjs +2 -2
- package/fesm2022/neural-ui-core-scheduler-gantt.mjs +289 -0
- package/fesm2022/neural-ui-core-scheduler-gantt.mjs.map +1 -0
- package/fesm2022/neural-ui-core-select.mjs +276 -101
- package/fesm2022/neural-ui-core-select.mjs.map +1 -1
- package/fesm2022/neural-ui-core-sidebar.mjs +3 -2
- package/fesm2022/neural-ui-core-sidebar.mjs.map +1 -1
- package/fesm2022/neural-ui-core-slider.mjs +2 -2
- package/fesm2022/neural-ui-core-slider.mjs.map +1 -1
- package/fesm2022/neural-ui-core-split-button.mjs +2 -2
- package/fesm2022/neural-ui-core-split-button.mjs.map +1 -1
- package/fesm2022/neural-ui-core-stepper.mjs +2 -2
- package/fesm2022/neural-ui-core-stepper.mjs.map +1 -1
- package/fesm2022/neural-ui-core-table.mjs +435 -34
- package/fesm2022/neural-ui-core-table.mjs.map +1 -1
- package/fesm2022/neural-ui-core-tabs.mjs +11 -4
- package/fesm2022/neural-ui-core-tabs.mjs.map +1 -1
- package/fesm2022/neural-ui-core-textarea.mjs +2 -2
- package/fesm2022/neural-ui-core-timeline-grid.mjs +215 -0
- package/fesm2022/neural-ui-core-timeline-grid.mjs.map +1 -0
- package/fesm2022/neural-ui-core-toggle-button-group.mjs +2 -2
- package/fesm2022/neural-ui-core-toggle-button-group.mjs.map +1 -1
- package/fesm2022/neural-ui-core-toolbar.mjs +2 -2
- package/fesm2022/neural-ui-core-toolbar.mjs.map +1 -1
- package/fesm2022/neural-ui-core-tree-table.mjs +262 -0
- package/fesm2022/neural-ui-core-tree-table.mjs.map +1 -0
- package/fesm2022/neural-ui-core-tree.mjs +413 -0
- package/fesm2022/neural-ui-core-tree.mjs.map +1 -0
- package/fesm2022/neural-ui-core-uploader.mjs +624 -0
- package/fesm2022/neural-ui-core-uploader.mjs.map +1 -0
- package/fesm2022/neural-ui-core-url-state.mjs +90 -10
- package/fesm2022/neural-ui-core-url-state.mjs.map +1 -1
- package/fesm2022/neural-ui-core-virtual-list.mjs +53 -23
- package/fesm2022/neural-ui-core-virtual-list.mjs.map +1 -1
- package/fesm2022/neural-ui-core.mjs +3 -1
- package/fesm2022/neural-ui-core.mjs.map +1 -1
- package/image-gallery/package.json +4 -0
- package/kanban/package.json +4 -0
- package/package.json +34 -2
- package/scheduler-gantt/package.json +4 -0
- package/styles/_tokens.scss +13 -4
- package/timeline-grid/package.json +4 -0
- package/tree/package.json +4 -0
- package/tree-table/package.json +4 -0
- package/types/neural-ui-core-autocomplete.d.ts +10 -1
- package/types/neural-ui-core-calendar.d.ts +79 -0
- package/types/neural-ui-core-color-picker.d.ts +0 -1
- package/types/neural-ui-core-image-gallery.d.ts +26 -0
- package/types/neural-ui-core-kanban.d.ts +52 -0
- package/types/neural-ui-core-modal.d.ts +22 -16
- package/types/neural-ui-core-multiselect.d.ts +13 -1
- package/types/neural-ui-core-scheduler-gantt.d.ts +68 -0
- package/types/neural-ui-core-select.d.ts +14 -1
- package/types/neural-ui-core-sidebar.d.ts +1 -0
- package/types/neural-ui-core-table.d.ts +66 -4
- package/types/neural-ui-core-tabs.d.ts +1 -0
- package/types/neural-ui-core-timeline-grid.d.ts +55 -0
- package/types/neural-ui-core-tree-table.d.ts +72 -0
- package/types/neural-ui-core-tree.d.ts +52 -0
- package/types/neural-ui-core-uploader.d.ts +98 -0
- package/types/neural-ui-core-url-state.d.ts +9 -0
- package/types/neural-ui-core-virtual-list.d.ts +17 -1
- package/uploader/package.json +4 -0
package/README.md
CHANGED
|
@@ -4,8 +4,8 @@
|
|
|
4
4
|
<a href="https://www.npmjs.com/package/@neural-ui/core"><img src="https://img.shields.io/npm/v/@neural-ui/core?color=0ea5e9&label=npm" alt="npm version" /></a>
|
|
5
5
|
<a href="https://www.npmjs.com/package/@neural-ui/core"><img src="https://img.shields.io/npm/dm/@neural-ui/core?color=6366f1" alt="npm downloads" /></a>
|
|
6
6
|
<img src="https://img.shields.io/badge/Angular-19--22-dd0031?logo=angular" alt="Angular 19-22" />
|
|
7
|
-
<img src="https://img.shields.io/badge/tests-
|
|
8
|
-
<img src="https://img.shields.io/badge/coverage-96.
|
|
7
|
+
<img src="https://img.shields.io/badge/tests-1615%20passing-22c55e" alt="1615 tests passing" />
|
|
8
|
+
<img src="https://img.shields.io/badge/coverage-96.75%25-22c55e" alt="96.75% coverage" />
|
|
9
9
|
<img src="https://img.shields.io/badge/license-MIT-blue" alt="MIT license" />
|
|
10
10
|
</p>
|
|
11
11
|
|
|
@@ -23,7 +23,7 @@ Built for Angular 19–22 with OnPush change detection and no Zone.js requiremen
|
|
|
23
23
|
- **Standalone** — every component is standalone, import only what you need
|
|
24
24
|
- **OnPush everywhere** — maximum performance out of the box
|
|
25
25
|
- **Accessible by design** — ARIA attributes, keyboard navigation and focus management across the main interactive components
|
|
26
|
-
- **Well-tested** —
|
|
26
|
+
- **Well-tested** — 1615 passing tests with 96.75% statements coverage, 95.67% branch coverage and 94.98% function coverage
|
|
27
27
|
- **Themeable** — full design token system via CSS custom properties
|
|
28
28
|
|
|
29
29
|
---
|
|
@@ -110,16 +110,23 @@ export class LoginComponent {
|
|
|
110
110
|
|
|
111
111
|
## Components
|
|
112
112
|
|
|
113
|
-
Representative entry points in 1.
|
|
113
|
+
Representative entry points in 1.4.0:
|
|
114
114
|
|
|
115
|
-
- **Forms**: `@neural-ui/core/input`, `@neural-ui/core/select`, `@neural-ui/core/multiselect`, `@neural-ui/core/date-input`, `@neural-ui/core/number-input`, `@neural-ui/core/input-otp`
|
|
115
|
+
- **Forms**: `@neural-ui/core/input`, `@neural-ui/core/select`, `@neural-ui/core/multiselect`, `@neural-ui/core/autocomplete`, `@neural-ui/core/date-input`, `@neural-ui/core/number-input`, `@neural-ui/core/input-otp`
|
|
116
116
|
- **Navigation and layout**: `@neural-ui/core/tabs`, `@neural-ui/core/nav`, `@neural-ui/core/sidebar`, `@neural-ui/core/accordion`, `@neural-ui/core/toolbar`, `@neural-ui/core/dashboard-grid`
|
|
117
|
-
- **Data and overlays**: `@neural-ui/core/table`, `@neural-ui/core/popover`, `@neural-ui/core/context-menu`, `@neural-ui/core/command-palette`, `@neural-ui/core/virtual-list`, `@neural-ui/core/confirm-dialog`
|
|
117
|
+
- **Data and overlays**: `@neural-ui/core/table`, `@neural-ui/core/modal`, `@neural-ui/core/popover`, `@neural-ui/core/context-menu`, `@neural-ui/core/command-palette`, `@neural-ui/core/virtual-list`, `@neural-ui/core/confirm-dialog`
|
|
118
118
|
- **Feedback and utilities**: `@neural-ui/core/alert`, `@neural-ui/core/toast`, `@neural-ui/core/tooltip`, `@neural-ui/core/block-ui`, `@neural-ui/core/url-state`
|
|
119
|
-
- **Visualization and display**: `@neural-ui/core/chart`, `@neural-ui/core/stats-card`, `@neural-ui/core/timeline`, `@neural-ui/core/meter-group`, `@neural-ui/core/knob`
|
|
119
|
+
- **Visualization and display**: `@neural-ui/core/chart`, `@neural-ui/core/stats-card`, `@neural-ui/core/timeline`, `@neural-ui/core/timeline-grid`, `@neural-ui/core/scheduler-gantt`, `@neural-ui/core/meter-group`, `@neural-ui/core/knob`
|
|
120
120
|
|
|
121
121
|
For the complete catalog, examples, and API tables, use the live docs at [neural-ui-three.vercel.app](https://neural-ui-three.vercel.app).
|
|
122
122
|
|
|
123
|
+
### Highlights in 1.4.0
|
|
124
|
+
|
|
125
|
+
- `NeuAutocompleteComponent` supports virtual scroll for large result sets.
|
|
126
|
+
- `@neural-ui/core/modal` now includes `NeuDialogService` for programmatic dialogs.
|
|
127
|
+
- `@neural-ui/core/scheduler-gantt` adds a date-driven planning layer on top of `timeline-grid` for roadmap and delivery views.
|
|
128
|
+
- Select, multiselect, tabs, table, modal and URL-state flows were hardened with focused regression coverage.
|
|
129
|
+
|
|
123
130
|
---
|
|
124
131
|
|
|
125
132
|
## Theming
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { inject, input, output, signal, effect, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
|
|
2
|
+
import { inject, input, output, signal, effect, untracked, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
|
|
3
3
|
import { DomSanitizer } from '@angular/platform-browser';
|
|
4
4
|
|
|
5
5
|
/**
|
|
@@ -33,11 +33,13 @@ class NeuAccordionComponent {
|
|
|
33
33
|
// Inicialización única desde items.expanded (equivalente a linkedSignal source+computation)
|
|
34
34
|
effect(() => {
|
|
35
35
|
const items = this.items();
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
36
|
+
untracked(() => {
|
|
37
|
+
if (!this._expandedInit) {
|
|
38
|
+
this._expanded.set(new Set(items.filter((i) => i.expanded).map((i) => i.id)));
|
|
39
|
+
this._expandedInit = true;
|
|
40
|
+
}
|
|
41
|
+
});
|
|
42
|
+
});
|
|
41
43
|
}
|
|
42
44
|
isExpanded = (id) => this._expanded().has(id);
|
|
43
45
|
sanitize(html) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"neural-ui-core-accordion.mjs","sources":["../../../../projects/ui-core/accordion/neu-accordion.component.ts","../../../../projects/ui-core/accordion/neural-ui-core-accordion.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n ViewEncapsulation,\n effect,\n inject,\n input,\n output,\n signal,\n} from '@angular/core';\nimport { DomSanitizer, SafeHtml } from '@angular/platform-browser';\n\nexport interface NeuAccordionItem {\n /** ID único del panel / Unique panel ID */\n id: string;\n /** Título del encabezado / Header title */\n title: string;\n /** Contenido del cuerpo (HTML o texto plano) / Body content (HTML or plain text) */\n content: string;\n /** Inicia expandido / Starts expanded */\n expanded?: boolean;\n /** Deshabilita este panel / Disables this panel */\n disabled?: boolean;\n}\n\n/**\n * NeuralUI Accordion Component\n *\n * Paneles expandibles / colapsables con animación suave.\n * Soporta modo múltiple (varios abiertos a la vez) o exclusivo. / Supports multiple (several open at once) or exclusive mode.\n *\n * Uso:\n * <neu-accordion [items]=\"items\" />\n * <neu-accordion [items]=\"items\" [multiple]=\"true\" />\n */\n@Component({\n selector: 'neu-accordion',\n imports: [],\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n template: `\n <div class=\"neu-accordion\" [class.neu-accordion--bordered]=\"bordered()\">\n @for (item of items(); track item.id) {\n <div\n class=\"neu-accordion__item\"\n [class.neu-accordion__item--expanded]=\"isExpanded(item.id)\"\n [class.neu-accordion__item--disabled]=\"item.disabled\"\n >\n <button\n class=\"neu-accordion__header\"\n type=\"button\"\n [id]=\"'neu-acc-btn-' + item.id\"\n [attr.aria-expanded]=\"isExpanded(item.id)\"\n [attr.aria-controls]=\"'neu-acc-panel-' + item.id\"\n [disabled]=\"item.disabled\"\n (click)=\"toggle(item.id)\"\n >\n <span class=\"neu-accordion__title\">{{ item.title }}</span>\n <span class=\"neu-accordion__chevron\" aria-hidden=\"true\">\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n >\n <polyline points=\"6 9 12 15 18 9\" />\n </svg>\n </span>\n </button>\n <div\n class=\"neu-accordion__panel\"\n [id]=\"'neu-acc-panel-' + item.id\"\n role=\"region\"\n [attr.aria-labelledby]=\"'neu-acc-btn-' + item.id\"\n >\n <div class=\"neu-accordion__body\" [innerHTML]=\"sanitize(item.content)\"></div>\n </div>\n </div>\n }\n </div>\n `,\n styleUrl: './neu-accordion.component.scss',\n})\nexport class NeuAccordionComponent {\n private readonly _sanitizer = inject(DomSanitizer);\n\n /** Lista de paneles / Panel list */\n items = input<NeuAccordionItem[]>([]);\n\n /** Permite varios paneles abiertos a la vez / Allows multiple panels open at once */\n multiple = input<boolean>(false);\n\n /** Borde exterior alrededor del accordion / Outer border around the accordion */\n bordered = input<boolean>(true);\n\n /** Emite el id del panel al abrirse/cerrarse / Emits the panel id on open/close */\n panelToggle = output<{ id: string; expanded: boolean }>();\n\n /**\n * Set de IDs actualmente expandidos.\n * Se inicializa desde los ítems con `expanded: true` en el primer render.\n * Después se vuelve un signal mutable independiente (no se resetea al cambiar items).\n */\n private _expandedInit = false;\n private readonly _expanded = signal<Set<string>>(new Set());\n\n constructor() {\n // Inicialización única desde items.expanded (equivalente a linkedSignal source+computation)\n effect(
|
|
1
|
+
{"version":3,"file":"neural-ui-core-accordion.mjs","sources":["../../../../projects/ui-core/accordion/neu-accordion.component.ts","../../../../projects/ui-core/accordion/neural-ui-core-accordion.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n ViewEncapsulation,\n effect,\n inject,\n input,\n output,\n signal,\n untracked,\n} from '@angular/core';\nimport { DomSanitizer, SafeHtml } from '@angular/platform-browser';\n\nexport interface NeuAccordionItem {\n /** ID único del panel / Unique panel ID */\n id: string;\n /** Título del encabezado / Header title */\n title: string;\n /** Contenido del cuerpo (HTML o texto plano) / Body content (HTML or plain text) */\n content: string;\n /** Inicia expandido / Starts expanded */\n expanded?: boolean;\n /** Deshabilita este panel / Disables this panel */\n disabled?: boolean;\n}\n\n/**\n * NeuralUI Accordion Component\n *\n * Paneles expandibles / colapsables con animación suave.\n * Soporta modo múltiple (varios abiertos a la vez) o exclusivo. / Supports multiple (several open at once) or exclusive mode.\n *\n * Uso:\n * <neu-accordion [items]=\"items\" />\n * <neu-accordion [items]=\"items\" [multiple]=\"true\" />\n */\n@Component({\n selector: 'neu-accordion',\n imports: [],\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n template: `\n <div class=\"neu-accordion\" [class.neu-accordion--bordered]=\"bordered()\">\n @for (item of items(); track item.id) {\n <div\n class=\"neu-accordion__item\"\n [class.neu-accordion__item--expanded]=\"isExpanded(item.id)\"\n [class.neu-accordion__item--disabled]=\"item.disabled\"\n >\n <button\n class=\"neu-accordion__header\"\n type=\"button\"\n [id]=\"'neu-acc-btn-' + item.id\"\n [attr.aria-expanded]=\"isExpanded(item.id)\"\n [attr.aria-controls]=\"'neu-acc-panel-' + item.id\"\n [disabled]=\"item.disabled\"\n (click)=\"toggle(item.id)\"\n >\n <span class=\"neu-accordion__title\">{{ item.title }}</span>\n <span class=\"neu-accordion__chevron\" aria-hidden=\"true\">\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n >\n <polyline points=\"6 9 12 15 18 9\" />\n </svg>\n </span>\n </button>\n <div\n class=\"neu-accordion__panel\"\n [id]=\"'neu-acc-panel-' + item.id\"\n role=\"region\"\n [attr.aria-labelledby]=\"'neu-acc-btn-' + item.id\"\n >\n <div class=\"neu-accordion__body\" [innerHTML]=\"sanitize(item.content)\"></div>\n </div>\n </div>\n }\n </div>\n `,\n styleUrl: './neu-accordion.component.scss',\n})\nexport class NeuAccordionComponent {\n private readonly _sanitizer = inject(DomSanitizer);\n\n /** Lista de paneles / Panel list */\n items = input<NeuAccordionItem[]>([]);\n\n /** Permite varios paneles abiertos a la vez / Allows multiple panels open at once */\n multiple = input<boolean>(false);\n\n /** Borde exterior alrededor del accordion / Outer border around the accordion */\n bordered = input<boolean>(true);\n\n /** Emite el id del panel al abrirse/cerrarse / Emits the panel id on open/close */\n panelToggle = output<{ id: string; expanded: boolean }>();\n\n /**\n * Set de IDs actualmente expandidos.\n * Se inicializa desde los ítems con `expanded: true` en el primer render.\n * Después se vuelve un signal mutable independiente (no se resetea al cambiar items).\n */\n private _expandedInit = false;\n private readonly _expanded = signal<Set<string>>(new Set());\n\n constructor() {\n // Inicialización única desde items.expanded (equivalente a linkedSignal source+computation)\n effect(() => {\n const items = this.items();\n untracked(() => {\n if (!this._expandedInit) {\n this._expanded.set(new Set(items.filter((i) => i.expanded).map((i) => i.id)));\n this._expandedInit = true;\n }\n });\n });\n }\n\n readonly isExpanded = (id: string) => this._expanded().has(id);\n\n sanitize(html: string): SafeHtml {\n return this._sanitizer.sanitize(1 /* HTML */, html) ?? '';\n }\n\n toggle(id: string): void {\n const current = new Set(this._expanded());\n const willExpand = !current.has(id);\n\n if (!this.multiple()) {\n current.clear();\n }\n\n if (willExpand) {\n current.add(id);\n } else {\n current.delete(id);\n }\n\n this._expanded.set(current);\n this.panelToggle.emit({ id, expanded: willExpand });\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { input, output, signal, computed, inject, ElementRef, forwardRef, HostListener, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
|
|
2
|
+
import { input, output, signal, viewChild, computed, inject, ElementRef, forwardRef, HostListener, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
|
|
3
|
+
import * as i1 from '@angular/cdk/scrolling';
|
|
4
|
+
import { CdkVirtualScrollViewport, ScrollingModule } from '@angular/cdk/scrolling';
|
|
3
5
|
import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
4
6
|
|
|
5
7
|
let _seq = 0;
|
|
@@ -30,6 +32,10 @@ class NeuAutocompleteComponent {
|
|
|
30
32
|
floatingLabel = input(false, ...(ngDevMode ? [{ debugName: "floatingLabel" }] : /* istanbul ignore next */ []));
|
|
31
33
|
/** Tamaño del campo: 'sm' = 36px | 'md' = 48px | 'lg' = 56px / Field size */
|
|
32
34
|
size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
35
|
+
/** Habilita scroll virtual para listas largas / Enables virtual scrolling for large result lists */
|
|
36
|
+
virtualScroll = input(false, ...(ngDevMode ? [{ debugName: "virtualScroll" }] : /* istanbul ignore next */ []));
|
|
37
|
+
/** Número de resultados visibles en el viewport virtual / Number of visible results in the virtual viewport */
|
|
38
|
+
virtualScrollVisibleItems = input(8, ...(ngDevMode ? [{ debugName: "virtualScrollVisibleItems" }] : /* istanbul ignore next */ []));
|
|
33
39
|
/** Emitido al seleccionar una opción / Emitted when an option is selected */
|
|
34
40
|
optionSelected = output();
|
|
35
41
|
/** Emitido al cambiar el texto del input / Emitted on query change */
|
|
@@ -42,6 +48,7 @@ class NeuAutocompleteComponent {
|
|
|
42
48
|
_activeIndex = signal(-1, ...(ngDevMode ? [{ debugName: "_activeIndex" }] : /* istanbul ignore next */ []));
|
|
43
49
|
_cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_cvaDisabled" }] : /* istanbul ignore next */ []));
|
|
44
50
|
_focused = signal(false, ...(ngDevMode ? [{ debugName: "_focused" }] : /* istanbul ignore next */ []));
|
|
51
|
+
_viewport = viewChild(CdkVirtualScrollViewport, ...(ngDevMode ? [{ debugName: "_viewport" }] : /* istanbul ignore next */ []));
|
|
45
52
|
_onChange = () => { };
|
|
46
53
|
_onTouched = () => { };
|
|
47
54
|
// ── Computed ─────────────────────────────────────────────────────
|
|
@@ -80,6 +87,18 @@ class NeuAutocompleteComponent {
|
|
|
80
87
|
}
|
|
81
88
|
return total === 1 ? '1 resultado disponible' : `${total} resultados disponibles`;
|
|
82
89
|
}, ...(ngDevMode ? [{ debugName: "resultsAnnouncement" }] : /* istanbul ignore next */ []));
|
|
90
|
+
virtualScrollItemSize = computed(() => {
|
|
91
|
+
switch (this.size()) {
|
|
92
|
+
case 'sm':
|
|
93
|
+
return 36;
|
|
94
|
+
case 'lg':
|
|
95
|
+
return 52;
|
|
96
|
+
default:
|
|
97
|
+
return 40;
|
|
98
|
+
}
|
|
99
|
+
}, ...(ngDevMode ? [{ debugName: "virtualScrollItemSize" }] : /* istanbul ignore next */ []));
|
|
100
|
+
virtualViewportHeight = computed(() => `${this.virtualScrollVisibleItems() * this.virtualScrollItemSize()}px`, ...(ngDevMode ? [{ debugName: "virtualViewportHeight" }] : /* istanbul ignore next */ []));
|
|
101
|
+
trackByOption = (index, option) => option.value ?? option.label ?? index;
|
|
83
102
|
_optionId(i) {
|
|
84
103
|
return `${this._listId}-opt-${i}`;
|
|
85
104
|
}
|
|
@@ -126,10 +145,12 @@ class NeuAutocompleteComponent {
|
|
|
126
145
|
e.preventDefault();
|
|
127
146
|
this._moveActiveIndex(1);
|
|
128
147
|
this._isOpen.set(true);
|
|
148
|
+
this._scrollActiveOptionIntoView();
|
|
129
149
|
break;
|
|
130
150
|
case 'ArrowUp':
|
|
131
151
|
e.preventDefault();
|
|
132
152
|
this._moveActiveIndex(-1);
|
|
153
|
+
this._scrollActiveOptionIntoView();
|
|
133
154
|
break;
|
|
134
155
|
case 'Enter': {
|
|
135
156
|
const idx = this._activeIndex();
|
|
@@ -180,8 +201,28 @@ class NeuAutocompleteComponent {
|
|
|
180
201
|
this._query.set('');
|
|
181
202
|
this._onChange(null);
|
|
182
203
|
this._isOpen.set(false);
|
|
204
|
+
this._activeIndex.set(-1);
|
|
183
205
|
this.queryChange.emit('');
|
|
184
206
|
}
|
|
207
|
+
_scrollActiveOptionIntoView() {
|
|
208
|
+
const activeIndex = this._activeIndex();
|
|
209
|
+
if (activeIndex < 0) {
|
|
210
|
+
return;
|
|
211
|
+
}
|
|
212
|
+
if (this.virtualScroll()) {
|
|
213
|
+
requestAnimationFrame(() => {
|
|
214
|
+
this._viewport()?.scrollToIndex(activeIndex, 'auto');
|
|
215
|
+
this._viewport()?.checkViewportSize();
|
|
216
|
+
});
|
|
217
|
+
return;
|
|
218
|
+
}
|
|
219
|
+
requestAnimationFrame(() => {
|
|
220
|
+
const activeOption = this._el.nativeElement.querySelector(`#${this._optionId(activeIndex)}`);
|
|
221
|
+
if (typeof activeOption?.scrollIntoView === 'function') {
|
|
222
|
+
activeOption.scrollIntoView({ block: 'nearest' });
|
|
223
|
+
}
|
|
224
|
+
});
|
|
225
|
+
}
|
|
185
226
|
// ── CVA ──────────────────────────────────────────────────────────
|
|
186
227
|
writeValue(val) {
|
|
187
228
|
if (val === null || val === undefined) {
|
|
@@ -201,13 +242,13 @@ class NeuAutocompleteComponent {
|
|
|
201
242
|
this._cvaDisabled.set(d);
|
|
202
243
|
}
|
|
203
244
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: NeuAutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
204
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: NeuAutocompleteComponent, isStandalone: true, selector: "neu-autocomplete", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, emptyLabel: { classPropertyName: "emptyLabel", publicName: "emptyLabel", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, floatingLabel: { classPropertyName: "floatingLabel", publicName: "floatingLabel", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { optionSelected: "optionSelected", queryChange: "queryChange" }, host: { listeners: { "document:mousedown": "onDocClick($event)" }, properties: { "class.neu-autocomplete--open": "_isOpen()", "class.neu-autocomplete--disabled": "_cvaDisabled()", "class.neu-autocomplete--floating": "floatingLabel()", "class.neu-autocomplete--focused": "_focused()", "class.neu-autocomplete--has-value": "!!_query()", "class.neu-autocomplete--sm": "size() === \"sm\"", "class.neu-autocomplete--lg": "size() === \"lg\"" }, classAttribute: "neu-autocomplete" }, providers: [
|
|
245
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: NeuAutocompleteComponent, isStandalone: true, selector: "neu-autocomplete", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, emptyLabel: { classPropertyName: "emptyLabel", publicName: "emptyLabel", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, floatingLabel: { classPropertyName: "floatingLabel", publicName: "floatingLabel", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: true, isRequired: false, transformFunction: null }, virtualScrollVisibleItems: { classPropertyName: "virtualScrollVisibleItems", publicName: "virtualScrollVisibleItems", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { optionSelected: "optionSelected", queryChange: "queryChange" }, host: { listeners: { "document:mousedown": "onDocClick($event)" }, properties: { "class.neu-autocomplete--open": "_isOpen()", "class.neu-autocomplete--disabled": "_cvaDisabled()", "class.neu-autocomplete--floating": "floatingLabel()", "class.neu-autocomplete--focused": "_focused()", "class.neu-autocomplete--has-value": "!!_query()", "class.neu-autocomplete--sm": "size() === \"sm\"", "class.neu-autocomplete--lg": "size() === \"lg\"", "style.--neu-autocomplete-option-height": "virtualScrollItemSize() + \"px\"" }, classAttribute: "neu-autocomplete" }, providers: [
|
|
205
246
|
{
|
|
206
247
|
provide: NG_VALUE_ACCESSOR,
|
|
207
248
|
useExisting: forwardRef(() => NeuAutocompleteComponent),
|
|
208
249
|
multi: true,
|
|
209
250
|
},
|
|
210
|
-
], ngImport: i0, template: `
|
|
251
|
+
], viewQueries: [{ propertyName: "_viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true, isSignal: true }], ngImport: i0, template: `
|
|
211
252
|
@if (!floatingLabel() && label()) {
|
|
212
253
|
<label class="neu-autocomplete__label" [for]="_id">{{ label() }}</label>
|
|
213
254
|
}
|
|
@@ -258,14 +299,17 @@ class NeuAutocompleteComponent {
|
|
|
258
299
|
{{ resultsAnnouncement() }}
|
|
259
300
|
</div>
|
|
260
301
|
@if (_isOpen() && _filtered().length) {
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
302
|
+
@if (virtualScroll()) {
|
|
303
|
+
<cdk-virtual-scroll-viewport
|
|
304
|
+
class="neu-autocomplete__list neu-autocomplete__list--virtual"
|
|
305
|
+
role="listbox"
|
|
306
|
+
[id]="_listId"
|
|
307
|
+
[attr.aria-label]="label() || placeholder()"
|
|
308
|
+
[itemSize]="virtualScrollItemSize()"
|
|
309
|
+
[style.height]="virtualViewportHeight()"
|
|
310
|
+
>
|
|
311
|
+
<div
|
|
312
|
+
*cdkVirtualFor="let opt of _filtered(); trackBy: trackByOption; let i = index"
|
|
269
313
|
class="neu-autocomplete__option"
|
|
270
314
|
role="option"
|
|
271
315
|
[id]="_optionId(i)"
|
|
@@ -276,9 +320,31 @@ class NeuAutocompleteComponent {
|
|
|
276
320
|
(mousedown)="selectOption(opt)"
|
|
277
321
|
>
|
|
278
322
|
{{ opt.label }}
|
|
279
|
-
</
|
|
280
|
-
|
|
281
|
-
|
|
323
|
+
</div>
|
|
324
|
+
</cdk-virtual-scroll-viewport>
|
|
325
|
+
} @else {
|
|
326
|
+
<ul
|
|
327
|
+
class="neu-autocomplete__list"
|
|
328
|
+
role="listbox"
|
|
329
|
+
[id]="_listId"
|
|
330
|
+
[attr.aria-label]="label() || placeholder()"
|
|
331
|
+
>
|
|
332
|
+
@for (opt of _filtered(); track opt.label; let i = $index) {
|
|
333
|
+
<li
|
|
334
|
+
class="neu-autocomplete__option"
|
|
335
|
+
role="option"
|
|
336
|
+
[id]="_optionId(i)"
|
|
337
|
+
[class.neu-autocomplete__option--active]="_activeIndex() === i"
|
|
338
|
+
[class.neu-autocomplete__option--disabled]="opt.disabled"
|
|
339
|
+
[attr.aria-selected]="_activeIndex() === i"
|
|
340
|
+
[attr.aria-disabled]="opt.disabled ?? false"
|
|
341
|
+
(mousedown)="selectOption(opt)"
|
|
342
|
+
>
|
|
343
|
+
{{ opt.label }}
|
|
344
|
+
</li>
|
|
345
|
+
}
|
|
346
|
+
</ul>
|
|
347
|
+
}
|
|
282
348
|
}
|
|
283
349
|
@if (_isOpen() && !_filtered().length) {
|
|
284
350
|
<div class="neu-autocomplete__empty" role="status">{{ emptyLabel() }}</div>
|
|
@@ -290,11 +356,11 @@ class NeuAutocompleteComponent {
|
|
|
290
356
|
} @else if (hint()) {
|
|
291
357
|
<p class="neu-autocomplete__hint" [id]="_id + '-hint'">{{ hint() }}</p>
|
|
292
358
|
}
|
|
293
|
-
`, isInline: true, styles: ["@charset \"UTF-8\";.neu-autocomplete{position:relative;display:block}.neu-autocomplete--disabled{opacity:.55;pointer-events:none}.neu-autocomplete__label{display:block;margin-bottom:6px;font-size:var(--neu-text-sm, .875rem);font-weight:500;color:var(--neu-text, #0f172a);line-height:1.4}.neu-autocomplete__input-wrap{position:relative;display:flex;align-items:center}.neu-autocomplete__input{width:100%;height:48px;padding:0 36px 0 12px;border:1.5px solid var(--neu-border, #d1d5db);border-radius:var(--neu-radius, 8px);background:var(--neu-surface, #ffffff);color:var(--neu-text, #111);font-size:.875rem;line-height:1.4;outline:none;transition:border-color var(--neu-transition, .12s),box-shadow var(--neu-transition, .12s),background-color var(--neu-transition, .12s)}.neu-autocomplete__input:hover{border-color:var(--neu-border-hover, var(--neu-border, #d1d5db))}.neu-autocomplete__input:focus,.neu-autocomplete__input:focus-visible{border-color:var(--neu-primary, #0ea5e9);box-shadow:var(--neu-focus-ring, 0 0 0 3px rgba(14, 165, 233, .2))}.neu-autocomplete__input[disabled]{background:var(--neu-surface-2, #f3f4f6);color:var(--neu-text-disabled, #9ca3af)}.neu-autocomplete--floating .neu-autocomplete__input::placeholder{color:transparent;transition:color var(--neu-transition)}.neu-
|
|
359
|
+
`, isInline: true, styles: ["@charset \"UTF-8\";.neu-autocomplete{position:relative;display:block}.neu-autocomplete--disabled{opacity:.55;pointer-events:none}.neu-autocomplete--sm .neu-autocomplete__input{height:36px;font-size:var(--neu-text-sm, .875rem)}.neu-autocomplete--lg .neu-autocomplete__input{height:56px}.neu-autocomplete--floating.neu-autocomplete--focused .neu-autocomplete__input::placeholder{color:var(--neu-text-disabled, #9ca3af)}.neu-autocomplete--floating.neu-autocomplete--focused .neu-autocomplete__input{border-color:var(--neu-primary, #0ea5e9);box-shadow:var(--neu-focus-ring, 0 0 0 3px rgba(14, 165, 233, .2))}.neu-autocomplete__label{display:block;margin-bottom:6px;font-size:var(--neu-text-sm, .875rem);font-weight:500;color:var(--neu-text, #0f172a);line-height:1.4}.neu-autocomplete__input-wrap{position:relative;display:flex;align-items:center}.neu-autocomplete__input{width:100%;height:48px;padding:0 36px 0 12px;border:1.5px solid var(--neu-border, #d1d5db);border-radius:var(--neu-radius, 8px);background:var(--neu-surface, #ffffff);color:var(--neu-text, #111);font-size:.875rem;line-height:1.4;outline:none;transition:border-color var(--neu-transition, .12s),box-shadow var(--neu-transition, .12s),background-color var(--neu-transition, .12s)}.neu-autocomplete__input:hover{border-color:var(--neu-border-hover, var(--neu-border, #d1d5db))}.neu-autocomplete__input:focus,.neu-autocomplete__input:focus-visible{border-color:var(--neu-primary, #0ea5e9);box-shadow:var(--neu-focus-ring, 0 0 0 3px rgba(14, 165, 233, .2))}.neu-autocomplete__input[disabled]{background:var(--neu-surface-2, #f3f4f6);color:var(--neu-text-disabled, #9ca3af)}.neu-autocomplete--floating .neu-autocomplete__input::placeholder{color:transparent;transition:color var(--neu-transition)}.neu-autocomplete__floating-label{position:absolute;left:var(--neu-space-3, 12px);top:50%;transform:translateY(-50%);font-size:var(--neu-text-base, .875rem);color:var(--neu-text-muted, #6b7280);pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - var(--neu-space-6, 24px));transition:top var(--neu-transition, .12s),font-size var(--neu-transition, .12s),color var(--neu-transition, .12s),transform var(--neu-transition, .12s),padding var(--neu-transition, .12s),background var(--neu-transition, .12s)}.neu-autocomplete--focused .neu-autocomplete__floating-label,.neu-autocomplete--has-value .neu-autocomplete__floating-label{top:0;transform:translateY(-50%);font-size:12px;font-weight:600;letter-spacing:.01em;background:var(--neu-surface, #fff);padding:0 4px;left:calc(var(--neu-space-3, 12px) - 4px)}.neu-autocomplete--focused .neu-autocomplete__floating-label{color:var(--neu-primary, #0ea5e9)}.neu-autocomplete__clear{all:unset;position:absolute;right:10px;display:flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;font-size:.875rem;color:var(--neu-text-muted, #6b7280);cursor:pointer}.neu-autocomplete__clear:hover{color:var(--neu-text, #111);background:var(--neu-surface-3, #e5e7eb)}.neu-autocomplete__clear:focus-visible{outline:2px solid var(--neu-primary, #0ea5e9);outline-offset:2px}.neu-autocomplete__list{all:unset;display:block;position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--neu-surface, #ffffff);border:1.5px solid var(--neu-border, #e5e7eb);border-radius:var(--neu-radius-lg, 12px);box-shadow:var(--neu-shadow-lg, 0 8px 20px -4px rgba(0, 0, 0, .1));max-height:240px;overflow-y:auto;padding:6px;z-index:1000;animation:neu-ac-in 80ms ease}.neu-autocomplete__list--virtual{padding:0;overflow:hidden}@keyframes neu-ac-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.neu-autocomplete__option{display:flex;align-items:center;padding:7px 10px;min-height:var(--neu-autocomplete-option-height, 40px);box-sizing:border-box;border-radius:var(--neu-radius-md, 8px);font-size:.875rem;color:var(--neu-text, #111);cursor:pointer}.neu-autocomplete__option:hover:not(.neu-autocomplete__option--disabled){background:var(--neu-surface-2, #f3f4f6)}.neu-autocomplete__option--active{background:var(--neu-primary-50, rgba(14, 165, 233, .12));color:var(--neu-primary, #0ea5e9);font-weight:500}.neu-autocomplete__option--disabled{opacity:.4;cursor:not-allowed}.neu-autocomplete__empty{position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--neu-surface, #ffffff);border:1.5px solid var(--neu-border, #e5e7eb);border-radius:var(--neu-radius-lg, 12px);padding:12px 16px;font-size:.875rem;color:var(--neu-text-muted, #6b7280);text-align:center}.neu-autocomplete__hint,.neu-autocomplete__error{margin:6px 0 0;font-size:var(--neu-text-sm, .875rem);line-height:1.4}.neu-autocomplete__hint{color:var(--neu-text-muted, #6b7280)}.neu-autocomplete__error{color:var(--neu-danger, #dc2626)}.neu-autocomplete__sr-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
294
360
|
}
|
|
295
361
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: NeuAutocompleteComponent, decorators: [{
|
|
296
362
|
type: Component,
|
|
297
|
-
args: [{ selector: 'neu-autocomplete', imports: [], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
363
|
+
args: [{ selector: 'neu-autocomplete', imports: [ScrollingModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
298
364
|
{
|
|
299
365
|
provide: NG_VALUE_ACCESSOR,
|
|
300
366
|
useExisting: forwardRef(() => NeuAutocompleteComponent),
|
|
@@ -309,6 +375,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
|
|
|
309
375
|
'[class.neu-autocomplete--has-value]': '!!_query()',
|
|
310
376
|
'[class.neu-autocomplete--sm]': 'size() === "sm"',
|
|
311
377
|
'[class.neu-autocomplete--lg]': 'size() === "lg"',
|
|
378
|
+
'[style.--neu-autocomplete-option-height]': 'virtualScrollItemSize() + "px"',
|
|
312
379
|
}, template: `
|
|
313
380
|
@if (!floatingLabel() && label()) {
|
|
314
381
|
<label class="neu-autocomplete__label" [for]="_id">{{ label() }}</label>
|
|
@@ -360,14 +427,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
|
|
|
360
427
|
{{ resultsAnnouncement() }}
|
|
361
428
|
</div>
|
|
362
429
|
@if (_isOpen() && _filtered().length) {
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
430
|
+
@if (virtualScroll()) {
|
|
431
|
+
<cdk-virtual-scroll-viewport
|
|
432
|
+
class="neu-autocomplete__list neu-autocomplete__list--virtual"
|
|
433
|
+
role="listbox"
|
|
434
|
+
[id]="_listId"
|
|
435
|
+
[attr.aria-label]="label() || placeholder()"
|
|
436
|
+
[itemSize]="virtualScrollItemSize()"
|
|
437
|
+
[style.height]="virtualViewportHeight()"
|
|
438
|
+
>
|
|
439
|
+
<div
|
|
440
|
+
*cdkVirtualFor="let opt of _filtered(); trackBy: trackByOption; let i = index"
|
|
371
441
|
class="neu-autocomplete__option"
|
|
372
442
|
role="option"
|
|
373
443
|
[id]="_optionId(i)"
|
|
@@ -378,9 +448,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
|
|
|
378
448
|
(mousedown)="selectOption(opt)"
|
|
379
449
|
>
|
|
380
450
|
{{ opt.label }}
|
|
381
|
-
</
|
|
382
|
-
|
|
383
|
-
|
|
451
|
+
</div>
|
|
452
|
+
</cdk-virtual-scroll-viewport>
|
|
453
|
+
} @else {
|
|
454
|
+
<ul
|
|
455
|
+
class="neu-autocomplete__list"
|
|
456
|
+
role="listbox"
|
|
457
|
+
[id]="_listId"
|
|
458
|
+
[attr.aria-label]="label() || placeholder()"
|
|
459
|
+
>
|
|
460
|
+
@for (opt of _filtered(); track opt.label; let i = $index) {
|
|
461
|
+
<li
|
|
462
|
+
class="neu-autocomplete__option"
|
|
463
|
+
role="option"
|
|
464
|
+
[id]="_optionId(i)"
|
|
465
|
+
[class.neu-autocomplete__option--active]="_activeIndex() === i"
|
|
466
|
+
[class.neu-autocomplete__option--disabled]="opt.disabled"
|
|
467
|
+
[attr.aria-selected]="_activeIndex() === i"
|
|
468
|
+
[attr.aria-disabled]="opt.disabled ?? false"
|
|
469
|
+
(mousedown)="selectOption(opt)"
|
|
470
|
+
>
|
|
471
|
+
{{ opt.label }}
|
|
472
|
+
</li>
|
|
473
|
+
}
|
|
474
|
+
</ul>
|
|
475
|
+
}
|
|
384
476
|
}
|
|
385
477
|
@if (_isOpen() && !_filtered().length) {
|
|
386
478
|
<div class="neu-autocomplete__empty" role="status">{{ emptyLabel() }}</div>
|
|
@@ -392,8 +484,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
|
|
|
392
484
|
} @else if (hint()) {
|
|
393
485
|
<p class="neu-autocomplete__hint" [id]="_id + '-hint'">{{ hint() }}</p>
|
|
394
486
|
}
|
|
395
|
-
`, styles: ["@charset \"UTF-8\";.neu-autocomplete{position:relative;display:block}.neu-autocomplete--disabled{opacity:.55;pointer-events:none}.neu-autocomplete__label{display:block;margin-bottom:6px;font-size:var(--neu-text-sm, .875rem);font-weight:500;color:var(--neu-text, #0f172a);line-height:1.4}.neu-autocomplete__input-wrap{position:relative;display:flex;align-items:center}.neu-autocomplete__input{width:100%;height:48px;padding:0 36px 0 12px;border:1.5px solid var(--neu-border, #d1d5db);border-radius:var(--neu-radius, 8px);background:var(--neu-surface, #ffffff);color:var(--neu-text, #111);font-size:.875rem;line-height:1.4;outline:none;transition:border-color var(--neu-transition, .12s),box-shadow var(--neu-transition, .12s),background-color var(--neu-transition, .12s)}.neu-autocomplete__input:hover{border-color:var(--neu-border-hover, var(--neu-border, #d1d5db))}.neu-autocomplete__input:focus,.neu-autocomplete__input:focus-visible{border-color:var(--neu-primary, #0ea5e9);box-shadow:var(--neu-focus-ring, 0 0 0 3px rgba(14, 165, 233, .2))}.neu-autocomplete__input[disabled]{background:var(--neu-surface-2, #f3f4f6);color:var(--neu-text-disabled, #9ca3af)}.neu-autocomplete--floating .neu-autocomplete__input::placeholder{color:transparent;transition:color var(--neu-transition)}.neu-
|
|
396
|
-
}], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], emptyLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyLabel", required: false }] }], minLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minLength", required: false }] }], floatingLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "floatingLabel", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], optionSelected: [{ type: i0.Output, args: ["optionSelected"] }], queryChange: [{ type: i0.Output, args: ["queryChange"] }], onDocClick: [{
|
|
487
|
+
`, styles: ["@charset \"UTF-8\";.neu-autocomplete{position:relative;display:block}.neu-autocomplete--disabled{opacity:.55;pointer-events:none}.neu-autocomplete--sm .neu-autocomplete__input{height:36px;font-size:var(--neu-text-sm, .875rem)}.neu-autocomplete--lg .neu-autocomplete__input{height:56px}.neu-autocomplete--floating.neu-autocomplete--focused .neu-autocomplete__input::placeholder{color:var(--neu-text-disabled, #9ca3af)}.neu-autocomplete--floating.neu-autocomplete--focused .neu-autocomplete__input{border-color:var(--neu-primary, #0ea5e9);box-shadow:var(--neu-focus-ring, 0 0 0 3px rgba(14, 165, 233, .2))}.neu-autocomplete__label{display:block;margin-bottom:6px;font-size:var(--neu-text-sm, .875rem);font-weight:500;color:var(--neu-text, #0f172a);line-height:1.4}.neu-autocomplete__input-wrap{position:relative;display:flex;align-items:center}.neu-autocomplete__input{width:100%;height:48px;padding:0 36px 0 12px;border:1.5px solid var(--neu-border, #d1d5db);border-radius:var(--neu-radius, 8px);background:var(--neu-surface, #ffffff);color:var(--neu-text, #111);font-size:.875rem;line-height:1.4;outline:none;transition:border-color var(--neu-transition, .12s),box-shadow var(--neu-transition, .12s),background-color var(--neu-transition, .12s)}.neu-autocomplete__input:hover{border-color:var(--neu-border-hover, var(--neu-border, #d1d5db))}.neu-autocomplete__input:focus,.neu-autocomplete__input:focus-visible{border-color:var(--neu-primary, #0ea5e9);box-shadow:var(--neu-focus-ring, 0 0 0 3px rgba(14, 165, 233, .2))}.neu-autocomplete__input[disabled]{background:var(--neu-surface-2, #f3f4f6);color:var(--neu-text-disabled, #9ca3af)}.neu-autocomplete--floating .neu-autocomplete__input::placeholder{color:transparent;transition:color var(--neu-transition)}.neu-autocomplete__floating-label{position:absolute;left:var(--neu-space-3, 12px);top:50%;transform:translateY(-50%);font-size:var(--neu-text-base, .875rem);color:var(--neu-text-muted, #6b7280);pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - var(--neu-space-6, 24px));transition:top var(--neu-transition, .12s),font-size var(--neu-transition, .12s),color var(--neu-transition, .12s),transform var(--neu-transition, .12s),padding var(--neu-transition, .12s),background var(--neu-transition, .12s)}.neu-autocomplete--focused .neu-autocomplete__floating-label,.neu-autocomplete--has-value .neu-autocomplete__floating-label{top:0;transform:translateY(-50%);font-size:12px;font-weight:600;letter-spacing:.01em;background:var(--neu-surface, #fff);padding:0 4px;left:calc(var(--neu-space-3, 12px) - 4px)}.neu-autocomplete--focused .neu-autocomplete__floating-label{color:var(--neu-primary, #0ea5e9)}.neu-autocomplete__clear{all:unset;position:absolute;right:10px;display:flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;font-size:.875rem;color:var(--neu-text-muted, #6b7280);cursor:pointer}.neu-autocomplete__clear:hover{color:var(--neu-text, #111);background:var(--neu-surface-3, #e5e7eb)}.neu-autocomplete__clear:focus-visible{outline:2px solid var(--neu-primary, #0ea5e9);outline-offset:2px}.neu-autocomplete__list{all:unset;display:block;position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--neu-surface, #ffffff);border:1.5px solid var(--neu-border, #e5e7eb);border-radius:var(--neu-radius-lg, 12px);box-shadow:var(--neu-shadow-lg, 0 8px 20px -4px rgba(0, 0, 0, .1));max-height:240px;overflow-y:auto;padding:6px;z-index:1000;animation:neu-ac-in 80ms ease}.neu-autocomplete__list--virtual{padding:0;overflow:hidden}@keyframes neu-ac-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.neu-autocomplete__option{display:flex;align-items:center;padding:7px 10px;min-height:var(--neu-autocomplete-option-height, 40px);box-sizing:border-box;border-radius:var(--neu-radius-md, 8px);font-size:.875rem;color:var(--neu-text, #111);cursor:pointer}.neu-autocomplete__option:hover:not(.neu-autocomplete__option--disabled){background:var(--neu-surface-2, #f3f4f6)}.neu-autocomplete__option--active{background:var(--neu-primary-50, rgba(14, 165, 233, .12));color:var(--neu-primary, #0ea5e9);font-weight:500}.neu-autocomplete__option--disabled{opacity:.4;cursor:not-allowed}.neu-autocomplete__empty{position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--neu-surface, #ffffff);border:1.5px solid var(--neu-border, #e5e7eb);border-radius:var(--neu-radius-lg, 12px);padding:12px 16px;font-size:.875rem;color:var(--neu-text-muted, #6b7280);text-align:center}.neu-autocomplete__hint,.neu-autocomplete__error{margin:6px 0 0;font-size:var(--neu-text-sm, .875rem);line-height:1.4}.neu-autocomplete__hint{color:var(--neu-text-muted, #6b7280)}.neu-autocomplete__error{color:var(--neu-danger, #dc2626)}.neu-autocomplete__sr-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"] }]
|
|
488
|
+
}], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], emptyLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyLabel", required: false }] }], minLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minLength", required: false }] }], floatingLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "floatingLabel", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], virtualScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScroll", required: false }] }], virtualScrollVisibleItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScrollVisibleItems", required: false }] }], optionSelected: [{ type: i0.Output, args: ["optionSelected"] }], queryChange: [{ type: i0.Output, args: ["queryChange"] }], _viewport: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkVirtualScrollViewport), { isSignal: true }] }], onDocClick: [{
|
|
397
489
|
type: HostListener,
|
|
398
490
|
args: ['document:mousedown', ['$event']]
|
|
399
491
|
}] } });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"neural-ui-core-autocomplete.mjs","sources":["../../../../projects/ui-core/autocomplete/neu-autocomplete.component.ts","../../../../projects/ui-core/autocomplete/neural-ui-core-autocomplete.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n HostListener,\n ViewEncapsulation,\n computed,\n forwardRef,\n inject,\n input,\n output,\n signal,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n\nexport interface NeuAutocompleteOption {\n /** Valor / Value */\n value: unknown;\n /** Texto visible / Display text */\n label: string;\n /** Desactiva la opción / Disables the option */\n disabled?: boolean;\n}\n\nlet _seq = 0;\n\n/**\n * NeuralUI Autocomplete\n *\n * Input con lista de sugerencias filtradas y navegación por teclado.\n * Implementa CVA para uso en formularios reactivos.\n *\n * Uso:\n * <neu-autocomplete\n * [options]=\"opts\"\n * placeholder=\"Buscar…\"\n * [formControl]=\"selectedCtrl\"\n * (optionSelected)=\"onSelect($event)\"\n * />\n */\n@Component({\n selector: 'neu-autocomplete',\n imports: [],\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => NeuAutocompleteComponent),\n multi: true,\n },\n ],\n host: {\n class: 'neu-autocomplete',\n '[class.neu-autocomplete--open]': '_isOpen()',\n '[class.neu-autocomplete--disabled]': '_cvaDisabled()',\n '[class.neu-autocomplete--floating]': 'floatingLabel()',\n '[class.neu-autocomplete--focused]': '_focused()',\n '[class.neu-autocomplete--has-value]': '!!_query()',\n '[class.neu-autocomplete--sm]': 'size() === \"sm\"',\n '[class.neu-autocomplete--lg]': 'size() === \"lg\"',\n },\n template: `\n @if (!floatingLabel() && label()) {\n <label class=\"neu-autocomplete__label\" [for]=\"_id\">{{ label() }}</label>\n }\n <div\n class=\"neu-autocomplete__input-wrap\"\n [class.neu-autocomplete__input-wrap--focused]=\"_focused()\"\n [class.neu-autocomplete__input-wrap--has-value]=\"!!_query()\"\n >\n <input\n #inputEl\n class=\"neu-autocomplete__input\"\n type=\"text\"\n autocomplete=\"off\"\n role=\"combobox\"\n [id]=\"_id\"\n [attr.placeholder]=\"floatingLabel() ? ' ' : placeholder() || null\"\n [attr.aria-label]=\"label() || placeholder()\"\n [attr.aria-autocomplete]=\"'list'\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-expanded]=\"_isOpen() ? 'true' : 'false'\"\n [attr.aria-controls]=\"_listId\"\n [attr.aria-activedescendant]=\"_activeId()\"\n [attr.aria-invalid]=\"hasError() ? 'true' : null\"\n [attr.aria-describedby]=\"describedBy()\"\n [disabled]=\"_cvaDisabled()\"\n [value]=\"_query()\"\n (input)=\"onQueryChange($any($event.target).value)\"\n (focus)=\"_onFocus()\"\n (blur)=\"_onBlur()\"\n (keydown)=\"onKeyDown($event)\"\n />\n @if (floatingLabel() && label()) {\n <label class=\"neu-autocomplete__floating-label\" [for]=\"_id\">{{ label() }}</label>\n }\n @if (_query() && !_cvaDisabled()) {\n <button\n type=\"button\"\n class=\"neu-autocomplete__clear\"\n aria-label=\"Limpiar\"\n tabindex=\"-1\"\n (click)=\"clear()\"\n >\n ×\n </button>\n }\n </div>\n <div class=\"neu-autocomplete__sr-status\" aria-live=\"polite\" aria-atomic=\"true\">\n {{ resultsAnnouncement() }}\n </div>\n @if (_isOpen() && _filtered().length) {\n <ul\n class=\"neu-autocomplete__list\"\n role=\"listbox\"\n [id]=\"_listId\"\n [attr.aria-label]=\"label() || placeholder()\"\n >\n @for (opt of _filtered(); track opt.label; let i = $index) {\n <li\n class=\"neu-autocomplete__option\"\n role=\"option\"\n [id]=\"_optionId(i)\"\n [class.neu-autocomplete__option--active]=\"_activeIndex() === i\"\n [class.neu-autocomplete__option--disabled]=\"opt.disabled\"\n [attr.aria-selected]=\"_activeIndex() === i\"\n [attr.aria-disabled]=\"opt.disabled ?? false\"\n (mousedown)=\"selectOption(opt)\"\n >\n {{ opt.label }}\n </li>\n }\n </ul>\n }\n @if (_isOpen() && !_filtered().length) {\n <div class=\"neu-autocomplete__empty\" role=\"status\">{{ emptyLabel() }}</div>\n }\n @if (hasError()) {\n <p class=\"neu-autocomplete__error\" [id]=\"_id + '-error'\" role=\"alert\">\n {{ errorMessage() }}\n </p>\n } @else if (hint()) {\n <p class=\"neu-autocomplete__hint\" [id]=\"_id + '-hint'\">{{ hint() }}</p>\n }\n `,\n styleUrl: './neu-autocomplete.component.scss',\n})\nexport class NeuAutocompleteComponent implements ControlValueAccessor {\n // ── Inputs / Outputs ────────────────────────────────────────────\n readonly options = input<NeuAutocompleteOption[]>([]);\n readonly placeholder = input<string>('');\n readonly label = input<string>('');\n readonly hint = input<string>('');\n readonly errorMessage = input<string>('');\n readonly emptyLabel = input<string>('Sin resultados');\n readonly minLength = input<number>(0);\n /** Muestra el label como flotante (true) o estático encima del campo (false) / Shows the label as floating (true) or static above the field (false) */\n readonly floatingLabel = input<boolean>(false);\n /** Tamaño del campo: 'sm' = 36px | 'md' = 48px | 'lg' = 56px / Field size */\n readonly size = input<'sm' | 'md' | 'lg'>('md');\n\n /** Emitido al seleccionar una opción / Emitted when an option is selected */\n readonly optionSelected = output<NeuAutocompleteOption>();\n\n /** Emitido al cambiar el texto del input / Emitted on query change */\n readonly queryChange = output<string>();\n\n // ── Internal state ───────────────────────────────────────────────\n readonly _id = `neu-autocomplete-${++_seq}`;\n readonly _listId = `${this._id}-list`;\n\n readonly _query = signal('');\n readonly _isOpen = signal(false);\n readonly _activeIndex = signal(-1);\n readonly _cvaDisabled = signal(false);\n readonly _focused = signal(false);\n\n private _onChange: (v: unknown) => void = () => {};\n private _onTouched: () => void = () => {};\n\n // ── Computed ─────────────────────────────────────────────────────\n readonly _filtered = computed(() => {\n const q = this._query().toLowerCase().trim();\n // Con query vacía nunca mostramos opciones (no queremos comportarnos como un select).\n // Empty query → never show options (autocomplete ≠ select).\n if (!q) return [];\n if (q.length < this.minLength()) return [];\n return this.options().filter((o) => o.label.toLowerCase().includes(q));\n });\n\n readonly _activeId = computed(() => {\n const i = this._activeIndex();\n return i >= 0 ? this._optionId(i) : null;\n });\n\n readonly hasError = computed(() => !!this.errorMessage());\n\n readonly describedBy = computed(() => {\n if (this.hasError()) {\n return `${this._id}-error`;\n }\n if (this.hint()) {\n return `${this._id}-hint`;\n }\n return null;\n });\n\n readonly resultsAnnouncement = computed(() => {\n const query = this._query().trim();\n if (!query || !this._isOpen()) {\n return '';\n }\n\n const total = this._filtered().length;\n if (!total) {\n return this.emptyLabel();\n }\n\n return total === 1 ? '1 resultado disponible' : `${total} resultados disponibles`;\n });\n\n _optionId(i: number): string {\n return `${this._listId}-opt-${i}`;\n }\n\n // ── HostListener close on outside click ─────────────────────────\n private readonly _el = inject(ElementRef<HTMLElement>);\n\n @HostListener('document:mousedown', ['$event'])\n onDocClick(e: MouseEvent): void {\n if (!this._el.nativeElement.contains(e.target as Node)) {\n this._isOpen.set(false);\n }\n }\n\n // ── Event handlers ───────────────────────────────────────────────\n onQueryChange(q: string): void {\n this._query.set(q);\n this._activeIndex.set(-1);\n // Sólo abrimos si hay texto suficiente; si no, cerramos.\n // Only open when there is enough text; otherwise close.\n const minLen = Math.max(1, this.minLength());\n this._isOpen.set(q.trim().length >= minLen);\n this.queryChange.emit(q);\n // CVA — emit null when query is cleared\n if (!q) {\n this._onChange(null);\n }\n }\n\n _onFocus(): void {\n this._focused.set(true);\n // Abre el dropdown solo si ya hay texto escrito / Only open when there is already a query.\n if (this._query().trim().length >= Math.max(1, this.minLength())) {\n this._isOpen.set(true);\n }\n }\n\n _onBlur(): void {\n this._focused.set(false);\n this._onTouched();\n // Small delay to allow mousedown on option to fire first\n setTimeout(() => this._isOpen.set(false), 150);\n }\n\n onKeyDown(e: KeyboardEvent): void {\n const total = this._filtered().length;\n if (!total && e.key !== 'Escape') return;\n switch (e.key) {\n case 'ArrowDown':\n e.preventDefault();\n this._moveActiveIndex(1);\n this._isOpen.set(true);\n break;\n case 'ArrowUp':\n e.preventDefault();\n this._moveActiveIndex(-1);\n break;\n case 'Enter': {\n const idx = this._activeIndex();\n const opt = this._filtered()[idx];\n if (opt && !opt.disabled) this.selectOption(opt);\n break;\n }\n case 'Escape':\n this._isOpen.set(false);\n this._activeIndex.set(-1);\n break;\n }\n }\n\n private _moveActiveIndex(step: 1 | -1): void {\n const filtered = this._filtered();\n if (!filtered.length) {\n this._activeIndex.set(-1);\n return;\n }\n\n const currentIndex = this._activeIndex();\n let nextIndex = currentIndex;\n\n for (let count = 0; count < filtered.length; count += 1) {\n nextIndex =\n step === 1 ? Math.min(nextIndex + 1, filtered.length - 1) : Math.max(nextIndex - 1, 0);\n\n if (!filtered[nextIndex]?.disabled) {\n this._activeIndex.set(nextIndex);\n return;\n }\n\n if ((step === 1 && nextIndex === filtered.length - 1) || (step === -1 && nextIndex === 0)) {\n break;\n }\n }\n\n if (currentIndex === -1) {\n this._activeIndex.set(filtered.findIndex((option) => !option.disabled));\n }\n }\n\n selectOption(opt: NeuAutocompleteOption): void {\n if (opt.disabled) return;\n this._query.set(opt.label);\n this._isOpen.set(false);\n this._activeIndex.set(-1);\n this._onChange(opt.value);\n this.optionSelected.emit(opt);\n }\n\n clear(): void {\n this._query.set('');\n this._onChange(null);\n this._isOpen.set(false);\n this.queryChange.emit('');\n }\n\n // ── CVA ──────────────────────────────────────────────────────────\n writeValue(val: unknown): void {\n if (val === null || val === undefined) {\n this._query.set('');\n return;\n }\n const match = this.options().find((o) => o.value === val);\n this._query.set(match ? match.label : String(val));\n }\n\n registerOnChange(fn: (v: unknown) => void): void {\n this._onChange = fn;\n }\n\n registerOnTouched(fn: () => void): void {\n this._onTouched = fn;\n }\n\n setDisabledState(d: boolean): void {\n this._cvaDisabled.set(d);\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"neural-ui-core-autocomplete.mjs","sources":["../../../../projects/ui-core/autocomplete/neu-autocomplete.component.ts","../../../../projects/ui-core/autocomplete/neural-ui-core-autocomplete.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n HostListener,\n ViewEncapsulation,\n computed,\n forwardRef,\n inject,\n input,\n output,\n signal,\n viewChild,\n} from '@angular/core';\nimport { CdkVirtualScrollViewport, ScrollingModule } from '@angular/cdk/scrolling';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n\nexport interface NeuAutocompleteOption {\n /** Valor / Value */\n value: unknown;\n /** Texto visible / Display text */\n label: string;\n /** Desactiva la opción / Disables the option */\n disabled?: boolean;\n}\n\nlet _seq = 0;\n\n/**\n * NeuralUI Autocomplete\n *\n * Input con lista de sugerencias filtradas y navegación por teclado.\n * Implementa CVA para uso en formularios reactivos.\n *\n * Uso:\n * <neu-autocomplete\n * [options]=\"opts\"\n * placeholder=\"Buscar…\"\n * [formControl]=\"selectedCtrl\"\n * (optionSelected)=\"onSelect($event)\"\n * />\n */\n@Component({\n selector: 'neu-autocomplete',\n imports: [ScrollingModule],\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => NeuAutocompleteComponent),\n multi: true,\n },\n ],\n host: {\n class: 'neu-autocomplete',\n '[class.neu-autocomplete--open]': '_isOpen()',\n '[class.neu-autocomplete--disabled]': '_cvaDisabled()',\n '[class.neu-autocomplete--floating]': 'floatingLabel()',\n '[class.neu-autocomplete--focused]': '_focused()',\n '[class.neu-autocomplete--has-value]': '!!_query()',\n '[class.neu-autocomplete--sm]': 'size() === \"sm\"',\n '[class.neu-autocomplete--lg]': 'size() === \"lg\"',\n '[style.--neu-autocomplete-option-height]': 'virtualScrollItemSize() + \"px\"',\n },\n template: `\n @if (!floatingLabel() && label()) {\n <label class=\"neu-autocomplete__label\" [for]=\"_id\">{{ label() }}</label>\n }\n <div\n class=\"neu-autocomplete__input-wrap\"\n [class.neu-autocomplete__input-wrap--focused]=\"_focused()\"\n [class.neu-autocomplete__input-wrap--has-value]=\"!!_query()\"\n >\n <input\n #inputEl\n class=\"neu-autocomplete__input\"\n type=\"text\"\n autocomplete=\"off\"\n role=\"combobox\"\n [id]=\"_id\"\n [attr.placeholder]=\"floatingLabel() ? ' ' : placeholder() || null\"\n [attr.aria-label]=\"label() || placeholder()\"\n [attr.aria-autocomplete]=\"'list'\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-expanded]=\"_isOpen() ? 'true' : 'false'\"\n [attr.aria-controls]=\"_listId\"\n [attr.aria-activedescendant]=\"_activeId()\"\n [attr.aria-invalid]=\"hasError() ? 'true' : null\"\n [attr.aria-describedby]=\"describedBy()\"\n [disabled]=\"_cvaDisabled()\"\n [value]=\"_query()\"\n (input)=\"onQueryChange($any($event.target).value)\"\n (focus)=\"_onFocus()\"\n (blur)=\"_onBlur()\"\n (keydown)=\"onKeyDown($event)\"\n />\n @if (floatingLabel() && label()) {\n <label class=\"neu-autocomplete__floating-label\" [for]=\"_id\">{{ label() }}</label>\n }\n @if (_query() && !_cvaDisabled()) {\n <button\n type=\"button\"\n class=\"neu-autocomplete__clear\"\n aria-label=\"Limpiar\"\n tabindex=\"-1\"\n (click)=\"clear()\"\n >\n ×\n </button>\n }\n </div>\n <div class=\"neu-autocomplete__sr-status\" aria-live=\"polite\" aria-atomic=\"true\">\n {{ resultsAnnouncement() }}\n </div>\n @if (_isOpen() && _filtered().length) {\n @if (virtualScroll()) {\n <cdk-virtual-scroll-viewport\n class=\"neu-autocomplete__list neu-autocomplete__list--virtual\"\n role=\"listbox\"\n [id]=\"_listId\"\n [attr.aria-label]=\"label() || placeholder()\"\n [itemSize]=\"virtualScrollItemSize()\"\n [style.height]=\"virtualViewportHeight()\"\n >\n <div\n *cdkVirtualFor=\"let opt of _filtered(); trackBy: trackByOption; let i = index\"\n class=\"neu-autocomplete__option\"\n role=\"option\"\n [id]=\"_optionId(i)\"\n [class.neu-autocomplete__option--active]=\"_activeIndex() === i\"\n [class.neu-autocomplete__option--disabled]=\"opt.disabled\"\n [attr.aria-selected]=\"_activeIndex() === i\"\n [attr.aria-disabled]=\"opt.disabled ?? false\"\n (mousedown)=\"selectOption(opt)\"\n >\n {{ opt.label }}\n </div>\n </cdk-virtual-scroll-viewport>\n } @else {\n <ul\n class=\"neu-autocomplete__list\"\n role=\"listbox\"\n [id]=\"_listId\"\n [attr.aria-label]=\"label() || placeholder()\"\n >\n @for (opt of _filtered(); track opt.label; let i = $index) {\n <li\n class=\"neu-autocomplete__option\"\n role=\"option\"\n [id]=\"_optionId(i)\"\n [class.neu-autocomplete__option--active]=\"_activeIndex() === i\"\n [class.neu-autocomplete__option--disabled]=\"opt.disabled\"\n [attr.aria-selected]=\"_activeIndex() === i\"\n [attr.aria-disabled]=\"opt.disabled ?? false\"\n (mousedown)=\"selectOption(opt)\"\n >\n {{ opt.label }}\n </li>\n }\n </ul>\n }\n }\n @if (_isOpen() && !_filtered().length) {\n <div class=\"neu-autocomplete__empty\" role=\"status\">{{ emptyLabel() }}</div>\n }\n @if (hasError()) {\n <p class=\"neu-autocomplete__error\" [id]=\"_id + '-error'\" role=\"alert\">\n {{ errorMessage() }}\n </p>\n } @else if (hint()) {\n <p class=\"neu-autocomplete__hint\" [id]=\"_id + '-hint'\">{{ hint() }}</p>\n }\n `,\n styleUrl: './neu-autocomplete.component.scss',\n})\nexport class NeuAutocompleteComponent implements ControlValueAccessor {\n // ── Inputs / Outputs ────────────────────────────────────────────\n readonly options = input<NeuAutocompleteOption[]>([]);\n readonly placeholder = input<string>('');\n readonly label = input<string>('');\n readonly hint = input<string>('');\n readonly errorMessage = input<string>('');\n readonly emptyLabel = input<string>('Sin resultados');\n readonly minLength = input<number>(0);\n /** Muestra el label como flotante (true) o estático encima del campo (false) / Shows the label as floating (true) or static above the field (false) */\n readonly floatingLabel = input<boolean>(false);\n /** Tamaño del campo: 'sm' = 36px | 'md' = 48px | 'lg' = 56px / Field size */\n readonly size = input<'sm' | 'md' | 'lg'>('md');\n\n /** Habilita scroll virtual para listas largas / Enables virtual scrolling for large result lists */\n readonly virtualScroll = input<boolean>(false);\n\n /** Número de resultados visibles en el viewport virtual / Number of visible results in the virtual viewport */\n readonly virtualScrollVisibleItems = input<number>(8);\n\n /** Emitido al seleccionar una opción / Emitted when an option is selected */\n readonly optionSelected = output<NeuAutocompleteOption>();\n\n /** Emitido al cambiar el texto del input / Emitted on query change */\n readonly queryChange = output<string>();\n\n // ── Internal state ───────────────────────────────────────────────\n readonly _id = `neu-autocomplete-${++_seq}`;\n readonly _listId = `${this._id}-list`;\n\n readonly _query = signal('');\n readonly _isOpen = signal(false);\n readonly _activeIndex = signal(-1);\n readonly _cvaDisabled = signal(false);\n readonly _focused = signal(false);\n private readonly _viewport = viewChild(CdkVirtualScrollViewport);\n\n private _onChange: (v: unknown) => void = () => {};\n private _onTouched: () => void = () => {};\n\n // ── Computed ─────────────────────────────────────────────────────\n readonly _filtered = computed(() => {\n const q = this._query().toLowerCase().trim();\n // Con query vacía nunca mostramos opciones (no queremos comportarnos como un select).\n // Empty query → never show options (autocomplete ≠ select).\n if (!q) return [];\n if (q.length < this.minLength()) return [];\n return this.options().filter((o) => o.label.toLowerCase().includes(q));\n });\n\n readonly _activeId = computed(() => {\n const i = this._activeIndex();\n return i >= 0 ? this._optionId(i) : null;\n });\n\n readonly hasError = computed(() => !!this.errorMessage());\n\n readonly describedBy = computed(() => {\n if (this.hasError()) {\n return `${this._id}-error`;\n }\n if (this.hint()) {\n return `${this._id}-hint`;\n }\n return null;\n });\n\n readonly resultsAnnouncement = computed(() => {\n const query = this._query().trim();\n if (!query || !this._isOpen()) {\n return '';\n }\n\n const total = this._filtered().length;\n if (!total) {\n return this.emptyLabel();\n }\n\n return total === 1 ? '1 resultado disponible' : `${total} resultados disponibles`;\n });\n\n readonly virtualScrollItemSize = computed(() => {\n switch (this.size()) {\n case 'sm':\n return 36;\n case 'lg':\n return 52;\n default:\n return 40;\n }\n });\n\n readonly virtualViewportHeight = computed(\n () => `${this.virtualScrollVisibleItems() * this.virtualScrollItemSize()}px`,\n );\n\n readonly trackByOption = (index: number, option: NeuAutocompleteOption) =>\n option.value ?? option.label ?? index;\n\n _optionId(i: number): string {\n return `${this._listId}-opt-${i}`;\n }\n\n // ── HostListener close on outside click ─────────────────────────\n private readonly _el = inject(ElementRef<HTMLElement>);\n\n @HostListener('document:mousedown', ['$event'])\n onDocClick(e: MouseEvent): void {\n if (!this._el.nativeElement.contains(e.target as Node)) {\n this._isOpen.set(false);\n }\n }\n\n // ── Event handlers ───────────────────────────────────────────────\n onQueryChange(q: string): void {\n this._query.set(q);\n this._activeIndex.set(-1);\n // Sólo abrimos si hay texto suficiente; si no, cerramos.\n // Only open when there is enough text; otherwise close.\n const minLen = Math.max(1, this.minLength());\n this._isOpen.set(q.trim().length >= minLen);\n this.queryChange.emit(q);\n // CVA — emit null when query is cleared\n if (!q) {\n this._onChange(null);\n }\n }\n\n _onFocus(): void {\n this._focused.set(true);\n // Abre el dropdown solo si ya hay texto escrito / Only open when there is already a query.\n if (this._query().trim().length >= Math.max(1, this.minLength())) {\n this._isOpen.set(true);\n }\n }\n\n _onBlur(): void {\n this._focused.set(false);\n this._onTouched();\n // Small delay to allow mousedown on option to fire first\n setTimeout(() => this._isOpen.set(false), 150);\n }\n\n onKeyDown(e: KeyboardEvent): void {\n const total = this._filtered().length;\n if (!total && e.key !== 'Escape') return;\n switch (e.key) {\n case 'ArrowDown':\n e.preventDefault();\n this._moveActiveIndex(1);\n this._isOpen.set(true);\n this._scrollActiveOptionIntoView();\n break;\n case 'ArrowUp':\n e.preventDefault();\n this._moveActiveIndex(-1);\n this._scrollActiveOptionIntoView();\n break;\n case 'Enter': {\n const idx = this._activeIndex();\n const opt = this._filtered()[idx];\n if (opt && !opt.disabled) this.selectOption(opt);\n break;\n }\n case 'Escape':\n this._isOpen.set(false);\n this._activeIndex.set(-1);\n break;\n }\n }\n\n private _moveActiveIndex(step: 1 | -1): void {\n const filtered = this._filtered();\n if (!filtered.length) {\n this._activeIndex.set(-1);\n return;\n }\n\n const currentIndex = this._activeIndex();\n let nextIndex = currentIndex;\n\n for (let count = 0; count < filtered.length; count += 1) {\n nextIndex =\n step === 1 ? Math.min(nextIndex + 1, filtered.length - 1) : Math.max(nextIndex - 1, 0);\n\n if (!filtered[nextIndex]?.disabled) {\n this._activeIndex.set(nextIndex);\n return;\n }\n\n if ((step === 1 && nextIndex === filtered.length - 1) || (step === -1 && nextIndex === 0)) {\n break;\n }\n }\n\n if (currentIndex === -1) {\n this._activeIndex.set(filtered.findIndex((option) => !option.disabled));\n }\n }\n\n selectOption(opt: NeuAutocompleteOption): void {\n if (opt.disabled) return;\n this._query.set(opt.label);\n this._isOpen.set(false);\n this._activeIndex.set(-1);\n this._onChange(opt.value);\n this.optionSelected.emit(opt);\n }\n\n clear(): void {\n this._query.set('');\n this._onChange(null);\n this._isOpen.set(false);\n this._activeIndex.set(-1);\n this.queryChange.emit('');\n }\n\n private _scrollActiveOptionIntoView(): void {\n const activeIndex = this._activeIndex();\n if (activeIndex < 0) {\n return;\n }\n\n if (this.virtualScroll()) {\n requestAnimationFrame(() => {\n this._viewport()?.scrollToIndex(activeIndex, 'auto');\n this._viewport()?.checkViewportSize();\n });\n return;\n }\n\n requestAnimationFrame(() => {\n const activeOption = this._el.nativeElement.querySelector(\n `#${this._optionId(activeIndex)}`,\n ) as HTMLElement | null;\n if (typeof activeOption?.scrollIntoView === 'function') {\n activeOption.scrollIntoView({ block: 'nearest' });\n }\n });\n }\n\n // ── CVA ──────────────────────────────────────────────────────────\n writeValue(val: unknown): void {\n if (val === null || val === undefined) {\n this._query.set('');\n return;\n }\n const match = this.options().find((o) => o.value === val);\n this._query.set(match ? match.label : String(val));\n }\n\n registerOnChange(fn: (v: unknown) => void): void {\n this._onChange = fn;\n }\n\n registerOnTouched(fn: () => void): void {\n this._onTouched = fn;\n }\n\n setDisabledState(d: boolean): void {\n this._cvaDisabled.set(d);\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;;;;AA0BA,IAAI,IAAI,GAAG,CAAC;AAEZ;;;;;;;;;;;;;AAaG;MAuIU,wBAAwB,CAAA;;AAE1B,IAAA,OAAO,GAAG,KAAK,CAA0B,EAAE,8EAAC;AAC5C,IAAA,WAAW,GAAG,KAAK,CAAS,EAAE,kFAAC;AAC/B,IAAA,KAAK,GAAG,KAAK,CAAS,EAAE,4EAAC;AACzB,IAAA,IAAI,GAAG,KAAK,CAAS,EAAE,2EAAC;AACxB,IAAA,YAAY,GAAG,KAAK,CAAS,EAAE,mFAAC;AAChC,IAAA,UAAU,GAAG,KAAK,CAAS,gBAAgB,iFAAC;AAC5C,IAAA,SAAS,GAAG,KAAK,CAAS,CAAC,gFAAC;;AAE5B,IAAA,aAAa,GAAG,KAAK,CAAU,KAAK,oFAAC;;AAErC,IAAA,IAAI,GAAG,KAAK,CAAqB,IAAI,2EAAC;;AAGtC,IAAA,aAAa,GAAG,KAAK,CAAU,KAAK,oFAAC;;AAGrC,IAAA,yBAAyB,GAAG,KAAK,CAAS,CAAC,gGAAC;;IAG5C,cAAc,GAAG,MAAM,EAAyB;;IAGhD,WAAW,GAAG,MAAM,EAAU;;AAG9B,IAAA,GAAG,GAAG,CAAA,iBAAA,EAAoB,EAAE,IAAI,EAAE;AAClC,IAAA,OAAO,GAAG,CAAA,EAAG,IAAI,CAAC,GAAG,OAAO;AAE5B,IAAA,MAAM,GAAG,MAAM,CAAC,EAAE,6EAAC;AACnB,IAAA,OAAO,GAAG,MAAM,CAAC,KAAK,8EAAC;AACvB,IAAA,YAAY,GAAG,MAAM,CAAC,CAAC,CAAC,mFAAC;AACzB,IAAA,YAAY,GAAG,MAAM,CAAC,KAAK,mFAAC;AAC5B,IAAA,QAAQ,GAAG,MAAM,CAAC,KAAK,+EAAC;AAChB,IAAA,SAAS,GAAG,SAAS,CAAC,wBAAwB,gFAAC;AAExD,IAAA,SAAS,GAAyB,MAAK,EAAE,CAAC;AAC1C,IAAA,UAAU,GAAe,MAAK,EAAE,CAAC;;AAGhC,IAAA,SAAS,GAAG,QAAQ,CAAC,MAAK;AACjC,QAAA,MAAM,CAAC,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,WAAW,EAAE,CAAC,IAAI,EAAE;;;AAG5C,QAAA,IAAI,CAAC,CAAC;AAAE,YAAA,OAAO,EAAE;AACjB,QAAA,IAAI,CAAC,CAAC,MAAM,GAAG,IAAI,CAAC,SAAS,EAAE;AAAE,YAAA,OAAO,EAAE;QAC1C,OAAO,IAAI,CAAC,OAAO,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;AACxE,IAAA,CAAC,gFAAC;AAEO,IAAA,SAAS,GAAG,QAAQ,CAAC,MAAK;AACjC,QAAA,MAAM,CAAC,GAAG,IAAI,CAAC,YAAY,EAAE;AAC7B,QAAA,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,IAAI;AAC1C,IAAA,CAAC,gFAAC;AAEO,IAAA,QAAQ,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,YAAY,EAAE,+EAAC;AAEhD,IAAA,WAAW,GAAG,QAAQ,CAAC,MAAK;AACnC,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE,EAAE;AACnB,YAAA,OAAO,CAAA,EAAG,IAAI,CAAC,GAAG,QAAQ;QAC5B;AACA,QAAA,IAAI,IAAI,CAAC,IAAI,EAAE,EAAE;AACf,YAAA,OAAO,CAAA,EAAG,IAAI,CAAC,GAAG,OAAO;QAC3B;AACA,QAAA,OAAO,IAAI;AACb,IAAA,CAAC,kFAAC;AAEO,IAAA,mBAAmB,GAAG,QAAQ,CAAC,MAAK;QAC3C,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,IAAI,EAAE;QAClC,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,EAAE;AAC7B,YAAA,OAAO,EAAE;QACX;QAEA,MAAM,KAAK,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC,MAAM;QACrC,IAAI,CAAC,KAAK,EAAE;AACV,YAAA,OAAO,IAAI,CAAC,UAAU,EAAE;QAC1B;AAEA,QAAA,OAAO,KAAK,KAAK,CAAC,GAAG,wBAAwB,GAAG,CAAA,EAAG,KAAK,yBAAyB;AACnF,IAAA,CAAC,0FAAC;AAEO,IAAA,qBAAqB,GAAG,QAAQ,CAAC,MAAK;AAC7C,QAAA,QAAQ,IAAI,CAAC,IAAI,EAAE;AACjB,YAAA,KAAK,IAAI;AACP,gBAAA,OAAO,EAAE;AACX,YAAA,KAAK,IAAI;AACP,gBAAA,OAAO,EAAE;AACX,YAAA;AACE,gBAAA,OAAO,EAAE;;AAEf,IAAA,CAAC,4FAAC;AAEO,IAAA,qBAAqB,GAAG,QAAQ,CACvC,MAAM,GAAG,IAAI,CAAC,yBAAyB,EAAE,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAA,EAAA,CAAI,4FAC7E;AAEQ,IAAA,aAAa,GAAG,CAAC,KAAa,EAAE,MAA6B,KACpE,MAAM,CAAC,KAAK,IAAI,MAAM,CAAC,KAAK,IAAI,KAAK;AAEvC,IAAA,SAAS,CAAC,CAAS,EAAA;AACjB,QAAA,OAAO,GAAG,IAAI,CAAC,OAAO,CAAA,KAAA,EAAQ,CAAC,EAAE;IACnC;;AAGiB,IAAA,GAAG,GAAG,MAAM,EAAC,UAAuB,EAAC;AAGtD,IAAA,UAAU,CAAC,CAAa,EAAA;AACtB,QAAA,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAc,CAAC,EAAE;AACtD,YAAA,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC;QACzB;IACF;;AAGA,IAAA,aAAa,CAAC,CAAS,EAAA;AACrB,QAAA,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC;QAClB,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;;;AAGzB,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,SAAS,EAAE,CAAC;AAC5C,QAAA,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,MAAM,IAAI,MAAM,CAAC;AAC3C,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC;;QAExB,IAAI,CAAC,CAAC,EAAE;AACN,YAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;QACtB;IACF;IAEA,QAAQ,GAAA;AACN,QAAA,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC;;QAEvB,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC,IAAI,EAAE,CAAC,MAAM,IAAI,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,SAAS,EAAE,CAAC,EAAE;AAChE,YAAA,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC;QACxB;IACF;IAEA,OAAO,GAAA;AACL,QAAA,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC;QACxB,IAAI,CAAC,UAAU,EAAE;;AAEjB,QAAA,UAAU,CAAC,MAAM,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,GAAG,CAAC;IAChD;AAEA,IAAA,SAAS,CAAC,CAAgB,EAAA;QACxB,MAAM,KAAK,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC,MAAM;AACrC,QAAA,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ;YAAE;AAClC,QAAA,QAAQ,CAAC,CAAC,GAAG;AACX,YAAA,KAAK,WAAW;gBACd,CAAC,CAAC,cAAc,EAAE;AAClB,gBAAA,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC;AACxB,gBAAA,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC;gBACtB,IAAI,CAAC,2BAA2B,EAAE;gBAClC;AACF,YAAA,KAAK,SAAS;gBACZ,CAAC,CAAC,cAAc,EAAE;AAClB,gBAAA,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC;gBACzB,IAAI,CAAC,2BAA2B,EAAE;gBAClC;YACF,KAAK,OAAO,EAAE;AACZ,gBAAA,MAAM,GAAG,GAAG,IAAI,CAAC,YAAY,EAAE;gBAC/B,MAAM,GAAG,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC,GAAG,CAAC;AACjC,gBAAA,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,QAAQ;AAAE,oBAAA,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC;gBAChD;YACF;AACA,YAAA,KAAK,QAAQ;AACX,gBAAA,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC;gBACvB,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;gBACzB;;IAEN;AAEQ,IAAA,gBAAgB,CAAC,IAAY,EAAA;AACnC,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,EAAE;AACjC,QAAA,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE;YACpB,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;YACzB;QACF;AAEA,QAAA,MAAM,YAAY,GAAG,IAAI,CAAC,YAAY,EAAE;QACxC,IAAI,SAAS,GAAG,YAAY;AAE5B,QAAA,KAAK,IAAI,KAAK,GAAG,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC,MAAM,EAAE,KAAK,IAAI,CAAC,EAAE;YACvD,SAAS;AACP,gBAAA,IAAI,KAAK,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,SAAS,GAAG,CAAC,EAAE,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,SAAS,GAAG,CAAC,EAAE,CAAC,CAAC;YAExF,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAE,QAAQ,EAAE;AAClC,gBAAA,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,SAAS,CAAC;gBAChC;YACF;YAEA,IAAI,CAAC,IAAI,KAAK,CAAC,IAAI,SAAS,KAAK,QAAQ,CAAC,MAAM,GAAG,CAAC,MAAM,IAAI,KAAK,CAAC,CAAC,IAAI,SAAS,KAAK,CAAC,CAAC,EAAE;gBACzF;YACF;QACF;AAEA,QAAA,IAAI,YAAY,KAAK,CAAC,CAAC,EAAE;YACvB,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC,MAAM,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;QACzE;IACF;AAEA,IAAA,YAAY,CAAC,GAA0B,EAAA;QACrC,IAAI,GAAG,CAAC,QAAQ;YAAE;QAClB,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,GAAG,CAAC,KAAK,CAAC;AAC1B,QAAA,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC;QACvB,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;AACzB,QAAA,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,CAAC;AACzB,QAAA,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,GAAG,CAAC;IAC/B;IAEA,KAAK,GAAA;AACH,QAAA,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,CAAC;AACnB,QAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;AACpB,QAAA,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC;QACvB,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;AACzB,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC;IAC3B;IAEQ,2BAA2B,GAAA;AACjC,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,YAAY,EAAE;AACvC,QAAA,IAAI,WAAW,GAAG,CAAC,EAAE;YACnB;QACF;AAEA,QAAA,IAAI,IAAI,CAAC,aAAa,EAAE,EAAE;YACxB,qBAAqB,CAAC,MAAK;gBACzB,IAAI,CAAC,SAAS,EAAE,EAAE,aAAa,CAAC,WAAW,EAAE,MAAM,CAAC;AACpD,gBAAA,IAAI,CAAC,SAAS,EAAE,EAAE,iBAAiB,EAAE;AACvC,YAAA,CAAC,CAAC;YACF;QACF;QAEA,qBAAqB,CAAC,MAAK;AACzB,YAAA,MAAM,YAAY,GAAG,IAAI,CAAC,GAAG,CAAC,aAAa,CAAC,aAAa,CACvD,CAAA,CAAA,EAAI,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,CAAA,CAAE,CACZ;AACvB,YAAA,IAAI,OAAO,YAAY,EAAE,cAAc,KAAK,UAAU,EAAE;gBACtD,YAAY,CAAC,cAAc,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC;YACnD;AACF,QAAA,CAAC,CAAC;IACJ;;AAGA,IAAA,UAAU,CAAC,GAAY,EAAA;QACrB,IAAI,GAAG,KAAK,IAAI,IAAI,GAAG,KAAK,SAAS,EAAE;AACrC,YAAA,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,CAAC;YACnB;QACF;QACA,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,KAAK,GAAG,CAAC;QACzD,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;IACpD;AAEA,IAAA,gBAAgB,CAAC,EAAwB,EAAA;AACvC,QAAA,IAAI,CAAC,SAAS,GAAG,EAAE;IACrB;AAEA,IAAA,iBAAiB,CAAC,EAAc,EAAA;AAC9B,QAAA,IAAI,CAAC,UAAU,GAAG,EAAE;IACtB;AAEA,IAAA,gBAAgB,CAAC,CAAU,EAAA;AACzB,QAAA,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,CAAC;IAC1B;uGArQW,wBAAwB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAxB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,wBAAwB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,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,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,YAAA,EAAA,EAAA,iBAAA,EAAA,cAAA,EAAA,UAAA,EAAA,cAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,aAAA,EAAA,EAAA,iBAAA,EAAA,eAAA,EAAA,UAAA,EAAA,eAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,aAAA,EAAA,EAAA,iBAAA,EAAA,eAAA,EAAA,UAAA,EAAA,eAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,yBAAA,EAAA,EAAA,iBAAA,EAAA,2BAAA,EAAA,UAAA,EAAA,2BAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,cAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,oBAAA,EAAA,oBAAA,EAAA,EAAA,UAAA,EAAA,EAAA,8BAAA,EAAA,WAAA,EAAA,kCAAA,EAAA,gBAAA,EAAA,kCAAA,EAAA,iBAAA,EAAA,iCAAA,EAAA,YAAA,EAAA,mCAAA,EAAA,YAAA,EAAA,4BAAA,EAAA,mBAAA,EAAA,4BAAA,EAAA,mBAAA,EAAA,wCAAA,EAAA,kCAAA,EAAA,EAAA,cAAA,EAAA,kBAAA,EAAA,EAAA,SAAA,EAjIxB;AACT,YAAA;AACE,gBAAA,OAAO,EAAE,iBAAiB;AAC1B,gBAAA,WAAW,EAAE,UAAU,CAAC,MAAM,wBAAwB,CAAC;AACvD,gBAAA,KAAK,EAAE,IAAI;AACZ,aAAA;AACF,SAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,WAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EA8JsC,wBAAwB,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAlJrD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4GT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,80JAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAjIS,eAAe,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,yBAAA,EAAA,QAAA,EAAA,uCAAA,EAAA,MAAA,EAAA,CAAA,UAAA,EAAA,aAAA,EAAA,aAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,kCAAA,EAAA,MAAA,EAAA,CAAA,iBAAA,EAAA,sBAAA,EAAA,uBAAA,EAAA,gCAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,wBAAA,EAAA,QAAA,EAAA,6BAAA,EAAA,MAAA,EAAA,CAAA,aAAA,EAAA,YAAA,CAAA,EAAA,OAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FAoId,wBAAwB,EAAA,UAAA,EAAA,CAAA;kBAtIpC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,kBAAkB,EAAA,OAAA,EACnB,CAAC,eAAe,CAAC,EAAA,aAAA,EACX,iBAAiB,CAAC,IAAI,EAAA,eAAA,EACpB,uBAAuB,CAAC,MAAM,EAAA,SAAA,EACpC;AACT,wBAAA;AACE,4BAAA,OAAO,EAAE,iBAAiB;AAC1B,4BAAA,WAAW,EAAE,UAAU,CAAC,8BAA8B,CAAC;AACvD,4BAAA,KAAK,EAAE,IAAI;AACZ,yBAAA;qBACF,EAAA,IAAA,EACK;AACJ,wBAAA,KAAK,EAAE,kBAAkB;AACzB,wBAAA,gCAAgC,EAAE,WAAW;AAC7C,wBAAA,oCAAoC,EAAE,gBAAgB;AACtD,wBAAA,oCAAoC,EAAE,iBAAiB;AACvD,wBAAA,mCAAmC,EAAE,YAAY;AACjD,wBAAA,qCAAqC,EAAE,YAAY;AACnD,wBAAA,8BAA8B,EAAE,iBAAiB;AACjD,wBAAA,8BAA8B,EAAE,iBAAiB;AACjD,wBAAA,0CAA0C,EAAE,gCAAgC;qBAC7E,EAAA,QAAA,EACS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4GT,EAAA,CAAA,EAAA,MAAA,EAAA,CAAA,80JAAA,CAAA,EAAA;yyCAsCsC,wBAAwB,CAAA,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,UAAA,EAAA,CAAA;sBAuE9D,YAAY;uBAAC,oBAAoB,EAAE,CAAC,QAAQ,CAAC;;;AC1RhD;;AAEG;;;;"}
|
|
@@ -34,7 +34,7 @@ class NeuBadgeComponent {
|
|
|
34
34
|
<span class="neu-badge__dot" aria-hidden="true"></span>
|
|
35
35
|
}
|
|
36
36
|
<ng-content />
|
|
37
|
-
`, isInline: true, styles: [".neu-badge{display:inline-flex;align-items:center;gap:5px;font-family:var(--neu-font-sans);font-weight:500;line-height:1;white-space:nowrap}.neu-badge--sm{padding:2px 8px;font-size:11px;border-radius:var(--neu-radius-sm)}.neu-badge--md{padding:4px 10px;font-size:var(--neu-text-xs);border-radius:var(--neu-radius)}.neu-badge--pill.neu-badge--sm,.neu-badge--pill.neu-badge--md{border-radius:var(--neu-radius-full)}.neu-badge--default{background:var(--neu-surface-2);color:var(--neu-text-
|
|
37
|
+
`, isInline: true, styles: [".neu-badge{display:inline-flex;align-items:center;gap:5px;font-family:var(--neu-font-sans);font-weight:500;line-height:1;white-space:nowrap}.neu-badge--sm{padding:2px 8px;font-size:11px;border-radius:var(--neu-radius-sm)}.neu-badge--md{padding:4px 10px;font-size:var(--neu-text-xs);border-radius:var(--neu-radius)}.neu-badge--pill.neu-badge--sm,.neu-badge--pill.neu-badge--md{border-radius:var(--neu-radius-full)}.neu-badge--default{background:var(--neu-surface-2);color:color-mix(in srgb,var(--neu-text) 72%,var(--neu-surface) 28%);border:1px solid var(--neu-border)}.neu-badge--default .neu-badge__dot{background:var(--neu-text-disabled)}.neu-badge--success{background:var(--neu-success-bg);color:color-mix(in srgb,var(--neu-text) 78%,var(--neu-success) 22%);border:1px solid transparent}.neu-badge--success .neu-badge__dot{background:var(--neu-success)}.neu-badge--info{background:var(--neu-info-bg);color:color-mix(in srgb,var(--neu-text) 76%,var(--neu-info) 24%);border:1px solid transparent}.neu-badge--info .neu-badge__dot{background:var(--neu-info)}.neu-badge--warning{background:var(--neu-warning-bg);color:color-mix(in srgb,var(--neu-text) 78%,var(--neu-warning) 22%);border:1px solid transparent}.neu-badge--warning .neu-badge__dot{background:var(--neu-warning)}.neu-badge--danger{background:var(--neu-error-bg);color:color-mix(in srgb,var(--neu-text) 74%,var(--neu-error) 26%);border:1px solid transparent}.neu-badge--danger .neu-badge__dot{background:var(--neu-error)}.neu-badge--outline{background:transparent}.neu-badge--outline.neu-badge--success{border-color:var(--neu-success);background:transparent}.neu-badge--outline.neu-badge--info{border-color:var(--neu-info);background:transparent}.neu-badge--outline.neu-badge--warning{border-color:var(--neu-warning);background:transparent}.neu-badge--outline.neu-badge--danger{border-color:var(--neu-error);background:transparent}.neu-badge__dot{width:6px;height:6px;border-radius:var(--neu-radius-full);flex-shrink:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
38
38
|
}
|
|
39
39
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: NeuBadgeComponent, decorators: [{
|
|
40
40
|
type: Component,
|
|
@@ -43,7 +43,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
|
|
|
43
43
|
<span class="neu-badge__dot" aria-hidden="true"></span>
|
|
44
44
|
}
|
|
45
45
|
<ng-content />
|
|
46
|
-
`, styles: [".neu-badge{display:inline-flex;align-items:center;gap:5px;font-family:var(--neu-font-sans);font-weight:500;line-height:1;white-space:nowrap}.neu-badge--sm{padding:2px 8px;font-size:11px;border-radius:var(--neu-radius-sm)}.neu-badge--md{padding:4px 10px;font-size:var(--neu-text-xs);border-radius:var(--neu-radius)}.neu-badge--pill.neu-badge--sm,.neu-badge--pill.neu-badge--md{border-radius:var(--neu-radius-full)}.neu-badge--default{background:var(--neu-surface-2);color:var(--neu-text-
|
|
46
|
+
`, styles: [".neu-badge{display:inline-flex;align-items:center;gap:5px;font-family:var(--neu-font-sans);font-weight:500;line-height:1;white-space:nowrap}.neu-badge--sm{padding:2px 8px;font-size:11px;border-radius:var(--neu-radius-sm)}.neu-badge--md{padding:4px 10px;font-size:var(--neu-text-xs);border-radius:var(--neu-radius)}.neu-badge--pill.neu-badge--sm,.neu-badge--pill.neu-badge--md{border-radius:var(--neu-radius-full)}.neu-badge--default{background:var(--neu-surface-2);color:color-mix(in srgb,var(--neu-text) 72%,var(--neu-surface) 28%);border:1px solid var(--neu-border)}.neu-badge--default .neu-badge__dot{background:var(--neu-text-disabled)}.neu-badge--success{background:var(--neu-success-bg);color:color-mix(in srgb,var(--neu-text) 78%,var(--neu-success) 22%);border:1px solid transparent}.neu-badge--success .neu-badge__dot{background:var(--neu-success)}.neu-badge--info{background:var(--neu-info-bg);color:color-mix(in srgb,var(--neu-text) 76%,var(--neu-info) 24%);border:1px solid transparent}.neu-badge--info .neu-badge__dot{background:var(--neu-info)}.neu-badge--warning{background:var(--neu-warning-bg);color:color-mix(in srgb,var(--neu-text) 78%,var(--neu-warning) 22%);border:1px solid transparent}.neu-badge--warning .neu-badge__dot{background:var(--neu-warning)}.neu-badge--danger{background:var(--neu-error-bg);color:color-mix(in srgb,var(--neu-text) 74%,var(--neu-error) 26%);border:1px solid transparent}.neu-badge--danger .neu-badge__dot{background:var(--neu-error)}.neu-badge--outline{background:transparent}.neu-badge--outline.neu-badge--success{border-color:var(--neu-success);background:transparent}.neu-badge--outline.neu-badge--info{border-color:var(--neu-info);background:transparent}.neu-badge--outline.neu-badge--warning{border-color:var(--neu-warning);background:transparent}.neu-badge--outline.neu-badge--danger{border-color:var(--neu-error);background:transparent}.neu-badge__dot{width:6px;height:6px;border-radius:var(--neu-radius-full);flex-shrink:0}\n"] }]
|
|
47
47
|
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], dot: [{ type: i0.Input, args: [{ isSignal: true, alias: "dot", required: false }] }], outline: [{ type: i0.Input, args: [{ isSignal: true, alias: "outline", required: false }] }], pill: [{ type: i0.Input, args: [{ isSignal: true, alias: "pill", required: false }] }] } });
|
|
48
48
|
|
|
49
49
|
/**
|