@neural-ui/core 1.5.14 → 1.6.1
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 +13 -9
- package/fesm2022/neural-ui-core-accordion.mjs.map +1 -1
- package/fesm2022/neural-ui-core-alert.mjs +25 -14
- package/fesm2022/neural-ui-core-alert.mjs.map +1 -1
- package/fesm2022/neural-ui-core-autocomplete.mjs +53 -28
- package/fesm2022/neural-ui-core-autocomplete.mjs.map +1 -1
- package/fesm2022/neural-ui-core-avatar.mjs +23 -13
- package/fesm2022/neural-ui-core-avatar.mjs.map +1 -1
- package/fesm2022/neural-ui-core-badge.mjs +15 -9
- package/fesm2022/neural-ui-core-badge.mjs.map +1 -1
- package/fesm2022/neural-ui-core-block-ui.mjs +16 -11
- package/fesm2022/neural-ui-core-block-ui.mjs.map +1 -1
- package/fesm2022/neural-ui-core-breadcrumb.mjs +8 -6
- package/fesm2022/neural-ui-core-breadcrumb.mjs.map +1 -1
- package/fesm2022/neural-ui-core-button.mjs +29 -16
- package/fesm2022/neural-ui-core-button.mjs.map +1 -1
- package/fesm2022/neural-ui-core-calendar.mjs +75 -50
- package/fesm2022/neural-ui-core-calendar.mjs.map +1 -1
- package/fesm2022/neural-ui-core-card.mjs +13 -8
- package/fesm2022/neural-ui-core-card.mjs.map +1 -1
- package/fesm2022/neural-ui-core-chart.mjs +45 -24
- package/fesm2022/neural-ui-core-chart.mjs.map +1 -1
- package/fesm2022/neural-ui-core-checkbox.mjs +15 -9
- package/fesm2022/neural-ui-core-checkbox.mjs.map +1 -1
- package/fesm2022/neural-ui-core-chip.mjs +23 -13
- package/fesm2022/neural-ui-core-chip.mjs.map +1 -1
- package/fesm2022/neural-ui-core-code-block.mjs +32 -17
- package/fesm2022/neural-ui-core-code-block.mjs.map +1 -1
- package/fesm2022/neural-ui-core-color-picker.mjs +19 -11
- package/fesm2022/neural-ui-core-color-picker.mjs.map +1 -1
- package/fesm2022/neural-ui-core-command-palette.mjs +16 -11
- 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-context-menu.mjs +12 -9
- package/fesm2022/neural-ui-core-context-menu.mjs.map +1 -1
- package/fesm2022/neural-ui-core-dashboard-grid.mjs +11 -7
- package/fesm2022/neural-ui-core-dashboard-grid.mjs.map +1 -1
- package/fesm2022/neural-ui-core-date-input.mjs +111 -57
- package/fesm2022/neural-ui-core-date-input.mjs.map +1 -1
- package/fesm2022/neural-ui-core-divider.mjs +7 -5
- package/fesm2022/neural-ui-core-divider.mjs.map +1 -1
- package/fesm2022/neural-ui-core-empty-state.mjs +13 -8
- package/fesm2022/neural-ui-core-empty-state.mjs.map +1 -1
- package/fesm2022/neural-ui-core-filter-bar.mjs +19 -11
- package/fesm2022/neural-ui-core-filter-bar.mjs.map +1 -1
- package/fesm2022/neural-ui-core-icon.mjs +11 -7
- package/fesm2022/neural-ui-core-icon.mjs.map +1 -1
- package/fesm2022/neural-ui-core-image-gallery.mjs +23 -13
- package/fesm2022/neural-ui-core-image-gallery.mjs.map +1 -1
- package/fesm2022/neural-ui-core-image-viewer.mjs +22 -14
- package/fesm2022/neural-ui-core-image-viewer.mjs.map +1 -1
- package/fesm2022/neural-ui-core-input-otp.mjs +19 -11
- package/fesm2022/neural-ui-core-input-otp.mjs.map +1 -1
- package/fesm2022/neural-ui-core-input.mjs +67 -35
- package/fesm2022/neural-ui-core-input.mjs.map +1 -1
- package/fesm2022/neural-ui-core-kanban.mjs +17 -11
- package/fesm2022/neural-ui-core-kanban.mjs.map +1 -1
- package/fesm2022/neural-ui-core-knob.mjs +41 -22
- package/fesm2022/neural-ui-core-knob.mjs.map +1 -1
- package/fesm2022/neural-ui-core-meter-group.mjs +23 -13
- package/fesm2022/neural-ui-core-meter-group.mjs.map +1 -1
- package/fesm2022/neural-ui-core-modal.mjs +16 -11
- package/fesm2022/neural-ui-core-modal.mjs.map +1 -1
- package/fesm2022/neural-ui-core-multiselect.mjs +72 -39
- package/fesm2022/neural-ui-core-multiselect.mjs.map +1 -1
- package/fesm2022/neural-ui-core-nav.mjs +22 -13
- package/fesm2022/neural-ui-core-nav.mjs.map +1 -1
- package/fesm2022/neural-ui-core-notification-center.mjs +27 -10
- package/fesm2022/neural-ui-core-notification-center.mjs.map +1 -1
- package/fesm2022/neural-ui-core-number-input.mjs +35 -19
- package/fesm2022/neural-ui-core-number-input.mjs.map +1 -1
- package/fesm2022/neural-ui-core-pagination.mjs +15 -9
- package/fesm2022/neural-ui-core-pagination.mjs.map +1 -1
- package/fesm2022/neural-ui-core-popover.mjs +22 -14
- package/fesm2022/neural-ui-core-popover.mjs.map +1 -1
- package/fesm2022/neural-ui-core-progress-bar.mjs +19 -11
- package/fesm2022/neural-ui-core-progress-bar.mjs.map +1 -1
- package/fesm2022/neural-ui-core-radio.mjs +24 -15
- package/fesm2022/neural-ui-core-radio.mjs.map +1 -1
- package/fesm2022/neural-ui-core-rating.mjs +13 -8
- package/fesm2022/neural-ui-core-rating.mjs.map +1 -1
- package/fesm2022/neural-ui-core-rich-text-editor.mjs +773 -0
- package/fesm2022/neural-ui-core-rich-text-editor.mjs.map +1 -0
- package/fesm2022/neural-ui-core-scheduler-gantt.mjs +41 -22
- package/fesm2022/neural-ui-core-scheduler-gantt.mjs.map +1 -1
- package/fesm2022/neural-ui-core-select.mjs +77 -43
- package/fesm2022/neural-ui-core-select.mjs.map +1 -1
- package/fesm2022/neural-ui-core-sidebar.mjs +23 -14
- package/fesm2022/neural-ui-core-sidebar.mjs.map +1 -1
- package/fesm2022/neural-ui-core-skeleton.mjs +11 -7
- package/fesm2022/neural-ui-core-skeleton.mjs.map +1 -1
- package/fesm2022/neural-ui-core-slider.mjs +23 -13
- package/fesm2022/neural-ui-core-slider.mjs.map +1 -1
- package/fesm2022/neural-ui-core-spinner.mjs +17 -10
- package/fesm2022/neural-ui-core-spinner.mjs.map +1 -1
- package/fesm2022/neural-ui-core-split-button.mjs +27 -15
- package/fesm2022/neural-ui-core-split-button.mjs.map +1 -1
- package/fesm2022/neural-ui-core-splitter.mjs +9 -6
- package/fesm2022/neural-ui-core-splitter.mjs.map +1 -1
- package/fesm2022/neural-ui-core-stats-card.mjs +19 -11
- package/fesm2022/neural-ui-core-stats-card.mjs.map +1 -1
- package/fesm2022/neural-ui-core-stepper.mjs +13 -8
- package/fesm2022/neural-ui-core-stepper.mjs.map +1 -1
- package/fesm2022/neural-ui-core-switch.mjs +15 -9
- package/fesm2022/neural-ui-core-switch.mjs.map +1 -1
- package/fesm2022/neural-ui-core-table.mjs +242 -124
- package/fesm2022/neural-ui-core-table.mjs.map +1 -1
- package/fesm2022/neural-ui-core-tabs.mjs +30 -18
- package/fesm2022/neural-ui-core-tabs.mjs.map +1 -1
- package/fesm2022/neural-ui-core-textarea.mjs +43 -23
- package/fesm2022/neural-ui-core-textarea.mjs.map +1 -1
- package/fesm2022/neural-ui-core-timeline-grid.mjs +21 -12
- package/fesm2022/neural-ui-core-timeline-grid.mjs.map +1 -1
- package/fesm2022/neural-ui-core-timeline.mjs +5 -4
- package/fesm2022/neural-ui-core-timeline.mjs.map +1 -1
- package/fesm2022/neural-ui-core-toast.mjs +25 -9
- package/fesm2022/neural-ui-core-toast.mjs.map +1 -1
- package/fesm2022/neural-ui-core-toggle-button-group.mjs +17 -10
- package/fesm2022/neural-ui-core-toggle-button-group.mjs.map +1 -1
- package/fesm2022/neural-ui-core-toolbar.mjs +13 -8
- package/fesm2022/neural-ui-core-toolbar.mjs.map +1 -1
- package/fesm2022/neural-ui-core-tooltip.mjs +16 -11
- package/fesm2022/neural-ui-core-tooltip.mjs.map +1 -1
- package/fesm2022/neural-ui-core-tree-table.mjs +57 -30
- package/fesm2022/neural-ui-core-tree-table.mjs.map +1 -1
- package/fesm2022/neural-ui-core-tree.mjs +31 -17
- package/fesm2022/neural-ui-core-tree.mjs.map +1 -1
- package/fesm2022/neural-ui-core-uploader.mjs +91 -47
- package/fesm2022/neural-ui-core-uploader.mjs.map +1 -1
- package/fesm2022/neural-ui-core-url-state.mjs +7 -5
- package/fesm2022/neural-ui-core-url-state.mjs.map +1 -1
- package/fesm2022/neural-ui-core-virtual-list.mjs +32 -19
- package/fesm2022/neural-ui-core-virtual-list.mjs.map +1 -1
- package/package.json +5 -1
- package/types/neural-ui-core-notification-center.d.ts +2 -0
- package/types/neural-ui-core-rich-text-editor.d.ts +97 -0
- package/types/neural-ui-core-toast.d.ts +2 -0
|
@@ -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,11 +2,14 @@ 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
|
-
|
|
5
|
+
direction = input('horizontal', /* @ts-ignore */
|
|
6
|
+
...(ngDevMode ? [{ debugName: "direction" }] : /* istanbul ignore next */ []));
|
|
7
|
+
panes = input([], /* @ts-ignore */
|
|
8
|
+
...(ngDevMode ? [{ debugName: "panes" }] : /* istanbul ignore next */ []));
|
|
7
9
|
sizeChange = output();
|
|
8
10
|
_el = inject((ElementRef));
|
|
9
|
-
_sizes = signal([],
|
|
11
|
+
_sizes = signal([], /* @ts-ignore */
|
|
12
|
+
...(ngDevMode ? [{ debugName: "_sizes" }] : /* istanbul ignore next */ []));
|
|
10
13
|
constructor() {
|
|
11
14
|
effect(() => {
|
|
12
15
|
const ps = this.panes();
|
|
@@ -100,8 +103,8 @@ class NeuSplitterComponent {
|
|
|
100
103
|
sizes[index + 1] = Math.max(0, newB);
|
|
101
104
|
this._sizes.set(sizes);
|
|
102
105
|
}
|
|
103
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
104
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
106
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NeuSplitterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
107
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", 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: `
|
|
105
108
|
@for (size of _sizes(); track $index) {
|
|
106
109
|
<div
|
|
107
110
|
class="neu-splitter__pane"
|
|
@@ -130,7 +133,7 @@ class NeuSplitterComponent {
|
|
|
130
133
|
}
|
|
131
134
|
`, 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 });
|
|
132
135
|
}
|
|
133
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
136
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NeuSplitterComponent, decorators: [{
|
|
134
137
|
type: Component,
|
|
135
138
|
args: [{ selector: 'neu-splitter', imports: [], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
136
139
|
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,19 +17,26 @@ 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('',
|
|
20
|
+
title = input('', /* @ts-ignore */
|
|
21
|
+
...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
|
|
21
22
|
/** Valor principal formateado (p.ej. "$12,450" o "98.2%"). / Main formatted value (e.g. "$12,450" or "98.2%"). */
|
|
22
|
-
value = input('',
|
|
23
|
+
value = input('', /* @ts-ignore */
|
|
24
|
+
...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
23
25
|
/** Cambio porcentual o absoluto (p.ej. "+12.5%" o "-3"). / Percentage or absolute change (e.g. "+12.5%" or "-3"). */
|
|
24
|
-
change = input('',
|
|
26
|
+
change = input('', /* @ts-ignore */
|
|
27
|
+
...(ngDevMode ? [{ debugName: "change" }] : /* istanbul ignore next */ []));
|
|
25
28
|
/** Dirección del cambio. Afecta el color del change. / Change direction. Affects the change color. */
|
|
26
|
-
trend = input('neutral',
|
|
29
|
+
trend = input('neutral', /* @ts-ignore */
|
|
30
|
+
...(ngDevMode ? [{ debugName: "trend" }] : /* istanbul ignore next */ []));
|
|
27
31
|
/** Texto auxiliar bajo el cambio (p.ej. "vs. mes anterior"). / Auxiliary text below the change (e.g. "vs. previous month"). */
|
|
28
|
-
label = input('',
|
|
32
|
+
label = input('', /* @ts-ignore */
|
|
33
|
+
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
29
34
|
/** Nombre del icono Lucide para el encabezado. / Lucide icon name for the header. */
|
|
30
|
-
icon = input('',
|
|
35
|
+
icon = input('', /* @ts-ignore */
|
|
36
|
+
...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
|
|
31
37
|
/** Array de valores numéricos para la sparkline. Mín. 2 puntos. / Array of numeric values for the sparkline. Min. 2 points. */
|
|
32
|
-
sparkData = input([],
|
|
38
|
+
sparkData = input([], /* @ts-ignore */
|
|
39
|
+
...(ngDevMode ? [{ debugName: "sparkData" }] : /* istanbul ignore next */ []));
|
|
33
40
|
/** @internal Genera los puntos SVG de la sparkline / Generates the SVG sparkline points */
|
|
34
41
|
sparkPoints = computed(() => {
|
|
35
42
|
const data = this.sparkData();
|
|
@@ -42,9 +49,10 @@ class NeuStatsCardComponent {
|
|
|
42
49
|
return data
|
|
43
50
|
.map((v, i) => `${(i * step).toFixed(1)},${(30 - ((v - min) / range) * 25 + 2.5).toFixed(1)}`)
|
|
44
51
|
.join(' ');
|
|
45
|
-
},
|
|
46
|
-
|
|
47
|
-
static
|
|
52
|
+
}, /* @ts-ignore */
|
|
53
|
+
...(ngDevMode ? [{ debugName: "sparkPoints" }] : /* istanbul ignore next */ []));
|
|
54
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NeuStatsCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
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: `
|
|
48
56
|
<div class="neu-stats-card__inner">
|
|
49
57
|
<!-- Header: icono + título -->
|
|
50
58
|
<div class="neu-stats-card__header">
|
|
@@ -98,7 +106,7 @@ class NeuStatsCardComponent {
|
|
|
98
106
|
</div>
|
|
99
107
|
`, 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 });
|
|
100
108
|
}
|
|
101
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
109
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NeuStatsCardComponent, decorators: [{
|
|
102
110
|
type: Component,
|
|
103
111
|
args: [{ selector: 'neu-stats-card', imports: [NeuIconComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'neu-stats-card' }, template: `
|
|
104
112
|
<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":";;;;AAWA;;;;;;;;;;;;AAYG;MA8DU,qBAAqB,CAAA;;IAEhC,KAAK,GAAG,KAAK,CAAS,EAAE;8EAAC;;IAEzB,KAAK,GAAG,KAAK,CAAS,EAAE;8EAAC;;IAEzB,MAAM,GAAG,KAAK,CAAS,EAAE;+EAAC;;IAE1B,KAAK,GAAG,KAAK,CAAgB,SAAS;8EAAC;;IAEvC,KAAK,GAAG,KAAK,CAAS,EAAE;8EAAC;;IAEzB,IAAI,GAAG,KAAK,CAAS,EAAE;6EAAC;;IAExB,SAAS,GAAG,KAAK,CAAW,EAAE;kFAAC;;AAGZ,IAAA,WAAW,GAAG,QAAQ,CAAC,MAAK;AAC7C,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,SAAS,EAAE;AAC7B,QAAA,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC;AAAE,YAAA,OAAO,EAAE;QAC9B,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC;QAC7B,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC;AAC7B,QAAA,MAAM,KAAK,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;QAC5B,MAAM,IAAI,GAAG,GAAG,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC;AACpC,QAAA,OAAO;AACJ,aAAA,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAA,EAAG,CAAC,CAAC,GAAG,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,CAAA,CAAA,EAAI,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,GAAG,GAAG,IAAI,KAAK,IAAI,EAAE,GAAG,GAAG,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE;aAC5F,IAAI,CAAC,GAAG,CAAC;IACd,CAAC;oFAAC;uGA3BS,qBAAqB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAArB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,qBAAqB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,cAAA,EAAA,gBAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAvDtB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoDT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,+qDAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAxDS,gBAAgB,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,aAAA,EAAA,MAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FA2Df,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBA7DjC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,gBAAgB,WACjB,CAAC,gBAAgB,CAAC,EAAA,aAAA,EACZ,iBAAiB,CAAC,IAAI,EAAA,eAAA,EACpB,uBAAuB,CAAC,MAAM,EAAA,IAAA,EACzC,EAAE,KAAK,EAAE,gBAAgB,EAAE,EAAA,QAAA,EACvB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoDT,EAAA,CAAA,EAAA,MAAA,EAAA,CAAA,+qDAAA,CAAA,EAAA;;;AClFH;;AAEG;;;;"}
|
|
@@ -17,16 +17,21 @@ 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([],
|
|
20
|
+
steps = input([], /* @ts-ignore */
|
|
21
|
+
...(ngDevMode ? [{ debugName: "steps" }] : /* istanbul ignore next */ []));
|
|
21
22
|
/** Índice del paso activo (0-based) / Active step index (0-based) */
|
|
22
|
-
activeStep = input(0,
|
|
23
|
+
activeStep = input(0, /* @ts-ignore */
|
|
24
|
+
...(ngDevMode ? [{ debugName: "activeStep" }] : /* istanbul ignore next */ []));
|
|
23
25
|
/** Si true, solo permite ir hacia adelante secuencialmente / If true, only allows moving forward sequentially */
|
|
24
|
-
linear = input(false,
|
|
26
|
+
linear = input(false, /* @ts-ignore */
|
|
27
|
+
...(ngDevMode ? [{ debugName: "linear" }] : /* istanbul ignore next */ []));
|
|
25
28
|
/** Emite el nuevo índice al cambiar / Emits the new index on change */
|
|
26
29
|
stepChange = output();
|
|
27
30
|
/** Set de pasos completados / Set of completed steps */
|
|
28
|
-
_completed = signal(new Set(),
|
|
29
|
-
|
|
31
|
+
_completed = signal(new Set(), /* @ts-ignore */
|
|
32
|
+
...(ngDevMode ? [{ debugName: "_completed" }] : /* istanbul ignore next */ []));
|
|
33
|
+
isCompact = signal(typeof window !== 'undefined' ? window.innerWidth <= 767 : false, /* @ts-ignore */
|
|
34
|
+
...(ngDevMode ? [{ debugName: "isCompact" }] : /* istanbul ignore next */ []));
|
|
30
35
|
isCompleted = (i) => this._completed().has(i) || (this.steps()[i]?.completed ?? false) || i < this.activeStep();
|
|
31
36
|
stepTooltip = (step) => step.description ? `${step.label} - ${step.description}` : step.label;
|
|
32
37
|
stepAriaLabel = (step) => this.stepTooltip(step);
|
|
@@ -66,8 +71,8 @@ class NeuStepperComponent {
|
|
|
66
71
|
this.stepChange.emit(current - 1);
|
|
67
72
|
}
|
|
68
73
|
}
|
|
69
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
70
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
74
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NeuStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
75
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", 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: `
|
|
71
76
|
<!-- Cabecera de pasos -->
|
|
72
77
|
<div class="neu-stepper">
|
|
73
78
|
<div class="neu-stepper__header">
|
|
@@ -130,7 +135,7 @@ class NeuStepperComponent {
|
|
|
130
135
|
</div>
|
|
131
136
|
`, 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 });
|
|
132
137
|
}
|
|
133
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
138
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NeuStepperComponent, decorators: [{
|
|
134
139
|
type: Component,
|
|
135
140
|
args: [{ selector: 'neu-stepper', imports: [NeuTooltipDirective], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: `
|
|
136
141
|
<!-- Cabecera de pasos -->
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"neural-ui-core-stepper.mjs","sources":["../../../../projects/ui-core/stepper/neu-stepper.component.ts","../../../../projects/ui-core/stepper/neural-ui-core-stepper.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n DestroyRef,\n ViewEncapsulation,\n inject,\n input,\n output,\n signal,\n} from '@angular/core';\nimport { NeuTooltipDirective } from '@neural-ui/core/tooltip';\n\nexport interface NeuStepperStep {\n /** Etiqueta del paso / Step label */\n label: string;\n /** Descripción corta opcional / Optional short description */\n description?: string;\n /** Marca el paso como completado externamente / Marks the step as completed externally */\n completed?: boolean;\n /** Desactiva el paso / Disables the step */\n disabled?: boolean;\n}\n\n/**\n * NeuralUI Stepper Component\n *\n * Wizard paso a paso con estado de completado, lineal u opcional.\n * Expone métodos next() / prev() y emite stepChange.\n *\n * Uso:\n * <neu-stepper [steps]=\"steps\" [activeStep]=\"step\" (stepChange)=\"step = $event\">\n * <ng-template neuStepContent>Contenido paso 1</ng-template>\n * <ng-template neuStepContent>Contenido paso 2</ng-template>\n * </neu-stepper>\n */\n@Component({\n selector: 'neu-stepper',\n imports: [NeuTooltipDirective],\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n template: `\n <!-- Cabecera de pasos -->\n <div class=\"neu-stepper\">\n <div class=\"neu-stepper__header\">\n @for (step of steps(); track step.label; let i = $index; let last = $last) {\n <div\n class=\"neu-stepper__step\"\n [class.neu-stepper__step--active]=\"i === activeStep()\"\n [class.neu-stepper__step--completed]=\"isCompleted(i)\"\n [class.neu-stepper__step--disabled]=\"step.disabled\"\n >\n @if (!last) {\n <div\n class=\"neu-stepper__connector\"\n [class.neu-stepper__connector--done]=\"isCompleted(i) || i < activeStep()\"\n ></div>\n }\n <button\n class=\"neu-stepper__step-btn\"\n type=\"button\"\n [disabled]=\"step.disabled\"\n [attr.aria-label]=\"stepAriaLabel(step)\"\n [neuTooltip]=\"stepTooltip(step)\"\n [neuTooltipDisabled]=\"!isCompact()\"\n neuTooltipPosition=\"bottom\"\n (click)=\"goTo(i)\"\n >\n <span class=\"neu-stepper__indicator\">\n @if (isCompleted(i)) {\n <svg\n width=\"14\"\n height=\"14\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"3\"\n stroke-linecap=\"round\"\n aria-hidden=\"true\"\n >\n <polyline points=\"20 6 9 17 4 12\" />\n </svg>\n } @else {\n {{ i + 1 }}\n }\n </span>\n <span class=\"neu-stepper__step-info\">\n <span class=\"neu-stepper__step-label\">{{ step.label }}</span>\n @if (step.description) {\n <span class=\"neu-stepper__step-desc\">{{ step.description }}</span>\n }\n </span>\n </button>\n </div>\n }\n </div>\n\n <!-- Panel de contenido -->\n <div class=\"neu-stepper__content\">\n <ng-content />\n </div>\n </div>\n `,\n styleUrl: './neu-stepper.component.scss',\n})\nexport class NeuStepperComponent {\n private readonly _destroyRef = inject(DestroyRef);\n\n /** Pasos del wizard / Wizard steps */\n steps = input<NeuStepperStep[]>([]);\n\n /** Índice del paso activo (0-based) / Active step index (0-based) */\n activeStep = input<number>(0);\n\n /** Si true, solo permite ir hacia adelante secuencialmente / If true, only allows moving forward sequentially */\n linear = input<boolean>(false);\n\n /** Emite el nuevo índice al cambiar / Emits the new index on change */\n stepChange = output<number>();\n\n /** Set de pasos completados / Set of completed steps */\n private readonly _completed = signal<Set<number>>(new Set());\n readonly isCompact = signal(typeof window !== 'undefined' ? window.innerWidth <= 767 : false);\n\n readonly isCompleted = (i: number) =>\n this._completed().has(i) || (this.steps()[i]?.completed ?? false) || i < this.activeStep();\n\n readonly stepTooltip = (step: NeuStepperStep) =>\n step.description ? `${step.label} - ${step.description}` : step.label;\n\n readonly stepAriaLabel = (step: NeuStepperStep) => this.stepTooltip(step);\n\n constructor() {\n if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {\n return;\n }\n\n const mediaQuery = window.matchMedia('(max-width: 767px)');\n const updateCompact = (event?: MediaQueryListEvent) => {\n this.isCompact.set(event?.matches ?? mediaQuery.matches);\n };\n\n updateCompact();\n mediaQuery.addEventListener('change', updateCompact);\n this._destroyRef.onDestroy(() => mediaQuery.removeEventListener('change', updateCompact));\n }\n\n goTo(i: number): void {\n const step = this.steps()[i];\n if (step?.disabled) return;\n if (this.linear() && i > this.activeStep() + 1 && !this.isCompleted(this.activeStep())) return;\n this.stepChange.emit(i);\n }\n\n /** Marca el paso actual como completado y avanza al siguiente / Marks the current step as completed and advances to the next */\n next(): void {\n const current = this.activeStep();\n const updated = new Set(this._completed());\n updated.add(current);\n this._completed.set(updated);\n if (current < this.steps().length - 1) {\n this.stepChange.emit(current + 1);\n }\n }\n\n prev(): void {\n const current = this.activeStep();\n if (current > 0) {\n this.stepChange.emit(current - 1);\n }\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;;AAuBA;;;;;;;;;;;AAWG;MAsEU,mBAAmB,CAAA;AACb,IAAA,WAAW,GAAG,MAAM,CAAC,UAAU,CAAC;;
|
|
1
|
+
{"version":3,"file":"neural-ui-core-stepper.mjs","sources":["../../../../projects/ui-core/stepper/neu-stepper.component.ts","../../../../projects/ui-core/stepper/neural-ui-core-stepper.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n DestroyRef,\n ViewEncapsulation,\n inject,\n input,\n output,\n signal,\n} from '@angular/core';\nimport { NeuTooltipDirective } from '@neural-ui/core/tooltip';\n\nexport interface NeuStepperStep {\n /** Etiqueta del paso / Step label */\n label: string;\n /** Descripción corta opcional / Optional short description */\n description?: string;\n /** Marca el paso como completado externamente / Marks the step as completed externally */\n completed?: boolean;\n /** Desactiva el paso / Disables the step */\n disabled?: boolean;\n}\n\n/**\n * NeuralUI Stepper Component\n *\n * Wizard paso a paso con estado de completado, lineal u opcional.\n * Expone métodos next() / prev() y emite stepChange.\n *\n * Uso:\n * <neu-stepper [steps]=\"steps\" [activeStep]=\"step\" (stepChange)=\"step = $event\">\n * <ng-template neuStepContent>Contenido paso 1</ng-template>\n * <ng-template neuStepContent>Contenido paso 2</ng-template>\n * </neu-stepper>\n */\n@Component({\n selector: 'neu-stepper',\n imports: [NeuTooltipDirective],\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n template: `\n <!-- Cabecera de pasos -->\n <div class=\"neu-stepper\">\n <div class=\"neu-stepper__header\">\n @for (step of steps(); track step.label; let i = $index; let last = $last) {\n <div\n class=\"neu-stepper__step\"\n [class.neu-stepper__step--active]=\"i === activeStep()\"\n [class.neu-stepper__step--completed]=\"isCompleted(i)\"\n [class.neu-stepper__step--disabled]=\"step.disabled\"\n >\n @if (!last) {\n <div\n class=\"neu-stepper__connector\"\n [class.neu-stepper__connector--done]=\"isCompleted(i) || i < activeStep()\"\n ></div>\n }\n <button\n class=\"neu-stepper__step-btn\"\n type=\"button\"\n [disabled]=\"step.disabled\"\n [attr.aria-label]=\"stepAriaLabel(step)\"\n [neuTooltip]=\"stepTooltip(step)\"\n [neuTooltipDisabled]=\"!isCompact()\"\n neuTooltipPosition=\"bottom\"\n (click)=\"goTo(i)\"\n >\n <span class=\"neu-stepper__indicator\">\n @if (isCompleted(i)) {\n <svg\n width=\"14\"\n height=\"14\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"3\"\n stroke-linecap=\"round\"\n aria-hidden=\"true\"\n >\n <polyline points=\"20 6 9 17 4 12\" />\n </svg>\n } @else {\n {{ i + 1 }}\n }\n </span>\n <span class=\"neu-stepper__step-info\">\n <span class=\"neu-stepper__step-label\">{{ step.label }}</span>\n @if (step.description) {\n <span class=\"neu-stepper__step-desc\">{{ step.description }}</span>\n }\n </span>\n </button>\n </div>\n }\n </div>\n\n <!-- Panel de contenido -->\n <div class=\"neu-stepper__content\">\n <ng-content />\n </div>\n </div>\n `,\n styleUrl: './neu-stepper.component.scss',\n})\nexport class NeuStepperComponent {\n private readonly _destroyRef = inject(DestroyRef);\n\n /** Pasos del wizard / Wizard steps */\n steps = input<NeuStepperStep[]>([]);\n\n /** Índice del paso activo (0-based) / Active step index (0-based) */\n activeStep = input<number>(0);\n\n /** Si true, solo permite ir hacia adelante secuencialmente / If true, only allows moving forward sequentially */\n linear = input<boolean>(false);\n\n /** Emite el nuevo índice al cambiar / Emits the new index on change */\n stepChange = output<number>();\n\n /** Set de pasos completados / Set of completed steps */\n private readonly _completed = signal<Set<number>>(new Set());\n readonly isCompact = signal(typeof window !== 'undefined' ? window.innerWidth <= 767 : false);\n\n readonly isCompleted = (i: number) =>\n this._completed().has(i) || (this.steps()[i]?.completed ?? false) || i < this.activeStep();\n\n readonly stepTooltip = (step: NeuStepperStep) =>\n step.description ? `${step.label} - ${step.description}` : step.label;\n\n readonly stepAriaLabel = (step: NeuStepperStep) => this.stepTooltip(step);\n\n constructor() {\n if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {\n return;\n }\n\n const mediaQuery = window.matchMedia('(max-width: 767px)');\n const updateCompact = (event?: MediaQueryListEvent) => {\n this.isCompact.set(event?.matches ?? mediaQuery.matches);\n };\n\n updateCompact();\n mediaQuery.addEventListener('change', updateCompact);\n this._destroyRef.onDestroy(() => mediaQuery.removeEventListener('change', updateCompact));\n }\n\n goTo(i: number): void {\n const step = this.steps()[i];\n if (step?.disabled) return;\n if (this.linear() && i > this.activeStep() + 1 && !this.isCompleted(this.activeStep())) return;\n this.stepChange.emit(i);\n }\n\n /** Marca el paso actual como completado y avanza al siguiente / Marks the current step as completed and advances to the next */\n next(): void {\n const current = this.activeStep();\n const updated = new Set(this._completed());\n updated.add(current);\n this._completed.set(updated);\n if (current < this.steps().length - 1) {\n this.stepChange.emit(current + 1);\n }\n }\n\n prev(): void {\n const current = this.activeStep();\n if (current > 0) {\n this.stepChange.emit(current - 1);\n }\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;;AAuBA;;;;;;;;;;;AAWG;MAsEU,mBAAmB,CAAA;AACb,IAAA,WAAW,GAAG,MAAM,CAAC,UAAU,CAAC;;IAGjD,KAAK,GAAG,KAAK,CAAmB,EAAE;8EAAC;;IAGnC,UAAU,GAAG,KAAK,CAAS,CAAC;mFAAC;;IAG7B,MAAM,GAAG,KAAK,CAAU,KAAK;+EAAC;;IAG9B,UAAU,GAAG,MAAM,EAAU;;AAGZ,IAAA,UAAU,GAAG,MAAM,CAAc,IAAI,GAAG,EAAE;mFAAC;AACnD,IAAA,SAAS,GAAG,MAAM,CAAC,OAAO,MAAM,KAAK,WAAW,GAAG,MAAM,CAAC,UAAU,IAAI,GAAG,GAAG,KAAK;kFAAC;AAEpF,IAAA,WAAW,GAAG,CAAC,CAAS,KAC/B,IAAI,CAAC,UAAU,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,SAAS,IAAI,KAAK,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,UAAU,EAAE;IAEnF,WAAW,GAAG,CAAC,IAAoB,KAC1C,IAAI,CAAC,WAAW,GAAG,CAAA,EAAG,IAAI,CAAC,KAAK,CAAA,GAAA,EAAM,IAAI,CAAC,WAAW,CAAA,CAAE,GAAG,IAAI,CAAC,KAAK;AAE9D,IAAA,aAAa,GAAG,CAAC,IAAoB,KAAK,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;AAEzE,IAAA,WAAA,GAAA;AACE,QAAA,IAAI,OAAO,MAAM,KAAK,WAAW,IAAI,OAAO,MAAM,CAAC,UAAU,KAAK,UAAU,EAAE;YAC5E;QACF;QAEA,MAAM,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC,oBAAoB,CAAC;AAC1D,QAAA,MAAM,aAAa,GAAG,CAAC,KAA2B,KAAI;AACpD,YAAA,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,EAAE,OAAO,IAAI,UAAU,CAAC,OAAO,CAAC;AAC1D,QAAA,CAAC;AAED,QAAA,aAAa,EAAE;AACf,QAAA,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,aAAa,CAAC;AACpD,QAAA,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,MAAM,UAAU,CAAC,mBAAmB,CAAC,QAAQ,EAAE,aAAa,CAAC,CAAC;IAC3F;AAEA,IAAA,IAAI,CAAC,CAAS,EAAA;QACZ,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;QAC5B,IAAI,IAAI,EAAE,QAAQ;YAAE;QACpB,IAAI,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,GAAG,IAAI,CAAC,UAAU,EAAE,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC;YAAE;AACxF,QAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC;IACzB;;IAGA,IAAI,GAAA;AACF,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,UAAU,EAAE;QACjC,MAAM,OAAO,GAAG,IAAI,GAAG,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC;AAC1C,QAAA,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC;AACpB,QAAA,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,OAAO,CAAC;QAC5B,IAAI,OAAO,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC,MAAM,GAAG,CAAC,EAAE;YACrC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC;QACnC;IACF;IAEA,IAAI,GAAA;AACF,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,UAAU,EAAE;AACjC,QAAA,IAAI,OAAO,GAAG,CAAC,EAAE;YACf,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC;QACnC;IACF;uGAjEW,mBAAmB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAnB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,mBAAmB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,UAAA,EAAA,YAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAhEpB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6DT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,+uGAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAhES,mBAAmB,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,CAAA,YAAA,EAAA,oBAAA,EAAA,oBAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FAmElB,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBArE/B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,aAAa,EAAA,OAAA,EACd,CAAC,mBAAmB,CAAC,EAAA,aAAA,EACf,iBAAiB,CAAC,IAAI,EAAA,eAAA,EACpB,uBAAuB,CAAC,MAAM,EAAA,QAAA,EACrC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6DT,EAAA,CAAA,EAAA,MAAA,EAAA,CAAA,+uGAAA,CAAA,EAAA;;;ACrGH;;AAEG;;;;"}
|
|
@@ -13,14 +13,20 @@ let _neuSwitchIdSeq = 0;
|
|
|
13
13
|
* <neu-switch label="Notificaciones" [formControl]="notifsCtrl" />
|
|
14
14
|
*/
|
|
15
15
|
class NeuSwitchComponent {
|
|
16
|
-
label = input('',
|
|
17
|
-
|
|
18
|
-
|
|
16
|
+
label = input('', /* @ts-ignore */
|
|
17
|
+
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
18
|
+
name = input('', /* @ts-ignore */
|
|
19
|
+
...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
|
|
20
|
+
disabled = input(false, /* @ts-ignore */
|
|
21
|
+
...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
19
22
|
_id = `neu-switch-${_neuSwitchIdSeq++}`;
|
|
20
|
-
_checked = signal(false,
|
|
23
|
+
_checked = signal(false, /* @ts-ignore */
|
|
24
|
+
...(ngDevMode ? [{ debugName: "_checked" }] : /* istanbul ignore next */ []));
|
|
21
25
|
/** Estado disabled interno — combina el input `disabled` con el CVA setDisabledState / Internal disabled state — combines the `disabled` input with CVA setDisabledState */
|
|
22
|
-
_cvaDisabled = signal(false,
|
|
23
|
-
|
|
26
|
+
_cvaDisabled = signal(false, /* @ts-ignore */
|
|
27
|
+
...(ngDevMode ? [{ debugName: "_cvaDisabled" }] : /* istanbul ignore next */ []));
|
|
28
|
+
_isDisabled = computed(() => this.disabled() || this._cvaDisabled(), /* @ts-ignore */
|
|
29
|
+
...(ngDevMode ? [{ debugName: "_isDisabled" }] : /* istanbul ignore next */ []));
|
|
24
30
|
_onChange = () => { };
|
|
25
31
|
_onTouched = () => { };
|
|
26
32
|
onChange(event) {
|
|
@@ -43,8 +49,8 @@ class NeuSwitchComponent {
|
|
|
43
49
|
setDisabledState(isDisabled) {
|
|
44
50
|
this._cvaDisabled.set(isDisabled);
|
|
45
51
|
}
|
|
46
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
47
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
52
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NeuSwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
53
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: NeuSwitchComponent, isStandalone: true, selector: "neu-switch", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "neu-switch-host" }, providers: [
|
|
48
54
|
{
|
|
49
55
|
provide: NG_VALUE_ACCESSOR,
|
|
50
56
|
useExisting: forwardRef(() => NeuSwitchComponent),
|
|
@@ -72,7 +78,7 @@ class NeuSwitchComponent {
|
|
|
72
78
|
</label>
|
|
73
79
|
`, isInline: true, styles: [".neu-switch-host{display:inline-block}.neu-switch{display:inline-flex;align-items:center;gap:var(--neu-space-3);cursor:pointer;-webkit-user-select:none;user-select:none}.neu-switch--disabled{opacity:.5;pointer-events:none}.neu-switch__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.neu-switch__input:focus-visible+.neu-switch__track{outline:2px solid var(--neu-primary);outline-offset:2px}.neu-switch__track{position:relative;display:inline-block;width:44px;height:24px;background:var(--neu-surface-3);border-radius:var(--neu-radius-full);transition:background-color var(--neu-transition),box-shadow var(--neu-transition);flex-shrink:0}.neu-switch__track--on{background:var(--neu-primary);box-shadow:0 0 12px #007aff59}.neu-switch__thumb{position:absolute;top:3px;left:3px;width:18px;height:18px;background:#fff;border-radius:var(--neu-radius-full);box-shadow:var(--neu-shadow-xs);transition:transform var(--neu-transition-bounce)}.neu-switch__thumb--on{transform:translate(20px)}.neu-switch__label{font-family:var(--neu-font-sans);font-size:var(--neu-text-sm);color:var(--neu-text);font-weight:500;line-height:1}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
74
80
|
}
|
|
75
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
81
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NeuSwitchComponent, decorators: [{
|
|
76
82
|
type: Component,
|
|
77
83
|
args: [{ selector: 'neu-switch', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'neu-switch-host' }, providers: [
|
|
78
84
|
{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"neural-ui-core-switch.mjs","sources":["../../../../projects/ui-core/switch/neu-switch.component.ts","../../../../projects/ui-core/switch/neural-ui-core-switch.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n ViewEncapsulation,\n computed,\n forwardRef,\n input,\n signal,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n\nlet _neuSwitchIdSeq = 0;\n\n/**\n * NeuralUI Switch Component\n *\n * Toggle animado para formularios de configuración en dashboards.\n * Usa el Electric-Blue (--neu-primary) cuando está activo.\n *\n * Uso:\n * <neu-switch label=\"Notificaciones\" [formControl]=\"notifsCtrl\" />\n */\n@Component({\n selector: 'neu-switch',\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: { class: 'neu-switch-host' },\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => NeuSwitchComponent),\n multi: true,\n },\n ],\n template: `\n <label class=\"neu-switch\" [class.neu-switch--disabled]=\"_isDisabled()\" [for]=\"_id\">\n <input\n type=\"checkbox\"\n role=\"switch\"\n class=\"neu-switch__input\"\n [id]=\"_id\"\n [attr.name]=\"name() || null\"\n [checked]=\"_checked()\"\n [disabled]=\"_isDisabled()\"\n (change)=\"onChange($event)\"\n (blur)=\"onBlur()\"\n />\n <span class=\"neu-switch__track\" [class.neu-switch__track--on]=\"_checked()\">\n <span class=\"neu-switch__thumb\" [class.neu-switch__thumb--on]=\"_checked()\"></span>\n </span>\n @if (label()) {\n <span class=\"neu-switch__label\">{{ label() }}</span>\n }\n </label>\n `,\n styleUrl: './neu-switch.component.scss',\n})\nexport class NeuSwitchComponent implements ControlValueAccessor {\n readonly label = input<string>('');\n readonly name = input<string>('');\n readonly disabled = input<boolean>(false);\n\n readonly _id = `neu-switch-${_neuSwitchIdSeq++}`;\n\n protected readonly _checked = signal(false);\n /** Estado disabled interno — combina el input `disabled` con el CVA setDisabledState / Internal disabled state — combines the `disabled` input with CVA setDisabledState */\n private readonly _cvaDisabled = signal(false);\n protected readonly _isDisabled = computed(() => this.disabled() || this._cvaDisabled());\n\n private _onChange: (v: boolean) => void = () => {};\n private _onTouched: () => void = () => {};\n\n onChange(event: Event): void {\n const checked = (event.target as HTMLInputElement).checked;\n this._checked.set(checked);\n this._onChange(checked);\n }\n\n onBlur(): void {\n this._onTouched();\n }\n\n writeValue(val: unknown): void {\n this._checked.set(!!val);\n }\n\n registerOnChange(fn: (v: boolean) => void): void {\n this._onChange = fn;\n }\n\n registerOnTouched(fn: () => void): void {\n this._onTouched = fn;\n }\n\n setDisabledState(isDisabled: boolean): void {\n this._cvaDisabled.set(isDisabled);\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;;AAWA,IAAI,eAAe,GAAG,CAAC;AAEvB;;;;;;;;AAQG;MAoCU,kBAAkB,CAAA;
|
|
1
|
+
{"version":3,"file":"neural-ui-core-switch.mjs","sources":["../../../../projects/ui-core/switch/neu-switch.component.ts","../../../../projects/ui-core/switch/neural-ui-core-switch.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n ViewEncapsulation,\n computed,\n forwardRef,\n input,\n signal,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n\nlet _neuSwitchIdSeq = 0;\n\n/**\n * NeuralUI Switch Component\n *\n * Toggle animado para formularios de configuración en dashboards.\n * Usa el Electric-Blue (--neu-primary) cuando está activo.\n *\n * Uso:\n * <neu-switch label=\"Notificaciones\" [formControl]=\"notifsCtrl\" />\n */\n@Component({\n selector: 'neu-switch',\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: { class: 'neu-switch-host' },\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => NeuSwitchComponent),\n multi: true,\n },\n ],\n template: `\n <label class=\"neu-switch\" [class.neu-switch--disabled]=\"_isDisabled()\" [for]=\"_id\">\n <input\n type=\"checkbox\"\n role=\"switch\"\n class=\"neu-switch__input\"\n [id]=\"_id\"\n [attr.name]=\"name() || null\"\n [checked]=\"_checked()\"\n [disabled]=\"_isDisabled()\"\n (change)=\"onChange($event)\"\n (blur)=\"onBlur()\"\n />\n <span class=\"neu-switch__track\" [class.neu-switch__track--on]=\"_checked()\">\n <span class=\"neu-switch__thumb\" [class.neu-switch__thumb--on]=\"_checked()\"></span>\n </span>\n @if (label()) {\n <span class=\"neu-switch__label\">{{ label() }}</span>\n }\n </label>\n `,\n styleUrl: './neu-switch.component.scss',\n})\nexport class NeuSwitchComponent implements ControlValueAccessor {\n readonly label = input<string>('');\n readonly name = input<string>('');\n readonly disabled = input<boolean>(false);\n\n readonly _id = `neu-switch-${_neuSwitchIdSeq++}`;\n\n protected readonly _checked = signal(false);\n /** Estado disabled interno — combina el input `disabled` con el CVA setDisabledState / Internal disabled state — combines the `disabled` input with CVA setDisabledState */\n private readonly _cvaDisabled = signal(false);\n protected readonly _isDisabled = computed(() => this.disabled() || this._cvaDisabled());\n\n private _onChange: (v: boolean) => void = () => {};\n private _onTouched: () => void = () => {};\n\n onChange(event: Event): void {\n const checked = (event.target as HTMLInputElement).checked;\n this._checked.set(checked);\n this._onChange(checked);\n }\n\n onBlur(): void {\n this._onTouched();\n }\n\n writeValue(val: unknown): void {\n this._checked.set(!!val);\n }\n\n registerOnChange(fn: (v: boolean) => void): void {\n this._onChange = fn;\n }\n\n registerOnTouched(fn: () => void): void {\n this._onTouched = fn;\n }\n\n setDisabledState(isDisabled: boolean): void {\n this._cvaDisabled.set(isDisabled);\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
|