@neural-ui/core 1.6.0 → 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 +63 -30
- package/fesm2022/neural-ui-core-rich-text-editor.mjs.map +1 -1
- 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 +1 -1
- package/types/neural-ui-core-notification-center.d.ts +2 -0
- package/types/neural-ui-core-toast.d.ts +2 -0
|
@@ -19,58 +19,88 @@ let _neuInputIdSeq = 0;
|
|
|
19
19
|
*/
|
|
20
20
|
class NeuInputComponent {
|
|
21
21
|
/** Tipo de input HTML / HTML input type */
|
|
22
|
-
type = input('text',
|
|
22
|
+
type = input('text', /* @ts-ignore */
|
|
23
|
+
...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
|
|
23
24
|
/** Texto del floating label / Floating label text */
|
|
24
|
-
label = input('',
|
|
25
|
+
label = input('', /* @ts-ignore */
|
|
26
|
+
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
25
27
|
/** Placeholder visible cuando floatingLabel=false / Visible placeholder when floatingLabel=false */
|
|
26
|
-
placeholder = input('',
|
|
28
|
+
placeholder = input('', /* @ts-ignore */
|
|
29
|
+
...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
27
30
|
/** Muestra el label como flotante (true) o estático encima del campo (false) / Shows the label as floating (true) or static above the field (false) */
|
|
28
|
-
floatingLabel = input(true,
|
|
31
|
+
floatingLabel = input(true, /* @ts-ignore */
|
|
32
|
+
...(ngDevMode ? [{ debugName: "floatingLabel" }] : /* istanbul ignore next */ []));
|
|
29
33
|
/** Tamaño del campo: 'sm' = 36px | 'md' = 48px | 'lg' = 56px / Field size */
|
|
30
|
-
size = input('md',
|
|
34
|
+
size = input('md', /* @ts-ignore */
|
|
35
|
+
...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
31
36
|
/** Hint de ayuda (visible cuando no hay error) / Help hint (visible when there is no error) */
|
|
32
|
-
hint = input('',
|
|
37
|
+
hint = input('', /* @ts-ignore */
|
|
38
|
+
...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
|
|
33
39
|
/** Mensaje de error (activa el estado de error) / Error message (activates the error state) */
|
|
34
|
-
errorMessage = input('',
|
|
40
|
+
errorMessage = input('', /* @ts-ignore */
|
|
41
|
+
...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
|
|
35
42
|
/** Deshabilita el campo / Disables the field */
|
|
36
|
-
disabled = input(false,
|
|
43
|
+
disabled = input(false, /* @ts-ignore */
|
|
44
|
+
...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
37
45
|
/** Atributo autocomplete HTML / HTML autocomplete attribute */
|
|
38
|
-
autocomplete = input('off',
|
|
46
|
+
autocomplete = input('off', /* @ts-ignore */
|
|
47
|
+
...(ngDevMode ? [{ debugName: "autocomplete" }] : /* istanbul ignore next */ []));
|
|
39
48
|
/** Muestra zona para icono al inicio / Shows icon slot at the start */
|
|
40
|
-
startIcon = input(false,
|
|
49
|
+
startIcon = input(false, /* @ts-ignore */
|
|
50
|
+
...(ngDevMode ? [{ debugName: "startIcon" }] : /* istanbul ignore next */ []));
|
|
41
51
|
/** Muestra zona para icono al final / Shows icon slot at the end */
|
|
42
|
-
endIcon = input(false,
|
|
52
|
+
endIcon = input(false, /* @ts-ignore */
|
|
53
|
+
...(ngDevMode ? [{ debugName: "endIcon" }] : /* istanbul ignore next */ []));
|
|
43
54
|
/** Nombre del icono lucide a renderizar dentro del campo / Lucide icon name to render inside the field */
|
|
44
|
-
icon = input('',
|
|
55
|
+
icon = input('', /* @ts-ignore */
|
|
56
|
+
...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
|
|
45
57
|
/** Posición del icono cuando se usa `icon` / Icon position when using `icon` */
|
|
46
|
-
iconPosition = input('left',
|
|
58
|
+
iconPosition = input('left', /* @ts-ignore */
|
|
59
|
+
...(ngDevMode ? [{ debugName: "iconPosition" }] : /* istanbul ignore next */ []));
|
|
47
60
|
/** ID accesible para el input — generado con contador estable (seguro en SSR) / Accessible ID for the input — generated with stable counter (SSR-safe) */
|
|
48
|
-
inputId = input(`neu-input-${++_neuInputIdSeq}`,
|
|
61
|
+
inputId = input(`neu-input-${++_neuInputIdSeq}`, /* @ts-ignore */
|
|
62
|
+
...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
|
|
49
63
|
/** Nombre del campo para formularios nativos / Field name for native forms */
|
|
50
|
-
name = input('',
|
|
64
|
+
name = input('', /* @ts-ignore */
|
|
65
|
+
...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
|
|
51
66
|
/** Marca el campo como requerido / Marks the field as required */
|
|
52
|
-
required = input(false,
|
|
67
|
+
required = input(false, /* @ts-ignore */
|
|
68
|
+
...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
|
|
53
69
|
/** Hace el campo de solo lectura / Makes the field read-only */
|
|
54
|
-
readonly = input(false,
|
|
70
|
+
readonly = input(false, /* @ts-ignore */
|
|
71
|
+
...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
|
|
55
72
|
/** Longitud máxima de caracteres / Maximum character length */
|
|
56
|
-
maxlength = input(null,
|
|
73
|
+
maxlength = input(null, /* @ts-ignore */
|
|
74
|
+
...(ngDevMode ? [{ debugName: "maxlength" }] : /* istanbul ignore next */ []));
|
|
57
75
|
/** Longitud mínima de caracteres / Minimum character length */
|
|
58
|
-
minlength = input(null,
|
|
76
|
+
minlength = input(null, /* @ts-ignore */
|
|
77
|
+
...(ngDevMode ? [{ debugName: "minlength" }] : /* istanbul ignore next */ []));
|
|
59
78
|
/** Valor mínimo (para type=number/date) / Minimum value (for type=number/date) */
|
|
60
|
-
min = input(null,
|
|
79
|
+
min = input(null, /* @ts-ignore */
|
|
80
|
+
...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
|
|
61
81
|
/** Valor máximo (para type=number/date) / Maximum value (for type=number/date) */
|
|
62
|
-
max = input(null,
|
|
82
|
+
max = input(null, /* @ts-ignore */
|
|
83
|
+
...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
|
|
63
84
|
/** Patrón de validación HTML5 / HTML5 validation pattern */
|
|
64
|
-
pattern = input(null,
|
|
85
|
+
pattern = input(null, /* @ts-ignore */
|
|
86
|
+
...(ngDevMode ? [{ debugName: "pattern" }] : /* istanbul ignore next */ []));
|
|
65
87
|
// --- Estado interno reactivo ---
|
|
66
|
-
_value = signal('',
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
88
|
+
_value = signal('', /* @ts-ignore */
|
|
89
|
+
...(ngDevMode ? [{ debugName: "_value" }] : /* istanbul ignore next */ []));
|
|
90
|
+
_focused = signal(false, /* @ts-ignore */
|
|
91
|
+
...(ngDevMode ? [{ debugName: "_focused" }] : /* istanbul ignore next */ []));
|
|
92
|
+
hasValue = computed(() => this._value().length > 0, /* @ts-ignore */
|
|
93
|
+
...(ngDevMode ? [{ debugName: "hasValue" }] : /* istanbul ignore next */ []));
|
|
94
|
+
hasError = computed(() => !!this.errorMessage(), /* @ts-ignore */
|
|
95
|
+
...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
|
|
96
|
+
startIconPath = computed(() => '', /* @ts-ignore */
|
|
97
|
+
...(ngDevMode ? [{ debugName: "startIconPath" }] : /* istanbul ignore next */ []));
|
|
98
|
+
hasStartContent = computed(() => false, /* @ts-ignore */
|
|
99
|
+
...(ngDevMode ? [{ debugName: "hasStartContent" }] : /* istanbul ignore next */ []));
|
|
100
|
+
_hasIconLeft = computed(() => !!this.icon() && this.iconPosition() === 'left', /* @ts-ignore */
|
|
101
|
+
...(ngDevMode ? [{ debugName: "_hasIconLeft" }] : /* istanbul ignore next */ []));
|
|
102
|
+
_hasIconRight = computed(() => !!this.icon() && this.iconPosition() === 'right', /* @ts-ignore */
|
|
103
|
+
...(ngDevMode ? [{ debugName: "_hasIconRight" }] : /* istanbul ignore next */ []));
|
|
74
104
|
// --- ControlValueAccessor ---
|
|
75
105
|
_onChange = () => { };
|
|
76
106
|
_onTouched = () => { };
|
|
@@ -83,11 +113,13 @@ class NeuInputComponent {
|
|
|
83
113
|
registerOnTouched(fn) {
|
|
84
114
|
this._onTouched = fn;
|
|
85
115
|
}
|
|
86
|
-
_cvaDisabled = signal(false,
|
|
116
|
+
_cvaDisabled = signal(false, /* @ts-ignore */
|
|
117
|
+
...(ngDevMode ? [{ debugName: "_cvaDisabled" }] : /* istanbul ignore next */ []));
|
|
87
118
|
setDisabledState(isDisabled) {
|
|
88
119
|
this._cvaDisabled.set(isDisabled);
|
|
89
120
|
}
|
|
90
|
-
isDisabledFinal = computed(() => this.disabled() || this._cvaDisabled(),
|
|
121
|
+
isDisabledFinal = computed(() => this.disabled() || this._cvaDisabled(), /* @ts-ignore */
|
|
122
|
+
...(ngDevMode ? [{ debugName: "isDisabledFinal" }] : /* istanbul ignore next */ []));
|
|
91
123
|
onInput(event) {
|
|
92
124
|
const value = event.target.value;
|
|
93
125
|
this._value.set(value);
|
|
@@ -100,8 +132,8 @@ class NeuInputComponent {
|
|
|
100
132
|
this._focused.set(false);
|
|
101
133
|
this._onTouched();
|
|
102
134
|
}
|
|
103
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
104
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
135
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NeuInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
136
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: NeuInputComponent, isStandalone: true, selector: "neu-input", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, floatingLabel: { classPropertyName: "floatingLabel", publicName: "floatingLabel", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, startIcon: { classPropertyName: "startIcon", publicName: "startIcon", isSignal: true, isRequired: false, transformFunction: null }, endIcon: { classPropertyName: "endIcon", publicName: "endIcon", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, minlength: { classPropertyName: "minlength", publicName: "minlength", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, pattern: { classPropertyName: "pattern", publicName: "pattern", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.neu-input-host--sm": "size() === \"sm\"", "class.neu-input-host--lg": "size() === \"lg\"" }, classAttribute: "neu-input-host" }, providers: [
|
|
105
137
|
{
|
|
106
138
|
provide: NG_VALUE_ACCESSOR,
|
|
107
139
|
useExisting: forwardRef(() => NeuInputComponent),
|
|
@@ -203,7 +235,7 @@ class NeuInputComponent {
|
|
|
203
235
|
}
|
|
204
236
|
`, isInline: true, styles: [".neu-input-host{display:block}.neu-input-host--sm .neu-input__wrapper{height:36px}.neu-input-host--sm .neu-input__field{font-size:var(--neu-text-sm)}.neu-input-host--lg .neu-input__wrapper{height:56px}.neu-input__wrapper{position:relative;display:flex;align-items:center;background:var(--neu-surface);border:1.5px solid var(--neu-border);border-radius:var(--neu-radius);height:48px;transition:border-color var(--neu-transition),box-shadow var(--neu-transition),background-color var(--neu-transition)}.neu-input__wrapper:hover:not(.neu-input__wrapper--disabled){border-color:var(--neu-border-hover)}.neu-input__wrapper--focused{border-color:var(--neu-primary);box-shadow:var(--neu-focus-ring)}.neu-input__wrapper--error{border-color:var(--neu-error)}.neu-input__wrapper--error.neu-input__wrapper--focused{box-shadow:0 0 0 3px #ef44441f}.neu-input__wrapper--disabled{background:var(--neu-surface-2);opacity:.6;cursor:not-allowed}.neu-input__wrapper--has-start-icon .neu-input__field{padding-left:40px}.neu-input__wrapper--has-end-icon .neu-input__field{padding-right:40px}.neu-input__field{width:100%;height:100%;padding:0 var(--neu-space-3);border:none;background:transparent;outline:none;font-family:var(--neu-font-sans);font-size:var(--neu-text-base);color:var(--neu-text);caret-color:var(--neu-primary)}.neu-input__field:disabled{cursor:not-allowed;color:var(--neu-text-disabled)}.neu-input__field::placeholder{color:transparent;transition:color var(--neu-transition)}.neu-input__wrapper--focused .neu-input__field::placeholder{color:var(--neu-text-disabled)}.neu-input__label{position:absolute;left:var(--neu-space-3);top:50%;transform:translateY(-50%);font-size:var(--neu-text-base);color:var(--neu-text-muted);pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - var(--neu-space-6));transition:top var(--neu-transition),font-size var(--neu-transition),color var(--neu-transition),transform var(--neu-transition),padding var(--neu-transition),background var(--neu-transition)}.neu-input__wrapper--focused .neu-input__label,.neu-input__wrapper--has-value .neu-input__label{top:0;transform:translateY(-50%);font-size:12px;font-weight:600;letter-spacing:.01em;background:var(--neu-surface);padding:0 4px;left:calc(var(--neu-space-3) - 4px)}.neu-input__wrapper--focused .neu-input__label{color:var(--neu-primary)}.neu-input__wrapper--error .neu-input__label{color:var(--neu-error)}.neu-input__wrapper--disabled .neu-input__label{background:var(--neu-surface-2)}.neu-input__wrapper--has-start-icon .neu-input__label{left:40px}.neu-input__wrapper--has-start-icon .neu-input__label.neu-input__wrapper--focused,.neu-input__wrapper--focused .neu-input__wrapper--has-start-icon .neu-input__label,.neu-input__wrapper--has-value .neu-input__wrapper--has-start-icon .neu-input__label{left:calc(var(--neu-space-3) - 4px)}.neu-input__icon{position:absolute;display:flex;align-items:center;justify-content:center;width:36px;height:36px;color:var(--neu-text-muted);pointer-events:none;flex-shrink:0}.neu-input__icon svg{width:18px;height:18px}.neu-input__icon--start{left:0}.neu-input__icon--end{right:0}.neu-input__error{display:flex;align-items:center;gap:4px;margin-top:var(--neu-space-1);font-size:var(--neu-text-xs);color:var(--neu-error-text);font-family:var(--neu-font-sans);line-height:1.4}.neu-input__hint{margin-top:var(--neu-space-1);font-size:var(--neu-text-xs);color:var(--neu-text-muted);font-family:var(--neu-font-sans)}.neu-input__static-label{display:block;font-size:var(--neu-text-sm);font-weight:500;color:var(--neu-text-muted);margin-bottom:var(--neu-space-2)}.neu-input__wrapper--no-float .neu-input__field{padding:0 var(--neu-space-3)}.neu-input__wrapper--no-float .neu-input__field::placeholder{color:var(--neu-text-disabled)}\n"], dependencies: [{ kind: "component", type: NeuIconComponent, selector: "neu-icon", inputs: ["name", "strokeWidth", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
205
237
|
}
|
|
206
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
238
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NeuInputComponent, decorators: [{
|
|
207
239
|
type: Component,
|
|
208
240
|
args: [{ selector: 'neu-input', imports: [NeuIconComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
209
241
|
class: 'neu-input-host',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"neural-ui-core-input.mjs","sources":["../../../../projects/ui-core/input/neu-input.component.ts","../../../../projects/ui-core/input/neural-ui-core-input.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';\nimport { NeuIconComponent } from '@neural-ui/core/icon';\n\n/** Contador global para IDs estables — seguro en SSR, predecible en hidratación / Global counter for stable IDs — SSR-safe, predictable on hydration */\nlet _neuInputIdSeq = 0;\n\nexport type NeuInputType = 'text' | 'email' | 'password' | 'tel' | 'url' | 'search';\n\n/**\n * NeuralUI Input Component\n *\n * Input con floating label, iconos y soporte completo para Angular Forms.\n * Compatible con Reactive Forms mediante FormControl y formularios reactivos.\n *\n * Uso standalone:\n * <neu-input label=\"Correo\" type=\"email\" />\n *\n * Con Reactive Forms:\n * <neu-input label=\"Correo\" [formControl]=\"emailCtrl\" [errorMessage]=\"emailError()\" />\n */\n@Component({\n selector: 'neu-input',\n imports: [NeuIconComponent],\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n // Los atributos del host (class, style, data-*) no deben llegar al <input> nativo\n // — se gestionan de forma explícita con los inputs del componente.\n host: {\n class: 'neu-input-host',\n '[class.neu-input-host--sm]': 'size() === \"sm\"',\n '[class.neu-input-host--lg]': 'size() === \"lg\"',\n },\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => NeuInputComponent),\n multi: true,\n },\n ],\n template: `\n @if (!floatingLabel() && label()) {\n <label class=\"neu-input__static-label\" [for]=\"inputId()\">{{ label() }}</label>\n }\n <div\n class=\"neu-input__wrapper\"\n [class.neu-input__wrapper--focused]=\"_focused()\"\n [class.neu-input__wrapper--has-value]=\"hasValue()\"\n [class.neu-input__wrapper--error]=\"hasError()\"\n [class.neu-input__wrapper--disabled]=\"isDisabledFinal()\"\n [class.neu-input__wrapper--has-start-icon]=\"!!startIcon() || _hasIconLeft()\"\n [class.neu-input__wrapper--has-end-icon]=\"!!endIcon() || _hasIconRight()\"\n [class.neu-input__wrapper--no-float]=\"!floatingLabel()\"\n >\n <!-- Icono izquierdo (proyección) -->\n @if (startIcon()) {\n <span class=\"neu-input__icon neu-input__icon--start\" aria-hidden=\"true\">\n <ng-content select=\"[neu-input-start]\" />\n @if (!hasStartContent()) {\n <svg\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"1.8\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n [innerHTML]=\"startIconPath()\"\n ></svg>\n }\n </span>\n }\n\n <!-- Icono izquierdo (por nombre) -->\n @if (_hasIconLeft()) {\n <span class=\"neu-input__icon neu-input__icon--start\" aria-hidden=\"true\">\n <neu-icon [name]=\"icon()\" size=\"16px\" />\n </span>\n }\n\n <!-- Campo nativo -->\n <input\n class=\"neu-input__field\"\n [id]=\"inputId()\"\n [type]=\"type()\"\n [disabled]=\"isDisabledFinal()\"\n [attr.name]=\"name() || null\"\n [attr.required]=\"required() ? '' : null\"\n [attr.readonly]=\"readonly() ? '' : null\"\n [attr.maxlength]=\"maxlength() ?? null\"\n [attr.minlength]=\"minlength() ?? null\"\n [attr.min]=\"min() ?? null\"\n [attr.max]=\"max() ?? null\"\n [attr.pattern]=\"pattern() ?? null\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.aria-invalid]=\"hasError() ? 'true' : null\"\n [attr.aria-describedby]=\"\n hasError() ? inputId() + '-error' : hint() ? inputId() + '-hint' : null\n \"\n [value]=\"_value()\"\n [attr.placeholder]=\"floatingLabel() ? ' ' : placeholder() || null\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n />\n\n <!-- Floating Label -->\n @if (floatingLabel() && label()) {\n <label class=\"neu-input__label\" [for]=\"inputId()\">{{ label() }}</label>\n }\n\n <!-- Icono derecho (proyección) -->\n @if (endIcon()) {\n <span class=\"neu-input__icon neu-input__icon--end\" aria-hidden=\"true\">\n <ng-content select=\"[neu-input-end]\" />\n </span>\n }\n\n <!-- Icono derecho (por nombre) -->\n @if (_hasIconRight()) {\n <span class=\"neu-input__icon neu-input__icon--end\" aria-hidden=\"true\">\n <neu-icon [name]=\"icon()\" size=\"16px\" />\n </span>\n }\n </div>\n\n <!-- Mensajes de ayuda / error -->\n @if (hasError()) {\n <p class=\"neu-input__error\" [id]=\"inputId() + '-error'\" role=\"alert\">\n <neu-icon name=\"lucideAlertCircle\" size=\"13px\" aria-hidden=\"true\" />\n {{ errorMessage() }}\n </p>\n } @else if (hint()) {\n <p class=\"neu-input__hint\" [id]=\"inputId() + '-hint'\">{{ hint() }}</p>\n }\n `,\n styleUrl: './neu-input.component.scss',\n})\nexport class NeuInputComponent implements ControlValueAccessor {\n /** Tipo de input HTML / HTML input type */\n type = input<NeuInputType>('text');\n\n /** Texto del floating label / Floating label text */\n label = input<string>('');\n\n /** Placeholder visible cuando floatingLabel=false / Visible placeholder when floatingLabel=false */\n placeholder = input<string>('');\n\n /** Muestra el label como flotante (true) o estático encima del campo (false) / Shows the label as floating (true) or static above the field (false) */\n floatingLabel = input<boolean>(true);\n\n /** Tamaño del campo: 'sm' = 36px | 'md' = 48px | 'lg' = 56px / Field size */\n size = input<'sm' | 'md' | 'lg'>('md');\n\n /** Hint de ayuda (visible cuando no hay error) / Help hint (visible when there is no error) */\n hint = input<string>('');\n\n /** Mensaje de error (activa el estado de error) / Error message (activates the error state) */\n errorMessage = input<string>('');\n\n /** Deshabilita el campo / Disables the field */\n disabled = input<boolean>(false);\n\n /** Atributo autocomplete HTML / HTML autocomplete attribute */\n autocomplete = input<string>('off');\n\n /** Muestra zona para icono al inicio / Shows icon slot at the start */\n startIcon = input<boolean>(false);\n\n /** Muestra zona para icono al final / Shows icon slot at the end */\n endIcon = input<boolean>(false);\n\n /** Nombre del icono lucide a renderizar dentro del campo / Lucide icon name to render inside the field */\n icon = input<string>('');\n\n /** Posición del icono cuando se usa `icon` / Icon position when using `icon` */\n iconPosition = input<'left' | 'right'>('left');\n\n /** ID accesible para el input — generado con contador estable (seguro en SSR) / Accessible ID for the input — generated with stable counter (SSR-safe) */\n inputId = input<string>(`neu-input-${++_neuInputIdSeq}`);\n\n /** Nombre del campo para formularios nativos / Field name for native forms */\n name = input<string>('');\n\n /** Marca el campo como requerido / Marks the field as required */\n required = input<boolean>(false);\n\n /** Hace el campo de solo lectura / Makes the field read-only */\n readonly = input<boolean>(false);\n\n /** Longitud máxima de caracteres / Maximum character length */\n maxlength = input<number | null>(null);\n\n /** Longitud mínima de caracteres / Minimum character length */\n minlength = input<number | null>(null);\n\n /** Valor mínimo (para type=number/date) / Minimum value (for type=number/date) */\n min = input<string | null>(null);\n\n /** Valor máximo (para type=number/date) / Maximum value (for type=number/date) */\n max = input<string | null>(null);\n\n /** Patrón de validación HTML5 / HTML5 validation pattern */\n pattern = input<string | null>(null);\n\n // --- Estado interno reactivo ---\n protected readonly _value = signal('');\n protected readonly _focused = signal(false);\n\n readonly hasValue = computed(() => this._value().length > 0);\n readonly hasError = computed(() => !!this.errorMessage());\n readonly startIconPath = computed(() => '');\n readonly hasStartContent = computed(() => false);\n readonly _hasIconLeft = computed(() => !!this.icon() && this.iconPosition() === 'left');\n readonly _hasIconRight = computed(() => !!this.icon() && this.iconPosition() === 'right');\n\n // --- ControlValueAccessor ---\n private _onChange: (v: string) => void = () => {};\n private _onTouched: () => void = () => {};\n\n writeValue(val: unknown): void {\n this._value.set(val == null ? '' : String(val));\n }\n\n registerOnChange(fn: (v: string) => void): void {\n this._onChange = fn;\n }\n\n registerOnTouched(fn: () => void): void {\n this._onTouched = fn;\n }\n\n private readonly _cvaDisabled = signal(false);\n setDisabledState(isDisabled: boolean): void {\n this._cvaDisabled.set(isDisabled);\n }\n\n readonly isDisabledFinal = computed(() => this.disabled() || this._cvaDisabled());\n\n onInput(event: Event): void {\n const value = (event.target as HTMLInputElement).value;\n this._value.set(value);\n this._onChange(value);\n }\n\n onFocus(): void {\n this._focused.set(true);\n }\n\n onBlur(): void {\n this._focused.set(false);\n this._onTouched();\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-input.mjs","sources":["../../../../projects/ui-core/input/neu-input.component.ts","../../../../projects/ui-core/input/neural-ui-core-input.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';\nimport { NeuIconComponent } from '@neural-ui/core/icon';\n\n/** Contador global para IDs estables — seguro en SSR, predecible en hidratación / Global counter for stable IDs — SSR-safe, predictable on hydration */\nlet _neuInputIdSeq = 0;\n\nexport type NeuInputType = 'text' | 'email' | 'password' | 'tel' | 'url' | 'search';\n\n/**\n * NeuralUI Input Component\n *\n * Input con floating label, iconos y soporte completo para Angular Forms.\n * Compatible con Reactive Forms mediante FormControl y formularios reactivos.\n *\n * Uso standalone:\n * <neu-input label=\"Correo\" type=\"email\" />\n *\n * Con Reactive Forms:\n * <neu-input label=\"Correo\" [formControl]=\"emailCtrl\" [errorMessage]=\"emailError()\" />\n */\n@Component({\n selector: 'neu-input',\n imports: [NeuIconComponent],\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n // Los atributos del host (class, style, data-*) no deben llegar al <input> nativo\n // — se gestionan de forma explícita con los inputs del componente.\n host: {\n class: 'neu-input-host',\n '[class.neu-input-host--sm]': 'size() === \"sm\"',\n '[class.neu-input-host--lg]': 'size() === \"lg\"',\n },\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => NeuInputComponent),\n multi: true,\n },\n ],\n template: `\n @if (!floatingLabel() && label()) {\n <label class=\"neu-input__static-label\" [for]=\"inputId()\">{{ label() }}</label>\n }\n <div\n class=\"neu-input__wrapper\"\n [class.neu-input__wrapper--focused]=\"_focused()\"\n [class.neu-input__wrapper--has-value]=\"hasValue()\"\n [class.neu-input__wrapper--error]=\"hasError()\"\n [class.neu-input__wrapper--disabled]=\"isDisabledFinal()\"\n [class.neu-input__wrapper--has-start-icon]=\"!!startIcon() || _hasIconLeft()\"\n [class.neu-input__wrapper--has-end-icon]=\"!!endIcon() || _hasIconRight()\"\n [class.neu-input__wrapper--no-float]=\"!floatingLabel()\"\n >\n <!-- Icono izquierdo (proyección) -->\n @if (startIcon()) {\n <span class=\"neu-input__icon neu-input__icon--start\" aria-hidden=\"true\">\n <ng-content select=\"[neu-input-start]\" />\n @if (!hasStartContent()) {\n <svg\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"1.8\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n [innerHTML]=\"startIconPath()\"\n ></svg>\n }\n </span>\n }\n\n <!-- Icono izquierdo (por nombre) -->\n @if (_hasIconLeft()) {\n <span class=\"neu-input__icon neu-input__icon--start\" aria-hidden=\"true\">\n <neu-icon [name]=\"icon()\" size=\"16px\" />\n </span>\n }\n\n <!-- Campo nativo -->\n <input\n class=\"neu-input__field\"\n [id]=\"inputId()\"\n [type]=\"type()\"\n [disabled]=\"isDisabledFinal()\"\n [attr.name]=\"name() || null\"\n [attr.required]=\"required() ? '' : null\"\n [attr.readonly]=\"readonly() ? '' : null\"\n [attr.maxlength]=\"maxlength() ?? null\"\n [attr.minlength]=\"minlength() ?? null\"\n [attr.min]=\"min() ?? null\"\n [attr.max]=\"max() ?? null\"\n [attr.pattern]=\"pattern() ?? null\"\n [attr.autocomplete]=\"autocomplete()\"\n [attr.aria-invalid]=\"hasError() ? 'true' : null\"\n [attr.aria-describedby]=\"\n hasError() ? inputId() + '-error' : hint() ? inputId() + '-hint' : null\n \"\n [value]=\"_value()\"\n [attr.placeholder]=\"floatingLabel() ? ' ' : placeholder() || null\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n />\n\n <!-- Floating Label -->\n @if (floatingLabel() && label()) {\n <label class=\"neu-input__label\" [for]=\"inputId()\">{{ label() }}</label>\n }\n\n <!-- Icono derecho (proyección) -->\n @if (endIcon()) {\n <span class=\"neu-input__icon neu-input__icon--end\" aria-hidden=\"true\">\n <ng-content select=\"[neu-input-end]\" />\n </span>\n }\n\n <!-- Icono derecho (por nombre) -->\n @if (_hasIconRight()) {\n <span class=\"neu-input__icon neu-input__icon--end\" aria-hidden=\"true\">\n <neu-icon [name]=\"icon()\" size=\"16px\" />\n </span>\n }\n </div>\n\n <!-- Mensajes de ayuda / error -->\n @if (hasError()) {\n <p class=\"neu-input__error\" [id]=\"inputId() + '-error'\" role=\"alert\">\n <neu-icon name=\"lucideAlertCircle\" size=\"13px\" aria-hidden=\"true\" />\n {{ errorMessage() }}\n </p>\n } @else if (hint()) {\n <p class=\"neu-input__hint\" [id]=\"inputId() + '-hint'\">{{ hint() }}</p>\n }\n `,\n styleUrl: './neu-input.component.scss',\n})\nexport class NeuInputComponent implements ControlValueAccessor {\n /** Tipo de input HTML / HTML input type */\n type = input<NeuInputType>('text');\n\n /** Texto del floating label / Floating label text */\n label = input<string>('');\n\n /** Placeholder visible cuando floatingLabel=false / Visible placeholder when floatingLabel=false */\n placeholder = input<string>('');\n\n /** Muestra el label como flotante (true) o estático encima del campo (false) / Shows the label as floating (true) or static above the field (false) */\n floatingLabel = input<boolean>(true);\n\n /** Tamaño del campo: 'sm' = 36px | 'md' = 48px | 'lg' = 56px / Field size */\n size = input<'sm' | 'md' | 'lg'>('md');\n\n /** Hint de ayuda (visible cuando no hay error) / Help hint (visible when there is no error) */\n hint = input<string>('');\n\n /** Mensaje de error (activa el estado de error) / Error message (activates the error state) */\n errorMessage = input<string>('');\n\n /** Deshabilita el campo / Disables the field */\n disabled = input<boolean>(false);\n\n /** Atributo autocomplete HTML / HTML autocomplete attribute */\n autocomplete = input<string>('off');\n\n /** Muestra zona para icono al inicio / Shows icon slot at the start */\n startIcon = input<boolean>(false);\n\n /** Muestra zona para icono al final / Shows icon slot at the end */\n endIcon = input<boolean>(false);\n\n /** Nombre del icono lucide a renderizar dentro del campo / Lucide icon name to render inside the field */\n icon = input<string>('');\n\n /** Posición del icono cuando se usa `icon` / Icon position when using `icon` */\n iconPosition = input<'left' | 'right'>('left');\n\n /** ID accesible para el input — generado con contador estable (seguro en SSR) / Accessible ID for the input — generated with stable counter (SSR-safe) */\n inputId = input<string>(`neu-input-${++_neuInputIdSeq}`);\n\n /** Nombre del campo para formularios nativos / Field name for native forms */\n name = input<string>('');\n\n /** Marca el campo como requerido / Marks the field as required */\n required = input<boolean>(false);\n\n /** Hace el campo de solo lectura / Makes the field read-only */\n readonly = input<boolean>(false);\n\n /** Longitud máxima de caracteres / Maximum character length */\n maxlength = input<number | null>(null);\n\n /** Longitud mínima de caracteres / Minimum character length */\n minlength = input<number | null>(null);\n\n /** Valor mínimo (para type=number/date) / Minimum value (for type=number/date) */\n min = input<string | null>(null);\n\n /** Valor máximo (para type=number/date) / Maximum value (for type=number/date) */\n max = input<string | null>(null);\n\n /** Patrón de validación HTML5 / HTML5 validation pattern */\n pattern = input<string | null>(null);\n\n // --- Estado interno reactivo ---\n protected readonly _value = signal('');\n protected readonly _focused = signal(false);\n\n readonly hasValue = computed(() => this._value().length > 0);\n readonly hasError = computed(() => !!this.errorMessage());\n readonly startIconPath = computed(() => '');\n readonly hasStartContent = computed(() => false);\n readonly _hasIconLeft = computed(() => !!this.icon() && this.iconPosition() === 'left');\n readonly _hasIconRight = computed(() => !!this.icon() && this.iconPosition() === 'right');\n\n // --- ControlValueAccessor ---\n private _onChange: (v: string) => void = () => {};\n private _onTouched: () => void = () => {};\n\n writeValue(val: unknown): void {\n this._value.set(val == null ? '' : String(val));\n }\n\n registerOnChange(fn: (v: string) => void): void {\n this._onChange = fn;\n }\n\n registerOnTouched(fn: () => void): void {\n this._onTouched = fn;\n }\n\n private readonly _cvaDisabled = signal(false);\n setDisabledState(isDisabled: boolean): void {\n this._cvaDisabled.set(isDisabled);\n }\n\n readonly isDisabledFinal = computed(() => this.disabled() || this._cvaDisabled());\n\n onInput(event: Event): void {\n const value = (event.target as HTMLInputElement).value;\n this._value.set(value);\n this._onChange(value);\n }\n\n onFocus(): void {\n this._focused.set(true);\n }\n\n onBlur(): void {\n this._focused.set(false);\n this._onTouched();\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
|
|
@@ -3,14 +3,20 @@ import { input, output, signal, computed, effect, ChangeDetectionStrategy, ViewE
|
|
|
3
3
|
import { moveItemInArray, transferArrayItem, CdkDropListGroup, CdkDropList, CdkDrag } from '@angular/cdk/drag-drop';
|
|
4
4
|
|
|
5
5
|
class NeuKanbanComponent {
|
|
6
|
-
columns = input([],
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
6
|
+
columns = input([], /* @ts-ignore */
|
|
7
|
+
...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
|
|
8
|
+
columnWidth = input('320px', /* @ts-ignore */
|
|
9
|
+
...(ngDevMode ? [{ debugName: "columnWidth" }] : /* istanbul ignore next */ []));
|
|
10
|
+
showCounts = input(true, /* @ts-ignore */
|
|
11
|
+
...(ngDevMode ? [{ debugName: "showCounts" }] : /* istanbul ignore next */ []));
|
|
12
|
+
showWipLimit = input(true, /* @ts-ignore */
|
|
13
|
+
...(ngDevMode ? [{ debugName: "showWipLimit" }] : /* istanbul ignore next */ []));
|
|
10
14
|
columnsChange = output();
|
|
11
15
|
cardDrop = output();
|
|
12
|
-
_columns = signal([],
|
|
13
|
-
|
|
16
|
+
_columns = signal([], /* @ts-ignore */
|
|
17
|
+
...(ngDevMode ? [{ debugName: "_columns" }] : /* istanbul ignore next */ []));
|
|
18
|
+
connectedDropLists = computed(() => this._columns().map((column) => column.id), /* @ts-ignore */
|
|
19
|
+
...(ngDevMode ? [{ debugName: "connectedDropLists" }] : /* istanbul ignore next */ []));
|
|
14
20
|
constructor() {
|
|
15
21
|
effect(() => {
|
|
16
22
|
this._columns.set(this._cloneColumns(this.columns()));
|
|
@@ -62,8 +68,8 @@ class NeuKanbanComponent {
|
|
|
62
68
|
})),
|
|
63
69
|
}));
|
|
64
70
|
}
|
|
65
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
66
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
71
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NeuKanbanComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
72
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: NeuKanbanComponent, isStandalone: true, selector: "neu-kanban", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, columnWidth: { classPropertyName: "columnWidth", publicName: "columnWidth", isSignal: true, isRequired: false, transformFunction: null }, showCounts: { classPropertyName: "showCounts", publicName: "showCounts", isSignal: true, isRequired: false, transformFunction: null }, showWipLimit: { classPropertyName: "showWipLimit", publicName: "showWipLimit", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { columnsChange: "columnsChange", cardDrop: "cardDrop" }, host: { properties: { "style.--neu-kanban-column-width": "columnWidth()" } }, ngImport: i0, template: `
|
|
67
73
|
<div class="neu-kanban" cdkDropListGroup>
|
|
68
74
|
@for (column of _columns(); track column.id) {
|
|
69
75
|
<section class="neu-kanban__column" [attr.aria-label]="column.title">
|
|
@@ -158,9 +164,9 @@ class NeuKanbanComponent {
|
|
|
158
164
|
</section>
|
|
159
165
|
}
|
|
160
166
|
</div>
|
|
161
|
-
`, isInline: true, styles: [".neu-kanban{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(240px,var(--neu-kanban-column-width, 320px));gap:var(--neu-space-4);align-items:start;overflow-x:auto;padding-bottom:var(--neu-space-2)}.neu-kanban__column{display:flex;flex-direction:column;min-height:240px;border:1px solid var(--neu-border);border-radius:var(--neu-radius-lg);background:color-mix(in srgb,var(--neu-surface) 90%,var(--neu-surface-2) 10%);box-shadow:var(--neu-shadow-sm);overflow:hidden}.neu-kanban__column-header{display:flex;align-items:center;justify-content:space-between;gap:var(--neu-space-3);padding:var(--neu-space-4);border-bottom:1px solid var(--neu-border)}.neu-kanban__column-title{display:flex;align-items:center;gap:var(--neu-space-2);min-width:0}.neu-kanban__column-accent{width:10px;height:10px;border-radius:999px;flex:0 0 auto;background:var(--neu-primary)}.neu-kanban__column-name{margin:0;font-size:var(--neu-text-sm);font-weight:700;color:var(--neu-text)}.neu-kanban__column-meta{display:flex;align-items:center;gap:var(--neu-space-2);flex-wrap:wrap;justify-content:flex-end}.neu-kanban__count,.neu-kanban__wip{display:inline-flex;align-items:center;min-height:28px;padding:0 var(--neu-space-2);border-radius:999px;font-size:var(--neu-text-xs);color:var(--neu-text-muted);background:var(--neu-surface-2)}.neu-kanban__wip--alert{background:color-mix(in srgb,var(--neu-danger) 12%,var(--neu-surface-2) 88%);color:var(--neu-danger)}.neu-kanban__list{display:flex;flex-direction:column;gap:var(--neu-space-3);padding:var(--neu-space-4);min-height:180px}.neu-kanban__empty{margin:0;padding:var(--neu-space-4);border:1px dashed var(--neu-border);border-radius:var(--neu-radius);text-align:center;font-size:var(--neu-text-sm);color:var(--neu-text-muted)}.neu-kanban__card{display:grid;gap:var(--neu-space-3);padding:var(--neu-space-4);border:1px solid var(--neu-border);border-radius:var(--neu-radius);background:var(--neu-surface);box-shadow:var(--neu-shadow-xs);cursor:grab}.neu-kanban__card:active{cursor:grabbing}.neu-kanban__card-header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--neu-space-3)}.neu-kanban__priority{display:inline-flex;align-items:center;min-height:24px;padding:0 var(--neu-space-2);border-radius:999px;font-size:var(--neu-text-xs);font-weight:700;text-transform:uppercase;letter-spacing:.04em}.neu-kanban__priority--low{background:color-mix(in srgb,var(--neu-success) 12%,white 88%);color
|
|
167
|
+
`, isInline: true, styles: [".neu-kanban{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(240px,var(--neu-kanban-column-width, 320px));gap:var(--neu-space-4);align-items:start;overflow-x:auto;padding-bottom:var(--neu-space-2)}.neu-kanban__column{display:flex;flex-direction:column;min-height:240px;border:1px solid var(--neu-border);border-radius:var(--neu-radius-lg);background:color-mix(in srgb,var(--neu-surface) 90%,var(--neu-surface-2) 10%);box-shadow:var(--neu-shadow-sm);overflow:hidden}.neu-kanban__column-header{display:flex;align-items:center;justify-content:space-between;gap:var(--neu-space-3);padding:var(--neu-space-4);border-bottom:1px solid var(--neu-border)}.neu-kanban__column-title{display:flex;align-items:center;gap:var(--neu-space-2);min-width:0}.neu-kanban__column-accent{width:10px;height:10px;border-radius:999px;flex:0 0 auto;background:var(--neu-primary)}.neu-kanban__column-name{margin:0;font-size:var(--neu-text-sm);font-weight:700;color:var(--neu-text)}.neu-kanban__column-meta{display:flex;align-items:center;gap:var(--neu-space-2);flex-wrap:wrap;justify-content:flex-end}.neu-kanban__count,.neu-kanban__wip{display:inline-flex;align-items:center;min-height:28px;padding:0 var(--neu-space-2);border-radius:999px;font-size:var(--neu-text-xs);color:var(--neu-text-muted);background:var(--neu-surface-2)}.neu-kanban__wip--alert{background:color-mix(in srgb,var(--neu-danger) 12%,var(--neu-surface-2) 88%);color:var(--neu-danger)}.neu-kanban__list{display:flex;flex-direction:column;gap:var(--neu-space-3);padding:var(--neu-space-4);min-height:180px}.neu-kanban__empty{margin:0;padding:var(--neu-space-4);border:1px dashed var(--neu-border);border-radius:var(--neu-radius);text-align:center;font-size:var(--neu-text-sm);color:var(--neu-text-muted)}.neu-kanban__card{display:grid;gap:var(--neu-space-3);padding:var(--neu-space-4);border:1px solid var(--neu-border);border-radius:var(--neu-radius);background:var(--neu-surface);box-shadow:var(--neu-shadow-xs);cursor:grab}.neu-kanban__card:active{cursor:grabbing}.neu-kanban__card-header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--neu-space-3)}.neu-kanban__priority{display:inline-flex;align-items:center;min-height:24px;padding:0 var(--neu-space-2);border-radius:999px;font-size:var(--neu-text-xs);font-weight:700;text-transform:uppercase;letter-spacing:.04em}.neu-kanban__priority--low{background:color-mix(in srgb,var(--neu-success) 12%,white 88%);color:#166534}.neu-kanban__priority--medium{background:color-mix(in srgb,var(--neu-warning) 16%,white 84%);color:#78350f}.neu-kanban__priority--high,.neu-kanban__priority--urgent{background:color-mix(in srgb,var(--neu-danger) 12%,white 88%);color:#991b1b}.neu-kanban__title{margin:0;font-size:var(--neu-text-sm);font-weight:700;color:var(--neu-text)}.neu-kanban__description{margin:0;font-size:var(--neu-text-sm);color:var(--neu-text-muted);line-height:1.5}.neu-kanban__tags{display:flex;flex-wrap:wrap;gap:var(--neu-space-2)}.neu-kanban__tag{display:inline-flex;align-items:center;min-height:24px;padding:0 var(--neu-space-2);border-radius:999px;background:var(--neu-surface-2);color:var(--neu-text-muted);font-size:var(--neu-text-xs)}.neu-kanban__footer{display:flex;align-items:center;justify-content:space-between;gap:var(--neu-space-3)}.neu-kanban__meta-value{font-size:var(--neu-text-xs);color:var(--neu-text-muted)}.neu-kanban__assignee{display:inline-flex;align-items:center;gap:var(--neu-space-2)}.neu-kanban__avatar,.neu-kanban__avatar img{width:28px;height:28px;border-radius:999px}.neu-kanban__avatar{display:inline-flex;align-items:center;justify-content:center;overflow:hidden;background:color-mix(in srgb,var(--neu-primary) 12%,white 88%);color:#004b93;font-size:11px;font-weight:700}.neu-kanban__assignee-name{font-size:var(--neu-text-xs);color:var(--neu-text-muted)}.cdk-drag-preview.neu-kanban__card{box-shadow:var(--neu-shadow-lg);border-color:color-mix(in srgb,var(--neu-primary) 40%,var(--neu-border) 60%)}.cdk-drag-placeholder.neu-kanban__card{opacity:.35}\n"], dependencies: [{ kind: "directive", type: CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
162
168
|
}
|
|
163
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
169
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NeuKanbanComponent, decorators: [{
|
|
164
170
|
type: Component,
|
|
165
171
|
args: [{ selector: 'neu-kanban', imports: [CdkDropListGroup, CdkDropList, CdkDrag], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
166
172
|
'[style.--neu-kanban-column-width]': 'columnWidth()',
|
|
@@ -259,7 +265,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
|
|
|
259
265
|
</section>
|
|
260
266
|
}
|
|
261
267
|
</div>
|
|
262
|
-
`, styles: [".neu-kanban{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(240px,var(--neu-kanban-column-width, 320px));gap:var(--neu-space-4);align-items:start;overflow-x:auto;padding-bottom:var(--neu-space-2)}.neu-kanban__column{display:flex;flex-direction:column;min-height:240px;border:1px solid var(--neu-border);border-radius:var(--neu-radius-lg);background:color-mix(in srgb,var(--neu-surface) 90%,var(--neu-surface-2) 10%);box-shadow:var(--neu-shadow-sm);overflow:hidden}.neu-kanban__column-header{display:flex;align-items:center;justify-content:space-between;gap:var(--neu-space-3);padding:var(--neu-space-4);border-bottom:1px solid var(--neu-border)}.neu-kanban__column-title{display:flex;align-items:center;gap:var(--neu-space-2);min-width:0}.neu-kanban__column-accent{width:10px;height:10px;border-radius:999px;flex:0 0 auto;background:var(--neu-primary)}.neu-kanban__column-name{margin:0;font-size:var(--neu-text-sm);font-weight:700;color:var(--neu-text)}.neu-kanban__column-meta{display:flex;align-items:center;gap:var(--neu-space-2);flex-wrap:wrap;justify-content:flex-end}.neu-kanban__count,.neu-kanban__wip{display:inline-flex;align-items:center;min-height:28px;padding:0 var(--neu-space-2);border-radius:999px;font-size:var(--neu-text-xs);color:var(--neu-text-muted);background:var(--neu-surface-2)}.neu-kanban__wip--alert{background:color-mix(in srgb,var(--neu-danger) 12%,var(--neu-surface-2) 88%);color:var(--neu-danger)}.neu-kanban__list{display:flex;flex-direction:column;gap:var(--neu-space-3);padding:var(--neu-space-4);min-height:180px}.neu-kanban__empty{margin:0;padding:var(--neu-space-4);border:1px dashed var(--neu-border);border-radius:var(--neu-radius);text-align:center;font-size:var(--neu-text-sm);color:var(--neu-text-muted)}.neu-kanban__card{display:grid;gap:var(--neu-space-3);padding:var(--neu-space-4);border:1px solid var(--neu-border);border-radius:var(--neu-radius);background:var(--neu-surface);box-shadow:var(--neu-shadow-xs);cursor:grab}.neu-kanban__card:active{cursor:grabbing}.neu-kanban__card-header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--neu-space-3)}.neu-kanban__priority{display:inline-flex;align-items:center;min-height:24px;padding:0 var(--neu-space-2);border-radius:999px;font-size:var(--neu-text-xs);font-weight:700;text-transform:uppercase;letter-spacing:.04em}.neu-kanban__priority--low{background:color-mix(in srgb,var(--neu-success) 12%,white 88%);color
|
|
268
|
+
`, styles: [".neu-kanban{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(240px,var(--neu-kanban-column-width, 320px));gap:var(--neu-space-4);align-items:start;overflow-x:auto;padding-bottom:var(--neu-space-2)}.neu-kanban__column{display:flex;flex-direction:column;min-height:240px;border:1px solid var(--neu-border);border-radius:var(--neu-radius-lg);background:color-mix(in srgb,var(--neu-surface) 90%,var(--neu-surface-2) 10%);box-shadow:var(--neu-shadow-sm);overflow:hidden}.neu-kanban__column-header{display:flex;align-items:center;justify-content:space-between;gap:var(--neu-space-3);padding:var(--neu-space-4);border-bottom:1px solid var(--neu-border)}.neu-kanban__column-title{display:flex;align-items:center;gap:var(--neu-space-2);min-width:0}.neu-kanban__column-accent{width:10px;height:10px;border-radius:999px;flex:0 0 auto;background:var(--neu-primary)}.neu-kanban__column-name{margin:0;font-size:var(--neu-text-sm);font-weight:700;color:var(--neu-text)}.neu-kanban__column-meta{display:flex;align-items:center;gap:var(--neu-space-2);flex-wrap:wrap;justify-content:flex-end}.neu-kanban__count,.neu-kanban__wip{display:inline-flex;align-items:center;min-height:28px;padding:0 var(--neu-space-2);border-radius:999px;font-size:var(--neu-text-xs);color:var(--neu-text-muted);background:var(--neu-surface-2)}.neu-kanban__wip--alert{background:color-mix(in srgb,var(--neu-danger) 12%,var(--neu-surface-2) 88%);color:var(--neu-danger)}.neu-kanban__list{display:flex;flex-direction:column;gap:var(--neu-space-3);padding:var(--neu-space-4);min-height:180px}.neu-kanban__empty{margin:0;padding:var(--neu-space-4);border:1px dashed var(--neu-border);border-radius:var(--neu-radius);text-align:center;font-size:var(--neu-text-sm);color:var(--neu-text-muted)}.neu-kanban__card{display:grid;gap:var(--neu-space-3);padding:var(--neu-space-4);border:1px solid var(--neu-border);border-radius:var(--neu-radius);background:var(--neu-surface);box-shadow:var(--neu-shadow-xs);cursor:grab}.neu-kanban__card:active{cursor:grabbing}.neu-kanban__card-header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--neu-space-3)}.neu-kanban__priority{display:inline-flex;align-items:center;min-height:24px;padding:0 var(--neu-space-2);border-radius:999px;font-size:var(--neu-text-xs);font-weight:700;text-transform:uppercase;letter-spacing:.04em}.neu-kanban__priority--low{background:color-mix(in srgb,var(--neu-success) 12%,white 88%);color:#166534}.neu-kanban__priority--medium{background:color-mix(in srgb,var(--neu-warning) 16%,white 84%);color:#78350f}.neu-kanban__priority--high,.neu-kanban__priority--urgent{background:color-mix(in srgb,var(--neu-danger) 12%,white 88%);color:#991b1b}.neu-kanban__title{margin:0;font-size:var(--neu-text-sm);font-weight:700;color:var(--neu-text)}.neu-kanban__description{margin:0;font-size:var(--neu-text-sm);color:var(--neu-text-muted);line-height:1.5}.neu-kanban__tags{display:flex;flex-wrap:wrap;gap:var(--neu-space-2)}.neu-kanban__tag{display:inline-flex;align-items:center;min-height:24px;padding:0 var(--neu-space-2);border-radius:999px;background:var(--neu-surface-2);color:var(--neu-text-muted);font-size:var(--neu-text-xs)}.neu-kanban__footer{display:flex;align-items:center;justify-content:space-between;gap:var(--neu-space-3)}.neu-kanban__meta-value{font-size:var(--neu-text-xs);color:var(--neu-text-muted)}.neu-kanban__assignee{display:inline-flex;align-items:center;gap:var(--neu-space-2)}.neu-kanban__avatar,.neu-kanban__avatar img{width:28px;height:28px;border-radius:999px}.neu-kanban__avatar{display:inline-flex;align-items:center;justify-content:center;overflow:hidden;background:color-mix(in srgb,var(--neu-primary) 12%,white 88%);color:#004b93;font-size:11px;font-weight:700}.neu-kanban__assignee-name{font-size:var(--neu-text-xs);color:var(--neu-text-muted)}.cdk-drag-preview.neu-kanban__card{box-shadow:var(--neu-shadow-lg);border-color:color-mix(in srgb,var(--neu-primary) 40%,var(--neu-border) 60%)}.cdk-drag-placeholder.neu-kanban__card{opacity:.35}\n"] }]
|
|
263
269
|
}], ctorParameters: () => [], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], columnWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnWidth", required: false }] }], showCounts: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCounts", required: false }] }], showWipLimit: [{ type: i0.Input, args: [{ isSignal: true, alias: "showWipLimit", required: false }] }], columnsChange: [{ type: i0.Output, args: ["columnsChange"] }], cardDrop: [{ type: i0.Output, args: ["cardDrop"] }] } });
|
|
264
270
|
|
|
265
271
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"neural-ui-core-kanban.mjs","sources":["../../../../projects/ui-core/kanban/neu-kanban.component.ts","../../../../projects/ui-core/kanban/neural-ui-core-kanban.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n ViewEncapsulation,\n computed,\n effect,\n input,\n output,\n signal,\n} from '@angular/core';\nimport {\n CdkDrag,\n CdkDropList,\n CdkDropListGroup,\n type CdkDragDrop,\n moveItemInArray,\n transferArrayItem,\n} from '@angular/cdk/drag-drop';\n\nexport interface NeuKanbanAssignee {\n name: string;\n avatar?: string;\n initials?: string;\n}\n\nexport interface NeuKanbanCard {\n id: string;\n title: string;\n description?: string;\n tags?: string[];\n assignee?: NeuKanbanAssignee;\n dueDate?: string;\n meta?: string;\n priority?: 'low' | 'medium' | 'high' | 'urgent';\n}\n\nexport interface NeuKanbanColumn {\n id: string;\n title: string;\n cards: NeuKanbanCard[];\n color?: string;\n wipLimit?: number;\n}\n\nexport interface NeuKanbanCardDropEvent {\n card: NeuKanbanCard;\n fromColumnId: string;\n toColumnId: string;\n previousIndex: number;\n currentIndex: number;\n columns: NeuKanbanColumn[];\n}\n\n@Component({\n selector: 'neu-kanban',\n imports: [CdkDropListGroup, CdkDropList, CdkDrag],\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n '[style.--neu-kanban-column-width]': 'columnWidth()',\n },\n template: `\n <div class=\"neu-kanban\" cdkDropListGroup>\n @for (column of _columns(); track column.id) {\n <section class=\"neu-kanban__column\" [attr.aria-label]=\"column.title\">\n <header class=\"neu-kanban__column-header\">\n <div class=\"neu-kanban__column-title\">\n <span\n class=\"neu-kanban__column-accent\"\n [style.background]=\"column.color || 'var(--neu-primary)'\"\n aria-hidden=\"true\"\n ></span>\n <h3 class=\"neu-kanban__column-name\">{{ column.title }}</h3>\n </div>\n\n <div class=\"neu-kanban__column-meta\">\n @if (showCounts()) {\n <span class=\"neu-kanban__count\">{{ column.cards.length }}</span>\n }\n @if (showWipLimit() && column.wipLimit) {\n <span\n class=\"neu-kanban__wip\"\n [class.neu-kanban__wip--alert]=\"column.cards.length > column.wipLimit\"\n >\n {{ column.cards.length }}/{{ column.wipLimit }}\n </span>\n }\n </div>\n </header>\n\n <div\n class=\"neu-kanban__list\"\n cdkDropList\n [id]=\"column.id\"\n [cdkDropListData]=\"column.cards\"\n [cdkDropListConnectedTo]=\"connectedDropLists()\"\n (cdkDropListDropped)=\"onCardDrop($event, column.id)\"\n >\n @if (column.cards.length === 0) {\n <p class=\"neu-kanban__empty\">Drop cards here</p>\n }\n\n @for (card of column.cards; track card.id) {\n <article class=\"neu-kanban__card\" cdkDrag [cdkDragData]=\"card\">\n <div class=\"neu-kanban__card-header\">\n <div>\n <h4 class=\"neu-kanban__title\">{{ card.title }}</h4>\n </div>\n @if (card.priority) {\n <span\n class=\"neu-kanban__priority\"\n [class]=\"'neu-kanban__priority neu-kanban__priority--' + card.priority\"\n >\n {{ card.priority }}\n </span>\n }\n </div>\n\n @if (card.description) {\n <p class=\"neu-kanban__description\">{{ card.description }}</p>\n }\n\n @if (card.tags?.length) {\n <div class=\"neu-kanban__tags\">\n @for (tag of card.tags; track tag) {\n <span class=\"neu-kanban__tag\">{{ tag }}</span>\n }\n </div>\n }\n\n @if (card.assignee || card.meta || card.dueDate) {\n <div class=\"neu-kanban__footer\">\n <div class=\"neu-kanban__assignee\">\n @if (card.assignee) {\n <span class=\"neu-kanban__avatar\" [attr.aria-label]=\"card.assignee.name\">\n @if (card.assignee.avatar) {\n <img [src]=\"card.assignee.avatar\" [alt]=\"card.assignee.name\" />\n } @else {\n {{ assigneeInitials(card.assignee) }}\n }\n </span>\n <span class=\"neu-kanban__assignee-name\">{{ card.assignee.name }}</span>\n }\n </div>\n\n @if (card.meta || card.dueDate) {\n <span class=\"neu-kanban__meta-value\">{{ card.meta || card.dueDate }}</span>\n }\n </div>\n }\n </article>\n }\n </div>\n </section>\n }\n </div>\n `,\n styleUrl: './neu-kanban.component.scss',\n})\nexport class NeuKanbanComponent {\n readonly columns = input<NeuKanbanColumn[]>([]);\n readonly columnWidth = input<string>('320px');\n readonly showCounts = input<boolean>(true);\n readonly showWipLimit = input<boolean>(true);\n\n readonly columnsChange = output<NeuKanbanColumn[]>();\n readonly cardDrop = output<NeuKanbanCardDropEvent>();\n\n readonly _columns = signal<NeuKanbanColumn[]>([]);\n readonly connectedDropLists = computed(() => this._columns().map((column) => column.id));\n\n constructor() {\n effect(() => {\n this._columns.set(this._cloneColumns(this.columns()));\n });\n }\n\n assigneeInitials(assignee: NeuKanbanAssignee): string {\n if (assignee.initials) return assignee.initials;\n return assignee.name\n .split(' ')\n .filter(Boolean)\n .slice(0, 2)\n .map((chunk) => chunk[0]?.toUpperCase() ?? '')\n .join('');\n }\n\n onCardDrop(event: CdkDragDrop<NeuKanbanCard[]>, targetColumnId: string): void {\n const nextColumns = this._cloneColumns(this._columns());\n const sourceColumn = nextColumns.find((column) => column.id === event.previousContainer.id);\n const targetColumn = nextColumns.find((column) => column.id === targetColumnId);\n if (!sourceColumn || !targetColumn) return;\n\n if (event.previousContainer.id === targetColumnId) {\n moveItemInArray(targetColumn.cards, event.previousIndex, event.currentIndex);\n } else {\n transferArrayItem(\n sourceColumn.cards,\n targetColumn.cards,\n event.previousIndex,\n event.currentIndex,\n );\n }\n\n this._columns.set(nextColumns);\n this.columnsChange.emit(nextColumns);\n\n const movedCard = targetColumn.cards[event.currentIndex];\n if (movedCard) {\n this.cardDrop.emit({\n card: movedCard,\n fromColumnId: event.previousContainer.id,\n toColumnId: targetColumnId,\n previousIndex: event.previousIndex,\n currentIndex: event.currentIndex,\n columns: nextColumns,\n });\n }\n }\n\n private _cloneColumns(columns: NeuKanbanColumn[]): NeuKanbanColumn[] {\n return columns.map((column) => ({\n ...column,\n cards: column.cards.map((card) => ({\n ...card,\n tags: card.tags ? [...card.tags] : undefined,\n assignee: card.assignee ? { ...card.assignee } : undefined,\n })),\n }));\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-kanban.mjs","sources":["../../../../projects/ui-core/kanban/neu-kanban.component.ts","../../../../projects/ui-core/kanban/neural-ui-core-kanban.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n ViewEncapsulation,\n computed,\n effect,\n input,\n output,\n signal,\n} from '@angular/core';\nimport {\n CdkDrag,\n CdkDropList,\n CdkDropListGroup,\n type CdkDragDrop,\n moveItemInArray,\n transferArrayItem,\n} from '@angular/cdk/drag-drop';\n\nexport interface NeuKanbanAssignee {\n name: string;\n avatar?: string;\n initials?: string;\n}\n\nexport interface NeuKanbanCard {\n id: string;\n title: string;\n description?: string;\n tags?: string[];\n assignee?: NeuKanbanAssignee;\n dueDate?: string;\n meta?: string;\n priority?: 'low' | 'medium' | 'high' | 'urgent';\n}\n\nexport interface NeuKanbanColumn {\n id: string;\n title: string;\n cards: NeuKanbanCard[];\n color?: string;\n wipLimit?: number;\n}\n\nexport interface NeuKanbanCardDropEvent {\n card: NeuKanbanCard;\n fromColumnId: string;\n toColumnId: string;\n previousIndex: number;\n currentIndex: number;\n columns: NeuKanbanColumn[];\n}\n\n@Component({\n selector: 'neu-kanban',\n imports: [CdkDropListGroup, CdkDropList, CdkDrag],\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n '[style.--neu-kanban-column-width]': 'columnWidth()',\n },\n template: `\n <div class=\"neu-kanban\" cdkDropListGroup>\n @for (column of _columns(); track column.id) {\n <section class=\"neu-kanban__column\" [attr.aria-label]=\"column.title\">\n <header class=\"neu-kanban__column-header\">\n <div class=\"neu-kanban__column-title\">\n <span\n class=\"neu-kanban__column-accent\"\n [style.background]=\"column.color || 'var(--neu-primary)'\"\n aria-hidden=\"true\"\n ></span>\n <h3 class=\"neu-kanban__column-name\">{{ column.title }}</h3>\n </div>\n\n <div class=\"neu-kanban__column-meta\">\n @if (showCounts()) {\n <span class=\"neu-kanban__count\">{{ column.cards.length }}</span>\n }\n @if (showWipLimit() && column.wipLimit) {\n <span\n class=\"neu-kanban__wip\"\n [class.neu-kanban__wip--alert]=\"column.cards.length > column.wipLimit\"\n >\n {{ column.cards.length }}/{{ column.wipLimit }}\n </span>\n }\n </div>\n </header>\n\n <div\n class=\"neu-kanban__list\"\n cdkDropList\n [id]=\"column.id\"\n [cdkDropListData]=\"column.cards\"\n [cdkDropListConnectedTo]=\"connectedDropLists()\"\n (cdkDropListDropped)=\"onCardDrop($event, column.id)\"\n >\n @if (column.cards.length === 0) {\n <p class=\"neu-kanban__empty\">Drop cards here</p>\n }\n\n @for (card of column.cards; track card.id) {\n <article class=\"neu-kanban__card\" cdkDrag [cdkDragData]=\"card\">\n <div class=\"neu-kanban__card-header\">\n <div>\n <h4 class=\"neu-kanban__title\">{{ card.title }}</h4>\n </div>\n @if (card.priority) {\n <span\n class=\"neu-kanban__priority\"\n [class]=\"'neu-kanban__priority neu-kanban__priority--' + card.priority\"\n >\n {{ card.priority }}\n </span>\n }\n </div>\n\n @if (card.description) {\n <p class=\"neu-kanban__description\">{{ card.description }}</p>\n }\n\n @if (card.tags?.length) {\n <div class=\"neu-kanban__tags\">\n @for (tag of card.tags; track tag) {\n <span class=\"neu-kanban__tag\">{{ tag }}</span>\n }\n </div>\n }\n\n @if (card.assignee || card.meta || card.dueDate) {\n <div class=\"neu-kanban__footer\">\n <div class=\"neu-kanban__assignee\">\n @if (card.assignee) {\n <span class=\"neu-kanban__avatar\" [attr.aria-label]=\"card.assignee.name\">\n @if (card.assignee.avatar) {\n <img [src]=\"card.assignee.avatar\" [alt]=\"card.assignee.name\" />\n } @else {\n {{ assigneeInitials(card.assignee) }}\n }\n </span>\n <span class=\"neu-kanban__assignee-name\">{{ card.assignee.name }}</span>\n }\n </div>\n\n @if (card.meta || card.dueDate) {\n <span class=\"neu-kanban__meta-value\">{{ card.meta || card.dueDate }}</span>\n }\n </div>\n }\n </article>\n }\n </div>\n </section>\n }\n </div>\n `,\n styleUrl: './neu-kanban.component.scss',\n})\nexport class NeuKanbanComponent {\n readonly columns = input<NeuKanbanColumn[]>([]);\n readonly columnWidth = input<string>('320px');\n readonly showCounts = input<boolean>(true);\n readonly showWipLimit = input<boolean>(true);\n\n readonly columnsChange = output<NeuKanbanColumn[]>();\n readonly cardDrop = output<NeuKanbanCardDropEvent>();\n\n readonly _columns = signal<NeuKanbanColumn[]>([]);\n readonly connectedDropLists = computed(() => this._columns().map((column) => column.id));\n\n constructor() {\n effect(() => {\n this._columns.set(this._cloneColumns(this.columns()));\n });\n }\n\n assigneeInitials(assignee: NeuKanbanAssignee): string {\n if (assignee.initials) return assignee.initials;\n return assignee.name\n .split(' ')\n .filter(Boolean)\n .slice(0, 2)\n .map((chunk) => chunk[0]?.toUpperCase() ?? '')\n .join('');\n }\n\n onCardDrop(event: CdkDragDrop<NeuKanbanCard[]>, targetColumnId: string): void {\n const nextColumns = this._cloneColumns(this._columns());\n const sourceColumn = nextColumns.find((column) => column.id === event.previousContainer.id);\n const targetColumn = nextColumns.find((column) => column.id === targetColumnId);\n if (!sourceColumn || !targetColumn) return;\n\n if (event.previousContainer.id === targetColumnId) {\n moveItemInArray(targetColumn.cards, event.previousIndex, event.currentIndex);\n } else {\n transferArrayItem(\n sourceColumn.cards,\n targetColumn.cards,\n event.previousIndex,\n event.currentIndex,\n );\n }\n\n this._columns.set(nextColumns);\n this.columnsChange.emit(nextColumns);\n\n const movedCard = targetColumn.cards[event.currentIndex];\n if (movedCard) {\n this.cardDrop.emit({\n card: movedCard,\n fromColumnId: event.previousContainer.id,\n toColumnId: targetColumnId,\n previousIndex: event.previousIndex,\n currentIndex: event.currentIndex,\n columns: nextColumns,\n });\n }\n }\n\n private _cloneColumns(columns: NeuKanbanColumn[]): NeuKanbanColumn[] {\n return columns.map((column) => ({\n ...column,\n cards: column.cards.map((card) => ({\n ...card,\n tags: card.tags ? [...card.tags] : undefined,\n assignee: card.assignee ? { ...card.assignee } : undefined,\n })),\n }));\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
|
|
@@ -12,33 +12,48 @@ let _seq = 0;
|
|
|
12
12
|
*/
|
|
13
13
|
class NeuKnobComponent {
|
|
14
14
|
/** Valor mínimo / Min value */
|
|
15
|
-
min = input(0,
|
|
15
|
+
min = input(0, /* @ts-ignore */
|
|
16
|
+
...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
|
|
16
17
|
/** Valor máximo / Max value */
|
|
17
|
-
max = input(100,
|
|
18
|
+
max = input(100, /* @ts-ignore */
|
|
19
|
+
...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
|
|
18
20
|
/** Incremento por paso / Step increment */
|
|
19
|
-
step = input(1,
|
|
21
|
+
step = input(1, /* @ts-ignore */
|
|
22
|
+
...(ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []));
|
|
20
23
|
/** Tamaño del dial en px / Dial size in px */
|
|
21
|
-
size = input(80,
|
|
24
|
+
size = input(80, /* @ts-ignore */
|
|
25
|
+
...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
22
26
|
/** Muestra el valor numérico en el centro / Shows the numeric value in the center */
|
|
23
|
-
showValue = input(true,
|
|
27
|
+
showValue = input(true, /* @ts-ignore */
|
|
28
|
+
...(ngDevMode ? [{ debugName: "showValue" }] : /* istanbul ignore next */ []));
|
|
24
29
|
/** Etiqueta visible / Visible label */
|
|
25
|
-
label = input('',
|
|
30
|
+
label = input('', /* @ts-ignore */
|
|
31
|
+
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
26
32
|
/** Emitido en cada cambio / Emitted on each change */
|
|
27
33
|
valueChange = output();
|
|
28
34
|
_id = `neu-knob-${++_seq}`;
|
|
29
|
-
_cvaDisabled = signal(false,
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
35
|
+
_cvaDisabled = signal(false, /* @ts-ignore */
|
|
36
|
+
...(ngDevMode ? [{ debugName: "_cvaDisabled" }] : /* istanbul ignore next */ []));
|
|
37
|
+
_value = signal(0, /* @ts-ignore */
|
|
38
|
+
...(ngDevMode ? [{ debugName: "_value" }] : /* istanbul ignore next */ []));
|
|
39
|
+
_strokeWidth = computed(() => Math.max(4, this.size() * 0.1), /* @ts-ignore */
|
|
40
|
+
...(ngDevMode ? [{ debugName: "_strokeWidth" }] : /* istanbul ignore next */ []));
|
|
41
|
+
_radius = computed(() => (this.size() - this._strokeWidth()) / 2 - 2, /* @ts-ignore */
|
|
42
|
+
...(ngDevMode ? [{ debugName: "_radius" }] : /* istanbul ignore next */ []));
|
|
43
|
+
_circumference = computed(() => 2 * Math.PI * this._radius(), /* @ts-ignore */
|
|
44
|
+
...(ngDevMode ? [{ debugName: "_circumference" }] : /* istanbul ignore next */ []));
|
|
34
45
|
/** Arc spans 260° (from -40° to 220°) */
|
|
35
|
-
_arcLength = computed(() => (260 / 360) * this._circumference(),
|
|
46
|
+
_arcLength = computed(() => (260 / 360) * this._circumference(), /* @ts-ignore */
|
|
47
|
+
...(ngDevMode ? [{ debugName: "_arcLength" }] : /* istanbul ignore next */ []));
|
|
36
48
|
_normalizedValue = computed(() => {
|
|
37
49
|
const range = this.max() - this.min();
|
|
38
50
|
return range === 0 ? 0 : (this._value() - this.min()) / range;
|
|
39
|
-
},
|
|
40
|
-
|
|
41
|
-
|
|
51
|
+
}, /* @ts-ignore */
|
|
52
|
+
...(ngDevMode ? [{ debugName: "_normalizedValue" }] : /* istanbul ignore next */ []));
|
|
53
|
+
_arcDashArray = computed(() => `${this._arcLength()} ${this._circumference()}`, /* @ts-ignore */
|
|
54
|
+
...(ngDevMode ? [{ debugName: "_arcDashArray" }] : /* istanbul ignore next */ []));
|
|
55
|
+
_arcDashOffset = computed(() => this._arcLength() * (1 - this._normalizedValue()), /* @ts-ignore */
|
|
56
|
+
...(ngDevMode ? [{ debugName: "_arcDashOffset" }] : /* istanbul ignore next */ []));
|
|
42
57
|
// Indicator position on the track (relative to SVG center)
|
|
43
58
|
// El arco empieza en rotate(-220°) desde el Este del SVG.
|
|
44
59
|
// El punto indicador reposa en el Norte (12 en punto).
|
|
@@ -47,9 +62,12 @@ class NeuKnobComponent {
|
|
|
47
62
|
// (arco de 7:40 → 1:20 pasando por 12:00 en la mitad)
|
|
48
63
|
// Arc starts at rotate(-220°) from East; indicator natural position is North (12 o'clock).
|
|
49
64
|
// Correct clockwise rotation formula: θ = 230 + normalizedValue × 260.
|
|
50
|
-
_indicatorAngle = computed(() => this._normalizedValue() * 260 + 230,
|
|
51
|
-
|
|
52
|
-
|
|
65
|
+
_indicatorAngle = computed(() => this._normalizedValue() * 260 + 230, /* @ts-ignore */
|
|
66
|
+
...(ngDevMode ? [{ debugName: "_indicatorAngle" }] : /* istanbul ignore next */ []));
|
|
67
|
+
_indicatorX = computed(() => this.size() / 2, /* @ts-ignore */
|
|
68
|
+
...(ngDevMode ? [{ debugName: "_indicatorX" }] : /* istanbul ignore next */ []));
|
|
69
|
+
_indicatorY = computed(() => this.size() / 2 - this._radius(), /* @ts-ignore */
|
|
70
|
+
...(ngDevMode ? [{ debugName: "_indicatorY" }] : /* istanbul ignore next */ []));
|
|
53
71
|
_dragStartAngle = 0;
|
|
54
72
|
_dragStartValue = 0;
|
|
55
73
|
_onChange = () => { };
|
|
@@ -69,7 +87,8 @@ class NeuKnobComponent {
|
|
|
69
87
|
hostClasses = computed(() => ({
|
|
70
88
|
'neu-knob': true,
|
|
71
89
|
'neu-knob--disabled': this._cvaDisabled(),
|
|
72
|
-
}),
|
|
90
|
+
}), /* @ts-ignore */
|
|
91
|
+
...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
|
|
73
92
|
writeValue(val) {
|
|
74
93
|
this._value.set(this._clamp(val ?? this.min()));
|
|
75
94
|
}
|
|
@@ -157,8 +176,8 @@ class NeuKnobComponent {
|
|
|
157
176
|
_clamp(v) {
|
|
158
177
|
return Math.min(this.max(), Math.max(this.min(), v));
|
|
159
178
|
}
|
|
160
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
161
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
179
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NeuKnobComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
180
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: NeuKnobComponent, isStandalone: true, selector: "neu-knob", inputs: { min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { properties: { "class": "hostClasses()" } }, providers: [
|
|
162
181
|
{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NeuKnobComponent), multi: true },
|
|
163
182
|
], ngImport: i0, template: `
|
|
164
183
|
<div
|
|
@@ -235,7 +254,7 @@ class NeuKnobComponent {
|
|
|
235
254
|
}
|
|
236
255
|
`, isInline: true, styles: ["@charset \"UTF-8\";.neu-knob{display:inline-flex;flex-direction:column;align-items:center;gap:6px;-webkit-user-select:none;user-select:none}.neu-knob--disabled{opacity:.5;pointer-events:none}.neu-knob__dial{position:relative;display:flex;align-items:center;justify-content:center;cursor:grab;border-radius:50%;touch-action:none}.neu-knob__dial:focus-visible{outline:2px solid var(--neu-focus-ring, #0ea5e9);outline-offset:3px}.neu-knob__dial:active{cursor:grabbing}.neu-knob__track{stroke:var(--neu-knob-track, var(--neu-border-color, #e5e7eb))}.neu-knob__value-arc{stroke:var(--neu-color-primary, #0ea5e9);transition:stroke-dashoffset 40ms linear}.neu-knob__indicator{fill:var(--neu-color-primary, #0ea5e9)}.neu-knob__display{position:absolute;font-size:.8125rem;font-weight:600;color:var(--neu-knob-display-color, var(--neu-text, #0f172a));-webkit-text-fill-color:var(--neu-knob-display-color, var(--neu-text, #0f172a));pointer-events:none;font-variant-numeric:tabular-nums}.neu-knob__label{font-size:.8125rem;color:var(--neu-knob-label-color, var(--neu-text-muted, #64748b));cursor:pointer}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
237
256
|
}
|
|
238
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
257
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: NeuKnobComponent, decorators: [{
|
|
239
258
|
type: Component,
|
|
240
259
|
args: [{ selector: 'neu-knob', imports: [], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { '[class]': 'hostClasses()' }, providers: [
|
|
241
260
|
{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NeuKnobComponent), multi: true },
|