@c80/ui 2.0.1 → 3.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -93,15 +93,25 @@ interface ActionItem {
|
|
|
93
93
|
```
|
|
94
94
|
|
|
95
95
|
### `c80-input-field`
|
|
96
|
-
Campo de entrada (`text` | `email` | `password`) que mantiene la estética de `c80-info-list`, pensado para edición inline con consistencia visual. Maneja estados de focus/readonly y eventos de teclado.
|
|
96
|
+
Campo de entrada (`text` | `email` | `password` | `number`) que mantiene la estética de `c80-info-list`, pensado para edición inline con consistencia visual. Maneja estados de focus/readonly y eventos de teclado.
|
|
97
|
+
|
|
98
|
+
**Inputs:**
|
|
99
|
+
- `label`: `string` (etiqueta del campo)
|
|
100
|
+
- `value`: `model<string>` (two-way binding `[(value)]`; el output `valueChange` lo genera el model)
|
|
101
|
+
- `placeholder`: `string`
|
|
102
|
+
- `type`: `'text' | 'email' | 'password' | 'number'` (default `'text'`)
|
|
103
|
+
- `maxLength`: `number | undefined`
|
|
104
|
+
- `readonly`: `boolean` (default `false`)
|
|
105
|
+
- `required`: `boolean` (default `false`)
|
|
97
106
|
|
|
98
107
|
**Outputs:**
|
|
99
|
-
- `valueChange`: `
|
|
100
|
-
- `enterPressed`: `
|
|
108
|
+
- `valueChange`: emitido por el model `value` en cada cambio (`string`)
|
|
109
|
+
- `enterPressed`: `void` (emite al presionar Enter)
|
|
101
110
|
|
|
102
111
|
```html
|
|
103
112
|
<c80-input-field
|
|
104
|
-
|
|
113
|
+
label="Nombre"
|
|
114
|
+
[(value)]="name"
|
|
105
115
|
(enterPressed)="onSubmit()"></c80-input-field>
|
|
106
116
|
```
|
|
107
117
|
|
|
@@ -1,17 +1,21 @@
|
|
|
1
|
-
import { ChangeDetectionStrategy, Component, output, signal } from '@angular/core';
|
|
1
|
+
import { ChangeDetectionStrategy, Component, input, model, output, signal } from '@angular/core';
|
|
2
2
|
import * as i0 from "@angular/core";
|
|
3
3
|
/**
|
|
4
|
+
* Campo de entrada inline configurable desde el padre (label, type, readonly, etc.).
|
|
4
5
|
*
|
|
6
|
+
* `value` es un `model()`: soporta two-way binding `[(value)]` y conserva `.set()`.
|
|
7
|
+
* El output `valueChange` lo genera implicitamente el model (misma firma `string`
|
|
8
|
+
* que el output explicito que existia en 2.x); NO se redeclara para evitar la
|
|
9
|
+
* colision de nombres y la doble emision por cada tecla.
|
|
5
10
|
*/
|
|
6
11
|
export class InputFieldComponent {
|
|
7
|
-
label =
|
|
8
|
-
value =
|
|
9
|
-
placeholder =
|
|
10
|
-
type =
|
|
11
|
-
maxLength =
|
|
12
|
-
readonly =
|
|
13
|
-
required =
|
|
14
|
-
valueChange = output();
|
|
12
|
+
label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
13
|
+
value = model('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
14
|
+
placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
15
|
+
type = input('text', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
|
|
16
|
+
maxLength = input(undefined, ...(ngDevMode ? [{ debugName: "maxLength" }] : /* istanbul ignore next */ []));
|
|
17
|
+
readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
|
|
18
|
+
required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
|
|
15
19
|
enterPressed = output();
|
|
16
20
|
isFocused = signal(false, ...(ngDevMode ? [{ debugName: "isFocused" }] : /* istanbul ignore next */ []));
|
|
17
21
|
/**
|
|
@@ -19,9 +23,7 @@ export class InputFieldComponent {
|
|
|
19
23
|
* @param event
|
|
20
24
|
*/
|
|
21
25
|
onValueChange(event) {
|
|
22
|
-
|
|
23
|
-
this.value.set(newValue);
|
|
24
|
-
this.valueChange.emit(newValue);
|
|
26
|
+
this.value.set(event.target.value);
|
|
25
27
|
}
|
|
26
28
|
/**
|
|
27
29
|
*
|
|
@@ -45,10 +47,10 @@ export class InputFieldComponent {
|
|
|
45
47
|
}
|
|
46
48
|
}
|
|
47
49
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: InputFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
48
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
50
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: InputFieldComponent, isStandalone: true, selector: "c80-input-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", enterPressed: "enterPressed" }, ngImport: i0, template: "<div class=\"input-field\">\n <div class=\"input-field__item\">\n <span class=\"input-field__label\">{{ label() }}</span>\n <input class=\"input-field__input\" [class.input-field__input--focused]=\"isFocused()\" [type]=\"type()\" [value]=\"value()\" [placeholder]=\"placeholder()\" [attr.maxlength]=\"maxLength()\" [readonly]=\"readonly()\" [required]=\"required()\"\n (input)=\"onValueChange($event)\" (focus)=\"onFocus()\" (blur)=\"onBlur()\" (keydown)=\"onKeyDown($event)\" />\n </div>\n</div>", styles: [".input-field{width:100%}.input-field__item{display:flex;justify-content:space-between;align-items:center;padding:1rem;background:var(--color-surface);border-radius:.5rem;gap:1rem;transition:all var(--transition-base)}.input-field__item:hover{background:var(--color-bg-dark)}.input-field__label{color:var(--color-text-primary);min-width:fit-content;font-size:.875rem;font-weight:500}.input-field__input{flex:1;background:transparent;border:none;outline:none;color:var(--color-text-primary);text-align:right;padding:.5rem 0;min-width:0}.input-field__input::placeholder{color:var(--color-text-tertiary);font-style:italic}.input-field__input:focus{color:var(--color-primary)}.input-field__input[readonly]{cursor:default;color:var(--color-text-secondary)}.input-field__input--focused{color:var(--color-primary)}@media(max-width:768px){.input-field__item{padding:.75rem;gap:.75rem}.input-field__label,.input-field__input{font-size:.875rem}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
49
51
|
}
|
|
50
52
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: InputFieldComponent, decorators: [{
|
|
51
53
|
type: Component,
|
|
52
54
|
args: [{ selector: 'c80-input-field', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"input-field\">\n <div class=\"input-field__item\">\n <span class=\"input-field__label\">{{ label() }}</span>\n <input class=\"input-field__input\" [class.input-field__input--focused]=\"isFocused()\" [type]=\"type()\" [value]=\"value()\" [placeholder]=\"placeholder()\" [attr.maxlength]=\"maxLength()\" [readonly]=\"readonly()\" [required]=\"required()\"\n (input)=\"onValueChange($event)\" (focus)=\"onFocus()\" (blur)=\"onBlur()\" (keydown)=\"onKeyDown($event)\" />\n </div>\n</div>", styles: [".input-field{width:100%}.input-field__item{display:flex;justify-content:space-between;align-items:center;padding:1rem;background:var(--color-surface);border-radius:.5rem;gap:1rem;transition:all var(--transition-base)}.input-field__item:hover{background:var(--color-bg-dark)}.input-field__label{color:var(--color-text-primary);min-width:fit-content;font-size:.875rem;font-weight:500}.input-field__input{flex:1;background:transparent;border:none;outline:none;color:var(--color-text-primary);text-align:right;padding:.5rem 0;min-width:0}.input-field__input::placeholder{color:var(--color-text-tertiary);font-style:italic}.input-field__input:focus{color:var(--color-primary)}.input-field__input[readonly]{cursor:default;color:var(--color-text-secondary)}.input-field__input--focused{color:var(--color-primary)}@media(max-width:768px){.input-field__item{padding:.75rem;gap:.75rem}.input-field__label,.input-field__input{font-size:.875rem}}\n"] }]
|
|
53
|
-
}], propDecorators: {
|
|
55
|
+
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], enterPressed: [{ type: i0.Output, args: ["enterPressed"] }] } });
|
|
54
56
|
//# sourceMappingURL=input-field.component.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input-field.component.js","sourceRoot":"","sources":["../../../../../libs/ui/src/lib/input-field/input-field.component.ts","../../../../../libs/ui/src/lib/input-field/input-field.component.html"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;;
|
|
1
|
+
{"version":3,"file":"input-field.component.js","sourceRoot":"","sources":["../../../../../libs/ui/src/lib/input-field/input-field.component.ts","../../../../../libs/ui/src/lib/input-field/input-field.component.html"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;;AAEjG;;;;;;;GAOG;AAQH,MAAM,OAAO,mBAAmB;IACnB,KAAK,GAAG,KAAK,CAAS,EAAE,4EAAC,CAAC;IAC1B,KAAK,GAAG,KAAK,CAAS,EAAE,4EAAC,CAAC;IAC1B,WAAW,GAAG,KAAK,CAAS,EAAE,kFAAC,CAAC;IAChC,IAAI,GAAG,KAAK,CAA2C,MAAM,2EAAC,CAAC;IAC/D,SAAS,GAAG,KAAK,CAAqB,SAAS,gFAAC,CAAC;IACjD,QAAQ,GAAG,KAAK,CAAU,KAAK,+EAAC,CAAC;IACjC,QAAQ,GAAG,KAAK,CAAU,KAAK,+EAAC,CAAC;IAEjC,YAAY,GAAG,MAAM,EAAQ,CAAC;IAEpB,SAAS,GAAG,MAAM,CAAC,KAAK,gFAAC,CAAC;IAE7C;;;OAGG;IACO,aAAa,CAAC,KAAY;QAChC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAE,KAAK,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAC;IAC7D,CAAC;IAED;;OAEG;IACO,OAAO;QACb,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;IAC7B,CAAC;IAED;;OAEG;IACO,MAAM;QACZ,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;IAC9B,CAAC;IAED;;;OAGG;IACO,SAAS,CAAC,KAAoB;QACpC,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;YACxB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;QAC7B,CAAC;IACL,CAAC;wGA3CQ,mBAAmB;4FAAnB,mBAAmB,6gCCjBhC,ihBAMM;;4FDWO,mBAAmB;kBAP/B,SAAS;+BACI,iBAAiB,WAClB,EAAE,mBAGM,uBAAuB,CAAC,MAAM","sourcesContent":["import { ChangeDetectionStrategy, Component, input, model, output, signal } from '@angular/core';\n\n/**\n * Campo de entrada inline configurable desde el padre (label, type, readonly, etc.).\n *\n * `value` es un `model()`: soporta two-way binding `[(value)]` y conserva `.set()`.\n * El output `valueChange` lo genera implicitamente el model (misma firma `string`\n * que el output explicito que existia en 2.x); NO se redeclara para evitar la\n * colision de nombres y la doble emision por cada tecla.\n */\n@Component({\n selector: 'c80-input-field',\n imports: [],\n templateUrl: './input-field.component.html',\n styleUrl: './input-field.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class InputFieldComponent {\n readonly label = input<string>('');\n readonly value = model<string>('');\n readonly placeholder = input<string>('');\n readonly type = input<'text' | 'email' | 'password' | 'number'>('text');\n readonly maxLength = input<number | undefined>(undefined);\n readonly readonly = input<boolean>(false);\n readonly required = input<boolean>(false);\n\n readonly enterPressed = output<void>();\n\n protected readonly isFocused = signal(false);\n\n /**\n *\n * @param event\n */\n protected onValueChange(event: Event): void {\n this.value.set((event.target as HTMLInputElement).value);\n }\n\n /**\n *\n */\n protected onFocus(): void {\n this.isFocused.set(true);\n }\n\n /**\n *\n */\n protected onBlur(): void {\n this.isFocused.set(false);\n }\n\n /**\n *\n * @param event\n */\n protected onKeyDown(event: KeyboardEvent): void {\n if (event.key === 'Enter') {\n this.enterPressed.emit();\n }\n }\n}\n","<div class=\"input-field\">\n <div class=\"input-field__item\">\n <span class=\"input-field__label\">{{ label() }}</span>\n <input class=\"input-field__input\" [class.input-field__input--focused]=\"isFocused()\" [type]=\"type()\" [value]=\"value()\" [placeholder]=\"placeholder()\" [attr.maxlength]=\"maxLength()\" [readonly]=\"readonly()\" [required]=\"required()\"\n (input)=\"onValueChange($event)\" (focus)=\"onFocus()\" (blur)=\"onBlur()\" (keydown)=\"onKeyDown($event)\" />\n </div>\n</div>"]}
|
|
@@ -1,17 +1,21 @@
|
|
|
1
1
|
import * as i0 from "@angular/core";
|
|
2
2
|
/**
|
|
3
|
+
* Campo de entrada inline configurable desde el padre (label, type, readonly, etc.).
|
|
3
4
|
*
|
|
5
|
+
* `value` es un `model()`: soporta two-way binding `[(value)]` y conserva `.set()`.
|
|
6
|
+
* El output `valueChange` lo genera implicitamente el model (misma firma `string`
|
|
7
|
+
* que el output explicito que existia en 2.x); NO se redeclara para evitar la
|
|
8
|
+
* colision de nombres y la doble emision por cada tecla.
|
|
4
9
|
*/
|
|
5
10
|
export declare class InputFieldComponent {
|
|
6
|
-
readonly label: import("@angular/core").
|
|
7
|
-
readonly value: import("@angular/core").
|
|
8
|
-
readonly placeholder: import("@angular/core").
|
|
9
|
-
readonly type: import("@angular/core").
|
|
10
|
-
readonly maxLength: import("@angular/core").
|
|
11
|
-
readonly readonly: import("@angular/core").
|
|
12
|
-
readonly required: import("@angular/core").
|
|
13
|
-
|
|
14
|
-
enterPressed: import("@angular/core").OutputEmitterRef<void>;
|
|
11
|
+
readonly label: import("@angular/core").InputSignal<string>;
|
|
12
|
+
readonly value: import("@angular/core").ModelSignal<string>;
|
|
13
|
+
readonly placeholder: import("@angular/core").InputSignal<string>;
|
|
14
|
+
readonly type: import("@angular/core").InputSignal<"number" | "text" | "email" | "password">;
|
|
15
|
+
readonly maxLength: import("@angular/core").InputSignal<number | undefined>;
|
|
16
|
+
readonly readonly: import("@angular/core").InputSignal<boolean>;
|
|
17
|
+
readonly required: import("@angular/core").InputSignal<boolean>;
|
|
18
|
+
readonly enterPressed: import("@angular/core").OutputEmitterRef<void>;
|
|
15
19
|
protected readonly isFocused: import("@angular/core").WritableSignal<boolean>;
|
|
16
20
|
/**
|
|
17
21
|
*
|
|
@@ -32,5 +36,5 @@ export declare class InputFieldComponent {
|
|
|
32
36
|
*/
|
|
33
37
|
protected onKeyDown(event: KeyboardEvent): void;
|
|
34
38
|
static ɵfac: i0.ɵɵFactoryDeclaration<InputFieldComponent, never>;
|
|
35
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<InputFieldComponent, "c80-input-field", never, {}, { "
|
|
39
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<InputFieldComponent, "c80-input-field", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "maxLength": { "alias": "maxLength"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "enterPressed": "enterPressed"; }, never, never, true, never>;
|
|
36
40
|
}
|