valtech-components 2.0.739 → 2.0.740

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.
@@ -50,7 +50,7 @@ import 'prismjs/components/prism-json';
50
50
  * Current version of valtech-components.
51
51
  * This is automatically updated during the publish process.
52
52
  */
53
- const VERSION = '2.0.739';
53
+ const VERSION = '2.0.740';
54
54
 
55
55
  /**
56
56
  * Servicio para gestionar presets de componentes.
@@ -21762,7 +21762,7 @@ class MessagingService {
21762
21762
  if (!isPlatformBrowser(this.platformId) || !('serviceWorker' in navigator)) {
21763
21763
  return;
21764
21764
  }
21765
- navigator.serviceWorker.addEventListener('message', (event) => {
21765
+ navigator.serviceWorker.addEventListener('message', event => {
21766
21766
  // Verificar que es un mensaje de notificación click
21767
21767
  if (event.data?.type === 'NOTIFICATION_CLICK') {
21768
21768
  this.ngZone.run(() => {
@@ -21817,7 +21817,7 @@ class MessagingService {
21817
21817
  * ```
21818
21818
  */
21819
21819
  async requestPermission() {
21820
- if (!await this.isSupported()) {
21820
+ if (!(await this.isSupported())) {
21821
21821
  console.warn('FCM no está soportado en este navegador');
21822
21822
  return null;
21823
21823
  }
@@ -21946,7 +21946,7 @@ class MessagingService {
21946
21946
  if (!messaging || this.unsubscribeOnMessage) {
21947
21947
  return;
21948
21948
  }
21949
- this.unsubscribeOnMessage = onMessage(messaging, (payload) => {
21949
+ this.unsubscribeOnMessage = onMessage(messaging, payload => {
21950
21950
  const notification = {
21951
21951
  title: payload.notification?.title,
21952
21952
  body: payload.notification?.body,
@@ -22031,16 +22031,21 @@ class MessagingService {
22031
22031
  if (this.stateSubject.value.isSupported) {
22032
22032
  return true;
22033
22033
  }
22034
- // Verificaciones básicas que no dependen del Injector
22034
+ // Verificaciones básicas APIs del browser
22035
22035
  if (!isPlatformBrowser(this.platformId)) {
22036
22036
  return false;
22037
22037
  }
22038
22038
  if (!('Notification' in window) || !('serviceWorker' in navigator)) {
22039
22039
  return false;
22040
22040
  }
22041
- // Si el navegador soporta las APIs pero el Injector no está listo,
22042
- // podríamos tener un falso negativo. Intentar checkSupport de todas formas.
22043
- return this.checkSupport();
22041
+ // NOTA: deliberadamente NO chequeamos `getMessagingInstance()` aquí porque
22042
+ // el factory `provideMessaging(() => getMessaging())` es lazy en Angular
22043
+ // Fire y puede no estar resuelto cuando esta función se llama temprano
22044
+ // en el ciclo de vida. Eso causaba falsos negativos. Si FCM realmente no
22045
+ // está disponible (proyecto sin Messaging habilitado, VAPID inválido), el
22046
+ // flow downstream (`getToken`/`requestPermission`) fallará con error real,
22047
+ // que es mejor UX que un "no soportado" prematuro.
22048
+ return true;
22044
22049
  }
22045
22050
  /**
22046
22051
  * Obtiene el token actual sin hacer request.
@@ -24332,21 +24337,22 @@ class UsernameInputComponent {
24332
24337
  <label class="username-label">{{ props.label }}</label>
24333
24338
  }
24334
24339
 
24335
- <div class="username-input-wrapper" [class.focused]="isFocused()" [class.error]="hasError()">
24336
- <span class="username-prefix">{{ props.prefix || '@' }}</span>
24337
- <ion-input
24338
- [formControl]="props.control"
24339
- type="text"
24340
- [placeholder]="props.placeholder || 'username'"
24341
- [maxlength]="props.maxLength || 30"
24342
- (ionFocus)="onFocus()"
24343
- (ionBlur)="onBlur()"
24344
- (ionInput)="onInput($event)"
24345
- class="username-field"
24346
- />
24347
-
24340
+ <!-- ion-input nativo: renderiza la pill shape como val-text-input.
24341
+ Prefijo @ via slot="start", status indicator via slot="end". -->
24342
+ <ion-input
24343
+ [formControl]="props.control"
24344
+ type="text"
24345
+ [placeholder]="props.placeholder || 'username'"
24346
+ [maxlength]="props.maxLength || 30"
24347
+ (ionFocus)="onFocus()"
24348
+ (ionBlur)="onBlur()"
24349
+ (ionInput)="onInput($event)"
24350
+ class="username-field"
24351
+ [class.has-error]="hasError()"
24352
+ >
24353
+ <span slot="start" class="username-prefix">{{ props.prefix || '@' }}</span>
24348
24354
  @if (props.showAvailability !== false) {
24349
- <div class="availability-indicator">
24355
+ <span slot="end" class="availability-indicator">
24350
24356
  @switch (availabilityStatus()) {
24351
24357
  @case ('checking') {
24352
24358
  <ion-spinner name="crescent" class="checking-spinner" />
@@ -24361,9 +24367,9 @@ class UsernameInputComponent {
24361
24367
  <ion-icon name="alert-circle" class="status-icon invalid" />
24362
24368
  }
24363
24369
  }
24364
- </div>
24370
+ </span>
24365
24371
  }
24366
- </div>
24372
+ </ion-input>
24367
24373
 
24368
24374
  @if (showStatusMessage()) {
24369
24375
  <ion-text [color]="statusColor()" class="status-message">
@@ -24377,7 +24383,7 @@ class UsernameInputComponent {
24377
24383
  </ion-text>
24378
24384
  }
24379
24385
  </div>
24380
- `, isInline: true, styles: [".username-input-container{margin-bottom:1rem}.username-label{display:block;font-size:.875rem;font-weight:500;color:var(--ion-color-dark);margin-bottom:.5rem}.username-input-wrapper{display:flex;align-items:center;gap:.5rem;position:relative}.username-prefix{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);font-size:1rem;font-weight:500;color:var(--ion-color-medium);-webkit-user-select:none;user-select:none;z-index:2;pointer-events:none}.username-field{flex:1}.username-field::part(native){padding-left:1.75rem}.availability-indicator{display:flex;align-items:center;justify-content:center;width:24px;height:24px;margin-left:.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-input-wrapper{background:var(--ion-color-step-50);border-color:var(--ion-color-step-150)}.username-label{color:var(--ion-color-light)}}\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"] }] }); }
24386
+ `, isInline: true, styles: [".username-input-container{margin-bottom:1rem}.username-label{display:block;font-size:.875rem;font-weight:500;color:var(--ion-color-dark);margin-bottom:.5rem}.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-input-wrapper{background:var(--ion-color-step-50);border-color:var(--ion-color-step-150)}.username-label{color:var(--ion-color-light)}}\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"] }] }); }
24381
24387
  }
24382
24388
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: UsernameInputComponent, decorators: [{
24383
24389
  type: Component,
@@ -24387,21 +24393,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
24387
24393
  <label class="username-label">{{ props.label }}</label>
24388
24394
  }
24389
24395
 
24390
- <div class="username-input-wrapper" [class.focused]="isFocused()" [class.error]="hasError()">
24391
- <span class="username-prefix">{{ props.prefix || '@' }}</span>
24392
- <ion-input
24393
- [formControl]="props.control"
24394
- type="text"
24395
- [placeholder]="props.placeholder || 'username'"
24396
- [maxlength]="props.maxLength || 30"
24397
- (ionFocus)="onFocus()"
24398
- (ionBlur)="onBlur()"
24399
- (ionInput)="onInput($event)"
24400
- class="username-field"
24401
- />
24402
-
24396
+ <!-- ion-input nativo: renderiza la pill shape como val-text-input.
24397
+ Prefijo @ via slot="start", status indicator via slot="end". -->
24398
+ <ion-input
24399
+ [formControl]="props.control"
24400
+ type="text"
24401
+ [placeholder]="props.placeholder || 'username'"
24402
+ [maxlength]="props.maxLength || 30"
24403
+ (ionFocus)="onFocus()"
24404
+ (ionBlur)="onBlur()"
24405
+ (ionInput)="onInput($event)"
24406
+ class="username-field"
24407
+ [class.has-error]="hasError()"
24408
+ >
24409
+ <span slot="start" class="username-prefix">{{ props.prefix || '@' }}</span>
24403
24410
  @if (props.showAvailability !== false) {
24404
- <div class="availability-indicator">
24411
+ <span slot="end" class="availability-indicator">
24405
24412
  @switch (availabilityStatus()) {
24406
24413
  @case ('checking') {
24407
24414
  <ion-spinner name="crescent" class="checking-spinner" />
@@ -24416,9 +24423,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
24416
24423
  <ion-icon name="alert-circle" class="status-icon invalid" />
24417
24424
  }
24418
24425
  }
24419
- </div>
24426
+ </span>
24420
24427
  }
24421
- </div>
24428
+ </ion-input>
24422
24429
 
24423
24430
  @if (showStatusMessage()) {
24424
24431
  <ion-text [color]="statusColor()" class="status-message">
@@ -24432,7 +24439,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
24432
24439
  </ion-text>
24433
24440
  }
24434
24441
  </div>
24435
- `, styles: [".username-input-container{margin-bottom:1rem}.username-label{display:block;font-size:.875rem;font-weight:500;color:var(--ion-color-dark);margin-bottom:.5rem}.username-input-wrapper{display:flex;align-items:center;gap:.5rem;position:relative}.username-prefix{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);font-size:1rem;font-weight:500;color:var(--ion-color-medium);-webkit-user-select:none;user-select:none;z-index:2;pointer-events:none}.username-field{flex:1}.username-field::part(native){padding-left:1.75rem}.availability-indicator{display:flex;align-items:center;justify-content:center;width:24px;height:24px;margin-left:.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-input-wrapper{background:var(--ion-color-step-50);border-color:var(--ion-color-step-150)}.username-label{color:var(--ion-color-light)}}\n"] }]
24442
+ `, styles: [".username-input-container{margin-bottom:1rem}.username-label{display:block;font-size:.875rem;font-weight:500;color:var(--ion-color-dark);margin-bottom:.5rem}.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-input-wrapper{background:var(--ion-color-step-50);border-color:var(--ion-color-step-150)}.username-label{color:var(--ion-color-light)}}\n"] }]
24436
24443
  }], propDecorators: { props: [{
24437
24444
  type: Input
24438
24445
  }] } });