@neural-ui/core 1.6.1 → 1.6.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/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/package.json +6 -6
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"neural-ui-core-slider.mjs","sources":["../../../../projects/ui-core/slider/neu-slider.component.ts","../../../../projects/ui-core/slider/neural-ui-core-slider.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n ViewEncapsulation,\n computed,\n input,\n output,\n} from '@angular/core';\n\n/**\n * NeuralUI Slider Component\n *\n * Control deslizante accesible que envuelve el <input type=\"range\">\n * nativo con estilos personalizados y tooltips de valor.\n *\n * Uso:\n * <neu-slider [value]=\"volume\" (valueChange)=\"volume = $event\" />\n * <neu-slider [value]=\"50\" [min]=\"0\" [max]=\"100\" [step]=\"5\" [showValue]=\"true\" />\n */\n@Component({\n selector: 'neu-slider',\n imports: [],\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n template: `\n <div class=\"neu-slider\" [class.neu-slider--disabled]=\"disabled()\">\n @if (label()) {\n <div class=\"neu-slider__header\">\n <label class=\"neu-slider__label\" [for]=\"sliderId\">{{ label() }}</label>\n @if (showValue()) {\n <span class=\"neu-slider__value\">{{ value() }}{{ unit() }}</span>\n }\n </div>\n } @else if (showValue()) {\n <div class=\"neu-slider__header\">\n <span></span>\n <span class=\"neu-slider__value\">{{ value() }}{{ unit() }}</span>\n </div>\n }\n <div class=\"neu-slider__track-wrap\">\n <div class=\"neu-slider__track\">\n <div class=\"neu-slider__fill\" [style.width.%]=\"fillPercent()\"></div>\n </div>\n <input\n class=\"neu-slider__input\"\n type=\"range\"\n [id]=\"sliderId\"\n [min]=\"min()\"\n [max]=\"max()\"\n [step]=\"step()\"\n [value]=\"value()\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"label() || 'Slider'\"\n [attr.aria-valuenow]=\"value()\"\n [attr.aria-valuemin]=\"min()\"\n [attr.aria-valuemax]=\"max()\"\n (input)=\"onInput($event)\"\n />\n </div>\n @if (showTicks()) {\n <div class=\"neu-slider__ticks\">\n <span>{{ min() }}{{ unit() }}</span>\n <span>{{ (max() - min()) / 2 + min() }}{{ unit() }}</span>\n <span>{{ max() }}{{ unit() }}</span>\n </div>\n }\n </div>\n `,\n styleUrl: './neu-slider.component.scss',\n})\nexport class NeuSliderComponent {\n private static _idCounter = 0;\n protected readonly sliderId = `neu-slider-${++NeuSliderComponent._idCounter}`;\n\n /** Valor actual / Current value */\n value = input<number>(0);\n\n /** Valor mínimo / Minimum value */\n min = input<number>(0);\n\n /** Valor máximo / Maximum value */\n max = input<number>(100);\n\n /** Paso / Step */\n step = input<number>(1);\n\n /** Etiqueta / Label */\n label = input<string>('');\n\n /** Muestra el valor numerico / Shows the numeric value */\n showValue = input<boolean>(true);\n\n /** Muestra min/mid/max bajo la barra / Shows min/mid/max below the bar */\n showTicks = input<boolean>(false);\n\n /** Unidad a mostrar junto al valor / Unit to display next to the value */\n unit = input<string>('');\n\n /** Deshabilitado / Disabled */\n disabled = input<boolean>(false);\n\n /** Emite al mover el slider / Emits when the slider moves */\n valueChange = output<number>();\n\n readonly fillPercent = computed(() => {\n const range = this.max() - this.min();\n if (range === 0) return 0;\n return ((this.value() - this.min()) / range) * 100;\n });\n\n onInput(event: Event): void {\n const val = Number((event.target as HTMLInputElement).value);\n this.valueChange.emit(val);\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;AASA;;;;;;;;;AASG;MAoDU,kBAAkB,CAAA;AACrB,IAAA,OAAO,UAAU,GAAG,CAAC;AACV,IAAA,QAAQ,GAAG,CAAA,WAAA,EAAc,EAAE,kBAAkB,CAAC,UAAU,EAAE;;
|
|
1
|
+
{"version":3,"file":"neural-ui-core-slider.mjs","sources":["../../../../projects/ui-core/slider/neu-slider.component.ts","../../../../projects/ui-core/slider/neural-ui-core-slider.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n ViewEncapsulation,\n computed,\n input,\n output,\n} from '@angular/core';\n\n/**\n * NeuralUI Slider Component\n *\n * Control deslizante accesible que envuelve el <input type=\"range\">\n * nativo con estilos personalizados y tooltips de valor.\n *\n * Uso:\n * <neu-slider [value]=\"volume\" (valueChange)=\"volume = $event\" />\n * <neu-slider [value]=\"50\" [min]=\"0\" [max]=\"100\" [step]=\"5\" [showValue]=\"true\" />\n */\n@Component({\n selector: 'neu-slider',\n imports: [],\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n template: `\n <div class=\"neu-slider\" [class.neu-slider--disabled]=\"disabled()\">\n @if (label()) {\n <div class=\"neu-slider__header\">\n <label class=\"neu-slider__label\" [for]=\"sliderId\">{{ label() }}</label>\n @if (showValue()) {\n <span class=\"neu-slider__value\">{{ value() }}{{ unit() }}</span>\n }\n </div>\n } @else if (showValue()) {\n <div class=\"neu-slider__header\">\n <span></span>\n <span class=\"neu-slider__value\">{{ value() }}{{ unit() }}</span>\n </div>\n }\n <div class=\"neu-slider__track-wrap\">\n <div class=\"neu-slider__track\">\n <div class=\"neu-slider__fill\" [style.width.%]=\"fillPercent()\"></div>\n </div>\n <input\n class=\"neu-slider__input\"\n type=\"range\"\n [id]=\"sliderId\"\n [min]=\"min()\"\n [max]=\"max()\"\n [step]=\"step()\"\n [value]=\"value()\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"label() || 'Slider'\"\n [attr.aria-valuenow]=\"value()\"\n [attr.aria-valuemin]=\"min()\"\n [attr.aria-valuemax]=\"max()\"\n (input)=\"onInput($event)\"\n />\n </div>\n @if (showTicks()) {\n <div class=\"neu-slider__ticks\">\n <span>{{ min() }}{{ unit() }}</span>\n <span>{{ (max() - min()) / 2 + min() }}{{ unit() }}</span>\n <span>{{ max() }}{{ unit() }}</span>\n </div>\n }\n </div>\n `,\n styleUrl: './neu-slider.component.scss',\n})\nexport class NeuSliderComponent {\n private static _idCounter = 0;\n protected readonly sliderId = `neu-slider-${++NeuSliderComponent._idCounter}`;\n\n /** Valor actual / Current value */\n value = input<number>(0);\n\n /** Valor mínimo / Minimum value */\n min = input<number>(0);\n\n /** Valor máximo / Maximum value */\n max = input<number>(100);\n\n /** Paso / Step */\n step = input<number>(1);\n\n /** Etiqueta / Label */\n label = input<string>('');\n\n /** Muestra el valor numerico / Shows the numeric value */\n showValue = input<boolean>(true);\n\n /** Muestra min/mid/max bajo la barra / Shows min/mid/max below the bar */\n showTicks = input<boolean>(false);\n\n /** Unidad a mostrar junto al valor / Unit to display next to the value */\n unit = input<string>('');\n\n /** Deshabilitado / Disabled */\n disabled = input<boolean>(false);\n\n /** Emite al mover el slider / Emits when the slider moves */\n valueChange = output<number>();\n\n readonly fillPercent = computed(() => {\n const range = this.max() - this.min();\n if (range === 0) return 0;\n return ((this.value() - this.min()) / range) * 100;\n });\n\n onInput(event: Event): void {\n const val = Number((event.target as HTMLInputElement).value);\n this.valueChange.emit(val);\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
|
|
@@ -18,23 +18,17 @@ import { input, computed, ChangeDetectionStrategy, ViewEncapsulation, Component
|
|
|
18
18
|
*/
|
|
19
19
|
class NeuSpinnerComponent {
|
|
20
20
|
/** Variante de color semántica / Semantic color variant */
|
|
21
|
-
severity = input('primary', /*
|
|
22
|
-
...(ngDevMode ? [{ debugName: "severity" }] : /* istanbul ignore next */ []));
|
|
21
|
+
severity = input('primary', ...(ngDevMode ? [{ debugName: "severity" }] : /* istanbul ignore next */ []));
|
|
23
22
|
/** Color CSS directo — sobreescribe severity / Direct CSS color — overrides severity */
|
|
24
|
-
color = input('', /*
|
|
25
|
-
...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
|
|
23
|
+
color = input('', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
|
|
26
24
|
/** Grosor del trazo SVG (unidades SVG) / SVG stroke width (SVG units) */
|
|
27
|
-
strokeWidth = input('4', /*
|
|
28
|
-
...(ngDevMode ? [{ debugName: "strokeWidth" }] : /* istanbul ignore next */ []));
|
|
25
|
+
strokeWidth = input('4', ...(ngDevMode ? [{ debugName: "strokeWidth" }] : /* istanbul ignore next */ []));
|
|
29
26
|
/** Tamaño del spinner (CSS: '40px', '2rem', etc.) / Spinner size (CSS: '40px', '2rem', etc.) */
|
|
30
|
-
size = input('40px', /*
|
|
31
|
-
...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
27
|
+
size = input('40px', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
32
28
|
/** Duración de la animación de rotación / Rotation animation duration */
|
|
33
|
-
animationDuration = input('1s', /*
|
|
34
|
-
...(ngDevMode ? [{ debugName: "animationDuration" }] : /* istanbul ignore next */ []));
|
|
29
|
+
animationDuration = input('1s', ...(ngDevMode ? [{ debugName: "animationDuration" }] : /* istanbul ignore next */ []));
|
|
35
30
|
/** Texto accesible para lectores de pantalla / Accessible text for screen readers */
|
|
36
|
-
ariaLabel = input('Cargando...', /*
|
|
37
|
-
...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
31
|
+
ariaLabel = input('Cargando...', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
38
32
|
_severityColor = computed(() => {
|
|
39
33
|
const map = {
|
|
40
34
|
primary: 'var(--neu-primary)',
|
|
@@ -44,10 +38,9 @@ class NeuSpinnerComponent {
|
|
|
44
38
|
info: 'var(--neu-info)',
|
|
45
39
|
};
|
|
46
40
|
return map[this.severity()];
|
|
47
|
-
}, /*
|
|
48
|
-
|
|
49
|
-
static
|
|
50
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: NeuSpinnerComponent, isStandalone: true, selector: "neu-spinner", inputs: { severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, animationDuration: { classPropertyName: "animationDuration", publicName: "animationDuration", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "neu-spinner-host" }, ngImport: i0, template: `
|
|
41
|
+
}, ...(ngDevMode ? [{ debugName: "_severityColor" }] : /* istanbul ignore next */ []));
|
|
42
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: NeuSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
43
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: NeuSpinnerComponent, isStandalone: true, selector: "neu-spinner", inputs: { severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, animationDuration: { classPropertyName: "animationDuration", publicName: "animationDuration", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "neu-spinner-host" }, ngImport: i0, template: `
|
|
51
44
|
<svg
|
|
52
45
|
class="neu-spinner"
|
|
53
46
|
[class]="'neu-spinner--' + severity()"
|
|
@@ -78,7 +71,7 @@ class NeuSpinnerComponent {
|
|
|
78
71
|
<span class="cdk-visually-hidden">{{ ariaLabel() }}</span>
|
|
79
72
|
`, isInline: true, styles: [".neu-spinner-host{display:inline-flex;align-items:center;justify-content:center}.neu-spinner{animation:neu-spinner-rotate linear infinite;animation-duration:inherit}.neu-spinner__track{stroke:var(--neu-border);opacity:.3}.neu-spinner__arc{stroke-dasharray:89,200;stroke-dashoffset:-10;animation:neu-spinner-dash 1.5s ease-in-out infinite;stroke-linecap:round}.neu-spinner--primary .neu-spinner__arc{stroke:var(--neu-primary)}.neu-spinner--success .neu-spinner__arc{stroke:var(--neu-success)}.neu-spinner--warning .neu-spinner__arc{stroke:var(--neu-warning)}.neu-spinner--danger .neu-spinner__arc{stroke:var(--neu-danger)}.neu-spinner--info .neu-spinner__arc{stroke:var(--neu-info)}@keyframes neu-spinner-rotate{to{transform:rotate(360deg)}}@keyframes neu-spinner-dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}to{stroke-dasharray:89,200;stroke-dashoffset:-124px}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
80
73
|
}
|
|
81
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
74
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: NeuSpinnerComponent, decorators: [{
|
|
82
75
|
type: Component,
|
|
83
76
|
args: [{ selector: 'neu-spinner', imports: [], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'neu-spinner-host' }, template: `
|
|
84
77
|
<svg
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"neural-ui-core-spinner.mjs","sources":["../../../../projects/ui-core/spinner/neu-spinner.component.ts","../../../../projects/ui-core/spinner/neural-ui-core-spinner.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n ViewEncapsulation,\n computed,\n input,\n} from '@angular/core';\n\nexport type NeuSpinnerSeverity = 'primary' | 'success' | 'warning' | 'danger' | 'info';\n\n/**\n * NeuralUI Spinner Component\n *\n * Indicador de carga circular animado para estados de espera.\n * Permite personalizar color via severity o color CSS directo.\n *\n * Uso básico:\n * <neu-spinner />\n *\n * Con severity:\n * <neu-spinner severity=\"success\" size=\"48px\" />\n *\n * Con color personalizado:\n * <neu-spinner color=\"#ff6b35\" strokeWidth=\"6\" />\n */\n@Component({\n selector: 'neu-spinner',\n imports: [],\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: { class: 'neu-spinner-host' },\n template: `\n <svg\n class=\"neu-spinner\"\n [class]=\"'neu-spinner--' + severity()\"\n [style.width]=\"size()\"\n [style.height]=\"size()\"\n [style.animation-duration]=\"animationDuration()\"\n viewBox=\"25 25 50 50\"\n aria-hidden=\"true\"\n >\n <circle\n class=\"neu-spinner__track\"\n cx=\"50\"\n cy=\"50\"\n r=\"20\"\n fill=\"none\"\n [attr.stroke-width]=\"strokeWidth()\"\n />\n <circle\n class=\"neu-spinner__arc\"\n cx=\"50\"\n cy=\"50\"\n r=\"20\"\n fill=\"none\"\n [attr.stroke-width]=\"strokeWidth()\"\n [style.stroke]=\"color() || null\"\n />\n </svg>\n <span class=\"cdk-visually-hidden\">{{ ariaLabel() }}</span>\n `,\n styleUrl: './neu-spinner.component.scss',\n})\nexport class NeuSpinnerComponent {\n /** Variante de color semántica / Semantic color variant */\n severity = input<NeuSpinnerSeverity>('primary');\n\n /** Color CSS directo — sobreescribe severity / Direct CSS color — overrides severity */\n color = input<string>('');\n\n /** Grosor del trazo SVG (unidades SVG) / SVG stroke width (SVG units) */\n strokeWidth = input<string>('4');\n\n /** Tamaño del spinner (CSS: '40px', '2rem', etc.) / Spinner size (CSS: '40px', '2rem', etc.) */\n size = input<string>('40px');\n\n /** Duración de la animación de rotación / Rotation animation duration */\n animationDuration = input<string>('1s');\n\n /** Texto accesible para lectores de pantalla / Accessible text for screen readers */\n ariaLabel = input<string>('Cargando...');\n\n readonly _severityColor = computed(() => {\n const map: Record<NeuSpinnerSeverity, string> = {\n primary: 'var(--neu-primary)',\n success: 'var(--neu-success)',\n warning: 'var(--neu-warning)',\n danger: 'var(--neu-danger)',\n info: 'var(--neu-info)',\n };\n return map[this.severity()];\n });\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;AAUA;;;;;;;;;;;;;;AAcG;MAuCU,mBAAmB,CAAA;;
|
|
1
|
+
{"version":3,"file":"neural-ui-core-spinner.mjs","sources":["../../../../projects/ui-core/spinner/neu-spinner.component.ts","../../../../projects/ui-core/spinner/neural-ui-core-spinner.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n ViewEncapsulation,\n computed,\n input,\n} from '@angular/core';\n\nexport type NeuSpinnerSeverity = 'primary' | 'success' | 'warning' | 'danger' | 'info';\n\n/**\n * NeuralUI Spinner Component\n *\n * Indicador de carga circular animado para estados de espera.\n * Permite personalizar color via severity o color CSS directo.\n *\n * Uso básico:\n * <neu-spinner />\n *\n * Con severity:\n * <neu-spinner severity=\"success\" size=\"48px\" />\n *\n * Con color personalizado:\n * <neu-spinner color=\"#ff6b35\" strokeWidth=\"6\" />\n */\n@Component({\n selector: 'neu-spinner',\n imports: [],\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: { class: 'neu-spinner-host' },\n template: `\n <svg\n class=\"neu-spinner\"\n [class]=\"'neu-spinner--' + severity()\"\n [style.width]=\"size()\"\n [style.height]=\"size()\"\n [style.animation-duration]=\"animationDuration()\"\n viewBox=\"25 25 50 50\"\n aria-hidden=\"true\"\n >\n <circle\n class=\"neu-spinner__track\"\n cx=\"50\"\n cy=\"50\"\n r=\"20\"\n fill=\"none\"\n [attr.stroke-width]=\"strokeWidth()\"\n />\n <circle\n class=\"neu-spinner__arc\"\n cx=\"50\"\n cy=\"50\"\n r=\"20\"\n fill=\"none\"\n [attr.stroke-width]=\"strokeWidth()\"\n [style.stroke]=\"color() || null\"\n />\n </svg>\n <span class=\"cdk-visually-hidden\">{{ ariaLabel() }}</span>\n `,\n styleUrl: './neu-spinner.component.scss',\n})\nexport class NeuSpinnerComponent {\n /** Variante de color semántica / Semantic color variant */\n severity = input<NeuSpinnerSeverity>('primary');\n\n /** Color CSS directo — sobreescribe severity / Direct CSS color — overrides severity */\n color = input<string>('');\n\n /** Grosor del trazo SVG (unidades SVG) / SVG stroke width (SVG units) */\n strokeWidth = input<string>('4');\n\n /** Tamaño del spinner (CSS: '40px', '2rem', etc.) / Spinner size (CSS: '40px', '2rem', etc.) */\n size = input<string>('40px');\n\n /** Duración de la animación de rotación / Rotation animation duration */\n animationDuration = input<string>('1s');\n\n /** Texto accesible para lectores de pantalla / Accessible text for screen readers */\n ariaLabel = input<string>('Cargando...');\n\n readonly _severityColor = computed(() => {\n const map: Record<NeuSpinnerSeverity, string> = {\n primary: 'var(--neu-primary)',\n success: 'var(--neu-success)',\n warning: 'var(--neu-warning)',\n danger: 'var(--neu-danger)',\n info: 'var(--neu-info)',\n };\n return map[this.severity()];\n });\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
|
|
@@ -45,41 +45,29 @@ class NeuSplitButtonComponent {
|
|
|
45
45
|
];
|
|
46
46
|
overlayScrollStrategy = this.overlay.scrollStrategies.reposition();
|
|
47
47
|
/** Texto del botón principal / Primary button text */
|
|
48
|
-
label = input('', /*
|
|
49
|
-
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
48
|
+
label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
50
49
|
/** Variante visual / Visual variant */
|
|
51
|
-
variant = input('primary', /*
|
|
52
|
-
...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
50
|
+
variant = input('primary', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
53
51
|
/** Tamaño / Size */
|
|
54
|
-
size = input('md', /*
|
|
55
|
-
...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
52
|
+
size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
56
53
|
/** Deshabilita todo el componente / Disables the entire component */
|
|
57
|
-
disabled = input(false, /*
|
|
58
|
-
...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
54
|
+
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
59
55
|
/** Muestra spinner en el botón principal / Shows spinner on the primary button */
|
|
60
|
-
loading = input(false, /*
|
|
61
|
-
...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
|
|
56
|
+
loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
|
|
62
57
|
/** Acciones del dropdown / Dropdown actions */
|
|
63
|
-
actions = input([], /*
|
|
64
|
-
...(ngDevMode ? [{ debugName: "actions" }] : /* istanbul ignore next */ []));
|
|
58
|
+
actions = input([], ...(ngDevMode ? [{ debugName: "actions" }] : /* istanbul ignore next */ []));
|
|
65
59
|
/** Aria-label del botón de desplegable / Aria-label for the dropdown button */
|
|
66
|
-
moreActionsAriaLabel = input('Más opciones', /*
|
|
67
|
-
...(ngDevMode ? [{ debugName: "moreActionsAriaLabel" }] : /* istanbul ignore next */ []));
|
|
60
|
+
moreActionsAriaLabel = input('Más opciones', ...(ngDevMode ? [{ debugName: "moreActionsAriaLabel" }] : /* istanbul ignore next */ []));
|
|
68
61
|
/** Aria-label del menú desplegable / Aria-label for the dropdown menu */
|
|
69
|
-
actionsAriaLabel = input('Acciones', /*
|
|
70
|
-
...(ngDevMode ? [{ debugName: "actionsAriaLabel" }] : /* istanbul ignore next */ []));
|
|
62
|
+
actionsAriaLabel = input('Acciones', ...(ngDevMode ? [{ debugName: "actionsAriaLabel" }] : /* istanbul ignore next */ []));
|
|
71
63
|
/** Emite al hacer click en el botón principal / Emits on primary button click */
|
|
72
64
|
primaryClick = output();
|
|
73
65
|
/** Emite al seleccionar una acción del dropdown / Emits when a dropdown action is selected */
|
|
74
66
|
actionClick = output();
|
|
75
|
-
isOpen = signal(false, /*
|
|
76
|
-
...(ngDevMode ? [{ debugName: "
|
|
77
|
-
|
|
78
|
-
...(ngDevMode ? [{ debugName: "
|
|
79
|
-
mainClasses = computed(() => `neu-button neu-button--${this.variant()} neu-button--${this.size()}${this.loading() ? ' neu-button--loading' : ''}`, /* @ts-ignore */
|
|
80
|
-
...(ngDevMode ? [{ debugName: "mainClasses" }] : /* istanbul ignore next */ []));
|
|
81
|
-
chevronClasses = computed(() => `neu-button neu-button--${this.variant()} neu-button--${this.size()}`, /* @ts-ignore */
|
|
82
|
-
...(ngDevMode ? [{ debugName: "chevronClasses" }] : /* istanbul ignore next */ []));
|
|
67
|
+
isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
|
|
68
|
+
isDisabled = computed(() => this.disabled() || this.loading(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
|
|
69
|
+
mainClasses = computed(() => `neu-button neu-button--${this.variant()} neu-button--${this.size()}${this.loading() ? ' neu-button--loading' : ''}`, ...(ngDevMode ? [{ debugName: "mainClasses" }] : /* istanbul ignore next */ []));
|
|
70
|
+
chevronClasses = computed(() => `neu-button neu-button--${this.variant()} neu-button--${this.size()}`, ...(ngDevMode ? [{ debugName: "chevronClasses" }] : /* istanbul ignore next */ []));
|
|
83
71
|
toggleDropdown(event) {
|
|
84
72
|
event.stopPropagation();
|
|
85
73
|
this.isOpen.update((v) => !v);
|
|
@@ -105,8 +93,8 @@ class NeuSplitButtonComponent {
|
|
|
105
93
|
this.closeDropdown();
|
|
106
94
|
this.actionClick.emit(action);
|
|
107
95
|
}
|
|
108
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
109
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
96
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: NeuSplitButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
97
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: NeuSplitButtonComponent, isStandalone: true, selector: "neu-split-button", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", 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 }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, moreActionsAriaLabel: { classPropertyName: "moreActionsAriaLabel", publicName: "moreActionsAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, actionsAriaLabel: { classPropertyName: "actionsAriaLabel", publicName: "actionsAriaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { primaryClick: "primaryClick", actionClick: "actionClick" }, host: { listeners: { "document:click": "onDocumentClick($event)", "keydown.escape": "closeDropdown()" }, classAttribute: "neu-split-button-host" }, ngImport: i0, template: `
|
|
110
98
|
<div class="neu-split-button" [class.neu-split-button--disabled]="isDisabled()">
|
|
111
99
|
<!-- Botón principal -->
|
|
112
100
|
<button
|
|
@@ -207,7 +195,7 @@ class NeuSplitButtonComponent {
|
|
|
207
195
|
</div>
|
|
208
196
|
`, isInline: true, styles: [".neu-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--neu-space-2);border:1px solid transparent;border-radius:var(--neu-radius);font-family:var(--neu-font-sans);font-weight:500;line-height:1;cursor:pointer;text-decoration:none;white-space:nowrap;-webkit-user-select:none;user-select:none;transition:background-color var(--neu-transition),border-color var(--neu-transition),color var(--neu-transition),box-shadow var(--neu-transition),opacity var(--neu-transition);outline:none}.neu-button:focus-visible{box-shadow:var(--neu-focus-ring-strong)}.neu-button--sm{padding:var(--neu-space-2) var(--neu-space-3);font-size:var(--neu-text-sm);border-radius:var(--neu-radius-sm)}.neu-button--md{padding:var(--neu-space-2) var(--neu-space-5);font-size:var(--neu-text-base)}@media(min-width:400px){.neu-button--md{padding:.625rem var(--neu-space-6)}}.neu-button--lg{padding:var(--neu-space-3) var(--neu-space-8);font-size:var(--neu-text-lg)}.neu-button--full-width{width:100%}.neu-button--primary{background:var(--neu-primary-solid, var(--neu-primary-dark, var(--neu-primary)));color:var(--neu-primary-solid-fg, var(--neu-primary-fg));border-color:var(--neu-primary-solid, var(--neu-primary-dark, var(--neu-primary)))}.neu-button--primary:hover:not(:disabled):not(.neu-button--disabled){background:var(--neu-primary-solid-hover, var(--neu-primary-dark));border-color:var(--neu-primary-solid-hover, var(--neu-primary-dark));box-shadow:var(--neu-shadow-glow)}.neu-button--primary:active:not(:disabled){background:var(--neu-primary-solid-hover, var(--neu-primary-dark));transform:translateY(1px)}.neu-button--secondary{background:#475569;color:#fff;border-color:#475569}.neu-button--secondary:hover:not(:disabled):not(.neu-button--disabled){background:#334155;border-color:#334155}.neu-button--outline{background:transparent;color:var(--neu-primary-dark, var(--neu-primary));border-color:var(--neu-primary)}.neu-button--outline:hover:not(:disabled):not(.neu-button--disabled){background:var(--neu-primary-50);border-color:var(--neu-primary-dark, var(--neu-primary))}.neu-button--ghost{background:transparent;color:var(--neu-text-muted);border-color:transparent}.neu-button--ghost:hover:not(:disabled):not(.neu-button--disabled){background:var(--neu-surface-2);color:var(--neu-text)}.neu-button--danger{background:var(--neu-error);color:var(--neu-primary-fg);border-color:var(--neu-error)}.neu-button--danger:hover:not(:disabled):not(.neu-button--disabled){background:#dc2626;border-color:#dc2626}.neu-button--disabled,.neu-button:disabled{opacity:.45;cursor:not-allowed;pointer-events:none}.neu-button--loading{cursor:wait;pointer-events:none}.neu-button--icon-only{gap:0;align-items:center;justify-content:center;aspect-ratio:1/1;line-height:1}.neu-button--icon-only.neu-button--sm{width:30px;height:30px;padding:0}.neu-button--icon-only.neu-button--md{width:38px;height:38px;padding:0}.neu-button--icon-only.neu-button--lg{width:46px;height:46px;padding:0}.neu-button--icon-only .neu-icon,.neu-button--icon-only neu-icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;margin:0;line-height:1}.neu-button--icon-only .neu-icon ng-icon,.neu-button--icon-only neu-icon ng-icon{display:inline-flex;align-items:center;justify-content:center;width:var(--ng-icon__size, 1em);height:var(--ng-icon__size, 1em);line-height:1}.neu-button--icon-only .neu-icon svg,.neu-button--icon-only neu-icon svg{display:block;width:100%;height:100%}.neu-button__spinner{display:inline-flex;flex-shrink:0;width:1em;height:1em}.neu-button__spinner svg{width:100%;height:100%;animation:neu-spin .8s linear infinite}@keyframes neu-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.neu-split-button-host{display:inline-block}.neu-split-button{display:inline-flex;align-items:stretch}.neu-split-button--disabled{opacity:.6;pointer-events:none}.neu-split-button .neu-split-button__main{border-top-right-radius:0!important;border-bottom-right-radius:0!important;border-right:none!important;flex:1}.neu-split-button .neu-split-button__chevron{border-top-left-radius:0!important;border-bottom-left-radius:0!important;padding-inline:10px!important;min-width:auto}.neu-split-button .neu-split-button__chevron svg{width:14px;height:14px;display:block}.neu-split-button__divider{width:1px;background:var(--neu-split-button-primary-divider);align-self:stretch;flex-shrink:0}.neu-button--secondary .neu-split-button__divider,.neu-button--ghost .neu-split-button__divider,.neu-button--outline .neu-split-button__divider{background:var(--neu-border)}.neu-split-button__dropdown{position:relative;z-index:200;min-width:180px;background:var(--neu-surface);border:1.5px solid var(--neu-border);border-radius:var(--neu-radius);box-shadow:var(--neu-shadow-lg);padding:var(--neu-space-1) 0;animation:neu-split-btn-in .1s ease}@keyframes neu-split-btn-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.neu-split-button{position:relative}.neu-split-button__dropdown-item{display:flex;align-items:center;width:100%;padding:9px var(--neu-space-4);border:none;background:none;font-family:var(--neu-font-sans);font-size:var(--neu-text-sm);color:var(--neu-text);cursor:pointer;text-align:left;transition:background var(--neu-transition)}.neu-split-button__dropdown-item:hover:not(:disabled):not(.neu-split-button__dropdown-item--disabled){background:var(--neu-surface-2)}.neu-split-button__dropdown-item--disabled,.neu-split-button__dropdown-item:disabled{color:var(--neu-text-disabled);cursor:not-allowed}.neu-split-button__dropdown-sep{height:1px;background:var(--neu-border);margin:var(--neu-space-1) 0}\n"], dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
209
197
|
}
|
|
210
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
198
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: NeuSplitButtonComponent, decorators: [{
|
|
211
199
|
type: Component,
|
|
212
200
|
args: [{ selector: 'neu-split-button', imports: [OverlayModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
213
201
|
class: 'neu-split-button-host',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"neural-ui-core-split-button.mjs","sources":["../../../../projects/ui-core/split-button/neu-split-button.component.ts","../../../../projects/ui-core/split-button/neural-ui-core-split-button.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n ViewEncapsulation,\n computed,\n inject,\n input,\n output,\n signal,\n} from '@angular/core';\nimport { ConnectedPosition, Overlay, OverlayModule } from '@angular/cdk/overlay';\nimport { NeuButtonVariant, NeuButtonSize } from '@neural-ui/core/button';\n\nexport interface NeuSplitButtonAction {\n /** Identificador único de la acción / Unique action identifier */\n id: string;\n /** Texto visible / Visible text */\n label: string;\n /** Icono opcional (SVG string o nombre) / Optional icon (SVG string or name) */\n icon?: string;\n /** Deshabilita esta acción individualmente / Disables this action individually */\n disabled?: boolean;\n /** Separador visual encima de este item / Visual separator above this item */\n divider?: boolean;\n}\n\n/**\n * NeuralUI SplitButton Component\n *\n * Botón principal con un dropdown de acciones adicionales. / Primary button with a dropdown of additional actions.\n *\n * Uso:\n * <neu-split-button\n * label=\"Guardar\"\n * [actions]=\"actions\"\n * (primaryClick)=\"save()\"\n * (actionClick)=\"onAction($event)\"\n * />\n */\n@Component({\n selector: 'neu-split-button',\n imports: [OverlayModule],\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n class: 'neu-split-button-host',\n '(document:click)': 'onDocumentClick($event)',\n '(keydown.escape)': 'closeDropdown()',\n },\n template: `\n <div class=\"neu-split-button\" [class.neu-split-button--disabled]=\"isDisabled()\">\n <!-- Botón principal -->\n <button\n class=\"neu-split-button__main\"\n [class]=\"mainClasses()\"\n type=\"button\"\n [disabled]=\"isDisabled() || null\"\n [attr.aria-disabled]=\"isDisabled()\"\n [attr.aria-busy]=\"loading()\"\n (click)=\"onPrimaryClick($event)\"\n >\n @if (loading()) {\n <span class=\"neu-button__spinner\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\">\n <circle\n cx=\"12\"\n cy=\"12\"\n r=\"10\"\n stroke=\"currentColor\"\n stroke-width=\"3\"\n stroke-linecap=\"round\"\n stroke-dasharray=\"31.416\"\n stroke-dashoffset=\"10\"\n />\n </svg>\n </span>\n }\n {{ label() }}\n </button>\n\n <!-- Separador -->\n <span class=\"neu-split-button__divider\" aria-hidden=\"true\"></span>\n\n <!-- Chevron trigger -->\n <button\n cdkOverlayOrigin\n #splitButtonOrigin=\"cdkOverlayOrigin\"\n class=\"neu-split-button__chevron\"\n [class]=\"chevronClasses()\"\n type=\"button\"\n [disabled]=\"isDisabled() || null\"\n [attr.aria-haspopup]=\"'menu'\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-label]=\"moreActionsAriaLabel()\"\n (click)=\"toggleDropdown($event)\"\n >\n <svg\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 aria-hidden=\"true\"\n >\n <polyline points=\"6 9 12 15 18 9\" />\n </svg>\n </button>\n\n <!-- Dropdown de acciones -->\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"splitButtonOrigin\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayPositions]=\"overlayPositions\"\n [cdkConnectedOverlayScrollStrategy]=\"overlayScrollStrategy\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop'\"\n [cdkConnectedOverlayPush]=\"true\"\n [cdkConnectedOverlayViewportMargin]=\"_viewportMargin\"\n (backdropClick)=\"closeDropdown()\"\n (detach)=\"closeDropdown()\"\n >\n <div\n class=\"neu-split-button__dropdown\"\n role=\"menu\"\n [attr.aria-label]=\"actionsAriaLabel()\"\n (click)=\"$event.stopPropagation()\"\n >\n @for (action of actions(); track action.id) {\n @if (action.divider) {\n <div class=\"neu-split-button__dropdown-sep\" role=\"separator\" aria-hidden=\"true\"></div>\n }\n <button\n class=\"neu-split-button__dropdown-item\"\n [class.neu-split-button__dropdown-item--disabled]=\"action.disabled\"\n type=\"button\"\n role=\"menuitem\"\n [disabled]=\"action.disabled || null\"\n [attr.aria-disabled]=\"action.disabled ? 'true' : null\"\n (click)=\"onActionClick(action)\"\n >\n {{ action.label }}\n </button>\n }\n </div>\n </ng-template>\n </div>\n `,\n styleUrl: './neu-split-button.component.scss',\n})\nexport class NeuSplitButtonComponent {\n private readonly el = inject<ElementRef<HTMLElement>>(ElementRef);\n private readonly overlay = inject(Overlay);\n readonly _viewportMargin = 16;\n readonly overlayPositions: ConnectedPosition[] = [\n {\n originX: 'end',\n originY: 'bottom',\n overlayX: 'end',\n overlayY: 'top',\n offsetY: 6,\n },\n {\n originX: 'end',\n originY: 'top',\n overlayX: 'end',\n overlayY: 'bottom',\n offsetY: -6,\n },\n {\n originX: 'start',\n originY: 'bottom',\n overlayX: 'start',\n overlayY: 'top',\n offsetY: 6,\n },\n ];\n readonly overlayScrollStrategy = this.overlay.scrollStrategies.reposition();\n\n /** Texto del botón principal / Primary button text */\n label = input<string>('');\n\n /** Variante visual / Visual variant */\n variant = input<NeuButtonVariant>('primary');\n\n /** Tamaño / Size */\n size = input<NeuButtonSize>('md');\n\n /** Deshabilita todo el componente / Disables the entire component */\n disabled = input<boolean>(false);\n\n /** Muestra spinner en el botón principal / Shows spinner on the primary button */\n loading = input<boolean>(false);\n\n /** Acciones del dropdown / Dropdown actions */\n actions = input<NeuSplitButtonAction[]>([]);\n\n /** Aria-label del botón de desplegable / Aria-label for the dropdown button */\n moreActionsAriaLabel = input<string>('Más opciones');\n\n /** Aria-label del menú desplegable / Aria-label for the dropdown menu */\n actionsAriaLabel = input<string>('Acciones');\n\n /** Emite al hacer click en el botón principal / Emits on primary button click */\n primaryClick = output<MouseEvent>();\n\n /** Emite al seleccionar una acción del dropdown / Emits when a dropdown action is selected */\n actionClick = output<NeuSplitButtonAction>();\n\n readonly isOpen = signal(false);\n\n readonly isDisabled = computed(() => this.disabled() || this.loading());\n\n readonly mainClasses = computed(\n () =>\n `neu-button neu-button--${this.variant()} neu-button--${this.size()}${this.loading() ? ' neu-button--loading' : ''}`,\n );\n\n readonly chevronClasses = computed(\n () => `neu-button neu-button--${this.variant()} neu-button--${this.size()}`,\n );\n\n toggleDropdown(event: MouseEvent): void {\n event.stopPropagation();\n this.isOpen.update((v) => !v);\n }\n\n closeDropdown(): void {\n this.isOpen.set(false);\n }\n\n onDocumentClick(event: MouseEvent): void {\n const target = event.target as Element | null;\n const isInsidePanel = !!target?.closest('.neu-split-button__dropdown');\n if (!this.el.nativeElement.contains(event.target as Node) && !isInsidePanel) {\n this.closeDropdown();\n }\n }\n\n onPrimaryClick(event: MouseEvent): void {\n if (this.isDisabled()) return;\n this.primaryClick.emit(event);\n }\n\n onActionClick(action: NeuSplitButtonAction): void {\n if (action.disabled) return;\n this.closeDropdown();\n this.actionClick.emit(action);\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-split-button.mjs","sources":["../../../../projects/ui-core/split-button/neu-split-button.component.ts","../../../../projects/ui-core/split-button/neural-ui-core-split-button.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n ViewEncapsulation,\n computed,\n inject,\n input,\n output,\n signal,\n} from '@angular/core';\nimport { ConnectedPosition, Overlay, OverlayModule } from '@angular/cdk/overlay';\nimport { NeuButtonVariant, NeuButtonSize } from '@neural-ui/core/button';\n\nexport interface NeuSplitButtonAction {\n /** Identificador único de la acción / Unique action identifier */\n id: string;\n /** Texto visible / Visible text */\n label: string;\n /** Icono opcional (SVG string o nombre) / Optional icon (SVG string or name) */\n icon?: string;\n /** Deshabilita esta acción individualmente / Disables this action individually */\n disabled?: boolean;\n /** Separador visual encima de este item / Visual separator above this item */\n divider?: boolean;\n}\n\n/**\n * NeuralUI SplitButton Component\n *\n * Botón principal con un dropdown de acciones adicionales. / Primary button with a dropdown of additional actions.\n *\n * Uso:\n * <neu-split-button\n * label=\"Guardar\"\n * [actions]=\"actions\"\n * (primaryClick)=\"save()\"\n * (actionClick)=\"onAction($event)\"\n * />\n */\n@Component({\n selector: 'neu-split-button',\n imports: [OverlayModule],\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n class: 'neu-split-button-host',\n '(document:click)': 'onDocumentClick($event)',\n '(keydown.escape)': 'closeDropdown()',\n },\n template: `\n <div class=\"neu-split-button\" [class.neu-split-button--disabled]=\"isDisabled()\">\n <!-- Botón principal -->\n <button\n class=\"neu-split-button__main\"\n [class]=\"mainClasses()\"\n type=\"button\"\n [disabled]=\"isDisabled() || null\"\n [attr.aria-disabled]=\"isDisabled()\"\n [attr.aria-busy]=\"loading()\"\n (click)=\"onPrimaryClick($event)\"\n >\n @if (loading()) {\n <span class=\"neu-button__spinner\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\">\n <circle\n cx=\"12\"\n cy=\"12\"\n r=\"10\"\n stroke=\"currentColor\"\n stroke-width=\"3\"\n stroke-linecap=\"round\"\n stroke-dasharray=\"31.416\"\n stroke-dashoffset=\"10\"\n />\n </svg>\n </span>\n }\n {{ label() }}\n </button>\n\n <!-- Separador -->\n <span class=\"neu-split-button__divider\" aria-hidden=\"true\"></span>\n\n <!-- Chevron trigger -->\n <button\n cdkOverlayOrigin\n #splitButtonOrigin=\"cdkOverlayOrigin\"\n class=\"neu-split-button__chevron\"\n [class]=\"chevronClasses()\"\n type=\"button\"\n [disabled]=\"isDisabled() || null\"\n [attr.aria-haspopup]=\"'menu'\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-label]=\"moreActionsAriaLabel()\"\n (click)=\"toggleDropdown($event)\"\n >\n <svg\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 aria-hidden=\"true\"\n >\n <polyline points=\"6 9 12 15 18 9\" />\n </svg>\n </button>\n\n <!-- Dropdown de acciones -->\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"splitButtonOrigin\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayPositions]=\"overlayPositions\"\n [cdkConnectedOverlayScrollStrategy]=\"overlayScrollStrategy\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n [cdkConnectedOverlayBackdropClass]=\"'cdk-overlay-transparent-backdrop'\"\n [cdkConnectedOverlayPush]=\"true\"\n [cdkConnectedOverlayViewportMargin]=\"_viewportMargin\"\n (backdropClick)=\"closeDropdown()\"\n (detach)=\"closeDropdown()\"\n >\n <div\n class=\"neu-split-button__dropdown\"\n role=\"menu\"\n [attr.aria-label]=\"actionsAriaLabel()\"\n (click)=\"$event.stopPropagation()\"\n >\n @for (action of actions(); track action.id) {\n @if (action.divider) {\n <div class=\"neu-split-button__dropdown-sep\" role=\"separator\" aria-hidden=\"true\"></div>\n }\n <button\n class=\"neu-split-button__dropdown-item\"\n [class.neu-split-button__dropdown-item--disabled]=\"action.disabled\"\n type=\"button\"\n role=\"menuitem\"\n [disabled]=\"action.disabled || null\"\n [attr.aria-disabled]=\"action.disabled ? 'true' : null\"\n (click)=\"onActionClick(action)\"\n >\n {{ action.label }}\n </button>\n }\n </div>\n </ng-template>\n </div>\n `,\n styleUrl: './neu-split-button.component.scss',\n})\nexport class NeuSplitButtonComponent {\n private readonly el = inject<ElementRef<HTMLElement>>(ElementRef);\n private readonly overlay = inject(Overlay);\n readonly _viewportMargin = 16;\n readonly overlayPositions: ConnectedPosition[] = [\n {\n originX: 'end',\n originY: 'bottom',\n overlayX: 'end',\n overlayY: 'top',\n offsetY: 6,\n },\n {\n originX: 'end',\n originY: 'top',\n overlayX: 'end',\n overlayY: 'bottom',\n offsetY: -6,\n },\n {\n originX: 'start',\n originY: 'bottom',\n overlayX: 'start',\n overlayY: 'top',\n offsetY: 6,\n },\n ];\n readonly overlayScrollStrategy = this.overlay.scrollStrategies.reposition();\n\n /** Texto del botón principal / Primary button text */\n label = input<string>('');\n\n /** Variante visual / Visual variant */\n variant = input<NeuButtonVariant>('primary');\n\n /** Tamaño / Size */\n size = input<NeuButtonSize>('md');\n\n /** Deshabilita todo el componente / Disables the entire component */\n disabled = input<boolean>(false);\n\n /** Muestra spinner en el botón principal / Shows spinner on the primary button */\n loading = input<boolean>(false);\n\n /** Acciones del dropdown / Dropdown actions */\n actions = input<NeuSplitButtonAction[]>([]);\n\n /** Aria-label del botón de desplegable / Aria-label for the dropdown button */\n moreActionsAriaLabel = input<string>('Más opciones');\n\n /** Aria-label del menú desplegable / Aria-label for the dropdown menu */\n actionsAriaLabel = input<string>('Acciones');\n\n /** Emite al hacer click en el botón principal / Emits on primary button click */\n primaryClick = output<MouseEvent>();\n\n /** Emite al seleccionar una acción del dropdown / Emits when a dropdown action is selected */\n actionClick = output<NeuSplitButtonAction>();\n\n readonly isOpen = signal(false);\n\n readonly isDisabled = computed(() => this.disabled() || this.loading());\n\n readonly mainClasses = computed(\n () =>\n `neu-button neu-button--${this.variant()} neu-button--${this.size()}${this.loading() ? ' neu-button--loading' : ''}`,\n );\n\n readonly chevronClasses = computed(\n () => `neu-button neu-button--${this.variant()} neu-button--${this.size()}`,\n );\n\n toggleDropdown(event: MouseEvent): void {\n event.stopPropagation();\n this.isOpen.update((v) => !v);\n }\n\n closeDropdown(): void {\n this.isOpen.set(false);\n }\n\n onDocumentClick(event: MouseEvent): void {\n const target = event.target as Element | null;\n const isInsidePanel = !!target?.closest('.neu-split-button__dropdown');\n if (!this.el.nativeElement.contains(event.target as Node) && !isInsidePanel) {\n this.closeDropdown();\n }\n }\n\n onPrimaryClick(event: MouseEvent): void {\n if (this.isDisabled()) return;\n this.primaryClick.emit(event);\n }\n\n onActionClick(action: NeuSplitButtonAction): void {\n if (action.disabled) return;\n this.closeDropdown();\n this.actionClick.emit(action);\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
|
|
@@ -2,14 +2,11 @@ import * as i0 from '@angular/core';
|
|
|
2
2
|
import { input, output, inject, ElementRef, signal, effect, untracked, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
|
|
3
3
|
|
|
4
4
|
class NeuSplitterComponent {
|
|
5
|
-
direction = input('horizontal', /*
|
|
6
|
-
...(ngDevMode ? [{ debugName: "
|
|
7
|
-
panes = input([], /* @ts-ignore */
|
|
8
|
-
...(ngDevMode ? [{ debugName: "panes" }] : /* istanbul ignore next */ []));
|
|
5
|
+
direction = input('horizontal', ...(ngDevMode ? [{ debugName: "direction" }] : /* istanbul ignore next */ []));
|
|
6
|
+
panes = input([], ...(ngDevMode ? [{ debugName: "panes" }] : /* istanbul ignore next */ []));
|
|
9
7
|
sizeChange = output();
|
|
10
8
|
_el = inject((ElementRef));
|
|
11
|
-
_sizes = signal([], /*
|
|
12
|
-
...(ngDevMode ? [{ debugName: "_sizes" }] : /* istanbul ignore next */ []));
|
|
9
|
+
_sizes = signal([], ...(ngDevMode ? [{ debugName: "_sizes" }] : /* istanbul ignore next */ []));
|
|
13
10
|
constructor() {
|
|
14
11
|
effect(() => {
|
|
15
12
|
const ps = this.panes();
|
|
@@ -103,8 +100,8 @@ class NeuSplitterComponent {
|
|
|
103
100
|
sizes[index + 1] = Math.max(0, newB);
|
|
104
101
|
this._sizes.set(sizes);
|
|
105
102
|
}
|
|
106
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
107
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
103
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: NeuSplitterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
104
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: NeuSplitterComponent, isStandalone: true, selector: "neu-splitter", inputs: { direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, panes: { classPropertyName: "panes", publicName: "panes", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sizeChange: "sizeChange" }, host: { properties: { "class.neu-splitter--horizontal": "direction() === \"horizontal\"", "class.neu-splitter--vertical": "direction() === \"vertical\"" }, classAttribute: "neu-splitter" }, ngImport: i0, template: `
|
|
108
105
|
@for (size of _sizes(); track $index) {
|
|
109
106
|
<div
|
|
110
107
|
class="neu-splitter__pane"
|
|
@@ -133,7 +130,7 @@ class NeuSplitterComponent {
|
|
|
133
130
|
}
|
|
134
131
|
`, isInline: true, styles: ["@charset \"UTF-8\";.neu-splitter{display:flex;overflow:hidden;width:100%;height:100%}.neu-splitter--horizontal{flex-direction:row}.neu-splitter--vertical{flex-direction:column}.neu-splitter__pane{overflow:auto;flex-shrink:0}.neu-splitter__handle{flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--neu-border-color, #e5e7eb);transition:background .15s;cursor:col-resize;position:relative;z-index:1;outline:none}.neu-splitter--horizontal .neu-splitter__handle{width:var(--neu-splitter-handle-size, 4px);cursor:col-resize;min-height:0}.neu-splitter--horizontal .neu-splitter__handle:hover,.neu-splitter--horizontal .neu-splitter__handle:focus-visible{background:var(--neu-color-primary, #0ea5e9);width:4px}.neu-splitter--vertical .neu-splitter__handle{height:var(--neu-splitter-handle-size, 4px);cursor:row-resize;width:100%}.neu-splitter--vertical .neu-splitter__handle:hover,.neu-splitter--vertical .neu-splitter__handle:focus-visible{background:var(--neu-color-primary, #0ea5e9);height:4px}.neu-splitter__handle:focus-visible{outline:2px solid var(--neu-focus-ring, #0ea5e9);outline-offset:1px}.neu-splitter__handle-dots{display:block;width:4px;height:24px;background:repeating-linear-gradient(to bottom,var(--neu-text-secondary, #9ca3af) 0 3px,transparent 3px 6px);border-radius:2px;opacity:.6}.neu-splitter--vertical .neu-splitter__handle-dots{width:24px;height:4px;background:repeating-linear-gradient(to right,var(--neu-text-secondary, #9ca3af) 0 3px,transparent 3px 6px)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
135
132
|
}
|
|
136
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
133
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: NeuSplitterComponent, decorators: [{
|
|
137
134
|
type: Component,
|
|
138
135
|
args: [{ selector: 'neu-splitter', imports: [], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
139
136
|
class: 'neu-splitter',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"neural-ui-core-splitter.mjs","sources":["../../../../projects/ui-core/splitter/neu-splitter.component.ts","../../../../projects/ui-core/splitter/neural-ui-core-splitter.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n ViewEncapsulation,\n effect,\n inject,\n input,\n output,\n signal,\n untracked,\n} from '@angular/core';\n\nexport type NeuSplitterDirection = 'horizontal' | 'vertical';\n\nexport interface NeuSplitterPane {\n size?: number;\n min?: number;\n max?: number;\n}\n\n@Component({\n selector: 'neu-splitter',\n imports: [],\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n class: 'neu-splitter',\n '[class.neu-splitter--horizontal]': 'direction() === \"horizontal\"',\n '[class.neu-splitter--vertical]': 'direction() === \"vertical\"',\n },\n template: `\n @for (size of _sizes(); track $index) {\n <div\n class=\"neu-splitter__pane\"\n [style.flex-basis]=\"size + '%'\"\n [style.min-width]=\"direction() === 'horizontal' ? (panes()[$index]?.min ?? 0) + 'px' : null\"\n [style.min-height]=\"direction() === 'vertical' ? (panes()[$index]?.min ?? 0) + 'px' : null\"\n >\n <ng-content select=\"neu-splitter-pane\" />\n </div>\n @if (!$last) {\n <div\n class=\"neu-splitter__handle\"\n role=\"separator\"\n tabindex=\"0\"\n [attr.aria-valuenow]=\"size\"\n [attr.aria-valuemin]=\"0\"\n [attr.aria-valuemax]=\"100\"\n [attr.aria-label]=\"'Separador ' + ($index + 1)\"\n (mousedown)=\"_startDrag($event, $index)\"\n (touchstart)=\"_startTouchDrag($event, $index)\"\n (keydown)=\"_onHandleKey($event, $index)\"\n >\n <span class=\"neu-splitter__handle-dots\" aria-hidden=\"true\"></span>\n </div>\n }\n }\n `,\n styleUrl: './neu-splitter.component.scss',\n})\nexport class NeuSplitterComponent {\n readonly direction = input<NeuSplitterDirection>('horizontal');\n readonly panes = input<NeuSplitterPane[]>([]);\n readonly sizeChange = output<number[]>();\n\n private readonly _el = inject(ElementRef<HTMLElement>);\n readonly _sizes = signal<number[]>([]);\n\n constructor() {\n effect(() => {\n const ps = this.panes();\n untracked(() => {\n if (!ps.length) return;\n const defined = ps.filter((p) => p.size !== undefined);\n const total = defined.reduce((sum, p) => sum + (p.size ?? 0), 0);\n if (defined.length === ps.length) {\n this._sizes.set(ps.map((p) => p.size ?? 0));\n } else {\n const remaining = (100 - total) / (ps.length - defined.length);\n this._sizes.set(ps.map((p) => p.size ?? remaining));\n }\n });\n });\n }\n\n private _dragIndex = -1;\n private _dragPos = 0;\n\n _startDrag(e: MouseEvent, index: number): void {\n e.preventDefault();\n this._dragIndex = index;\n this._dragPos = this.direction() === 'horizontal' ? e.clientX : e.clientY;\n const onMove = (ev: MouseEvent) => this._onDragMove(ev.clientX, ev.clientY);\n const onUp = () => {\n window.removeEventListener('mousemove', onMove);\n window.removeEventListener('mouseup', onUp);\n this._dragIndex = -1;\n this.sizeChange.emit(this._sizes());\n };\n window.addEventListener('mousemove', onMove);\n window.addEventListener('mouseup', onUp);\n }\n\n _startTouchDrag(e: TouchEvent, index: number): void {\n const t = e.touches[0];\n this._dragIndex = index;\n this._dragPos = this.direction() === 'horizontal' ? t.clientX : t.clientY;\n const onMove = (ev: TouchEvent) =>\n this._onDragMove(ev.touches[0].clientX, ev.touches[0].clientY);\n const onEnd = () => {\n window.removeEventListener('touchmove', onMove);\n window.removeEventListener('touchend', onEnd);\n this._dragIndex = -1;\n this.sizeChange.emit(this._sizes());\n };\n window.addEventListener('touchmove', onMove, { passive: true });\n window.addEventListener('touchend', onEnd);\n }\n\n _onHandleKey(e: KeyboardEvent, index: number): void {\n const step = 2;\n if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {\n e.preventDefault();\n this._adjustPair(index, -step);\n } else if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {\n e.preventDefault();\n this._adjustPair(index, step);\n }\n }\n\n private _onDragMove(clientX: number, clientY: number): void {\n if (this._dragIndex < 0) return;\n const pos = this.direction() === 'horizontal' ? clientX : clientY;\n const delta = pos - this._dragPos;\n this._dragPos = pos;\n const container = this._el.nativeElement;\n const total =\n this.direction() === 'horizontal' ? container.offsetWidth : container.offsetHeight;\n if (total === 0) return;\n this._adjustPair(this._dragIndex, (delta / total) * 100);\n }\n\n private _adjustPair(index: number, delta: number): void {\n const sizes = [...this._sizes()];\n const container = this._el.nativeElement;\n const total =\n this.direction() === 'horizontal' ? container.offsetWidth : container.offsetHeight;\n const minA = this.panes()[index]?.min ?? 0;\n const minB = this.panes()[index + 1]?.min ?? 0;\n const minPctA = total > 0 ? (minA / total) * 100 : 0;\n const minPctB = total > 0 ? (minB / total) * 100 : 0;\n\n let newA = sizes[index] + delta;\n let newB = sizes[index + 1] - delta;\n if (newA < minPctA) {\n newB -= minPctA - newA;\n newA = minPctA;\n }\n if (newB < minPctB) {\n newA -= minPctB - newB;\n newB = minPctB;\n }\n\n sizes[index] = Math.max(0, newA);\n sizes[index + 1] = Math.max(0, newB);\n this._sizes.set(sizes);\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-splitter.mjs","sources":["../../../../projects/ui-core/splitter/neu-splitter.component.ts","../../../../projects/ui-core/splitter/neural-ui-core-splitter.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n ViewEncapsulation,\n effect,\n inject,\n input,\n output,\n signal,\n untracked,\n} from '@angular/core';\n\nexport type NeuSplitterDirection = 'horizontal' | 'vertical';\n\nexport interface NeuSplitterPane {\n size?: number;\n min?: number;\n max?: number;\n}\n\n@Component({\n selector: 'neu-splitter',\n imports: [],\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n class: 'neu-splitter',\n '[class.neu-splitter--horizontal]': 'direction() === \"horizontal\"',\n '[class.neu-splitter--vertical]': 'direction() === \"vertical\"',\n },\n template: `\n @for (size of _sizes(); track $index) {\n <div\n class=\"neu-splitter__pane\"\n [style.flex-basis]=\"size + '%'\"\n [style.min-width]=\"direction() === 'horizontal' ? (panes()[$index]?.min ?? 0) + 'px' : null\"\n [style.min-height]=\"direction() === 'vertical' ? (panes()[$index]?.min ?? 0) + 'px' : null\"\n >\n <ng-content select=\"neu-splitter-pane\" />\n </div>\n @if (!$last) {\n <div\n class=\"neu-splitter__handle\"\n role=\"separator\"\n tabindex=\"0\"\n [attr.aria-valuenow]=\"size\"\n [attr.aria-valuemin]=\"0\"\n [attr.aria-valuemax]=\"100\"\n [attr.aria-label]=\"'Separador ' + ($index + 1)\"\n (mousedown)=\"_startDrag($event, $index)\"\n (touchstart)=\"_startTouchDrag($event, $index)\"\n (keydown)=\"_onHandleKey($event, $index)\"\n >\n <span class=\"neu-splitter__handle-dots\" aria-hidden=\"true\"></span>\n </div>\n }\n }\n `,\n styleUrl: './neu-splitter.component.scss',\n})\nexport class NeuSplitterComponent {\n readonly direction = input<NeuSplitterDirection>('horizontal');\n readonly panes = input<NeuSplitterPane[]>([]);\n readonly sizeChange = output<number[]>();\n\n private readonly _el = inject(ElementRef<HTMLElement>);\n readonly _sizes = signal<number[]>([]);\n\n constructor() {\n effect(() => {\n const ps = this.panes();\n untracked(() => {\n if (!ps.length) return;\n const defined = ps.filter((p) => p.size !== undefined);\n const total = defined.reduce((sum, p) => sum + (p.size ?? 0), 0);\n if (defined.length === ps.length) {\n this._sizes.set(ps.map((p) => p.size ?? 0));\n } else {\n const remaining = (100 - total) / (ps.length - defined.length);\n this._sizes.set(ps.map((p) => p.size ?? remaining));\n }\n });\n });\n }\n\n private _dragIndex = -1;\n private _dragPos = 0;\n\n _startDrag(e: MouseEvent, index: number): void {\n e.preventDefault();\n this._dragIndex = index;\n this._dragPos = this.direction() === 'horizontal' ? e.clientX : e.clientY;\n const onMove = (ev: MouseEvent) => this._onDragMove(ev.clientX, ev.clientY);\n const onUp = () => {\n window.removeEventListener('mousemove', onMove);\n window.removeEventListener('mouseup', onUp);\n this._dragIndex = -1;\n this.sizeChange.emit(this._sizes());\n };\n window.addEventListener('mousemove', onMove);\n window.addEventListener('mouseup', onUp);\n }\n\n _startTouchDrag(e: TouchEvent, index: number): void {\n const t = e.touches[0];\n this._dragIndex = index;\n this._dragPos = this.direction() === 'horizontal' ? t.clientX : t.clientY;\n const onMove = (ev: TouchEvent) =>\n this._onDragMove(ev.touches[0].clientX, ev.touches[0].clientY);\n const onEnd = () => {\n window.removeEventListener('touchmove', onMove);\n window.removeEventListener('touchend', onEnd);\n this._dragIndex = -1;\n this.sizeChange.emit(this._sizes());\n };\n window.addEventListener('touchmove', onMove, { passive: true });\n window.addEventListener('touchend', onEnd);\n }\n\n _onHandleKey(e: KeyboardEvent, index: number): void {\n const step = 2;\n if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {\n e.preventDefault();\n this._adjustPair(index, -step);\n } else if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {\n e.preventDefault();\n this._adjustPair(index, step);\n }\n }\n\n private _onDragMove(clientX: number, clientY: number): void {\n if (this._dragIndex < 0) return;\n const pos = this.direction() === 'horizontal' ? clientX : clientY;\n const delta = pos - this._dragPos;\n this._dragPos = pos;\n const container = this._el.nativeElement;\n const total =\n this.direction() === 'horizontal' ? container.offsetWidth : container.offsetHeight;\n if (total === 0) return;\n this._adjustPair(this._dragIndex, (delta / total) * 100);\n }\n\n private _adjustPair(index: number, delta: number): void {\n const sizes = [...this._sizes()];\n const container = this._el.nativeElement;\n const total =\n this.direction() === 'horizontal' ? container.offsetWidth : container.offsetHeight;\n const minA = this.panes()[index]?.min ?? 0;\n const minB = this.panes()[index + 1]?.min ?? 0;\n const minPctA = total > 0 ? (minA / total) * 100 : 0;\n const minPctB = total > 0 ? (minB / total) * 100 : 0;\n\n let newA = sizes[index] + delta;\n let newB = sizes[index + 1] - delta;\n if (newA < minPctA) {\n newB -= minPctA - newA;\n newA = minPctA;\n }\n if (newB < minPctB) {\n newA -= minPctB - newB;\n newB = minPctB;\n }\n\n sizes[index] = Math.max(0, newA);\n sizes[index + 1] = Math.max(0, newB);\n this._sizes.set(sizes);\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
|
|
@@ -17,26 +17,19 @@ import { NeuIconComponent } from '@neural-ui/core/icon';
|
|
|
17
17
|
*/
|
|
18
18
|
class NeuStatsCardComponent {
|
|
19
19
|
/** Título o etiqueta de la métrica. / Metric title or label. */
|
|
20
|
-
title = input('', /*
|
|
21
|
-
...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
|
|
20
|
+
title = input('', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
|
|
22
21
|
/** Valor principal formateado (p.ej. "$12,450" o "98.2%"). / Main formatted value (e.g. "$12,450" or "98.2%"). */
|
|
23
|
-
value = input('', /*
|
|
24
|
-
...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
22
|
+
value = input('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
25
23
|
/** Cambio porcentual o absoluto (p.ej. "+12.5%" o "-3"). / Percentage or absolute change (e.g. "+12.5%" or "-3"). */
|
|
26
|
-
change = input('', /*
|
|
27
|
-
...(ngDevMode ? [{ debugName: "change" }] : /* istanbul ignore next */ []));
|
|
24
|
+
change = input('', ...(ngDevMode ? [{ debugName: "change" }] : /* istanbul ignore next */ []));
|
|
28
25
|
/** Dirección del cambio. Afecta el color del change. / Change direction. Affects the change color. */
|
|
29
|
-
trend = input('neutral', /*
|
|
30
|
-
...(ngDevMode ? [{ debugName: "trend" }] : /* istanbul ignore next */ []));
|
|
26
|
+
trend = input('neutral', ...(ngDevMode ? [{ debugName: "trend" }] : /* istanbul ignore next */ []));
|
|
31
27
|
/** Texto auxiliar bajo el cambio (p.ej. "vs. mes anterior"). / Auxiliary text below the change (e.g. "vs. previous month"). */
|
|
32
|
-
label = input('', /*
|
|
33
|
-
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
28
|
+
label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
34
29
|
/** Nombre del icono Lucide para el encabezado. / Lucide icon name for the header. */
|
|
35
|
-
icon = input('', /*
|
|
36
|
-
...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
|
|
30
|
+
icon = input('', ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
|
|
37
31
|
/** Array de valores numéricos para la sparkline. Mín. 2 puntos. / Array of numeric values for the sparkline. Min. 2 points. */
|
|
38
|
-
sparkData = input([], /*
|
|
39
|
-
...(ngDevMode ? [{ debugName: "sparkData" }] : /* istanbul ignore next */ []));
|
|
32
|
+
sparkData = input([], ...(ngDevMode ? [{ debugName: "sparkData" }] : /* istanbul ignore next */ []));
|
|
40
33
|
/** @internal Genera los puntos SVG de la sparkline / Generates the SVG sparkline points */
|
|
41
34
|
sparkPoints = computed(() => {
|
|
42
35
|
const data = this.sparkData();
|
|
@@ -49,10 +42,9 @@ class NeuStatsCardComponent {
|
|
|
49
42
|
return data
|
|
50
43
|
.map((v, i) => `${(i * step).toFixed(1)},${(30 - ((v - min) / range) * 25 + 2.5).toFixed(1)}`)
|
|
51
44
|
.join(' ');
|
|
52
|
-
}, /*
|
|
53
|
-
|
|
54
|
-
static
|
|
55
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: NeuStatsCardComponent, isStandalone: true, selector: "neu-stats-card", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, change: { classPropertyName: "change", publicName: "change", isSignal: true, isRequired: false, transformFunction: null }, trend: { classPropertyName: "trend", publicName: "trend", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, sparkData: { classPropertyName: "sparkData", publicName: "sparkData", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "neu-stats-card" }, ngImport: i0, template: `
|
|
45
|
+
}, ...(ngDevMode ? [{ debugName: "sparkPoints" }] : /* istanbul ignore next */ []));
|
|
46
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: NeuStatsCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
47
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: NeuStatsCardComponent, isStandalone: true, selector: "neu-stats-card", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, change: { classPropertyName: "change", publicName: "change", isSignal: true, isRequired: false, transformFunction: null }, trend: { classPropertyName: "trend", publicName: "trend", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, sparkData: { classPropertyName: "sparkData", publicName: "sparkData", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "neu-stats-card" }, ngImport: i0, template: `
|
|
56
48
|
<div class="neu-stats-card__inner">
|
|
57
49
|
<!-- Header: icono + título -->
|
|
58
50
|
<div class="neu-stats-card__header">
|
|
@@ -106,7 +98,7 @@ class NeuStatsCardComponent {
|
|
|
106
98
|
</div>
|
|
107
99
|
`, isInline: true, styles: [".neu-stats-card{display:block}.neu-stats-card__inner{background:var(--neu-surface);border:1px solid var(--neu-border);border-radius:var(--neu-radius-lg, 16px);padding:var(--neu-space-5, 1.25rem);display:flex;flex-direction:column;gap:var(--neu-space-3, .75rem);transition:box-shadow var(--neu-transition)}.neu-stats-card__inner:hover{box-shadow:var(--neu-shadow-sm)}.neu-stats-card__header{display:flex;align-items:center;gap:var(--neu-space-2, .5rem)}.neu-stats-card__icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:var(--neu-radius, 8px);background:var(--neu-primary-50, #eff6ff);color:var(--neu-primary);flex-shrink:0}.neu-stats-card__title{font-size:var(--neu-text-sm, .875rem);font-weight:500;color:var(--neu-text-muted);line-height:1.3}.neu-stats-card__value{font-size:var(--neu-text-2xl, 1.5rem);font-weight:700;color:var(--neu-text);letter-spacing:-.03em;line-height:1.1;font-family:var(--neu-font-sans)}.neu-stats-card__footer{display:flex;align-items:center;gap:var(--neu-space-2, .5rem);margin-top:auto}.neu-stats-card__change{display:inline-flex;align-items:center;gap:3px;font-size:var(--neu-text-xs, .75rem);font-weight:600;padding:2px 6px;border-radius:var(--neu-radius-full, 999px)}.neu-stats-card__change--up{background:#dcfce7;color:#15803d}.neu-stats-card__change--down{background:#fee2e2;color:#b91c1c}.neu-stats-card__change--neutral{background:var(--neu-surface-2, #f8fafc);color:var(--neu-text-muted)}.neu-stats-card__label{font-size:var(--neu-text-xs, .75rem);color:var(--neu-text-muted)}.neu-stats-card__sparkline{margin-left:auto;width:80px;height:30px;flex-shrink:0}.neu-stats-card__spark-line{stroke:var(--neu-primary);opacity:.8}\n"], dependencies: [{ kind: "component", type: NeuIconComponent, selector: "neu-icon", inputs: ["name", "strokeWidth", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
108
100
|
}
|
|
109
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
101
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: NeuStatsCardComponent, decorators: [{
|
|
110
102
|
type: Component,
|
|
111
103
|
args: [{ selector: 'neu-stats-card', imports: [NeuIconComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'neu-stats-card' }, template: `
|
|
112
104
|
<div class="neu-stats-card__inner">
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"neural-ui-core-stats-card.mjs","sources":["../../../../projects/ui-core/stats-card/neu-stats-card.component.ts","../../../../projects/ui-core/stats-card/neural-ui-core-stats-card.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n ViewEncapsulation,\n computed,\n input,\n} from '@angular/core';\nimport { NeuIconComponent } from '@neural-ui/core/icon';\n\nexport type NeuStatsTrend = 'up' | 'down' | 'neutral';\n\n/**\n * NeuStatsCard — Card de métrica con título, valor, tendencia y sparkline.\n *\n * Uso:\n * <neu-stats-card\n * title=\"Ingresos\"\n * value=\"$12,450\"\n * change=\"+12.5%\"\n * trend=\"up\"\n * icon=\"lucideDollarSign\"\n * [sparkData]=\"[30,45,38,52,60,55,70]\"\n * />\n */\n@Component({\n selector: 'neu-stats-card',\n imports: [NeuIconComponent],\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: { class: 'neu-stats-card' },\n template: `\n <div class=\"neu-stats-card__inner\">\n <!-- Header: icono + título -->\n <div class=\"neu-stats-card__header\">\n @if (icon()) {\n <span class=\"neu-stats-card__icon\">\n <neu-icon [name]=\"icon()\" size=\"1.125rem\" />\n </span>\n }\n <span class=\"neu-stats-card__title\">{{ title() }}</span>\n </div>\n\n <!-- Valor principal -->\n <div class=\"neu-stats-card__value\">{{ value() }}</div>\n\n <!-- Footer: cambio + sparkline -->\n <div class=\"neu-stats-card__footer\">\n @if (change()) {\n <span class=\"neu-stats-card__change neu-stats-card__change--{{ trend() }}\">\n @if (trend() === 'up') {\n <neu-icon name=\"lucideTrendingUp\" size=\"0.875rem\" />\n } @else if (trend() === 'down') {\n <neu-icon name=\"lucideTrendingDown\" size=\"0.875rem\" />\n } @else {\n <neu-icon name=\"lucideMinus\" size=\"0.875rem\" />\n }\n {{ change() }}\n </span>\n }\n @if (label()) {\n <span class=\"neu-stats-card__label\">{{ label() }}</span>\n }\n\n @if (sparkData().length > 1) {\n <svg\n class=\"neu-stats-card__sparkline\"\n viewBox=\"0 0 100 30\"\n preserveAspectRatio=\"none\"\n aria-hidden=\"true\"\n >\n <polyline\n class=\"neu-stats-card__spark-line\"\n [attr.points]=\"sparkPoints()\"\n fill=\"none\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n }\n </div>\n </div>\n `,\n styleUrl: './neu-stats-card.component.scss',\n})\nexport class NeuStatsCardComponent {\n /** Título o etiqueta de la métrica. / Metric title or label. */\n title = input<string>('');\n /** Valor principal formateado (p.ej. \"$12,450\" o \"98.2%\"). / Main formatted value (e.g. \"$12,450\" or \"98.2%\"). */\n value = input<string>('');\n /** Cambio porcentual o absoluto (p.ej. \"+12.5%\" o \"-3\"). / Percentage or absolute change (e.g. \"+12.5%\" or \"-3\"). */\n change = input<string>('');\n /** Dirección del cambio. Afecta el color del change. / Change direction. Affects the change color. */\n trend = input<NeuStatsTrend>('neutral');\n /** Texto auxiliar bajo el cambio (p.ej. \"vs. mes anterior\"). / Auxiliary text below the change (e.g. \"vs. previous month\"). */\n label = input<string>('');\n /** Nombre del icono Lucide para el encabezado. / Lucide icon name for the header. */\n icon = input<string>('');\n /** Array de valores numéricos para la sparkline. Mín. 2 puntos. / Array of numeric values for the sparkline. Min. 2 points. */\n sparkData = input<number[]>([]);\n\n /** @internal Genera los puntos SVG de la sparkline / Generates the SVG sparkline points */\n protected readonly sparkPoints = computed(() => {\n const data = this.sparkData();\n if (data.length < 2) return '';\n const min = Math.min(...data);\n const max = Math.max(...data);\n const range = max - min || 1;\n const step = 100 / (data.length - 1);\n return data\n .map((v, i) => `${(i * step).toFixed(1)},${(30 - ((v - min) / range) * 25 + 2.5).toFixed(1)}`)\n .join(' ');\n });\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;;AAWA;;;;;;;;;;;;AAYG;MA8DU,qBAAqB,CAAA;;
|
|
1
|
+
{"version":3,"file":"neural-ui-core-stats-card.mjs","sources":["../../../../projects/ui-core/stats-card/neu-stats-card.component.ts","../../../../projects/ui-core/stats-card/neural-ui-core-stats-card.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n ViewEncapsulation,\n computed,\n input,\n} from '@angular/core';\nimport { NeuIconComponent } from '@neural-ui/core/icon';\n\nexport type NeuStatsTrend = 'up' | 'down' | 'neutral';\n\n/**\n * NeuStatsCard — Card de métrica con título, valor, tendencia y sparkline.\n *\n * Uso:\n * <neu-stats-card\n * title=\"Ingresos\"\n * value=\"$12,450\"\n * change=\"+12.5%\"\n * trend=\"up\"\n * icon=\"lucideDollarSign\"\n * [sparkData]=\"[30,45,38,52,60,55,70]\"\n * />\n */\n@Component({\n selector: 'neu-stats-card',\n imports: [NeuIconComponent],\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: { class: 'neu-stats-card' },\n template: `\n <div class=\"neu-stats-card__inner\">\n <!-- Header: icono + título -->\n <div class=\"neu-stats-card__header\">\n @if (icon()) {\n <span class=\"neu-stats-card__icon\">\n <neu-icon [name]=\"icon()\" size=\"1.125rem\" />\n </span>\n }\n <span class=\"neu-stats-card__title\">{{ title() }}</span>\n </div>\n\n <!-- Valor principal -->\n <div class=\"neu-stats-card__value\">{{ value() }}</div>\n\n <!-- Footer: cambio + sparkline -->\n <div class=\"neu-stats-card__footer\">\n @if (change()) {\n <span class=\"neu-stats-card__change neu-stats-card__change--{{ trend() }}\">\n @if (trend() === 'up') {\n <neu-icon name=\"lucideTrendingUp\" size=\"0.875rem\" />\n } @else if (trend() === 'down') {\n <neu-icon name=\"lucideTrendingDown\" size=\"0.875rem\" />\n } @else {\n <neu-icon name=\"lucideMinus\" size=\"0.875rem\" />\n }\n {{ change() }}\n </span>\n }\n @if (label()) {\n <span class=\"neu-stats-card__label\">{{ label() }}</span>\n }\n\n @if (sparkData().length > 1) {\n <svg\n class=\"neu-stats-card__sparkline\"\n viewBox=\"0 0 100 30\"\n preserveAspectRatio=\"none\"\n aria-hidden=\"true\"\n >\n <polyline\n class=\"neu-stats-card__spark-line\"\n [attr.points]=\"sparkPoints()\"\n fill=\"none\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n }\n </div>\n </div>\n `,\n styleUrl: './neu-stats-card.component.scss',\n})\nexport class NeuStatsCardComponent {\n /** Título o etiqueta de la métrica. / Metric title or label. */\n title = input<string>('');\n /** Valor principal formateado (p.ej. \"$12,450\" o \"98.2%\"). / Main formatted value (e.g. \"$12,450\" or \"98.2%\"). */\n value = input<string>('');\n /** Cambio porcentual o absoluto (p.ej. \"+12.5%\" o \"-3\"). / Percentage or absolute change (e.g. \"+12.5%\" or \"-3\"). */\n change = input<string>('');\n /** Dirección del cambio. Afecta el color del change. / Change direction. Affects the change color. */\n trend = input<NeuStatsTrend>('neutral');\n /** Texto auxiliar bajo el cambio (p.ej. \"vs. mes anterior\"). / Auxiliary text below the change (e.g. \"vs. previous month\"). */\n label = input<string>('');\n /** Nombre del icono Lucide para el encabezado. / Lucide icon name for the header. */\n icon = input<string>('');\n /** Array de valores numéricos para la sparkline. Mín. 2 puntos. / Array of numeric values for the sparkline. Min. 2 points. */\n sparkData = input<number[]>([]);\n\n /** @internal Genera los puntos SVG de la sparkline / Generates the SVG sparkline points */\n protected readonly sparkPoints = computed(() => {\n const data = this.sparkData();\n if (data.length < 2) return '';\n const min = Math.min(...data);\n const max = Math.max(...data);\n const range = max - min || 1;\n const step = 100 / (data.length - 1);\n return data\n .map((v, i) => `${(i * step).toFixed(1)},${(30 - ((v - min) / range) * 25 + 2.5).toFixed(1)}`)\n .join(' ');\n });\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
|
|
@@ -17,21 +17,16 @@ import { NeuTooltipDirective } from '@neural-ui/core/tooltip';
|
|
|
17
17
|
class NeuStepperComponent {
|
|
18
18
|
_destroyRef = inject(DestroyRef);
|
|
19
19
|
/** Pasos del wizard / Wizard steps */
|
|
20
|
-
steps = input([], /*
|
|
21
|
-
...(ngDevMode ? [{ debugName: "steps" }] : /* istanbul ignore next */ []));
|
|
20
|
+
steps = input([], ...(ngDevMode ? [{ debugName: "steps" }] : /* istanbul ignore next */ []));
|
|
22
21
|
/** Índice del paso activo (0-based) / Active step index (0-based) */
|
|
23
|
-
activeStep = input(0, /*
|
|
24
|
-
...(ngDevMode ? [{ debugName: "activeStep" }] : /* istanbul ignore next */ []));
|
|
22
|
+
activeStep = input(0, ...(ngDevMode ? [{ debugName: "activeStep" }] : /* istanbul ignore next */ []));
|
|
25
23
|
/** Si true, solo permite ir hacia adelante secuencialmente / If true, only allows moving forward sequentially */
|
|
26
|
-
linear = input(false, /*
|
|
27
|
-
...(ngDevMode ? [{ debugName: "linear" }] : /* istanbul ignore next */ []));
|
|
24
|
+
linear = input(false, ...(ngDevMode ? [{ debugName: "linear" }] : /* istanbul ignore next */ []));
|
|
28
25
|
/** Emite el nuevo índice al cambiar / Emits the new index on change */
|
|
29
26
|
stepChange = output();
|
|
30
27
|
/** Set de pasos completados / Set of completed steps */
|
|
31
|
-
_completed = signal(new Set(), /*
|
|
32
|
-
...(ngDevMode ? [{ debugName: "
|
|
33
|
-
isCompact = signal(typeof window !== 'undefined' ? window.innerWidth <= 767 : false, /* @ts-ignore */
|
|
34
|
-
...(ngDevMode ? [{ debugName: "isCompact" }] : /* istanbul ignore next */ []));
|
|
28
|
+
_completed = signal(new Set(), ...(ngDevMode ? [{ debugName: "_completed" }] : /* istanbul ignore next */ []));
|
|
29
|
+
isCompact = signal(typeof window !== 'undefined' ? window.innerWidth <= 767 : false, ...(ngDevMode ? [{ debugName: "isCompact" }] : /* istanbul ignore next */ []));
|
|
35
30
|
isCompleted = (i) => this._completed().has(i) || (this.steps()[i]?.completed ?? false) || i < this.activeStep();
|
|
36
31
|
stepTooltip = (step) => step.description ? `${step.label} - ${step.description}` : step.label;
|
|
37
32
|
stepAriaLabel = (step) => this.stepTooltip(step);
|
|
@@ -71,8 +66,8 @@ class NeuStepperComponent {
|
|
|
71
66
|
this.stepChange.emit(current - 1);
|
|
72
67
|
}
|
|
73
68
|
}
|
|
74
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
75
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
69
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: NeuStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
70
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: NeuStepperComponent, isStandalone: true, selector: "neu-stepper", inputs: { steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: false, transformFunction: null }, activeStep: { classPropertyName: "activeStep", publicName: "activeStep", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { stepChange: "stepChange" }, ngImport: i0, template: `
|
|
76
71
|
<!-- Cabecera de pasos -->
|
|
77
72
|
<div class="neu-stepper">
|
|
78
73
|
<div class="neu-stepper__header">
|
|
@@ -135,7 +130,7 @@ class NeuStepperComponent {
|
|
|
135
130
|
</div>
|
|
136
131
|
`, isInline: true, styles: [".neu-stepper{--neu-stepper-indicator-size: 32px;--neu-stepper-indicator-radius: calc(var(--neu-stepper-indicator-size) / 2);--neu-stepper-connector-gap: 8px;display:flex;flex-direction:column;gap:var(--neu-space-6);font-family:var(--neu-font-sans)}.neu-stepper__header{display:flex;align-items:flex-start;gap:0;overflow-x:auto;scrollbar-width:thin;padding-bottom:var(--neu-space-2)}.neu-stepper__step{position:relative;display:flex;flex-direction:column;align-items:center;flex:1 0 8.5rem;min-width:8.5rem}.neu-stepper__step-btn{display:flex;flex-direction:column;align-items:center;width:100%;gap:var(--neu-space-3);background:none;border:none;padding:0 var(--neu-space-2);cursor:pointer;min-width:0;outline:none;position:relative;z-index:1}.neu-stepper__step-btn:focus-visible .neu-stepper__indicator{box-shadow:0 0 0 3px var(--neu-primary-100)}.neu-stepper__step-btn:disabled{cursor:not-allowed}.neu-stepper__indicator{width:var(--neu-stepper-indicator-size);height:var(--neu-stepper-indicator-size);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:.8125rem;font-weight:700;background:var(--neu-surface-2);border:2px solid var(--neu-border);color:var(--neu-text-disabled);transition:background var(--neu-transition),border-color var(--neu-transition),color var(--neu-transition)}.neu-stepper__step--active .neu-stepper__indicator{background:var(--neu-primary-solid, var(--neu-primary-dark, var(--neu-primary)));border-color:var(--neu-primary-solid, var(--neu-primary-dark, var(--neu-primary)));color:var(--neu-primary-solid-fg, var(--neu-primary-fg))}.neu-stepper__step--completed .neu-stepper__indicator{background:var(--neu-success);border-color:var(--neu-success);color:var(--neu-primary-fg)}.neu-stepper__step-info{display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0;width:100%;gap:2px}.neu-stepper__step-label{display:block;font-size:var(--neu-text-sm);font-weight:600;color:var(--neu-text-muted);transition:color var(--neu-transition);line-height:1.25;overflow-wrap:anywhere}.neu-stepper__step--active .neu-stepper__step-label{color:var(--neu-text)}.neu-stepper__step--completed .neu-stepper__step-label{color:var(--neu-text-muted)}.neu-stepper__step-desc{display:block;max-width:100%;font-size:var(--neu-text-xs);color:var(--neu-text-disabled);margin-top:1px;line-height:1.35;overflow-wrap:anywhere}.neu-stepper__connector{position:absolute;top:calc(var(--neu-stepper-indicator-radius) - 1px);left:calc(50% + var(--neu-stepper-indicator-radius) + var(--neu-stepper-connector-gap));width:calc(100% - var(--neu-stepper-indicator-size) - var(--neu-stepper-connector-gap) * 2);height:2px;background:var(--neu-border);transition:background var(--neu-transition);z-index:0}.neu-stepper__connector--done{background:var(--neu-success)}.neu-stepper__content{min-height:80px}@media(max-width:767px){.neu-stepper__header{align-items:flex-start;gap:var(--neu-space-2);scroll-snap-type:x proximity}.neu-stepper__step{flex:0 0 auto;min-width:3.5rem}.neu-stepper__step-btn{padding-inline:0}.neu-stepper__connector{left:calc(50% + var(--neu-stepper-indicator-radius) + var(--neu-stepper-connector-gap));width:calc(100% - var(--neu-stepper-indicator-size) - var(--neu-stepper-connector-gap) * 2)}.neu-stepper__step-info{display:none}}\n"], dependencies: [{ kind: "directive", type: NeuTooltipDirective, selector: "[neuTooltip]", inputs: ["neuTooltip", "neuTooltipPosition", "neuTooltipDisabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
137
132
|
}
|
|
138
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
133
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: NeuStepperComponent, decorators: [{
|
|
139
134
|
type: Component,
|
|
140
135
|
args: [{ selector: 'neu-stepper', imports: [NeuTooltipDirective], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: `
|
|
141
136
|
<!-- Cabecera de pasos -->
|