@neural-ui/core 1.6.1 → 1.6.3
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/accordion/package.json +4 -0
- package/alert/package.json +4 -0
- package/autocomplete/package.json +4 -0
- package/avatar/package.json +4 -0
- package/badge/package.json +4 -0
- package/block-ui/package.json +4 -0
- package/breadcrumb/package.json +4 -0
- package/button/package.json +4 -0
- package/calendar/package.json +4 -0
- package/card/package.json +4 -0
- package/chart/package.json +4 -0
- package/checkbox/package.json +4 -0
- package/chip/package.json +4 -0
- package/code-block/package.json +4 -0
- package/color-picker/package.json +4 -0
- package/command-palette/package.json +4 -0
- package/confirm-dialog/package.json +4 -0
- package/context-menu/package.json +4 -0
- package/dashboard-grid/package.json +4 -0
- package/date-input/package.json +4 -0
- package/divider/package.json +4 -0
- package/empty-state/package.json +4 -0
- package/fesm2022/neural-ui-core-accordion.mjs +7 -11
- package/fesm2022/neural-ui-core-accordion.mjs.map +1 -1
- package/fesm2022/neural-ui-core-alert.mjs +14 -25
- package/fesm2022/neural-ui-core-alert.mjs.map +1 -1
- package/fesm2022/neural-ui-core-autocomplete.mjs +28 -53
- package/fesm2022/neural-ui-core-autocomplete.mjs.map +1 -1
- package/fesm2022/neural-ui-core-avatar.mjs +13 -23
- package/fesm2022/neural-ui-core-avatar.mjs.map +1 -1
- package/fesm2022/neural-ui-core-badge.mjs +9 -15
- package/fesm2022/neural-ui-core-badge.mjs.map +1 -1
- package/fesm2022/neural-ui-core-block-ui.mjs +11 -16
- package/fesm2022/neural-ui-core-block-ui.mjs.map +1 -1
- package/fesm2022/neural-ui-core-breadcrumb.mjs +6 -8
- package/fesm2022/neural-ui-core-breadcrumb.mjs.map +1 -1
- package/fesm2022/neural-ui-core-button.mjs +16 -29
- package/fesm2022/neural-ui-core-button.mjs.map +1 -1
- package/fesm2022/neural-ui-core-calendar.mjs +20 -37
- package/fesm2022/neural-ui-core-calendar.mjs.map +1 -1
- package/fesm2022/neural-ui-core-card.mjs +8 -13
- package/fesm2022/neural-ui-core-card.mjs.map +1 -1
- package/fesm2022/neural-ui-core-chart.mjs +24 -45
- package/fesm2022/neural-ui-core-chart.mjs.map +1 -1
- package/fesm2022/neural-ui-core-checkbox.mjs +9 -15
- package/fesm2022/neural-ui-core-checkbox.mjs.map +1 -1
- package/fesm2022/neural-ui-core-chip.mjs +13 -23
- package/fesm2022/neural-ui-core-chip.mjs.map +1 -1
- package/fesm2022/neural-ui-core-code-block.mjs +17 -31
- package/fesm2022/neural-ui-core-code-block.mjs.map +1 -1
- package/fesm2022/neural-ui-core-color-picker.mjs +11 -19
- package/fesm2022/neural-ui-core-color-picker.mjs.map +1 -1
- package/fesm2022/neural-ui-core-command-palette.mjs +11 -16
- package/fesm2022/neural-ui-core-command-palette.mjs.map +1 -1
- package/fesm2022/neural-ui-core-confirm-dialog.mjs +6 -6
- package/fesm2022/neural-ui-core-confirm-dialog.mjs.map +1 -1
- package/fesm2022/neural-ui-core-context-menu.mjs +9 -12
- package/fesm2022/neural-ui-core-context-menu.mjs.map +1 -1
- package/fesm2022/neural-ui-core-dashboard-grid.mjs +7 -11
- package/fesm2022/neural-ui-core-dashboard-grid.mjs.map +1 -1
- package/fesm2022/neural-ui-core-date-input.mjs +57 -111
- package/fesm2022/neural-ui-core-date-input.mjs.map +1 -1
- package/fesm2022/neural-ui-core-divider.mjs +5 -7
- package/fesm2022/neural-ui-core-divider.mjs.map +1 -1
- package/fesm2022/neural-ui-core-empty-state.mjs +8 -13
- package/fesm2022/neural-ui-core-empty-state.mjs.map +1 -1
- package/fesm2022/neural-ui-core-filter-bar.mjs +11 -19
- package/fesm2022/neural-ui-core-filter-bar.mjs.map +1 -1
- package/fesm2022/neural-ui-core-icon.mjs +7 -11
- package/fesm2022/neural-ui-core-icon.mjs.map +1 -1
- package/fesm2022/neural-ui-core-image-gallery.mjs +13 -23
- package/fesm2022/neural-ui-core-image-gallery.mjs.map +1 -1
- package/fesm2022/neural-ui-core-image-viewer.mjs +14 -22
- package/fesm2022/neural-ui-core-image-viewer.mjs.map +1 -1
- package/fesm2022/neural-ui-core-input-otp.mjs +11 -19
- package/fesm2022/neural-ui-core-input-otp.mjs.map +1 -1
- package/fesm2022/neural-ui-core-input.mjs +35 -67
- package/fesm2022/neural-ui-core-input.mjs.map +1 -1
- package/fesm2022/neural-ui-core-kanban.mjs +9 -15
- package/fesm2022/neural-ui-core-kanban.mjs.map +1 -1
- package/fesm2022/neural-ui-core-knob.mjs +22 -41
- package/fesm2022/neural-ui-core-knob.mjs.map +1 -1
- package/fesm2022/neural-ui-core-meter-group.mjs +13 -23
- package/fesm2022/neural-ui-core-meter-group.mjs.map +1 -1
- package/fesm2022/neural-ui-core-modal.mjs +11 -16
- package/fesm2022/neural-ui-core-modal.mjs.map +1 -1
- package/fesm2022/neural-ui-core-multiselect.mjs +39 -72
- package/fesm2022/neural-ui-core-multiselect.mjs.map +1 -1
- package/fesm2022/neural-ui-core-nav.mjs +13 -22
- package/fesm2022/neural-ui-core-nav.mjs.map +1 -1
- package/fesm2022/neural-ui-core-notification-center.mjs +9 -12
- package/fesm2022/neural-ui-core-notification-center.mjs.map +1 -1
- package/fesm2022/neural-ui-core-number-input.mjs +19 -35
- package/fesm2022/neural-ui-core-number-input.mjs.map +1 -1
- package/fesm2022/neural-ui-core-pagination.mjs +9 -15
- package/fesm2022/neural-ui-core-pagination.mjs.map +1 -1
- package/fesm2022/neural-ui-core-popover.mjs +14 -22
- package/fesm2022/neural-ui-core-popover.mjs.map +1 -1
- package/fesm2022/neural-ui-core-progress-bar.mjs +11 -19
- package/fesm2022/neural-ui-core-progress-bar.mjs.map +1 -1
- package/fesm2022/neural-ui-core-radio.mjs +15 -24
- package/fesm2022/neural-ui-core-radio.mjs.map +1 -1
- package/fesm2022/neural-ui-core-rating.mjs +8 -13
- package/fesm2022/neural-ui-core-rating.mjs.map +1 -1
- package/fesm2022/neural-ui-core-rich-text-editor.mjs +28 -53
- package/fesm2022/neural-ui-core-rich-text-editor.mjs.map +1 -1
- package/fesm2022/neural-ui-core-scheduler-gantt.mjs +22 -41
- package/fesm2022/neural-ui-core-scheduler-gantt.mjs.map +1 -1
- package/fesm2022/neural-ui-core-select.mjs +43 -77
- package/fesm2022/neural-ui-core-select.mjs.map +1 -1
- package/fesm2022/neural-ui-core-sidebar.mjs +12 -21
- package/fesm2022/neural-ui-core-sidebar.mjs.map +1 -1
- package/fesm2022/neural-ui-core-skeleton.mjs +7 -11
- package/fesm2022/neural-ui-core-skeleton.mjs.map +1 -1
- package/fesm2022/neural-ui-core-slider.mjs +13 -23
- package/fesm2022/neural-ui-core-slider.mjs.map +1 -1
- package/fesm2022/neural-ui-core-spinner.mjs +10 -17
- package/fesm2022/neural-ui-core-spinner.mjs.map +1 -1
- package/fesm2022/neural-ui-core-split-button.mjs +15 -27
- package/fesm2022/neural-ui-core-split-button.mjs.map +1 -1
- package/fesm2022/neural-ui-core-splitter.mjs +6 -9
- package/fesm2022/neural-ui-core-splitter.mjs.map +1 -1
- package/fesm2022/neural-ui-core-stats-card.mjs +11 -19
- package/fesm2022/neural-ui-core-stats-card.mjs.map +1 -1
- package/fesm2022/neural-ui-core-stepper.mjs +8 -13
- package/fesm2022/neural-ui-core-stepper.mjs.map +1 -1
- package/fesm2022/neural-ui-core-switch.mjs +9 -15
- package/fesm2022/neural-ui-core-switch.mjs.map +1 -1
- package/fesm2022/neural-ui-core-table.mjs +124 -242
- package/fesm2022/neural-ui-core-table.mjs.map +1 -1
- package/fesm2022/neural-ui-core-tabs.mjs +18 -30
- package/fesm2022/neural-ui-core-tabs.mjs.map +1 -1
- package/fesm2022/neural-ui-core-textarea.mjs +23 -43
- package/fesm2022/neural-ui-core-textarea.mjs.map +1 -1
- package/fesm2022/neural-ui-core-timeline-grid.mjs +12 -21
- package/fesm2022/neural-ui-core-timeline-grid.mjs.map +1 -1
- package/fesm2022/neural-ui-core-timeline.mjs +4 -5
- package/fesm2022/neural-ui-core-timeline.mjs.map +1 -1
- package/fesm2022/neural-ui-core-toast.mjs +8 -10
- package/fesm2022/neural-ui-core-toast.mjs.map +1 -1
- package/fesm2022/neural-ui-core-toggle-button-group.mjs +10 -17
- package/fesm2022/neural-ui-core-toggle-button-group.mjs.map +1 -1
- package/fesm2022/neural-ui-core-toolbar.mjs +8 -13
- package/fesm2022/neural-ui-core-toolbar.mjs.map +1 -1
- package/fesm2022/neural-ui-core-tooltip.mjs +11 -16
- package/fesm2022/neural-ui-core-tooltip.mjs.map +1 -1
- package/fesm2022/neural-ui-core-tree-table.mjs +30 -57
- package/fesm2022/neural-ui-core-tree-table.mjs.map +1 -1
- package/fesm2022/neural-ui-core-tree.mjs +17 -31
- package/fesm2022/neural-ui-core-tree.mjs.map +1 -1
- package/fesm2022/neural-ui-core-uploader.mjs +47 -91
- package/fesm2022/neural-ui-core-uploader.mjs.map +1 -1
- package/fesm2022/neural-ui-core-url-state.mjs +5 -7
- package/fesm2022/neural-ui-core-url-state.mjs.map +1 -1
- package/fesm2022/neural-ui-core-virtual-list.mjs +19 -32
- package/fesm2022/neural-ui-core-virtual-list.mjs.map +1 -1
- package/filter-bar/package.json +4 -0
- package/icon/package.json +4 -0
- package/image-gallery/package.json +4 -0
- package/image-viewer/package.json +4 -0
- package/input/package.json +4 -0
- package/input-otp/package.json +4 -0
- package/kanban/package.json +4 -0
- package/knob/package.json +4 -0
- package/meter-group/package.json +4 -0
- package/modal/package.json +4 -0
- package/multiselect/package.json +4 -0
- package/nav/package.json +4 -0
- package/notification-center/package.json +4 -0
- package/number-input/package.json +4 -0
- package/package.json +6 -6
- package/pagination/package.json +4 -0
- package/popover/package.json +4 -0
- package/progress-bar/package.json +4 -0
- package/radio/package.json +4 -0
- package/rating/package.json +4 -0
- package/rich-text-editor/package.json +4 -0
- package/scheduler-gantt/package.json +4 -0
- package/select/package.json +4 -0
- package/sidebar/package.json +4 -0
- package/skeleton/package.json +4 -0
- package/slider/package.json +4 -0
- package/spinner/package.json +4 -0
- package/split-button/package.json +4 -0
- package/splitter/package.json +4 -0
- package/stats-card/package.json +4 -0
- package/stepper/package.json +4 -0
- package/switch/package.json +4 -0
- package/table/package.json +4 -0
- package/tabs/package.json +4 -0
- package/textarea/package.json +4 -0
- package/timeline/package.json +4 -0
- package/timeline-grid/package.json +4 -0
- package/toast/package.json +4 -0
- package/toggle-button-group/package.json +4 -0
- package/toolbar/package.json +4 -0
- package/tooltip/package.json +4 -0
- package/tree/package.json +4 -0
- package/tree-table/package.json +4 -0
- package/uploader/package.json +4 -0
- package/url-state/package.json +4 -0
- package/virtual-list/package.json +4 -0
|
@@ -15,11 +15,9 @@ import { NeuIconComponent } from '@neural-ui/core/icon';
|
|
|
15
15
|
*/
|
|
16
16
|
class NeuToastService {
|
|
17
17
|
/** Lista reactiva de toasts activos / Reactive list of active toasts */
|
|
18
|
-
toasts = signal([], /*
|
|
19
|
-
...(ngDevMode ? [{ debugName: "toasts" }] : /* istanbul ignore next */ []));
|
|
18
|
+
toasts = signal([], ...(ngDevMode ? [{ debugName: "toasts" }] : /* istanbul ignore next */ []));
|
|
20
19
|
/** Posición del contenedor de toasts / Toast container position */
|
|
21
|
-
position = signal('top-right', /*
|
|
22
|
-
...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
|
|
20
|
+
position = signal('top-right', ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
|
|
23
21
|
timers = new Map();
|
|
24
22
|
setPosition(position) {
|
|
25
23
|
this.position.set(position);
|
|
@@ -71,10 +69,10 @@ class NeuToastService {
|
|
|
71
69
|
clearTimeout(timer);
|
|
72
70
|
this.timers.delete(id);
|
|
73
71
|
}
|
|
74
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
75
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
72
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: NeuToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
73
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: NeuToastService, providedIn: 'root' });
|
|
76
74
|
}
|
|
77
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
75
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: NeuToastService, decorators: [{
|
|
78
76
|
type: Injectable,
|
|
79
77
|
args: [{ providedIn: 'root' }]
|
|
80
78
|
}] });
|
|
@@ -105,8 +103,8 @@ class NeuToastContainerComponent {
|
|
|
105
103
|
getIcon(type) {
|
|
106
104
|
return TOAST_ICONS[type];
|
|
107
105
|
}
|
|
108
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
109
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
106
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: NeuToastContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
107
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: NeuToastContainerComponent, isStandalone: true, selector: "neu-toast-container", host: { attributes: { "aria-live": "polite", "aria-atomic": "false" }, properties: { "class.neu-toast-container--top-right": "toastService.position() === \"top-right\"", "class.neu-toast-container--top-left": "toastService.position() === \"top-left\"", "class.neu-toast-container--bottom-right": "toastService.position() === \"bottom-right\"", "class.neu-toast-container--bottom-left": "toastService.position() === \"bottom-left\"" }, classAttribute: "neu-toast-container" }, ngImport: i0, template: `
|
|
110
108
|
@for (toast of toastService.toasts(); track toast.id) {
|
|
111
109
|
<div
|
|
112
110
|
class="neu-toast"
|
|
@@ -137,7 +135,7 @@ class NeuToastContainerComponent {
|
|
|
137
135
|
}
|
|
138
136
|
`, isInline: true, styles: [".neu-toast-container{position:fixed;z-index:var(--neu-z-toast);display:flex;flex-direction:column;gap:var(--neu-space-3);pointer-events:none;bottom:var(--neu-space-6);left:50%;transform:translate(-50%);width:calc(100vw - var(--neu-space-8));max-width:400px;align-items:stretch}@media(min-width:400px){.neu-toast-container{bottom:auto;left:auto;transform:none;width:360px;align-items:flex-end}}@media(min-width:400px){.neu-toast-container--top-right{top:calc(var(--neu-header-height, 64px) + var(--neu-space-4));right:var(--neu-space-6);align-items:flex-end}.neu-toast-container--top-left{top:calc(var(--neu-header-height, 64px) + var(--neu-space-4));left:var(--neu-space-6);align-items:flex-start}.neu-toast-container--bottom-right{top:auto;bottom:var(--neu-space-6);right:var(--neu-space-6);align-items:flex-end}.neu-toast-container--bottom-left{top:auto;bottom:var(--neu-space-6);left:var(--neu-space-6);align-items:flex-start}}.neu-toast{display:flex;align-items:flex-start;gap:var(--neu-space-3);padding:var(--neu-space-4);background:var(--neu-toast-bg, var(--neu-surface));border-radius:var(--neu-toast-radius, 10px);box-shadow:var(--neu-toast-shadow, 0 8px 24px rgba(15, 23, 42, .12), 0 2px 6px rgba(15, 23, 42, .06));border-left:3px solid transparent;pointer-events:all;animation:neu-toast-in .25s cubic-bezier(.34,1.56,.64,1) forwards;width:100%}.neu-toast--success{border-color:var(--neu-success)}.neu-toast--success .neu-toast__icon-wrap{color:var(--neu-success)}.neu-toast--error{border-color:var(--neu-error)}.neu-toast--error .neu-toast__icon-wrap{color:var(--neu-error)}.neu-toast--warning{border-color:var(--neu-warning)}.neu-toast--warning .neu-toast__icon-wrap{color:var(--neu-warning)}.neu-toast--info{border-color:var(--neu-info)}.neu-toast--info .neu-toast__icon-wrap{color:var(--neu-info)}.neu-toast__icon-wrap{flex-shrink:0;display:flex;align-items:center;margin-top:1px}.neu-toast__body{flex:1;min-width:0}.neu-toast__title{margin:0 0 var(--neu-space-1);font-family:var(--neu-font-sans);font-size:var(--neu-text-sm);font-weight:600;color:var(--neu-text);line-height:1.3}.neu-toast__message{margin:0;font-family:var(--neu-font-sans);font-size:var(--neu-text-sm);color:var(--neu-text-muted);line-height:1.4;word-break:break-word}.neu-toast__close{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;background:transparent;border:none;border-radius:var(--neu-radius-sm);color:var(--neu-text-muted);cursor:pointer;transition:background-color var(--neu-transition),color var(--neu-transition);margin-top:-2px;margin-right:-4px}.neu-toast__close:hover{background:var(--neu-surface-2);color:var(--neu-text)}.neu-toast__close:focus-visible{outline:2px solid var(--neu-primary);outline-offset:1px}@keyframes neu-toast-in{0%{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}@media(min-width:400px){@keyframes neu-toast-in{0%{opacity:0;transform:translate(20px) scale(.96)}to{opacity:1;transform:translate(0) scale(1)}}}\n"], dependencies: [{ kind: "component", type: NeuIconComponent, selector: "neu-icon", inputs: ["name", "strokeWidth", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
139
137
|
}
|
|
140
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
138
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: NeuToastContainerComponent, decorators: [{
|
|
141
139
|
type: Component,
|
|
142
140
|
args: [{ selector: 'neu-toast-container', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NeuIconComponent], host: {
|
|
143
141
|
class: 'neu-toast-container',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"neural-ui-core-toast.mjs","sources":["../../../../projects/ui-core/toast/neu-toast.service.ts","../../../../projects/ui-core/toast/neu-toast.component.ts","../../../../projects/ui-core/toast/neural-ui-core-toast.ts"],"sourcesContent":["import { Injectable, signal } from '@angular/core';\nimport { NeuToastItem, NeuToastOptions, NeuToastPosition } from './neu-toast.types';\n\n/**\n * NeuralUI Toast Service\n *\n * Lanza notificaciones flotantes desde cualquier punto de la app.\n * Requiere que `<neu-toast-container>` esté presente en la raíz del app.\n *\n * Uso:\n * const toast = inject(NeuToastService);\n * toast.success('Guardado correctamente');\n * toast.error('Ha ocurrido un error', { title: 'Error', duration: 8000 });\n */\n@Injectable({ providedIn: 'root' })\nexport class NeuToastService {\n /** Lista reactiva de toasts activos / Reactive list of active toasts */\n readonly toasts = signal<NeuToastItem[]>([]);\n\n /** Posición del contenedor de toasts / Toast container position */\n readonly position = signal<NeuToastPosition>('top-right');\n\n private readonly timers = new Map<string, ReturnType<typeof setTimeout>>();\n\n setPosition(position: NeuToastPosition): void {\n this.position.set(position);\n }\n\n show(options: NeuToastOptions): string {\n const id = `neu-toast-${Date.now()}-${Math.random().toString(36).slice(2, 6)}`;\n const duration = options.duration ?? 4000;\n\n const item: NeuToastItem = {\n id,\n message: options.message,\n title: options.title ?? '',\n type: options.type ?? 'info',\n duration,\n };\n\n this.toasts.update((list) => [...list, item]);\n\n if (duration > 0) {\n const timer = setTimeout(() => this.dismiss(id), duration);\n this.timers.set(id, timer);\n }\n\n return id;\n }\n\n success(message: string, opts?: Partial<NeuToastOptions>): string {\n return this.show({ ...opts, message, type: 'success' });\n }\n\n error(message: string, opts?: Partial<NeuToastOptions>): string {\n return this.show({ ...opts, message, type: 'error' });\n }\n\n info(message: string, opts?: Partial<NeuToastOptions>): string {\n return this.show({ ...opts, message, type: 'info' });\n }\n\n warning(message: string, opts?: Partial<NeuToastOptions>): string {\n return this.show({ ...opts, message, type: 'warning' });\n }\n\n dismiss(id: string): void {\n this.clearTimer(id);\n this.toasts.update((list) => list.filter((t) => t.id !== id));\n }\n\n clear(): void {\n for (const timer of this.timers.values()) {\n clearTimeout(timer);\n }\n this.timers.clear();\n this.toasts.set([]);\n }\n\n private clearTimer(id: string): void {\n const timer = this.timers.get(id);\n if (!timer) return;\n clearTimeout(timer);\n this.timers.delete(id);\n }\n}\n","import { ChangeDetectionStrategy, Component, ViewEncapsulation, inject } from '@angular/core';\nimport { NeuToastService } from './neu-toast.service';\nimport { NeuToastType } from './neu-toast.types';\nimport { NeuIconComponent } from '@neural-ui/core/icon';\n\n/** Mapa de iconos Lucide por tipo de toast / Map of Lucide icons by toast type */\nconst TOAST_ICONS: Record<NeuToastType, string> = {\n success: 'lucideCheckCircle',\n error: 'lucideXCircle',\n warning: 'lucideAlertTriangle',\n info: 'lucideInfo',\n};\n\n/**\n * NeuralUI Toast Container Component\n *\n * Renderiza los toasts activos del NeuToastService.\n * Añade este componente una sola vez en la raíz del app (app.html).\n *\n * Diseño mobile-first:\n * - < 400px: banner inferior centrado\n * - ≥ 400px: stack en la esquina superior derecha\n *\n * Uso:\n * <!-- en app.html -->\n * <neu-toast-container />\n */\n@Component({\n selector: 'neu-toast-container',\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [NeuIconComponent],\n host: {\n class: 'neu-toast-container',\n 'aria-live': 'polite',\n 'aria-atomic': 'false',\n '[class.neu-toast-container--top-right]': 'toastService.position() === \"top-right\"',\n '[class.neu-toast-container--top-left]': 'toastService.position() === \"top-left\"',\n '[class.neu-toast-container--bottom-right]': 'toastService.position() === \"bottom-right\"',\n '[class.neu-toast-container--bottom-left]': 'toastService.position() === \"bottom-left\"',\n },\n template: `\n @for (toast of toastService.toasts(); track toast.id) {\n <div\n class=\"neu-toast\"\n [class]=\"'neu-toast neu-toast--' + toast.type\"\n [attr.role]=\"toast.type === 'error' || toast.type === 'warning' ? 'alert' : 'status'\"\n [attr.aria-live]=\"\n toast.type === 'error' || toast.type === 'warning' ? 'assertive' : 'polite'\n \"\n >\n <span class=\"neu-toast__icon-wrap\" aria-hidden=\"true\">\n <neu-icon [name]=\"getIcon(toast.type)\" size=\"1rem\" />\n </span>\n <div class=\"neu-toast__body\">\n @if (toast.title) {\n <p class=\"neu-toast__title\">{{ toast.title }}</p>\n }\n <p class=\"neu-toast__message\">{{ toast.message }}</p>\n </div>\n <button\n class=\"neu-toast__close\"\n type=\"button\"\n [attr.aria-label]=\"'Cerrar'\"\n (click)=\"toastService.dismiss(toast.id)\"\n >\n <neu-icon name=\"lucideX\" size=\"1rem\" />\n </button>\n </div>\n }\n `,\n styleUrl: './neu-toast.component.scss',\n})\nexport class NeuToastContainerComponent {\n readonly toastService = inject(NeuToastService);\n\n getIcon(type: NeuToastType): string {\n return TOAST_ICONS[type];\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;;AAGA;;;;;;;;;;AAUG;MAEU,eAAe,CAAA;;
|
|
1
|
+
{"version":3,"file":"neural-ui-core-toast.mjs","sources":["../../../../projects/ui-core/toast/neu-toast.service.ts","../../../../projects/ui-core/toast/neu-toast.component.ts","../../../../projects/ui-core/toast/neural-ui-core-toast.ts"],"sourcesContent":["import { Injectable, signal } from '@angular/core';\nimport { NeuToastItem, NeuToastOptions, NeuToastPosition } from './neu-toast.types';\n\n/**\n * NeuralUI Toast Service\n *\n * Lanza notificaciones flotantes desde cualquier punto de la app.\n * Requiere que `<neu-toast-container>` esté presente en la raíz del app.\n *\n * Uso:\n * const toast = inject(NeuToastService);\n * toast.success('Guardado correctamente');\n * toast.error('Ha ocurrido un error', { title: 'Error', duration: 8000 });\n */\n@Injectable({ providedIn: 'root' })\nexport class NeuToastService {\n /** Lista reactiva de toasts activos / Reactive list of active toasts */\n readonly toasts = signal<NeuToastItem[]>([]);\n\n /** Posición del contenedor de toasts / Toast container position */\n readonly position = signal<NeuToastPosition>('top-right');\n\n private readonly timers = new Map<string, ReturnType<typeof setTimeout>>();\n\n setPosition(position: NeuToastPosition): void {\n this.position.set(position);\n }\n\n show(options: NeuToastOptions): string {\n const id = `neu-toast-${Date.now()}-${Math.random().toString(36).slice(2, 6)}`;\n const duration = options.duration ?? 4000;\n\n const item: NeuToastItem = {\n id,\n message: options.message,\n title: options.title ?? '',\n type: options.type ?? 'info',\n duration,\n };\n\n this.toasts.update((list) => [...list, item]);\n\n if (duration > 0) {\n const timer = setTimeout(() => this.dismiss(id), duration);\n this.timers.set(id, timer);\n }\n\n return id;\n }\n\n success(message: string, opts?: Partial<NeuToastOptions>): string {\n return this.show({ ...opts, message, type: 'success' });\n }\n\n error(message: string, opts?: Partial<NeuToastOptions>): string {\n return this.show({ ...opts, message, type: 'error' });\n }\n\n info(message: string, opts?: Partial<NeuToastOptions>): string {\n return this.show({ ...opts, message, type: 'info' });\n }\n\n warning(message: string, opts?: Partial<NeuToastOptions>): string {\n return this.show({ ...opts, message, type: 'warning' });\n }\n\n dismiss(id: string): void {\n this.clearTimer(id);\n this.toasts.update((list) => list.filter((t) => t.id !== id));\n }\n\n clear(): void {\n for (const timer of this.timers.values()) {\n clearTimeout(timer);\n }\n this.timers.clear();\n this.toasts.set([]);\n }\n\n private clearTimer(id: string): void {\n const timer = this.timers.get(id);\n if (!timer) return;\n clearTimeout(timer);\n this.timers.delete(id);\n }\n}\n","import { ChangeDetectionStrategy, Component, ViewEncapsulation, inject } from '@angular/core';\nimport { NeuToastService } from './neu-toast.service';\nimport { NeuToastType } from './neu-toast.types';\nimport { NeuIconComponent } from '@neural-ui/core/icon';\n\n/** Mapa de iconos Lucide por tipo de toast / Map of Lucide icons by toast type */\nconst TOAST_ICONS: Record<NeuToastType, string> = {\n success: 'lucideCheckCircle',\n error: 'lucideXCircle',\n warning: 'lucideAlertTriangle',\n info: 'lucideInfo',\n};\n\n/**\n * NeuralUI Toast Container Component\n *\n * Renderiza los toasts activos del NeuToastService.\n * Añade este componente una sola vez en la raíz del app (app.html).\n *\n * Diseño mobile-first:\n * - < 400px: banner inferior centrado\n * - ≥ 400px: stack en la esquina superior derecha\n *\n * Uso:\n * <!-- en app.html -->\n * <neu-toast-container />\n */\n@Component({\n selector: 'neu-toast-container',\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [NeuIconComponent],\n host: {\n class: 'neu-toast-container',\n 'aria-live': 'polite',\n 'aria-atomic': 'false',\n '[class.neu-toast-container--top-right]': 'toastService.position() === \"top-right\"',\n '[class.neu-toast-container--top-left]': 'toastService.position() === \"top-left\"',\n '[class.neu-toast-container--bottom-right]': 'toastService.position() === \"bottom-right\"',\n '[class.neu-toast-container--bottom-left]': 'toastService.position() === \"bottom-left\"',\n },\n template: `\n @for (toast of toastService.toasts(); track toast.id) {\n <div\n class=\"neu-toast\"\n [class]=\"'neu-toast neu-toast--' + toast.type\"\n [attr.role]=\"toast.type === 'error' || toast.type === 'warning' ? 'alert' : 'status'\"\n [attr.aria-live]=\"\n toast.type === 'error' || toast.type === 'warning' ? 'assertive' : 'polite'\n \"\n >\n <span class=\"neu-toast__icon-wrap\" aria-hidden=\"true\">\n <neu-icon [name]=\"getIcon(toast.type)\" size=\"1rem\" />\n </span>\n <div class=\"neu-toast__body\">\n @if (toast.title) {\n <p class=\"neu-toast__title\">{{ toast.title }}</p>\n }\n <p class=\"neu-toast__message\">{{ toast.message }}</p>\n </div>\n <button\n class=\"neu-toast__close\"\n type=\"button\"\n [attr.aria-label]=\"'Cerrar'\"\n (click)=\"toastService.dismiss(toast.id)\"\n >\n <neu-icon name=\"lucideX\" size=\"1rem\" />\n </button>\n </div>\n }\n `,\n styleUrl: './neu-toast.component.scss',\n})\nexport class NeuToastContainerComponent {\n readonly toastService = inject(NeuToastService);\n\n getIcon(type: NeuToastType): string {\n return TOAST_ICONS[type];\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
|
|
@@ -17,33 +17,26 @@ import { NeuIconComponent } from '@neural-ui/core/icon';
|
|
|
17
17
|
*/
|
|
18
18
|
class NeuToggleButtonGroupComponent {
|
|
19
19
|
/** Lista de opciones del grupo / Group option list */
|
|
20
|
-
options = input([], /*
|
|
21
|
-
...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
|
|
20
|
+
options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
|
|
22
21
|
/**
|
|
23
22
|
* Permite seleccionar múltiples opciones.
|
|
24
23
|
* - false (por defecto): valor es `T | null`
|
|
25
24
|
* - true: valor es `T[]`
|
|
26
25
|
*/
|
|
27
|
-
multiple = input(false, /*
|
|
28
|
-
...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
|
|
26
|
+
multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
|
|
29
27
|
/** Tamaño visual / Visual size */
|
|
30
|
-
size = input('md', /*
|
|
31
|
-
...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
28
|
+
size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
32
29
|
/** Deshabilita todo el grupo / Disables the entire group */
|
|
33
|
-
disabled = input(false, /*
|
|
34
|
-
...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
30
|
+
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
35
31
|
/** Emite el nuevo valor al cambiar (útil sin formControl) / Emits the new value on change (useful without formControl) */
|
|
36
32
|
neuChange = output();
|
|
37
|
-
_value = signal(null, /*
|
|
38
|
-
...(ngDevMode ? [{ debugName: "
|
|
39
|
-
_isDisabled = signal(false, /* @ts-ignore */
|
|
40
|
-
...(ngDevMode ? [{ debugName: "_isDisabled" }] : /* istanbul ignore next */ []));
|
|
33
|
+
_value = signal(null, ...(ngDevMode ? [{ debugName: "_value" }] : /* istanbul ignore next */ []));
|
|
34
|
+
_isDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_isDisabled" }] : /* istanbul ignore next */ []));
|
|
41
35
|
groupClasses = computed(() => ({
|
|
42
36
|
'neu-toggle-group': true,
|
|
43
37
|
[`neu-toggle-group--${this.size()}`]: true,
|
|
44
38
|
'neu-toggle-group--disabled': this._isDisabled(),
|
|
45
|
-
}), /*
|
|
46
|
-
...(ngDevMode ? [{ debugName: "groupClasses" }] : /* istanbul ignore next */ []));
|
|
39
|
+
}), ...(ngDevMode ? [{ debugName: "groupClasses" }] : /* istanbul ignore next */ []));
|
|
47
40
|
isSelected(value) {
|
|
48
41
|
const v = this._value();
|
|
49
42
|
if (this.multiple()) {
|
|
@@ -91,8 +84,8 @@ class NeuToggleButtonGroupComponent {
|
|
|
91
84
|
setDisabledState(isDisabled) {
|
|
92
85
|
this._isDisabled.set(isDisabled);
|
|
93
86
|
}
|
|
94
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
95
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
87
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: NeuToggleButtonGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
88
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: NeuToggleButtonGroupComponent, isStandalone: true, selector: "neu-toggle-button-group", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { neuChange: "neuChange" }, host: { classAttribute: "neu-toggle-group-host" }, providers: [
|
|
96
89
|
{
|
|
97
90
|
provide: NG_VALUE_ACCESSOR,
|
|
98
91
|
useExisting: forwardRef(() => NeuToggleButtonGroupComponent),
|
|
@@ -125,7 +118,7 @@ class NeuToggleButtonGroupComponent {
|
|
|
125
118
|
</div>
|
|
126
119
|
`, isInline: true, styles: [".neu-toggle-group-host{display:inline-block}.neu-toggle-group{display:inline-flex;border:1px solid var(--neu-border);border-radius:var(--neu-radius);overflow:hidden;background:var(--neu-surface)}.neu-toggle-group__btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--neu-space-2);border:none;border-right:1px solid var(--neu-border);background:transparent;color:var(--neu-text-muted);font-family:var(--neu-font-sans);font-size:var(--neu-text-sm);font-weight:500;line-height:1;white-space:nowrap;cursor:pointer;padding:.5rem var(--neu-space-4);transition:background-color .15s ease,color .15s ease,border-color .15s ease;outline:none;-webkit-user-select:none;user-select:none}.neu-toggle-group__btn:last-child{border-right:none}.neu-toggle-group__btn:hover:not(:disabled):not(.neu-toggle-group__btn--disabled){background:var(--neu-surface-2);color:var(--neu-text)}.neu-toggle-group__btn:focus-visible{position:relative;z-index:1;box-shadow:inset 0 0 0 2px var(--neu-primary)}.neu-toggle-group__btn--active{background:var(--neu-primary-solid, var(--neu-primary-dark, var(--neu-primary)));color:var(--neu-primary-solid-fg, var(--neu-primary-fg));border-right-color:var(--neu-primary-solid-hover, var(--neu-primary-dark))}.neu-toggle-group__btn--active:hover:not(:disabled):not(.neu-toggle-group__btn--disabled){background:var(--neu-primary-solid-hover, var(--neu-primary-dark));color:var(--neu-primary-solid-fg, var(--neu-primary-fg))}.neu-toggle-group__btn--active+.neu-toggle-group__btn{border-left-color:var(--neu-primary-solid-hover, var(--neu-primary-dark))}.neu-toggle-group__btn--disabled{opacity:.45;cursor:not-allowed}.neu-toggle-group--disabled{opacity:.6;pointer-events:none}.neu-toggle-group--sm .neu-toggle-group__btn{font-size:var(--neu-text-xs);padding:.375rem var(--neu-space-3)}.neu-toggle-group--md .neu-toggle-group__btn{font-size:var(--neu-text-sm);padding:.5rem var(--neu-space-4)}.neu-toggle-group--lg .neu-toggle-group__btn{font-size:var(--neu-text-base);padding:.625rem var(--neu-space-5)}\n"], dependencies: [{ kind: "component", type: NeuIconComponent, selector: "neu-icon", inputs: ["name", "strokeWidth", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
127
120
|
}
|
|
128
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
121
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: NeuToggleButtonGroupComponent, decorators: [{
|
|
129
122
|
type: Component,
|
|
130
123
|
args: [{ selector: 'neu-toggle-button-group', imports: [NeuIconComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
131
124
|
{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"neural-ui-core-toggle-button-group.mjs","sources":["../../../../projects/ui-core/toggle-button-group/neu-toggle-button-group.component.ts","../../../../projects/ui-core/toggle-button-group/neural-ui-core-toggle-button-group.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n ViewEncapsulation,\n computed,\n forwardRef,\n input,\n output,\n signal,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { NeuButtonSize } from '@neural-ui/core/button';\nimport { NeuIconComponent } from '@neural-ui/core/icon';\n\nexport interface NeuToggleOption<T = unknown> {\n /** Texto visible del botón / Visible button text */\n label: string;\n /** Valor asociado a esta opción / Value associated with this option */\n value: T;\n /** Nombre de icono Lucide (opcional) / Lucide icon name (optional) */\n icon?: string;\n /** Deshabilita solo esta opción / Disables this option only */\n disabled?: boolean;\n}\n\n/**\n * NeuralUI ToggleButtonGroup Component\n *\n * Grupo de botones de selección (single o múltiple). / Selection button group (single or multiple).\n * Selector segmentado para selección única o múltiple. / Segmented selector for single or multiple selection.\n *\n * Uso (single):\n * <neu-toggle-button-group [options]=\"opts\" [formControl]=\"valueCtrl\" />\n *\n * Uso (múltiple):\n * <neu-toggle-button-group [options]=\"opts\" [multiple]=\"true\" [formControl]=\"valuesCtrl\" />\n */\n@Component({\n selector: 'neu-toggle-button-group',\n imports: [NeuIconComponent],\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => NeuToggleButtonGroupComponent),\n multi: true,\n },\n ],\n host: { class: 'neu-toggle-group-host' },\n template: `\n <div\n class=\"neu-toggle-group\"\n [class]=\"groupClasses()\"\n role=\"group\"\n [attr.aria-disabled]=\"_isDisabled() || null\"\n >\n @for (opt of options(); track opt.value) {\n <button\n type=\"button\"\n class=\"neu-toggle-group__btn\"\n [class.neu-toggle-group__btn--active]=\"isSelected(opt.value)\"\n [class.neu-toggle-group__btn--disabled]=\"opt.disabled || _isDisabled()\"\n [attr.aria-pressed]=\"isSelected(opt.value)\"\n [disabled]=\"opt.disabled || _isDisabled() ? '' : null\"\n (click)=\"toggle(opt)\"\n (blur)=\"onBlur()\"\n >\n @if (opt.icon) {\n <neu-icon [name]=\"opt.icon\" size=\"16px\" strokeWidth=\"2\" />\n }\n {{ opt.label }}\n </button>\n }\n </div>\n `,\n styleUrl: './neu-toggle-button-group.component.scss',\n})\nexport class NeuToggleButtonGroupComponent<T = unknown> implements ControlValueAccessor {\n /** Lista de opciones del grupo / Group option list */\n options = input<NeuToggleOption<T>[]>([]);\n\n /**\n * Permite seleccionar múltiples opciones.\n * - false (por defecto): valor es `T | null`\n * - true: valor es `T[]`\n */\n multiple = input<boolean>(false);\n\n /** Tamaño visual / Visual size */\n size = input<NeuButtonSize>('md');\n\n /** Deshabilita todo el grupo / Disables the entire group */\n disabled = input<boolean>(false);\n\n /** Emite el nuevo valor al cambiar (útil sin formControl) / Emits the new value on change (useful without formControl) */\n neuChange = output<T | T[] | null>();\n\n readonly _value = signal<T | T[] | null>(null);\n readonly _isDisabled = signal(false);\n\n readonly groupClasses = computed(() => ({\n 'neu-toggle-group': true,\n [`neu-toggle-group--${this.size()}`]: true,\n 'neu-toggle-group--disabled': this._isDisabled(),\n }));\n\n isSelected(value: T): boolean {\n const v = this._value();\n if (this.multiple()) {\n return Array.isArray(v) && (v as T[]).includes(value);\n }\n return v === value;\n }\n\n toggle(opt: NeuToggleOption<T>): void {\n if (opt.disabled || this._isDisabled()) return;\n\n let next: T | T[] | null;\n\n if (this.multiple()) {\n const current: T[] = Array.isArray(this._value()) ? (this._value() as T[]) : [];\n const idx = current.indexOf(opt.value);\n next = idx >= 0 ? current.filter((_, i) => i !== idx) : [...current, opt.value];\n } else {\n next = this._value() === opt.value ? null : opt.value;\n }\n\n this._value.set(next);\n this._onChange(next);\n this._onTouched();\n this.neuChange.emit(next);\n }\n\n onBlur(): void {\n this._onTouched();\n }\n\n // ---- CVA ----\n\n private _onChange: (v: unknown) => void = () => {};\n private _onTouched: () => void = () => {};\n\n writeValue(val: T | T[] | null): void {\n if (val === null || val === undefined) {\n this._value.set(this.multiple() ? ([] as T[]) : null);\n } else {\n this._value.set(val);\n }\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(isDisabled: boolean): void {\n this._isDisabled.set(isDisabled);\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;;;AAyBA;;;;;;;;;;;AAWG;MA0CU,6BAA6B,CAAA;;
|
|
1
|
+
{"version":3,"file":"neural-ui-core-toggle-button-group.mjs","sources":["../../../../projects/ui-core/toggle-button-group/neu-toggle-button-group.component.ts","../../../../projects/ui-core/toggle-button-group/neural-ui-core-toggle-button-group.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n ViewEncapsulation,\n computed,\n forwardRef,\n input,\n output,\n signal,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { NeuButtonSize } from '@neural-ui/core/button';\nimport { NeuIconComponent } from '@neural-ui/core/icon';\n\nexport interface NeuToggleOption<T = unknown> {\n /** Texto visible del botón / Visible button text */\n label: string;\n /** Valor asociado a esta opción / Value associated with this option */\n value: T;\n /** Nombre de icono Lucide (opcional) / Lucide icon name (optional) */\n icon?: string;\n /** Deshabilita solo esta opción / Disables this option only */\n disabled?: boolean;\n}\n\n/**\n * NeuralUI ToggleButtonGroup Component\n *\n * Grupo de botones de selección (single o múltiple). / Selection button group (single or multiple).\n * Selector segmentado para selección única o múltiple. / Segmented selector for single or multiple selection.\n *\n * Uso (single):\n * <neu-toggle-button-group [options]=\"opts\" [formControl]=\"valueCtrl\" />\n *\n * Uso (múltiple):\n * <neu-toggle-button-group [options]=\"opts\" [multiple]=\"true\" [formControl]=\"valuesCtrl\" />\n */\n@Component({\n selector: 'neu-toggle-button-group',\n imports: [NeuIconComponent],\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => NeuToggleButtonGroupComponent),\n multi: true,\n },\n ],\n host: { class: 'neu-toggle-group-host' },\n template: `\n <div\n class=\"neu-toggle-group\"\n [class]=\"groupClasses()\"\n role=\"group\"\n [attr.aria-disabled]=\"_isDisabled() || null\"\n >\n @for (opt of options(); track opt.value) {\n <button\n type=\"button\"\n class=\"neu-toggle-group__btn\"\n [class.neu-toggle-group__btn--active]=\"isSelected(opt.value)\"\n [class.neu-toggle-group__btn--disabled]=\"opt.disabled || _isDisabled()\"\n [attr.aria-pressed]=\"isSelected(opt.value)\"\n [disabled]=\"opt.disabled || _isDisabled() ? '' : null\"\n (click)=\"toggle(opt)\"\n (blur)=\"onBlur()\"\n >\n @if (opt.icon) {\n <neu-icon [name]=\"opt.icon\" size=\"16px\" strokeWidth=\"2\" />\n }\n {{ opt.label }}\n </button>\n }\n </div>\n `,\n styleUrl: './neu-toggle-button-group.component.scss',\n})\nexport class NeuToggleButtonGroupComponent<T = unknown> implements ControlValueAccessor {\n /** Lista de opciones del grupo / Group option list */\n options = input<NeuToggleOption<T>[]>([]);\n\n /**\n * Permite seleccionar múltiples opciones.\n * - false (por defecto): valor es `T | null`\n * - true: valor es `T[]`\n */\n multiple = input<boolean>(false);\n\n /** Tamaño visual / Visual size */\n size = input<NeuButtonSize>('md');\n\n /** Deshabilita todo el grupo / Disables the entire group */\n disabled = input<boolean>(false);\n\n /** Emite el nuevo valor al cambiar (útil sin formControl) / Emits the new value on change (useful without formControl) */\n neuChange = output<T | T[] | null>();\n\n readonly _value = signal<T | T[] | null>(null);\n readonly _isDisabled = signal(false);\n\n readonly groupClasses = computed(() => ({\n 'neu-toggle-group': true,\n [`neu-toggle-group--${this.size()}`]: true,\n 'neu-toggle-group--disabled': this._isDisabled(),\n }));\n\n isSelected(value: T): boolean {\n const v = this._value();\n if (this.multiple()) {\n return Array.isArray(v) && (v as T[]).includes(value);\n }\n return v === value;\n }\n\n toggle(opt: NeuToggleOption<T>): void {\n if (opt.disabled || this._isDisabled()) return;\n\n let next: T | T[] | null;\n\n if (this.multiple()) {\n const current: T[] = Array.isArray(this._value()) ? (this._value() as T[]) : [];\n const idx = current.indexOf(opt.value);\n next = idx >= 0 ? current.filter((_, i) => i !== idx) : [...current, opt.value];\n } else {\n next = this._value() === opt.value ? null : opt.value;\n }\n\n this._value.set(next);\n this._onChange(next);\n this._onTouched();\n this.neuChange.emit(next);\n }\n\n onBlur(): void {\n this._onTouched();\n }\n\n // ---- CVA ----\n\n private _onChange: (v: unknown) => void = () => {};\n private _onTouched: () => void = () => {};\n\n writeValue(val: T | T[] | null): void {\n if (val === null || val === undefined) {\n this._value.set(this.multiple() ? ([] as T[]) : null);\n } else {\n this._value.set(val);\n }\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(isDisabled: boolean): void {\n this._isDisabled.set(isDisabled);\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
|
|
@@ -15,27 +15,22 @@ import { input, computed, ChangeDetectionStrategy, ViewEncapsulation, Component
|
|
|
15
15
|
*/
|
|
16
16
|
class NeuToolbarComponent {
|
|
17
17
|
/** Tamaño de la toolbar / Toolbar size */
|
|
18
|
-
size = input('md', /*
|
|
19
|
-
...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
18
|
+
size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
20
19
|
/** Añade sombra en la parte inferior / Adds shadow at the bottom */
|
|
21
|
-
shadow = input(false, /*
|
|
22
|
-
...(ngDevMode ? [{ debugName: "shadow" }] : /* istanbul ignore next */ []));
|
|
20
|
+
shadow = input(false, ...(ngDevMode ? [{ debugName: "shadow" }] : /* istanbul ignore next */ []));
|
|
23
21
|
/** Añade separador inferior / Adds bottom separator */
|
|
24
|
-
bordered = input(false, /*
|
|
25
|
-
...(ngDevMode ? [{ debugName: "bordered" }] : /* istanbul ignore next */ []));
|
|
22
|
+
bordered = input(false, ...(ngDevMode ? [{ debugName: "bordered" }] : /* istanbul ignore next */ []));
|
|
26
23
|
/** Color de fondo personalizado vía CSS (pasa a la variable local) / Custom background color via CSS */
|
|
27
|
-
surface = input('surface', /*
|
|
28
|
-
...(ngDevMode ? [{ debugName: "surface" }] : /* istanbul ignore next */ []));
|
|
24
|
+
surface = input('surface', ...(ngDevMode ? [{ debugName: "surface" }] : /* istanbul ignore next */ []));
|
|
29
25
|
hostClasses = computed(() => ({
|
|
30
26
|
'neu-toolbar': true,
|
|
31
27
|
[`neu-toolbar--${this.size()}`]: true,
|
|
32
28
|
[`neu-toolbar--${this.surface()}`]: true,
|
|
33
29
|
'neu-toolbar--shadow': this.shadow(),
|
|
34
30
|
'neu-toolbar--bordered': this.bordered(),
|
|
35
|
-
}), /*
|
|
36
|
-
|
|
37
|
-
static
|
|
38
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: NeuToolbarComponent, isStandalone: true, selector: "neu-toolbar", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shadow: { classPropertyName: "shadow", publicName: "shadow", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, surface: { classPropertyName: "surface", publicName: "surface", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: `
|
|
31
|
+
}), ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
|
|
32
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: NeuToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
33
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: NeuToolbarComponent, isStandalone: true, selector: "neu-toolbar", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shadow: { classPropertyName: "shadow", publicName: "shadow", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, surface: { classPropertyName: "surface", publicName: "surface", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: `
|
|
39
34
|
<div class="neu-toolbar__section neu-toolbar__section--start">
|
|
40
35
|
<ng-content select="[neu-toolbar-start]" />
|
|
41
36
|
</div>
|
|
@@ -48,7 +43,7 @@ class NeuToolbarComponent {
|
|
|
48
43
|
<ng-content />
|
|
49
44
|
`, isInline: true, styles: ["@charset \"UTF-8\";.neu-toolbar{display:flex;align-items:center;width:100%;gap:8px;background:var(--neu-toolbar-bg, var(--neu-surface-1, #ffffff));color:var(--neu-toolbar-color, var(--neu-text-primary, #111))}.neu-toolbar--sm{padding:6px 12px;min-height:40px}.neu-toolbar--md{padding:8px 16px;min-height:52px}.neu-toolbar--lg{padding:12px 20px;min-height:64px}.neu-toolbar--primary{background:var(--neu-toolbar-primary-bg, var(--neu-primary-dark, var(--neu-primary)));color:var(--neu-toolbar-primary-color, #fff)}.neu-toolbar--primary .neu-button--ghost{color:#ffffffeb}.neu-toolbar--primary .neu-button--ghost:hover:not(:disabled):not(.neu-button--disabled){background:#ffffff1f;color:#fff}.neu-toolbar--none{background:transparent}.neu-toolbar--shadow{box-shadow:0 1px 4px #0000001a}.neu-toolbar--bordered{border-bottom:1px solid var(--neu-border-color, #e5e7eb)}.neu-toolbar__section{display:flex;align-items:center;gap:8px}.neu-toolbar__section--start{flex:0 0 auto;margin-right:auto}.neu-toolbar__section--center{flex:0 1 auto;justify-content:center}.neu-toolbar__section--end{flex:0 0 auto;margin-left:auto}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
50
45
|
}
|
|
51
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
46
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: NeuToolbarComponent, decorators: [{
|
|
52
47
|
type: Component,
|
|
53
48
|
args: [{ selector: 'neu-toolbar', imports: [], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { '[class]': 'hostClasses()' }, template: `
|
|
54
49
|
<div class="neu-toolbar__section neu-toolbar__section--start">
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"neural-ui-core-toolbar.mjs","sources":["../../../../projects/ui-core/toolbar/neu-toolbar.component.ts","../../../../projects/ui-core/toolbar/neural-ui-core-toolbar.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n ViewEncapsulation,\n computed,\n input,\n} from '@angular/core';\n\nexport type NeuToolbarSize = 'sm' | 'md' | 'lg';\n\n/**\n * NeuralUI Toolbar Component\n *\n * Barra horizontal con tres zonas de contenido: start (izquierda), center (centro) y end (derecha).\n *\n * Uso:\n * <neu-toolbar>\n * <span neu-toolbar-start>Logo</span>\n * <span neu-toolbar-center>Título</span>\n * <span neu-toolbar-end><neu-button>Acción</neu-button></span>\n * </neu-toolbar>\n */\n@Component({\n selector: 'neu-toolbar',\n imports: [],\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: { '[class]': 'hostClasses()' },\n template: `\n <div class=\"neu-toolbar__section neu-toolbar__section--start\">\n <ng-content select=\"[neu-toolbar-start]\" />\n </div>\n <div class=\"neu-toolbar__section neu-toolbar__section--center\">\n <ng-content select=\"[neu-toolbar-center]\" />\n </div>\n <div class=\"neu-toolbar__section neu-toolbar__section--end\">\n <ng-content select=\"[neu-toolbar-end]\" />\n </div>\n <ng-content />\n `,\n styleUrl: './neu-toolbar.component.scss',\n})\nexport class NeuToolbarComponent {\n /** Tamaño de la toolbar / Toolbar size */\n readonly size = input<NeuToolbarSize>('md');\n\n /** Añade sombra en la parte inferior / Adds shadow at the bottom */\n readonly shadow = input<boolean>(false);\n\n /** Añade separador inferior / Adds bottom separator */\n readonly bordered = input<boolean>(false);\n\n /** Color de fondo personalizado vía CSS (pasa a la variable local) / Custom background color via CSS */\n readonly surface = input<'primary' | 'surface' | 'none'>('surface');\n\n readonly hostClasses = computed(() => ({\n 'neu-toolbar': true,\n [`neu-toolbar--${this.size()}`]: true,\n [`neu-toolbar--${this.surface()}`]: true,\n 'neu-toolbar--shadow': this.shadow(),\n 'neu-toolbar--bordered': this.bordered(),\n }));\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;AAUA;;;;;;;;;;;AAWG;MAqBU,mBAAmB,CAAA;;
|
|
1
|
+
{"version":3,"file":"neural-ui-core-toolbar.mjs","sources":["../../../../projects/ui-core/toolbar/neu-toolbar.component.ts","../../../../projects/ui-core/toolbar/neural-ui-core-toolbar.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n ViewEncapsulation,\n computed,\n input,\n} from '@angular/core';\n\nexport type NeuToolbarSize = 'sm' | 'md' | 'lg';\n\n/**\n * NeuralUI Toolbar Component\n *\n * Barra horizontal con tres zonas de contenido: start (izquierda), center (centro) y end (derecha).\n *\n * Uso:\n * <neu-toolbar>\n * <span neu-toolbar-start>Logo</span>\n * <span neu-toolbar-center>Título</span>\n * <span neu-toolbar-end><neu-button>Acción</neu-button></span>\n * </neu-toolbar>\n */\n@Component({\n selector: 'neu-toolbar',\n imports: [],\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: { '[class]': 'hostClasses()' },\n template: `\n <div class=\"neu-toolbar__section neu-toolbar__section--start\">\n <ng-content select=\"[neu-toolbar-start]\" />\n </div>\n <div class=\"neu-toolbar__section neu-toolbar__section--center\">\n <ng-content select=\"[neu-toolbar-center]\" />\n </div>\n <div class=\"neu-toolbar__section neu-toolbar__section--end\">\n <ng-content select=\"[neu-toolbar-end]\" />\n </div>\n <ng-content />\n `,\n styleUrl: './neu-toolbar.component.scss',\n})\nexport class NeuToolbarComponent {\n /** Tamaño de la toolbar / Toolbar size */\n readonly size = input<NeuToolbarSize>('md');\n\n /** Añade sombra en la parte inferior / Adds shadow at the bottom */\n readonly shadow = input<boolean>(false);\n\n /** Añade separador inferior / Adds bottom separator */\n readonly bordered = input<boolean>(false);\n\n /** Color de fondo personalizado vía CSS (pasa a la variable local) / Custom background color via CSS */\n readonly surface = input<'primary' | 'surface' | 'none'>('surface');\n\n readonly hostClasses = computed(() => ({\n 'neu-toolbar': true,\n [`neu-toolbar--${this.size()}`]: true,\n [`neu-toolbar--${this.surface()}`]: true,\n 'neu-toolbar--shadow': this.shadow(),\n 'neu-toolbar--bordered': this.bordered(),\n }));\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;AAUA;;;;;;;;;;;AAWG;MAqBU,mBAAmB,CAAA;;AAErB,IAAA,IAAI,GAAG,KAAK,CAAiB,IAAI,2EAAC;;AAGlC,IAAA,MAAM,GAAG,KAAK,CAAU,KAAK,6EAAC;;AAG9B,IAAA,QAAQ,GAAG,KAAK,CAAU,KAAK,+EAAC;;AAGhC,IAAA,OAAO,GAAG,KAAK,CAAiC,SAAS,8EAAC;AAE1D,IAAA,WAAW,GAAG,QAAQ,CAAC,OAAO;AACrC,QAAA,aAAa,EAAE,IAAI;QACnB,CAAC,CAAA,aAAA,EAAgB,IAAI,CAAC,IAAI,EAAE,CAAA,CAAE,GAAG,IAAI;QACrC,CAAC,CAAA,aAAA,EAAgB,IAAI,CAAC,OAAO,EAAE,CAAA,CAAE,GAAG,IAAI;AACxC,QAAA,qBAAqB,EAAE,IAAI,CAAC,MAAM,EAAE;AACpC,QAAA,uBAAuB,EAAE,IAAI,CAAC,QAAQ,EAAE;AACzC,KAAA,CAAC,kFAAC;wGAnBQ,mBAAmB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAnB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,mBAAmB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,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,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,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,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,eAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAdpB;;;;;;;;;;;AAWT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,6lCAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;4FAGU,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBApB/B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,aAAa,WACd,EAAE,EAAA,aAAA,EACI,iBAAiB,CAAC,IAAI,EAAA,eAAA,EACpB,uBAAuB,CAAC,MAAM,QACzC,EAAE,SAAS,EAAE,eAAe,EAAE,EAAA,QAAA,EAC1B;;;;;;;;;;;AAWT,EAAA,CAAA,EAAA,MAAA,EAAA,CAAA,6lCAAA,CAAA,EAAA;;;ACvCH;;AAEG;;;;"}
|
|
@@ -5,14 +5,12 @@ import { ComponentPortal } from '@angular/cdk/portal';
|
|
|
5
5
|
|
|
6
6
|
/** @internal — componente flotante del tooltip, renderizado vía CDK Portal / floating tooltip component, rendered via CDK Portal */
|
|
7
7
|
class NeuTooltipOverlayComponent {
|
|
8
|
-
text = input.required(/*
|
|
9
|
-
...(ngDevMode ? [{ debugName: "
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NeuTooltipOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
13
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: NeuTooltipOverlayComponent, isStandalone: true, selector: "neu-tooltip-overlay", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null }, tooltipId: { classPropertyName: "tooltipId", publicName: "tooltipId", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "tooltip" }, properties: { "id": "tooltipId()" }, classAttribute: "neu-tooltip" }, ngImport: i0, template: `<span class="neu-tooltip__text">{{ text() }}</span>`, isInline: true, styles: [".neu-tooltip-panel{pointer-events:none}.neu-tooltip{display:block;animation:neu-tooltip-in .15s ease forwards}.neu-tooltip__text{display:inline-block;padding:var(--neu-space-2) var(--neu-space-3);background:var(--neu-tooltip-bg, #0f172a);color:var(--neu-tooltip-fg, #ffffff);font-family:var(--neu-font-sans);font-size:var(--neu-text-xs);font-weight:500;line-height:1.4;border-radius:var(--neu-tooltip-radius, 6px);box-shadow:var(--neu-tooltip-shadow, 0 4px 12px rgba(15, 23, 42, .24));white-space:nowrap;max-width:280px;overflow:hidden;text-overflow:ellipsis}@keyframes neu-tooltip-in{0%{opacity:0;transform:translateY(4px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
8
|
+
text = input.required(...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
|
|
9
|
+
tooltipId = input('', ...(ngDevMode ? [{ debugName: "tooltipId" }] : /* istanbul ignore next */ []));
|
|
10
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: NeuTooltipOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
11
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: NeuTooltipOverlayComponent, isStandalone: true, selector: "neu-tooltip-overlay", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null }, tooltipId: { classPropertyName: "tooltipId", publicName: "tooltipId", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "tooltip" }, properties: { "id": "tooltipId()" }, classAttribute: "neu-tooltip" }, ngImport: i0, template: `<span class="neu-tooltip__text">{{ text() }}</span>`, isInline: true, styles: [".neu-tooltip-panel{pointer-events:none}.neu-tooltip{display:block;animation:neu-tooltip-in .15s ease forwards}.neu-tooltip__text{display:inline-block;padding:var(--neu-space-2) var(--neu-space-3);background:var(--neu-tooltip-bg, #0f172a);color:var(--neu-tooltip-fg, #ffffff);font-family:var(--neu-font-sans);font-size:var(--neu-text-xs);font-weight:500;line-height:1.4;border-radius:var(--neu-tooltip-radius, 6px);box-shadow:var(--neu-tooltip-shadow, 0 4px 12px rgba(15, 23, 42, .24));white-space:nowrap;max-width:280px;overflow:hidden;text-overflow:ellipsis}@keyframes neu-tooltip-in{0%{opacity:0;transform:translateY(4px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
14
12
|
}
|
|
15
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
13
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: NeuTooltipOverlayComponent, decorators: [{
|
|
16
14
|
type: Component,
|
|
17
15
|
args: [{ selector: 'neu-tooltip-overlay', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
18
16
|
class: 'neu-tooltip',
|
|
@@ -32,12 +30,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
|
|
|
32
30
|
* <button [neuTooltip]="'Eliminar'" neuTooltipPosition="bottom">Eliminar</button>
|
|
33
31
|
*/
|
|
34
32
|
class NeuTooltipDirective {
|
|
35
|
-
neuTooltip = input.required(/*
|
|
36
|
-
...(ngDevMode ? [{ debugName: "
|
|
37
|
-
|
|
38
|
-
...(ngDevMode ? [{ debugName: "neuTooltipPosition" }] : /* istanbul ignore next */ []));
|
|
39
|
-
neuTooltipDisabled = input(false, /* @ts-ignore */
|
|
40
|
-
...(ngDevMode ? [{ debugName: "neuTooltipDisabled" }] : /* istanbul ignore next */ []));
|
|
33
|
+
neuTooltip = input.required(...(ngDevMode ? [{ debugName: "neuTooltip" }] : /* istanbul ignore next */ []));
|
|
34
|
+
neuTooltipPosition = input('top', ...(ngDevMode ? [{ debugName: "neuTooltipPosition" }] : /* istanbul ignore next */ []));
|
|
35
|
+
neuTooltipDisabled = input(false, ...(ngDevMode ? [{ debugName: "neuTooltipDisabled" }] : /* istanbul ignore next */ []));
|
|
41
36
|
_overlay = inject(Overlay);
|
|
42
37
|
_elementRef = inject((ElementRef));
|
|
43
38
|
_injector = inject(Injector);
|
|
@@ -121,10 +116,10 @@ class NeuTooltipDirective {
|
|
|
121
116
|
clearTimeout(this._hideTimeout);
|
|
122
117
|
this._overlayRef?.dispose();
|
|
123
118
|
}
|
|
124
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
125
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "
|
|
119
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: NeuTooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
120
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.17", type: NeuTooltipDirective, isStandalone: true, selector: "[neuTooltip]", inputs: { neuTooltip: { classPropertyName: "neuTooltip", publicName: "neuTooltip", isSignal: true, isRequired: true, transformFunction: null }, neuTooltipPosition: { classPropertyName: "neuTooltipPosition", publicName: "neuTooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, neuTooltipDisabled: { classPropertyName: "neuTooltipDisabled", publicName: "neuTooltipDisabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "show()", "focus": "show()", "mouseleave": "hide()", "blur": "hide()" }, properties: { "attr.aria-describedby": "_tooltipId", "attr.tabindex": "_needsTabindex() ? \"0\" : null" } }, ngImport: i0 });
|
|
126
121
|
}
|
|
127
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
122
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: NeuTooltipDirective, decorators: [{
|
|
128
123
|
type: Directive,
|
|
129
124
|
args: [{
|
|
130
125
|
selector: '[neuTooltip]',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"neural-ui-core-tooltip.mjs","sources":["../../../../projects/ui-core/tooltip/neu-tooltip.component.ts","../../../../projects/ui-core/tooltip/neu-tooltip.directive.ts","../../../../projects/ui-core/tooltip/neural-ui-core-tooltip.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, ViewEncapsulation, input } from '@angular/core';\n\n/** @internal — componente flotante del tooltip, renderizado vía CDK Portal / floating tooltip component, rendered via CDK Portal */\n@Component({\n selector: 'neu-tooltip-overlay',\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n class: 'neu-tooltip',\n role: 'tooltip',\n '[id]': 'tooltipId()',\n },\n template: `<span class=\"neu-tooltip__text\">{{ text() }}</span>`,\n styleUrl: './neu-tooltip.component.scss',\n})\nexport class NeuTooltipOverlayComponent {\n readonly text = input.required<string>();\n readonly tooltipId = input<string>('');\n}\n","import {\n ComponentRef,\n Directive,\n ElementRef,\n HostListener,\n Injector,\n OnDestroy,\n inject,\n input,\n} from '@angular/core';\nimport { Overlay, OverlayRef } from '@angular/cdk/overlay';\nimport { ComponentPortal } from '@angular/cdk/portal';\nimport { ConnectedPosition } from '@angular/cdk/overlay';\nimport { NeuTooltipOverlayComponent } from './neu-tooltip.component';\n\nexport type NeuTooltipPosition = 'top' | 'bottom' | 'left' | 'right';\n\n/**\n * NeuralUI Tooltip Directive\n *\n * Muestra un globo informativo al hacer hover/focus sobre el elemento host.\n * Usa CDK Overlay para posicionamiento robusto.\n *\n * Uso:\n * <button [neuTooltip]=\"'Guardar cambios'\">Guardar</button>\n * <button [neuTooltip]=\"'Eliminar'\" neuTooltipPosition=\"bottom\">Eliminar</button>\n */\n@Directive({\n selector: '[neuTooltip]',\n host: {\n '[attr.aria-describedby]': '_tooltipId',\n // Sólo añadimos tabindex en elementos que no son nativamente focusables\n '[attr.tabindex]': '_needsTabindex() ? \"0\" : null',\n },\n})\nexport class NeuTooltipDirective implements OnDestroy {\n readonly neuTooltip = input.required<string>();\n readonly neuTooltipPosition = input<NeuTooltipPosition>('top');\n readonly neuTooltipDisabled = input<boolean>(false);\n\n private readonly _overlay = inject(Overlay);\n private readonly _elementRef = inject(ElementRef<HTMLElement>);\n private readonly _injector = inject(Injector);\n\n readonly _tooltipId = `neu-tooltip-${Math.random().toString(36).slice(2, 7)}`;\n\n /** Elementos HTML nativamente focusables que no necesitan tabindex extra / Natively focusable HTML elements that don't need extra tabindex */\n private readonly _NATIVE_FOCUSABLE = /^(a|button|input|select|textarea|details|summary)$/i;\n protected readonly _needsTabindex = () =>\n !this._NATIVE_FOCUSABLE.test(this._elementRef.nativeElement.tagName);\n\n private _overlayRef: OverlayRef | null = null;\n private _tooltipRef: ComponentRef<NeuTooltipOverlayComponent> | null = null;\n private _hideTimeout: ReturnType<typeof setTimeout> | null = null;\n\n @HostListener('mouseenter')\n @HostListener('focus')\n show(): void {\n if (this.neuTooltipDisabled() || !this.neuTooltip()) return;\n if (this._hideTimeout) {\n clearTimeout(this._hideTimeout);\n this._hideTimeout = null;\n }\n if (this._overlayRef?.hasAttached()) return;\n\n this._createOverlay();\n const portal = new ComponentPortal(NeuTooltipOverlayComponent, null, this._injector);\n this._tooltipRef = this._overlayRef!.attach(portal);\n this._tooltipRef!.setInput('text', this.neuTooltip());\n this._tooltipRef!.setInput('tooltipId', this._tooltipId);\n }\n\n @HostListener('mouseleave')\n @HostListener('blur')\n hide(): void {\n this._hideTimeout = setTimeout(() => this._detach(), 100);\n }\n\n private _createOverlay(): void {\n if (this._overlayRef) return;\n\n const positionStrategy = this._overlay\n .position()\n .flexibleConnectedTo(this._elementRef)\n .withPositions(this._getPositions());\n\n this._overlayRef = this._overlay.create({\n positionStrategy,\n scrollStrategy: this._overlay.scrollStrategies.reposition(),\n panelClass: 'neu-tooltip-panel',\n });\n }\n\n private _getPositions(): ConnectedPosition[] {\n const map: Record<NeuTooltipPosition, ConnectedPosition> = {\n top: {\n originX: 'center',\n originY: 'top',\n overlayX: 'center',\n overlayY: 'bottom',\n offsetY: -8,\n },\n bottom: {\n originX: 'center',\n originY: 'bottom',\n overlayX: 'center',\n overlayY: 'top',\n offsetY: 8,\n },\n left: {\n originX: 'start',\n originY: 'center',\n overlayX: 'end',\n overlayY: 'center',\n offsetX: -8,\n },\n right: {\n originX: 'end',\n originY: 'center',\n overlayX: 'start',\n overlayY: 'center',\n offsetX: 8,\n },\n };\n return [map[this.neuTooltipPosition()], map['top'], map['bottom']];\n }\n\n private _detach(): void {\n this._overlayRef?.detach();\n this._tooltipRef = null;\n }\n\n ngOnDestroy(): void {\n if (this._hideTimeout) clearTimeout(this._hideTimeout);\n this._overlayRef?.dispose();\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;;;AAEA;MAaa,0BAA0B,CAAA;
|
|
1
|
+
{"version":3,"file":"neural-ui-core-tooltip.mjs","sources":["../../../../projects/ui-core/tooltip/neu-tooltip.component.ts","../../../../projects/ui-core/tooltip/neu-tooltip.directive.ts","../../../../projects/ui-core/tooltip/neural-ui-core-tooltip.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, ViewEncapsulation, input } from '@angular/core';\n\n/** @internal — componente flotante del tooltip, renderizado vía CDK Portal / floating tooltip component, rendered via CDK Portal */\n@Component({\n selector: 'neu-tooltip-overlay',\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n class: 'neu-tooltip',\n role: 'tooltip',\n '[id]': 'tooltipId()',\n },\n template: `<span class=\"neu-tooltip__text\">{{ text() }}</span>`,\n styleUrl: './neu-tooltip.component.scss',\n})\nexport class NeuTooltipOverlayComponent {\n readonly text = input.required<string>();\n readonly tooltipId = input<string>('');\n}\n","import {\n ComponentRef,\n Directive,\n ElementRef,\n HostListener,\n Injector,\n OnDestroy,\n inject,\n input,\n} from '@angular/core';\nimport { Overlay, OverlayRef } from '@angular/cdk/overlay';\nimport { ComponentPortal } from '@angular/cdk/portal';\nimport { ConnectedPosition } from '@angular/cdk/overlay';\nimport { NeuTooltipOverlayComponent } from './neu-tooltip.component';\n\nexport type NeuTooltipPosition = 'top' | 'bottom' | 'left' | 'right';\n\n/**\n * NeuralUI Tooltip Directive\n *\n * Muestra un globo informativo al hacer hover/focus sobre el elemento host.\n * Usa CDK Overlay para posicionamiento robusto.\n *\n * Uso:\n * <button [neuTooltip]=\"'Guardar cambios'\">Guardar</button>\n * <button [neuTooltip]=\"'Eliminar'\" neuTooltipPosition=\"bottom\">Eliminar</button>\n */\n@Directive({\n selector: '[neuTooltip]',\n host: {\n '[attr.aria-describedby]': '_tooltipId',\n // Sólo añadimos tabindex en elementos que no son nativamente focusables\n '[attr.tabindex]': '_needsTabindex() ? \"0\" : null',\n },\n})\nexport class NeuTooltipDirective implements OnDestroy {\n readonly neuTooltip = input.required<string>();\n readonly neuTooltipPosition = input<NeuTooltipPosition>('top');\n readonly neuTooltipDisabled = input<boolean>(false);\n\n private readonly _overlay = inject(Overlay);\n private readonly _elementRef = inject(ElementRef<HTMLElement>);\n private readonly _injector = inject(Injector);\n\n readonly _tooltipId = `neu-tooltip-${Math.random().toString(36).slice(2, 7)}`;\n\n /** Elementos HTML nativamente focusables que no necesitan tabindex extra / Natively focusable HTML elements that don't need extra tabindex */\n private readonly _NATIVE_FOCUSABLE = /^(a|button|input|select|textarea|details|summary)$/i;\n protected readonly _needsTabindex = () =>\n !this._NATIVE_FOCUSABLE.test(this._elementRef.nativeElement.tagName);\n\n private _overlayRef: OverlayRef | null = null;\n private _tooltipRef: ComponentRef<NeuTooltipOverlayComponent> | null = null;\n private _hideTimeout: ReturnType<typeof setTimeout> | null = null;\n\n @HostListener('mouseenter')\n @HostListener('focus')\n show(): void {\n if (this.neuTooltipDisabled() || !this.neuTooltip()) return;\n if (this._hideTimeout) {\n clearTimeout(this._hideTimeout);\n this._hideTimeout = null;\n }\n if (this._overlayRef?.hasAttached()) return;\n\n this._createOverlay();\n const portal = new ComponentPortal(NeuTooltipOverlayComponent, null, this._injector);\n this._tooltipRef = this._overlayRef!.attach(portal);\n this._tooltipRef!.setInput('text', this.neuTooltip());\n this._tooltipRef!.setInput('tooltipId', this._tooltipId);\n }\n\n @HostListener('mouseleave')\n @HostListener('blur')\n hide(): void {\n this._hideTimeout = setTimeout(() => this._detach(), 100);\n }\n\n private _createOverlay(): void {\n if (this._overlayRef) return;\n\n const positionStrategy = this._overlay\n .position()\n .flexibleConnectedTo(this._elementRef)\n .withPositions(this._getPositions());\n\n this._overlayRef = this._overlay.create({\n positionStrategy,\n scrollStrategy: this._overlay.scrollStrategies.reposition(),\n panelClass: 'neu-tooltip-panel',\n });\n }\n\n private _getPositions(): ConnectedPosition[] {\n const map: Record<NeuTooltipPosition, ConnectedPosition> = {\n top: {\n originX: 'center',\n originY: 'top',\n overlayX: 'center',\n overlayY: 'bottom',\n offsetY: -8,\n },\n bottom: {\n originX: 'center',\n originY: 'bottom',\n overlayX: 'center',\n overlayY: 'top',\n offsetY: 8,\n },\n left: {\n originX: 'start',\n originY: 'center',\n overlayX: 'end',\n overlayY: 'center',\n offsetX: -8,\n },\n right: {\n originX: 'end',\n originY: 'center',\n overlayX: 'start',\n overlayY: 'center',\n offsetX: 8,\n },\n };\n return [map[this.neuTooltipPosition()], map['top'], map['bottom']];\n }\n\n private _detach(): void {\n this._overlayRef?.detach();\n this._tooltipRef = null;\n }\n\n ngOnDestroy(): void {\n if (this._hideTimeout) clearTimeout(this._hideTimeout);\n this._overlayRef?.dispose();\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
|
|
@@ -3,61 +3,35 @@ import { input, output, viewChild, signal, computed, effect, ChangeDetectionStra
|
|
|
3
3
|
import { NeuTableComponent } from '@neural-ui/core/table';
|
|
4
4
|
|
|
5
5
|
class NeuTreeTableComponent {
|
|
6
|
-
nodes = input([], /*
|
|
7
|
-
...(ngDevMode ? [{ debugName: "
|
|
8
|
-
|
|
9
|
-
...(ngDevMode ? [{ debugName: "
|
|
10
|
-
|
|
11
|
-
...(ngDevMode ? [{ debugName: "
|
|
12
|
-
|
|
13
|
-
...(ngDevMode ? [{ debugName: "
|
|
14
|
-
|
|
15
|
-
...(ngDevMode ? [{ debugName: "
|
|
16
|
-
|
|
17
|
-
...(ngDevMode ? [{ debugName: "
|
|
18
|
-
|
|
19
|
-
...(ngDevMode ? [{ debugName: "
|
|
20
|
-
|
|
21
|
-
...(ngDevMode ? [{ debugName: "
|
|
22
|
-
|
|
23
|
-
...(ngDevMode ? [{ debugName: "
|
|
24
|
-
|
|
25
|
-
...(ngDevMode ? [{ debugName: "
|
|
26
|
-
|
|
27
|
-
...(ngDevMode ? [{ debugName: "
|
|
28
|
-
|
|
29
|
-
...(ngDevMode ? [{ debugName: "searchable" }] : /* istanbul ignore next */ []));
|
|
30
|
-
pagination = input(true, /* @ts-ignore */
|
|
31
|
-
...(ngDevMode ? [{ debugName: "pagination" }] : /* istanbul ignore next */ []));
|
|
32
|
-
selectable = input(false, /* @ts-ignore */
|
|
33
|
-
...(ngDevMode ? [{ debugName: "selectable" }] : /* istanbul ignore next */ []));
|
|
34
|
-
stickyHeader = input(false, /* @ts-ignore */
|
|
35
|
-
...(ngDevMode ? [{ debugName: "stickyHeader" }] : /* istanbul ignore next */ []));
|
|
36
|
-
stripedRows = input(false, /* @ts-ignore */
|
|
37
|
-
...(ngDevMode ? [{ debugName: "stripedRows" }] : /* istanbul ignore next */ []));
|
|
38
|
-
bordered = input(true, /* @ts-ignore */
|
|
39
|
-
...(ngDevMode ? [{ debugName: "bordered" }] : /* istanbul ignore next */ []));
|
|
40
|
-
roundedBorders = input(true, /* @ts-ignore */
|
|
41
|
-
...(ngDevMode ? [{ debugName: "roundedBorders" }] : /* istanbul ignore next */ []));
|
|
42
|
-
sortable = input(false, /* @ts-ignore */
|
|
43
|
-
...(ngDevMode ? [{ debugName: "sortable" }] : /* istanbul ignore next */ []));
|
|
44
|
-
showRowNumbers = input(false, /* @ts-ignore */
|
|
45
|
-
...(ngDevMode ? [{ debugName: "showRowNumbers" }] : /* istanbul ignore next */ []));
|
|
46
|
-
useUrlState = input(false, /* @ts-ignore */
|
|
47
|
-
...(ngDevMode ? [{ debugName: "useUrlState" }] : /* istanbul ignore next */ []));
|
|
48
|
-
density = input('normal', /* @ts-ignore */
|
|
49
|
-
...(ngDevMode ? [{ debugName: "density" }] : /* istanbul ignore next */ []));
|
|
50
|
-
pageSizeOptions = input([5, 10, 20], /* @ts-ignore */
|
|
51
|
-
...(ngDevMode ? [{ debugName: "pageSizeOptions" }] : /* istanbul ignore next */ []));
|
|
6
|
+
nodes = input([], ...(ngDevMode ? [{ debugName: "nodes" }] : /* istanbul ignore next */ []));
|
|
7
|
+
columns = input([], ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
|
|
8
|
+
title = input('', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
|
|
9
|
+
treeColumnKey = input('label', ...(ngDevMode ? [{ debugName: "treeColumnKey" }] : /* istanbul ignore next */ []));
|
|
10
|
+
rowKey = input('id', ...(ngDevMode ? [{ debugName: "rowKey" }] : /* istanbul ignore next */ []));
|
|
11
|
+
tableAriaLabel = input('Tree table', ...(ngDevMode ? [{ debugName: "tableAriaLabel" }] : /* istanbul ignore next */ []));
|
|
12
|
+
searchPlaceholder = input('Search rows', ...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : /* istanbul ignore next */ []));
|
|
13
|
+
emptyMessage = input('No rows found', ...(ngDevMode ? [{ debugName: "emptyMessage" }] : /* istanbul ignore next */ []));
|
|
14
|
+
expandLabel = input('Expand row', ...(ngDevMode ? [{ debugName: "expandLabel" }] : /* istanbul ignore next */ []));
|
|
15
|
+
collapseLabel = input('Collapse row', ...(ngDevMode ? [{ debugName: "collapseLabel" }] : /* istanbul ignore next */ []));
|
|
16
|
+
indentSize = input(18, ...(ngDevMode ? [{ debugName: "indentSize" }] : /* istanbul ignore next */ []));
|
|
17
|
+
searchable = input(true, ...(ngDevMode ? [{ debugName: "searchable" }] : /* istanbul ignore next */ []));
|
|
18
|
+
pagination = input(true, ...(ngDevMode ? [{ debugName: "pagination" }] : /* istanbul ignore next */ []));
|
|
19
|
+
selectable = input(false, ...(ngDevMode ? [{ debugName: "selectable" }] : /* istanbul ignore next */ []));
|
|
20
|
+
stickyHeader = input(false, ...(ngDevMode ? [{ debugName: "stickyHeader" }] : /* istanbul ignore next */ []));
|
|
21
|
+
stripedRows = input(false, ...(ngDevMode ? [{ debugName: "stripedRows" }] : /* istanbul ignore next */ []));
|
|
22
|
+
bordered = input(true, ...(ngDevMode ? [{ debugName: "bordered" }] : /* istanbul ignore next */ []));
|
|
23
|
+
roundedBorders = input(true, ...(ngDevMode ? [{ debugName: "roundedBorders" }] : /* istanbul ignore next */ []));
|
|
24
|
+
sortable = input(false, ...(ngDevMode ? [{ debugName: "sortable" }] : /* istanbul ignore next */ []));
|
|
25
|
+
showRowNumbers = input(false, ...(ngDevMode ? [{ debugName: "showRowNumbers" }] : /* istanbul ignore next */ []));
|
|
26
|
+
useUrlState = input(false, ...(ngDevMode ? [{ debugName: "useUrlState" }] : /* istanbul ignore next */ []));
|
|
27
|
+
density = input('normal', ...(ngDevMode ? [{ debugName: "density" }] : /* istanbul ignore next */ []));
|
|
28
|
+
pageSizeOptions = input([5, 10, 20], ...(ngDevMode ? [{ debugName: "pageSizeOptions" }] : /* istanbul ignore next */ []));
|
|
52
29
|
selectionChange = output();
|
|
53
30
|
nodeClick = output();
|
|
54
31
|
expansionChange = output();
|
|
55
|
-
treeCellTpl = viewChild('treeCellTpl', /*
|
|
56
|
-
...(ngDevMode ? [{ debugName: "
|
|
57
|
-
|
|
58
|
-
...(ngDevMode ? [{ debugName: "expandedKeys" }] : /* istanbul ignore next */ []));
|
|
59
|
-
flatRows = computed(() => this.flattenNodes(this.nodes(), 0), /* @ts-ignore */
|
|
60
|
-
...(ngDevMode ? [{ debugName: "flatRows" }] : /* istanbul ignore next */ []));
|
|
32
|
+
treeCellTpl = viewChild('treeCellTpl', ...(ngDevMode ? [{ debugName: "treeCellTpl" }] : /* istanbul ignore next */ []));
|
|
33
|
+
expandedKeys = signal(new Set(), ...(ngDevMode ? [{ debugName: "expandedKeys" }] : /* istanbul ignore next */ []));
|
|
34
|
+
flatRows = computed(() => this.flattenNodes(this.nodes(), 0), ...(ngDevMode ? [{ debugName: "flatRows" }] : /* istanbul ignore next */ []));
|
|
61
35
|
resolvedColumns = computed(() => {
|
|
62
36
|
const tpl = this.treeCellTpl();
|
|
63
37
|
const treeColumnKey = this.treeColumnKey();
|
|
@@ -74,8 +48,7 @@ class NeuTreeTableComponent {
|
|
|
74
48
|
cellTemplate: tpl,
|
|
75
49
|
};
|
|
76
50
|
});
|
|
77
|
-
}, /*
|
|
78
|
-
...(ngDevMode ? [{ debugName: "resolvedColumns" }] : /* istanbul ignore next */ []));
|
|
51
|
+
}, ...(ngDevMode ? [{ debugName: "resolvedColumns" }] : /* istanbul ignore next */ []));
|
|
79
52
|
constructor() {
|
|
80
53
|
effect(() => {
|
|
81
54
|
this.expandedKeys.set(this.collectExpandedKeys(this.nodes()));
|
|
@@ -151,8 +124,8 @@ class NeuTreeTableComponent {
|
|
|
151
124
|
asFlatRow(row) {
|
|
152
125
|
return row;
|
|
153
126
|
}
|
|
154
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
155
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
127
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: NeuTreeTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
128
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: NeuTreeTableComponent, isStandalone: true, selector: "neu-tree-table", inputs: { nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, treeColumnKey: { classPropertyName: "treeColumnKey", publicName: "treeColumnKey", isSignal: true, isRequired: false, transformFunction: null }, rowKey: { classPropertyName: "rowKey", publicName: "rowKey", isSignal: true, isRequired: false, transformFunction: null }, tableAriaLabel: { classPropertyName: "tableAriaLabel", publicName: "tableAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, expandLabel: { classPropertyName: "expandLabel", publicName: "expandLabel", isSignal: true, isRequired: false, transformFunction: null }, collapseLabel: { classPropertyName: "collapseLabel", publicName: "collapseLabel", isSignal: true, isRequired: false, transformFunction: null }, indentSize: { classPropertyName: "indentSize", publicName: "indentSize", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, pagination: { classPropertyName: "pagination", publicName: "pagination", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, stripedRows: { classPropertyName: "stripedRows", publicName: "stripedRows", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, roundedBorders: { classPropertyName: "roundedBorders", publicName: "roundedBorders", isSignal: true, isRequired: false, transformFunction: null }, sortable: { classPropertyName: "sortable", publicName: "sortable", isSignal: true, isRequired: false, transformFunction: null }, showRowNumbers: { classPropertyName: "showRowNumbers", publicName: "showRowNumbers", isSignal: true, isRequired: false, transformFunction: null }, useUrlState: { classPropertyName: "useUrlState", publicName: "useUrlState", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange", nodeClick: "nodeClick", expansionChange: "expansionChange" }, viewQueries: [{ propertyName: "treeCellTpl", first: true, predicate: ["treeCellTpl"], descendants: true, isSignal: true }], ngImport: i0, template: `
|
|
156
129
|
<neu-table
|
|
157
130
|
class="neu-tree-table"
|
|
158
131
|
[columns]="resolvedColumns()"
|
|
@@ -215,7 +188,7 @@ class NeuTreeTableComponent {
|
|
|
215
188
|
</ng-template>
|
|
216
189
|
`, isInline: true, styles: [".neu-tree-table__cell{display:flex;align-items:flex-start;gap:.5rem;min-width:0}.neu-tree-table__cell--disabled{opacity:.56}.neu-tree-table__toggle{width:1.5rem;height:1.5rem;margin-top:.1rem;border:0;border-radius:999px;background:transparent;color:var(--neu-text-muted);display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;cursor:pointer;transition:background-color .16s ease,color .16s ease}.neu-tree-table__toggle svg{width:.9rem;height:.9rem;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;transition:transform .16s ease}.neu-tree-table__toggle:hover{background:color-mix(in srgb,var(--neu-primary) 10%,transparent);color:var(--neu-primary)}.neu-tree-table__toggle--open svg{transform:rotate(90deg)}.neu-tree-table__toggle--placeholder{cursor:default}.neu-tree-table__content{min-width:0;display:flex;flex-direction:column;gap:.125rem}.neu-tree-table__main{display:flex;align-items:center;gap:.5rem;min-width:0}.neu-tree-table__label{color:var(--neu-text);font-weight:600}.neu-tree-table__description{color:var(--neu-text-muted);font-size:.8125rem;line-height:1.4}.neu-tree-table__badge{display:inline-flex;align-items:center;padding:0 .45rem;min-height:1.2rem;border-radius:999px;background:color-mix(in srgb,var(--neu-primary) 12%,transparent);color:var(--neu-primary-dark, var(--neu-primary));font-size:.6875rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}\n"], dependencies: [{ kind: "component", type: NeuTableComponent, selector: "neu-table", inputs: ["columns", "data", "pageSize", "pagination", "loading", "title", "toolbarExtraRef", "emptyMessage", "skeletonRows", "searchable", "searchPlaceholder", "exactMatchable", "exactMatchLabel", "searchAriaLabel", "clearSearchAriaLabel", "clearFilterLabel", "previousPageAriaLabel", "nextPageAriaLabel", "pageSizeLabel", "pageSizeAriaLabel", "paginationAriaLabel", "exportCsvTitle", "exportJsonTitle", "clearSelectionLabel", "selectionSummaryLabel", "tableAriaLabel", "selectAllAriaLabel", "selectRowAriaLabel", "expandRowAriaLabel", "filterPlaceholder", "filterAriaPrefix", "allFilterOptionLabel", "ofLabel", "resultLabelSingular", "resultLabelPlural", "sortable", "selectable", "expandable", "expandMode", "exportable", "exportFileName", "pageSizeOptions", "stickyHeader", "virtualScroll", "virtualScrollVisibleItems", "resizableColumns", "rowKey", "bordered", "roundedBorders", "stripedRows", "density", "showRowNumbers", "rowClass", "footerRow", "emptyStateTemplate", "serverSide", "totalItems", "multiSort", "exportFormats", "exportColumns", "exportScope", "selectionActions", "pageParam", "searchParam", "sortParam", "sortDirParam", "multiSortParam", "useUrlState"], outputs: ["selectionChange", "rowClick", "rowDblClick", "actionClick", "selectionActionClick", "serverStateChange", "searchChange", "columnResize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
217
190
|
}
|
|
218
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
191
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: NeuTreeTableComponent, decorators: [{
|
|
219
192
|
type: Component,
|
|
220
193
|
args: [{ selector: 'neu-tree-table', standalone: true, imports: [NeuTableComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: `
|
|
221
194
|
<neu-table
|