valtech-components 2.0.1012 → 2.0.1013

package/fesm2022/valtech-components.mjs

@@ -54,7 +54,7 @@ import 'prismjs/components/prism-json';
  * Current version of valtech-components.
  * This is automatically updated during the publish process.
  */
-const VERSION = '2.0.1012';
+const VERSION = '2.0.1013';
 
 // Control de estado de refresco (singleton a nivel de módulo)
 let isRefreshing = false;
@@ -49404,9 +49404,76 @@ class ApiKeysModalComponent {
         this.errorMsg = signal('');
         this.secret = signal(null);
         this.copied = signal(false);
-        this.name = '';
-        this.expiresInDays = null;
-        this.selectedPerms = signal(new Set());
+        /**
+         * FormMetadata del form de crear key (val-form). Reactivo a idioma + permisos
+         * disponibles + estado submitting. Reemplaza los ion-input/ion-checkbox crudos
+         * por val-form (consistencia con el resto de modales del factory).
+         */
+        this.createForm = computed(() => {
+            this.i18n.lang();
+            const working = this.submitting();
+            const nameField = {
+                token: 'apikey-name',
+                name: 'name',
+                label: this.t('nameLabel'),
+                hint: '',
+                placeholder: this.t('namePlaceholder'),
+                type: InputType.TEXT,
+                order: 1,
+                validators: [Validators.required, Validators.maxLength(120)],
+                errors: { required: this.t('noName') },
+                value: '',
+                state: ComponentStates.ENABLED,
+            };
+            const permsField = {
+                token: 'apikey-perms',
+                name: 'permissions',
+                label: this.t('permissionsLabel'),
+                hint: '',
+                placeholder: '',
+                type: InputType.MULTI_SELECT,
+                order: 2,
+                validators: [Validators.required],
+                errors: { required: this.t('noPerms') },
+                value: '',
+                options: this.availablePermissions().map((p, i) => ({
+                    id: p,
+                    name: p,
+                    order: i + 1,
+                })),
+                state: ComponentStates.ENABLED,
+            };
+            const expiresField = {
+                token: 'apikey-expires',
+                name: 'expiresInDays',
+                label: this.t('expiresLabel'),
+                hint: '',
+                placeholder: '',
+                type: InputType.NUMBER,
+                order: 3,
+                validators: [Validators.min(1)],
+                errors: {},
+                value: '',
+                state: ComponentStates.ENABLED,
+            };
+            const submitButton = {
+                token: 'apikey-create-submit',
+                text: this.t('create'),
+                color: 'dark',
+                type: 'submit',
+                fill: 'solid',
+                size: 'default',
+                shape: 'round',
+                expand: 'block',
+                state: working ? ComponentStates.WORKING : ComponentStates.ENABLED,
+            };
+            return {
+                name: '',
+                state: working ? ComponentStates.WORKING : ComponentStates.ENABLED,
+                sections: [{ name: '', order: 1, fields: [nameField, permsField, expiresField] }],
+                actions: submitButton,
+            };
+        });
         if (!this.i18n.hasNamespace(DEFAULT_NAMESPACE$5)) {
             this.i18n.registerContent(DEFAULT_NAMESPACE$5, API_KEYS_MODAL_I18N);
         }
@@ -49433,39 +49500,36 @@ class ApiKeysModalComponent {
     }
     openCreate() {
         this.errorMsg.set('');
-        this.name = '';
-        this.expiresInDays = null;
-        this.selectedPerms.set(new Set());
         this.showCreate.set(true);
     }
-    togglePerm(perm, ev) {
-        const checked = ev.detail?.checked ?? false;
-        const next = new Set(this.selectedPerms());
-        if (checked) {
-            next.add(perm);
-        }
-        else {
-            next.delete(perm);
-        }
-        this.selectedPerms.set(next);
-    }
-    submit() {
+    onCreateSubmit(event) {
+        if (this.submitting())
+            return;
         this.errorMsg.set('');
-        if (!this.name.trim()) {
+        const name = String(event.fields['name'] ?? '').trim();
+        // MULTI_SELECT puede devolver array o csv según el render — normalizamos.
+        const rawPerms = event.fields['permissions'];
+        const permissions = Array.isArray(rawPerms)
+            ? rawPerms
+            : String(rawPerms ?? '')
+                .split(',')
+                .map(s => s.trim())
+                .filter(Boolean);
+        const expiresRaw = Number(event.fields['expiresInDays']);
+        if (!name) {
             this.errorMsg.set(this.t('noName'));
             return;
         }
-        const permissions = Array.from(this.selectedPerms());
-        if (permissions.length === 0) {
+        if (!permissions.length) {
             this.errorMsg.set(this.t('noPerms'));
             return;
         }
         this.submitting.set(true);
         this.apiKeys
             .create({
-            name: this.name.trim(),
+            name,
             permissions,
-            expiresInDays: this.expiresInDays && this.expiresInDays > 0 ? this.expiresInDays : undefined,
+            expiresInDays: Number.isFinite(expiresRaw) && expiresRaw > 0 ? expiresRaw : undefined,
         })
             .subscribe({
             next: res => {
@@ -49570,45 +49634,13 @@ class ApiKeysModalComponent {
             <p class="apikey-error">{{ errorMsg() }}</p>
           }
 
-          <!-- Crear -->
+          <!-- Crear — val-form (consistencia con el resto de modales del factory). -->
           @if (showCreate()) {
             <div class="apikey-create">
-              <ion-input
-                label="{{ t('nameLabel') }}"
-                labelPlacement="stacked"
-                [placeholder]="t('namePlaceholder')"
-                [(ngModel)]="name"
-              />
-              <p class="apikey-create__label">{{ t('permissionsLabel') }}</p>
-              <div class="apikey-perms">
-                @for (p of availablePermissions(); track p) {
-                  <ion-checkbox
-                    labelPlacement="end"
-                    [checked]="selectedPerms().has(p)"
-                    (ionChange)="togglePerm(p, $event)"
-                  >
-                    {{ p }}
-                  </ion-checkbox>
-                }
-              </div>
-              <ion-input
-                label="{{ t('expiresLabel') }}"
-                labelPlacement="stacked"
-                type="number"
-                [(ngModel)]="expiresInDays"
-              />
-              <div class="apikey-actions">
-                <ion-button expand="block" color="dark" [disabled]="submitting()" (click)="submit()">
-                  @if (submitting()) {
-                    <ion-spinner name="dots" />&nbsp;{{ t('creating') }}
-                  } @else {
-                    {{ t('create') }}
-                  }
-                </ion-button>
-                <ion-button expand="block" fill="clear" color="medium" (click)="showCreate.set(false)">
-                  {{ t('cancel') }}
-                </ion-button>
-              </div>
+              <val-form [props]="createForm()" (onSubmit)="onCreateSubmit($event)" />
+              <ion-button expand="block" fill="clear" color="medium" (click)="showCreate.set(false)">
+                {{ t('cancel') }}
+              </ion-button>
             </div>
           } @else {
             <div class="apikey-actions">
@@ -49620,20 +49652,18 @@ class ApiKeysModalComponent {
         }
       }
     </ion-content>
-  `, isInline: true, styles: ["val-display{display:block;margin-bottom:4px}val-title{display:block;margin-bottom:12px}.apikey-list{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}.apikey-row{display:flex;align-items:center;justify-content:space-between;padding:12px;border-radius:10px;border:1.5px solid var(--ion-color-light)}.apikey-row__main{display:flex;flex-direction:column}.apikey-row__name{font-weight:600;color:var(--ion-color-dark)}.apikey-row__meta{font-size:12px;color:var(--ion-color-medium-shade, #6b6e76)}.apikey-create{margin-top:8px;padding:16px;border-radius:12px;background:var(--ion-color-light)}.apikey-create__label{margin:12px 0 4px;font-size:13px;font-weight:600;color:var(--ion-color-dark)}.apikey-perms{display:flex;flex-direction:column;gap:6px;margin-bottom:12px;font-size:13px}.apikey-actions{margin-top:16px;display:flex;flex-direction:column;gap:8px}.apikey-error{margin:8px 0;font-size:.875rem;color:var(--ion-color-danger, #c0392b)}.apikey-secret__warn{font-size:.875rem;color:var(--ion-color-warning-shade, #b88600);margin:0 0 12px}.apikey-secret__box{padding:12px;border-radius:8px;background:var(--ion-color-dark);color:#fff;word-break:break-all;font-family:monospace;font-size:13px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { 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: IonCheckbox, selector: "ion-checkbox", inputs: ["checked", "color", "disabled", "errorText", "helperText", "indeterminate", "justify", "labelPlacement", "mode", "name", "value"] }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: DisplayComponent, selector: "val-display", inputs: ["props"] }, { kind: "component", type: TextComponent, selector: "val-text", inputs: ["props"] }, { kind: "component", type: TitleComponent, selector: "val-title", inputs: ["props"] }] }); }
+  `, isInline: true, styles: ["val-display{display:block;margin-bottom:4px}val-title{display:block;margin-bottom:12px}.apikey-list{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}.apikey-row{display:flex;align-items:center;justify-content:space-between;padding:12px;border-radius:10px;border:1.5px solid var(--ion-color-light)}.apikey-row__main{display:flex;flex-direction:column}.apikey-row__name{font-weight:600;color:var(--ion-color-dark)}.apikey-row__meta{font-size:12px;color:var(--ion-color-medium-shade, #6b6e76)}.apikey-create{margin-top:8px;padding:16px;border-radius:12px;background:var(--ion-color-light)}.apikey-create__label{margin:12px 0 4px;font-size:13px;font-weight:600;color:var(--ion-color-dark)}.apikey-perms{display:flex;flex-direction:column;gap:6px;margin-bottom:12px;font-size:13px}.apikey-actions{margin-top:16px;display:flex;flex-direction:column;gap:8px}.apikey-error{margin:8px 0;font-size:.875rem;color:var(--ion-color-danger, #c0392b)}.apikey-secret__warn{font-size:.875rem;color:var(--ion-color-warning-shade, #b88600);margin:0 0 12px}.apikey-secret__box{padding:12px;border-radius:8px;background:var(--ion-color-dark);color:#fff;word-break:break-all;font-family:monospace;font-size:13px}\n"], dependencies: [{ kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: FormComponent, selector: "val-form", inputs: ["props"], outputs: ["onSubmit", "onInvalid", "onSelectChange"] }, { kind: "component", type: DisplayComponent, selector: "val-display", inputs: ["props"] }, { kind: "component", type: TextComponent, selector: "val-text", inputs: ["props"] }, { kind: "component", type: TitleComponent, selector: "val-title", inputs: ["props"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ApiKeysModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'val-api-keys-modal', standalone: true, imports: [
-                        FormsModule,
                         IonHeader,
                         IonToolbar,
                         IonButtons,
                         IonButton,
                         IonContent,
-                        IonInput,
-                        IonCheckbox,
                         IonSpinner,
+                        FormComponent,
                         DisplayComponent,
                         TextComponent,
                         TitleComponent,
@@ -49699,45 +49729,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             <p class="apikey-error">{{ errorMsg() }}</p>
           }
 
-          <!-- Crear -->
+          <!-- Crear — val-form (consistencia con el resto de modales del factory). -->
           @if (showCreate()) {
             <div class="apikey-create">
-              <ion-input
-                label="{{ t('nameLabel') }}"
-                labelPlacement="stacked"
-                [placeholder]="t('namePlaceholder')"
-                [(ngModel)]="name"
-              />
-              <p class="apikey-create__label">{{ t('permissionsLabel') }}</p>
-              <div class="apikey-perms">
-                @for (p of availablePermissions(); track p) {
-                  <ion-checkbox
-                    labelPlacement="end"
-                    [checked]="selectedPerms().has(p)"
-                    (ionChange)="togglePerm(p, $event)"
-                  >
-                    {{ p }}
-                  </ion-checkbox>
-                }
-              </div>
-              <ion-input
-                label="{{ t('expiresLabel') }}"
-                labelPlacement="stacked"
-                type="number"
-                [(ngModel)]="expiresInDays"
-              />
-              <div class="apikey-actions">
-                <ion-button expand="block" color="dark" [disabled]="submitting()" (click)="submit()">
-                  @if (submitting()) {
-                    <ion-spinner name="dots" />&nbsp;{{ t('creating') }}
-                  } @else {
-                    {{ t('create') }}
-                  }
-                </ion-button>
-                <ion-button expand="block" fill="clear" color="medium" (click)="showCreate.set(false)">
-                  {{ t('cancel') }}
-                </ion-button>
-              </div>
+              <val-form [props]="createForm()" (onSubmit)="onCreateSubmit($event)" />
+              <ion-button expand="block" fill="clear" color="medium" (click)="showCreate.set(false)">
+                {{ t('cancel') }}
+              </ion-button>
             </div>
           } @else {
             <div class="apikey-actions">