@caribeng/ui 22.2.0 → 22.4.0

package/fesm2022/caribeng-ui-inputmask.mjs

@@ -3,6 +3,7 @@ import { input, booleanAttribute, model, signal, computed, forwardRef, ViewEncap
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { cbFieldState } from '@caribeng/ui';
 
+let nextUid = 0;
 /**
  * InputMask de CaribeNG: campo de texto con máscara de formato (`9` = dígito,
  * `a` = letra, `*` = alfanumérico) e integración con Angular Forms (CVA).
@@ -25,6 +26,9 @@ class CbInputMask {
         this.fieldState = cbFieldState({ invalid: () => this.invalid() });
         this.ariaLabel = input('', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+        /** `id` del campo, para asociarlo a un `<label for>`. */
+        this.inputId = input(`cb-input-mask-${++nextUid}`, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
         this.value = model('', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
         this.cvaDisabled = signal(false, /* @ts-ignore */
@@ -107,7 +111,7 @@ class CbInputMask {
         return /^[a-zA-Z0-9]$/.test(ch);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbInputMask, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: CbInputMask, isStandalone: true, selector: "cb-input-mask", inputs: { mask: { classPropertyName: "mask", publicName: "mask", isSignal: true, isRequired: false, transformFunction: null }, unmask: { classPropertyName: "unmask", publicName: "unmask", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class.cb-is-disabled": "isDisabled()" }, classAttribute: "cb-input-mask" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: CbInputMask, isStandalone: true, selector: "cb-input-mask", inputs: { mask: { classPropertyName: "mask", publicName: "mask", isSignal: true, isRequired: false, transformFunction: null }, unmask: { classPropertyName: "unmask", publicName: "unmask", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class.cb-is-disabled": "isDisabled()" }, classAttribute: "cb-input-mask" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => CbInputMask),
@@ -117,6 +121,7 @@ class CbInputMask {
     <input
       type="text"
       class="cb-input-mask__field"
+      [id]="inputId()"
       [class.cb-is-invalid]="fieldState.invalid()"
       [attr.aria-invalid]="fieldState.invalid() ? 'true' : null"
       [attr.aria-required]="fieldState.required() || null"
@@ -144,6 +149,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
     <input
       type="text"
       class="cb-input-mask__field"
+      [id]="inputId()"
       [class.cb-is-invalid]="fieldState.invalid()"
       [attr.aria-invalid]="fieldState.invalid() ? 'true' : null"
       [attr.aria-required]="fieldState.required() || null"
@@ -155,7 +161,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
       (blur)="onBlur()"
     />
   `, styles: [":host{display:inline-block;width:100%;font-family:var(--cb-font-sans)}.cb-input-mask__field{width:100%;box-sizing:border-box;padding:var(--cb-space-2) var(--cb-space-3);border:var(--cb-border-width) solid var(--cb-color-border);border-radius:var(--cb-radius-md);background:var(--cb-color-surface);color:var(--cb-color-text);font-family:inherit;font-size:var(--cb-text-sm);line-height:1.5;transition:border-color .12s ease,box-shadow .12s ease}.cb-input-mask__field:focus{outline:none;border-color:var(--cb-color-primary-500);box-shadow:0 0 0 2px color-mix(in srgb,var(--cb-color-primary-500) 20%,transparent)}.cb-input-mask__field:disabled{opacity:.6;cursor:not-allowed}.cb-input-mask__field.cb-is-invalid{border-color:var(--cb-color-danger)}.cb-input-mask__field.cb-is-invalid:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--cb-color-danger) 25%,transparent)}\n"] }]
-        }], propDecorators: { mask: [{ type: i0.Input, args: [{ isSignal: true, alias: "mask", required: false }] }], unmask: [{ type: i0.Input, args: [{ isSignal: true, alias: "unmask", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
+        }], propDecorators: { mask: [{ type: i0.Input, args: [{ isSignal: true, alias: "mask", required: false }] }], unmask: [{ type: i0.Input, args: [{ isSignal: true, alias: "unmask", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
 
 /**
  * Generated bundle index. Do not edit.