valtech-components 2.0.781 → 2.0.783
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/esm2022/lib/components/molecules/phone-input/phone-input.component.mjs +3 -3
- package/esm2022/lib/components/molecules/username-input/types.mjs +1 -1
- package/esm2022/lib/components/molecules/username-input/username-input.component.mjs +13 -3
- package/esm2022/lib/components/organisms/form/form.component.mjs +2 -1
- package/esm2022/lib/version.mjs +2 -2
- package/fesm2022/valtech-components.mjs +16 -5
- package/fesm2022/valtech-components.mjs.map +1 -1
- package/lib/components/molecules/username-input/types.d.ts +2 -0
- package/lib/version.d.ts +1 -1
- package/package.json +1 -1
|
@@ -52,7 +52,7 @@ import 'prismjs/components/prism-json';
|
|
|
52
52
|
* Current version of valtech-components.
|
|
53
53
|
* This is automatically updated during the publish process.
|
|
54
54
|
*/
|
|
55
|
-
const VERSION = '2.0.
|
|
55
|
+
const VERSION = '2.0.783';
|
|
56
56
|
|
|
57
57
|
/**
|
|
58
58
|
* Servicio para gestionar presets de componentes.
|
|
@@ -14117,7 +14117,7 @@ class PhoneInputComponent {
|
|
|
14117
14117
|
</ion-note>
|
|
14118
14118
|
}
|
|
14119
14119
|
</div>
|
|
14120
|
-
`, isInline: true, styles: ["@charset \"UTF-8\";:host{display:block;width:100%}.phone-input-container.has-error .phone-input-wrapper{border-color:var(--ion-color-danger)}.phone-label{display:block;font-size:
|
|
14120
|
+
`, isInline: true, styles: ["@charset \"UTF-8\";:host{display:block;width:100%}.phone-input-container.has-error .phone-input-wrapper{border-color:var(--ion-color-danger)}.phone-label{display:block;font-size:16px;line-height:24px;font-weight:700;color:var(--ion-color-dark);margin-bottom:8px}.phone-input-wrapper{display:flex;align-items:stretch;border:1px solid var(--ion-color-step-150, #d7d8da);border-radius:28px;background:var(--ion-background-color, #fff);overflow:hidden;transition:border-color .2s;height:56px}.phone-input-wrapper:focus-within{border-color:var(--ion-color-primary)}.phone-input-wrapper.disabled{opacity:.5;pointer-events:none}.country-selector{flex-shrink:0;border-right:1px solid var(--ion-border-color, rgba(0, 0, 0, .08));background:transparent;display:flex;align-items:center;padding:0 4px 0 16px}.country-selector ion-select{--background: transparent;--border-style: none;--border-width: 0;--border-color: transparent;--border-radius: 0;--box-shadow: none;--padding-start: 4px;--padding-end: 4px;--padding-top: 0;--padding-bottom: 0;--highlight-color-focused: transparent;--highlight-color-valid: transparent;--highlight-color-invalid: transparent;min-width:80px;max-width:100px}.country-selector ion-select::part(container){border:none;box-shadow:none}.country-selector ion-select::part(icon){opacity:.6}.country-selector ion-select.select-expanded{border:none!important}.country-selector .flag{margin-right:4px}.dial-code-display{flex-shrink:0;padding:0 12px;font-weight:500;color:var(--ion-color-medium-shade);border-right:1px solid var(--ion-border-color, rgba(0, 0, 0, .08));background:transparent;display:flex;align-items:center}.number-input{flex:1;display:flex;align-items:center;background:transparent;padding:0 16px 0 12px}.number-input .phone-icon{color:var(--ion-color-medium);font-size:18px;margin-right:10px;flex-shrink:0}.number-input .phone-native-input{flex:1;width:100%;height:100%;border:none;outline:none;background:transparent;font-size:16px;font-family:inherit;color:var(--ion-text-color, #000)}.number-input .phone-native-input::placeholder{color:var(--ion-color-medium, #92949c)}.number-input .phone-native-input:focus{outline:none;border:none}.number-input .phone-native-input:disabled{opacity:.5;cursor:not-allowed}.hint{display:block;font-size:12px;color:var(--ion-color-dark);opacity:.75;margin-top:6px;padding-left:4px}.error-message{display:block;font-size:12px;margin-top:4px;padding-left:4px}::ng-deep .country-select-popover{--width: 200px}::ng-deep .country-select-popover .flag{margin-right:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: IonSelect, selector: "ion-select", inputs: ["cancelText", "color", "compareWith", "disabled", "errorText", "expandedIcon", "fill", "helperText", "interface", "interfaceOptions", "justify", "label", "labelPlacement", "mode", "multiple", "name", "okText", "placeholder", "selectedText", "shape", "toggleIcon", "value"] }, { kind: "component", type: IonSelectOption, selector: "ion-select-option", inputs: ["disabled", "value"] }, { kind: "component", type: IonNote, selector: "ion-note", inputs: ["color", "mode"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }] }); }
|
|
14121
14121
|
}
|
|
14122
14122
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PhoneInputComponent, decorators: [{
|
|
14123
14123
|
type: Component,
|
|
@@ -14180,7 +14180,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
14180
14180
|
</ion-note>
|
|
14181
14181
|
}
|
|
14182
14182
|
</div>
|
|
14183
|
-
`, styles: ["@charset \"UTF-8\";:host{display:block;width:100%}.phone-input-container.has-error .phone-input-wrapper{border-color:var(--ion-color-danger)}.phone-label{display:block;font-size:
|
|
14183
|
+
`, styles: ["@charset \"UTF-8\";:host{display:block;width:100%}.phone-input-container.has-error .phone-input-wrapper{border-color:var(--ion-color-danger)}.phone-label{display:block;font-size:16px;line-height:24px;font-weight:700;color:var(--ion-color-dark);margin-bottom:8px}.phone-input-wrapper{display:flex;align-items:stretch;border:1px solid var(--ion-color-step-150, #d7d8da);border-radius:28px;background:var(--ion-background-color, #fff);overflow:hidden;transition:border-color .2s;height:56px}.phone-input-wrapper:focus-within{border-color:var(--ion-color-primary)}.phone-input-wrapper.disabled{opacity:.5;pointer-events:none}.country-selector{flex-shrink:0;border-right:1px solid var(--ion-border-color, rgba(0, 0, 0, .08));background:transparent;display:flex;align-items:center;padding:0 4px 0 16px}.country-selector ion-select{--background: transparent;--border-style: none;--border-width: 0;--border-color: transparent;--border-radius: 0;--box-shadow: none;--padding-start: 4px;--padding-end: 4px;--padding-top: 0;--padding-bottom: 0;--highlight-color-focused: transparent;--highlight-color-valid: transparent;--highlight-color-invalid: transparent;min-width:80px;max-width:100px}.country-selector ion-select::part(container){border:none;box-shadow:none}.country-selector ion-select::part(icon){opacity:.6}.country-selector ion-select.select-expanded{border:none!important}.country-selector .flag{margin-right:4px}.dial-code-display{flex-shrink:0;padding:0 12px;font-weight:500;color:var(--ion-color-medium-shade);border-right:1px solid var(--ion-border-color, rgba(0, 0, 0, .08));background:transparent;display:flex;align-items:center}.number-input{flex:1;display:flex;align-items:center;background:transparent;padding:0 16px 0 12px}.number-input .phone-icon{color:var(--ion-color-medium);font-size:18px;margin-right:10px;flex-shrink:0}.number-input .phone-native-input{flex:1;width:100%;height:100%;border:none;outline:none;background:transparent;font-size:16px;font-family:inherit;color:var(--ion-text-color, #000)}.number-input .phone-native-input::placeholder{color:var(--ion-color-medium, #92949c)}.number-input .phone-native-input:focus{outline:none;border:none}.number-input .phone-native-input:disabled{opacity:.5;cursor:not-allowed}.hint{display:block;font-size:12px;color:var(--ion-color-dark);opacity:.75;margin-top:6px;padding-left:4px}.error-message{display:block;font-size:12px;margin-top:4px;padding-left:4px}::ng-deep .country-select-popover{--width: 200px}::ng-deep .country-select-popover .flag{margin-right:8px}\n"] }]
|
|
14184
14184
|
}], propDecorators: { preset: [{
|
|
14185
14185
|
type: Input
|
|
14186
14186
|
}], props: [{
|
|
@@ -25123,8 +25123,13 @@ class UsernameInputComponent {
|
|
|
25123
25123
|
<small>{{ errorMessage() }}</small>
|
|
25124
25124
|
</ion-text>
|
|
25125
25125
|
}
|
|
25126
|
+
|
|
25127
|
+
<!-- Texto explicativo (hint). Consistente con phone-input.hint. -->
|
|
25128
|
+
@if (props.hint && !hasError()) {
|
|
25129
|
+
<small class="username-hint">{{ props.hint }}</small>
|
|
25130
|
+
}
|
|
25126
25131
|
</div>
|
|
25127
|
-
`, isInline: true, styles: [".username-input-container{margin-bottom:1rem}.username-label{display:block;font-size
|
|
25132
|
+
`, isInline: true, styles: [".username-input-container{margin-bottom:1rem}.username-label{display:block;font-size:16px;line-height:24px;font-weight:700;color:var(--ion-color-dark);margin-bottom:8px}.username-hint{display:block;font-size:12px;color:var(--ion-color-dark);opacity:.75;margin-top:6px;padding-left:4px}.username-prefix{font-size:1rem;font-weight:500;color:var(--ion-color-medium);-webkit-user-select:none;user-select:none;margin-inline-end:.25rem;display:inline-flex;align-items:center}.username-field{width:100%}.username-field.has-error{--highlight-color: var(--ion-color-danger)}.availability-indicator{display:inline-flex;align-items:center;justify-content:center;margin-inline-start:.5rem}.checking-spinner{width:18px;height:18px;--color: var(--ion-color-medium)}.status-icon{font-size:1.25rem}.status-icon.available{color:var(--ion-color-success)}.status-icon.taken{color:var(--ion-color-danger)}.status-icon.invalid{color:var(--ion-color-warning)}.status-message,.error-message{display:block;margin-top:.25rem;padding-left:.25rem}:host-context(body.dark) .username-label,:host-context(.dark) .username-label,:host-context(.ion-palette-dark) .username-label,:host-context(html.ion-palette-dark) .username-label,:host-context([data-theme=\"dark\"]) .username-label{color:var(--ion-color-dark)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: IonInput, selector: "ion-input", inputs: ["accept", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "shape", "size", "spellcheck", "step", "type", "value"] }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonText, selector: "ion-text", inputs: ["color", "mode"] }] }); }
|
|
25128
25133
|
}
|
|
25129
25134
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: UsernameInputComponent, decorators: [{
|
|
25130
25135
|
type: Component,
|
|
@@ -25179,8 +25184,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
25179
25184
|
<small>{{ errorMessage() }}</small>
|
|
25180
25185
|
</ion-text>
|
|
25181
25186
|
}
|
|
25187
|
+
|
|
25188
|
+
<!-- Texto explicativo (hint). Consistente con phone-input.hint. -->
|
|
25189
|
+
@if (props.hint && !hasError()) {
|
|
25190
|
+
<small class="username-hint">{{ props.hint }}</small>
|
|
25191
|
+
}
|
|
25182
25192
|
</div>
|
|
25183
|
-
`, styles: [".username-input-container{margin-bottom:1rem}.username-label{display:block;font-size
|
|
25193
|
+
`, styles: [".username-input-container{margin-bottom:1rem}.username-label{display:block;font-size:16px;line-height:24px;font-weight:700;color:var(--ion-color-dark);margin-bottom:8px}.username-hint{display:block;font-size:12px;color:var(--ion-color-dark);opacity:.75;margin-top:6px;padding-left:4px}.username-prefix{font-size:1rem;font-weight:500;color:var(--ion-color-medium);-webkit-user-select:none;user-select:none;margin-inline-end:.25rem;display:inline-flex;align-items:center}.username-field{width:100%}.username-field.has-error{--highlight-color: var(--ion-color-danger)}.availability-indicator{display:inline-flex;align-items:center;justify-content:center;margin-inline-start:.5rem}.checking-spinner{width:18px;height:18px;--color: var(--ion-color-medium)}.status-icon{font-size:1.25rem}.status-icon.available{color:var(--ion-color-success)}.status-icon.taken{color:var(--ion-color-danger)}.status-icon.invalid{color:var(--ion-color-warning)}.status-message,.error-message{display:block;margin-top:.25rem;padding-left:.25rem}:host-context(body.dark) .username-label,:host-context(.dark) .username-label,:host-context(.ion-palette-dark) .username-label,:host-context(html.ion-palette-dark) .username-label,:host-context([data-theme=\"dark\"]) .username-label{color:var(--ion-color-dark)}\n"] }]
|
|
25184
25194
|
}], propDecorators: { props: [{
|
|
25185
25195
|
type: Input
|
|
25186
25196
|
}] } });
|
|
@@ -27152,6 +27162,7 @@ class FormComponent {
|
|
|
27152
27162
|
const result = {
|
|
27153
27163
|
control: control,
|
|
27154
27164
|
label: field.label,
|
|
27165
|
+
hint: field.hint,
|
|
27155
27166
|
placeholder: field.placeholder,
|
|
27156
27167
|
minLength: field.range?.min,
|
|
27157
27168
|
maxLength: field.range?.max,
|