valtech-components 2.0.738 → 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.
- package/esm2022/lib/components/molecules/username-input/username-input.component.mjs +37 -35
- package/esm2022/lib/services/firebase/messaging.service.mjs +13 -8
- package/esm2022/lib/services/theme.service.mjs +10 -1
- package/esm2022/lib/version.mjs +2 -2
- package/fesm2022/valtech-components.mjs +58 -42
- package/fesm2022/valtech-components.mjs.map +1 -1
- package/lib/components/atoms/rights-footer/rights-footer.component.d.ts +1 -1
- package/lib/components/organisms/article/article.component.d.ts +2 -2
- package/lib/components/organisms/toolbar/toolbar.component.d.ts +1 -1
- package/lib/services/theme.service.d.ts +6 -0
- package/lib/version.d.ts +1 -1
- package/package.json +1 -1
|
@@ -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.
|
|
53
|
+
const VERSION = '2.0.740';
|
|
54
54
|
|
|
55
55
|
/**
|
|
56
56
|
* Servicio para gestionar presets de componentes.
|
|
@@ -7693,10 +7693,19 @@ class ThemeService {
|
|
|
7693
7693
|
* Toggles a theme class on the document body.
|
|
7694
7694
|
* @param name The theme name
|
|
7695
7695
|
* @param shouldAdd Whether to add or remove the class
|
|
7696
|
+
*
|
|
7697
|
+
* Ionic 8 (`dark.class.css` palette) usa `.ion-palette-dark` en `<html>` para
|
|
7698
|
+
* conmutar el tema dark; en versiones previas leía `body.dark`. Mantenemos
|
|
7699
|
+
* el toggle sobre `body.{name}` por compat con código legacy, y además
|
|
7700
|
+
* espejamos `ion-palette-dark` en `<html>` cuando `name === 'dark'` — esto
|
|
7701
|
+
* es lo que las apps en Ionic 8 necesitan para que el palette aplique.
|
|
7696
7702
|
*/
|
|
7697
7703
|
toggleTheme(name, shouldAdd) {
|
|
7698
7704
|
console.log('toggleTheme::: ', name, shouldAdd);
|
|
7699
7705
|
document.body.classList.toggle(name, shouldAdd);
|
|
7706
|
+
if (name === 'dark') {
|
|
7707
|
+
document.documentElement.classList.toggle('ion-palette-dark', shouldAdd);
|
|
7708
|
+
}
|
|
7700
7709
|
}
|
|
7701
7710
|
/**
|
|
7702
7711
|
* Sets the user theme preference and updates toggles and theme classes.
|
|
@@ -21753,7 +21762,7 @@ class MessagingService {
|
|
|
21753
21762
|
if (!isPlatformBrowser(this.platformId) || !('serviceWorker' in navigator)) {
|
|
21754
21763
|
return;
|
|
21755
21764
|
}
|
|
21756
|
-
navigator.serviceWorker.addEventListener('message',
|
|
21765
|
+
navigator.serviceWorker.addEventListener('message', event => {
|
|
21757
21766
|
// Verificar que es un mensaje de notificación click
|
|
21758
21767
|
if (event.data?.type === 'NOTIFICATION_CLICK') {
|
|
21759
21768
|
this.ngZone.run(() => {
|
|
@@ -21808,7 +21817,7 @@ class MessagingService {
|
|
|
21808
21817
|
* ```
|
|
21809
21818
|
*/
|
|
21810
21819
|
async requestPermission() {
|
|
21811
|
-
if (!await this.isSupported()) {
|
|
21820
|
+
if (!(await this.isSupported())) {
|
|
21812
21821
|
console.warn('FCM no está soportado en este navegador');
|
|
21813
21822
|
return null;
|
|
21814
21823
|
}
|
|
@@ -21937,7 +21946,7 @@ class MessagingService {
|
|
|
21937
21946
|
if (!messaging || this.unsubscribeOnMessage) {
|
|
21938
21947
|
return;
|
|
21939
21948
|
}
|
|
21940
|
-
this.unsubscribeOnMessage = onMessage(messaging,
|
|
21949
|
+
this.unsubscribeOnMessage = onMessage(messaging, payload => {
|
|
21941
21950
|
const notification = {
|
|
21942
21951
|
title: payload.notification?.title,
|
|
21943
21952
|
body: payload.notification?.body,
|
|
@@ -22022,16 +22031,21 @@ class MessagingService {
|
|
|
22022
22031
|
if (this.stateSubject.value.isSupported) {
|
|
22023
22032
|
return true;
|
|
22024
22033
|
}
|
|
22025
|
-
// Verificaciones básicas
|
|
22034
|
+
// Verificaciones básicas — APIs del browser
|
|
22026
22035
|
if (!isPlatformBrowser(this.platformId)) {
|
|
22027
22036
|
return false;
|
|
22028
22037
|
}
|
|
22029
22038
|
if (!('Notification' in window) || !('serviceWorker' in navigator)) {
|
|
22030
22039
|
return false;
|
|
22031
22040
|
}
|
|
22032
|
-
//
|
|
22033
|
-
//
|
|
22034
|
-
|
|
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;
|
|
22035
22049
|
}
|
|
22036
22050
|
/**
|
|
22037
22051
|
* Obtiene el token actual sin hacer request.
|
|
@@ -24323,21 +24337,22 @@ class UsernameInputComponent {
|
|
|
24323
24337
|
<label class="username-label">{{ props.label }}</label>
|
|
24324
24338
|
}
|
|
24325
24339
|
|
|
24326
|
-
|
|
24327
|
-
|
|
24328
|
-
|
|
24329
|
-
|
|
24330
|
-
|
|
24331
|
-
|
|
24332
|
-
|
|
24333
|
-
|
|
24334
|
-
|
|
24335
|
-
|
|
24336
|
-
|
|
24337
|
-
|
|
24338
|
-
|
|
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>
|
|
24339
24354
|
@if (props.showAvailability !== false) {
|
|
24340
|
-
<
|
|
24355
|
+
<span slot="end" class="availability-indicator">
|
|
24341
24356
|
@switch (availabilityStatus()) {
|
|
24342
24357
|
@case ('checking') {
|
|
24343
24358
|
<ion-spinner name="crescent" class="checking-spinner" />
|
|
@@ -24352,9 +24367,9 @@ class UsernameInputComponent {
|
|
|
24352
24367
|
<ion-icon name="alert-circle" class="status-icon invalid" />
|
|
24353
24368
|
}
|
|
24354
24369
|
}
|
|
24355
|
-
</
|
|
24370
|
+
</span>
|
|
24356
24371
|
}
|
|
24357
|
-
</
|
|
24372
|
+
</ion-input>
|
|
24358
24373
|
|
|
24359
24374
|
@if (showStatusMessage()) {
|
|
24360
24375
|
<ion-text [color]="statusColor()" class="status-message">
|
|
@@ -24368,7 +24383,7 @@ class UsernameInputComponent {
|
|
|
24368
24383
|
</ion-text>
|
|
24369
24384
|
}
|
|
24370
24385
|
</div>
|
|
24371
|
-
`, 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-
|
|
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"] }] }); }
|
|
24372
24387
|
}
|
|
24373
24388
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: UsernameInputComponent, decorators: [{
|
|
24374
24389
|
type: Component,
|
|
@@ -24378,21 +24393,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
24378
24393
|
<label class="username-label">{{ props.label }}</label>
|
|
24379
24394
|
}
|
|
24380
24395
|
|
|
24381
|
-
|
|
24382
|
-
|
|
24383
|
-
|
|
24384
|
-
|
|
24385
|
-
|
|
24386
|
-
|
|
24387
|
-
|
|
24388
|
-
|
|
24389
|
-
|
|
24390
|
-
|
|
24391
|
-
|
|
24392
|
-
|
|
24393
|
-
|
|
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>
|
|
24394
24410
|
@if (props.showAvailability !== false) {
|
|
24395
|
-
<
|
|
24411
|
+
<span slot="end" class="availability-indicator">
|
|
24396
24412
|
@switch (availabilityStatus()) {
|
|
24397
24413
|
@case ('checking') {
|
|
24398
24414
|
<ion-spinner name="crescent" class="checking-spinner" />
|
|
@@ -24407,9 +24423,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
24407
24423
|
<ion-icon name="alert-circle" class="status-icon invalid" />
|
|
24408
24424
|
}
|
|
24409
24425
|
}
|
|
24410
|
-
</
|
|
24426
|
+
</span>
|
|
24411
24427
|
}
|
|
24412
|
-
</
|
|
24428
|
+
</ion-input>
|
|
24413
24429
|
|
|
24414
24430
|
@if (showStatusMessage()) {
|
|
24415
24431
|
<ion-text [color]="statusColor()" class="status-message">
|
|
@@ -24423,7 +24439,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
24423
24439
|
</ion-text>
|
|
24424
24440
|
}
|
|
24425
24441
|
</div>
|
|
24426
|
-
`, 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-
|
|
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"] }]
|
|
24427
24443
|
}], propDecorators: { props: [{
|
|
24428
24444
|
type: Input
|
|
24429
24445
|
}] } });
|