valtech-components 4.0.13 → 4.0.14

package/esm2022/lib/version.mjs

@@ -2,5 +2,5 @@
  * Current version of valtech-components.
  * This is automatically updated during the publish process.
  */
-export const VERSION = '4.0.13';
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidmVyc2lvbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9saWIvdmVyc2lvbi50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7O0dBR0c7QUFDSCxNQUFNLENBQUMsTUFBTSxPQUFPLEdBQUcsUUFBUSxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDdXJyZW50IHZlcnNpb24gb2YgdmFsdGVjaC1jb21wb25lbnRzLlxuICogVGhpcyBpcyBhdXRvbWF0aWNhbGx5IHVwZGF0ZWQgZHVyaW5nIHRoZSBwdWJsaXNoIHByb2Nlc3MuXG4gKi9cbmV4cG9ydCBjb25zdCBWRVJTSU9OID0gJzQuMC4xMyc7XG4iXX0=
+export const VERSION = '4.0.14';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidmVyc2lvbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9saWIvdmVyc2lvbi50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7O0dBR0c7QUFDSCxNQUFNLENBQUMsTUFBTSxPQUFPLEdBQUcsUUFBUSxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDdXJyZW50IHZlcnNpb24gb2YgdmFsdGVjaC1jb21wb25lbnRzLlxuICogVGhpcyBpcyBhdXRvbWF0aWNhbGx5IHVwZGF0ZWQgZHVyaW5nIHRoZSBwdWJsaXNoIHByb2Nlc3MuXG4gKi9cbmV4cG9ydCBjb25zdCBWRVJTSU9OID0gJzQuMC4xNCc7XG4iXX0=

package/fesm2022/valtech-components.mjs

@@ -56,7 +56,7 @@ import { BrowserMultiFormatReader } from '@zxing/browser';
  * Current version of valtech-components.
  * This is automatically updated during the publish process.
  */
-const VERSION = '4.0.13';
+const VERSION = '4.0.14';
 
 // Control de estado de refresco (singleton a nivel de módulo)
 let isRefreshing = false;
@@ -50078,14 +50078,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 const MEMBER_IMPORT_MODAL_I18N = {
     es: {
         title: 'Importar miembros',
-        hint: 'Pega un CSV con columnas: email, nombre, rol (una fila por persona).',
+        subtitle: 'Carga un archivo CSV o pega el contenido directamente. Cada fila debe tener email, nombre y rol. Los cambios se aplican al instante.',
         csvPlaceholder: 'email,nombre,rol\nana@x.com,Ana,editor\nbeto@x.com,Beto,viewer',
+        importMethodLabel: '¿Cómo deseas importar?',
+        importMethodFile: 'Por archivo',
+        importMethodFileHint: 'Sube un archivo .csv desde tu equipo',
+        importMethodPaste: 'Pegar contenido',
+        importMethodPasteHint: 'Escribe o pega el CSV directamente',
         uploadFile: 'Subir archivo CSV',
-        orPaste: 'o pega el CSV abajo',
         fileLoaded: 'Archivo cargado: {name}',
         fileReadError: 'No se pudo leer el archivo.',
         rolesAvailable: 'Roles disponibles:',
-        onConflictLabel: 'Si el email ya existe',
+        onConflictLabel: '¿Qué hacer si el email ya existe?',
         conflictAssign: 'Asignar el rol',
         conflictSkip: 'Omitir',
         conflictError: 'Marcar error',
@@ -50093,7 +50097,7 @@ const MEMBER_IMPORT_MODAL_I18N = {
         submit: 'Importar',
         submitting: 'Importando...',
         parseError: 'No se pudo interpretar el CSV. Revisa el formato.',
-        noRows: 'Pega al menos una fila válida (email y rol).',
+        noRows: 'Agrega al menos una fila válida (email y rol).',
         summary: 'Resumen',
         created: 'creados',
         assigned: 'asignados',
@@ -50110,14 +50114,18 @@ const MEMBER_IMPORT_MODAL_I18N = {
     },
     en: {
         title: 'Import members',
-        hint: 'Paste a CSV with columns: email, name, role (one row per person).',
+        subtitle: 'Upload a CSV file or paste the content directly. Each row must include email, name and role. Changes are applied immediately.',
         csvPlaceholder: 'email,name,role\nana@x.com,Ana,editor\nbeto@x.com,Beto,viewer',
+        importMethodLabel: 'How do you want to import?',
+        importMethodFile: 'From file',
+        importMethodFileHint: 'Upload a .csv file from your device',
+        importMethodPaste: 'Paste content',
+        importMethodPasteHint: 'Type or paste the CSV directly',
         uploadFile: 'Upload CSV file',
-        orPaste: 'or paste the CSV below',
         fileLoaded: 'File loaded: {name}',
         fileReadError: "Couldn't read the file.",
         rolesAvailable: 'Available roles:',
-        onConflictLabel: 'If the email already exists',
+        onConflictLabel: 'What to do if the email already exists?',
         conflictAssign: 'Assign the role',
         conflictSkip: 'Skip',
         conflictError: 'Mark as error',
@@ -50125,7 +50133,7 @@ const MEMBER_IMPORT_MODAL_I18N = {
         submit: 'Import',
         submitting: 'Importing...',
         parseError: "Couldn't parse the CSV. Check the format.",
-        noRows: 'Paste at least one valid row (email and role).',
+        noRows: 'Add at least one valid row (email and role).',
         summary: 'Summary',
         created: 'created',
         assigned: 'assigned',
@@ -50143,7 +50151,7 @@ const MEMBER_IMPORT_MODAL_I18N = {
 };
 
 const DEFAULT_NAMESPACE$8 = 'Settings.ImportModal';
-addIcons({ cloudUploadOutline });
+addIcons({ cloudUploadOutline, documentTextOutline });
 /**
  * `val-member-import-modal` — panel de carga masiva de miembros (ADR-023 fase 6).
  *
@@ -50164,13 +50172,13 @@ class MemberImportModalComponent {
         /** Namespace i18n. */
         this.i18nNamespace = DEFAULT_NAMESPACE$8;
         this.csv = '';
-        this.sendActivation = true;
+        this.importMode = signal('file');
         this.onConflictControl = new FormControl('assignRole');
-        this.conflictSelectProps = computed(() => ({
+        this.sendActivationControl = new FormControl(true);
+        this.conflictRadioProps = computed(() => ({
             control: this.onConflictControl,
             label: '',
-            placeholder: this.t('onConflictLabel'),
-            type: InputType.SELECT,
+            type: InputType.RADIO,
             state: ComponentStates.ENABLED,
             options: [
                 { id: 'assignRole', name: this.t('conflictAssign'), order: 0 },
@@ -50178,6 +50186,13 @@ class MemberImportModalComponent {
                 { id: 'error', name: this.t('conflictError'), order: 2 },
             ],
         }));
+        this.sendActivationProps = computed(() => ({
+            control: this.sendActivationControl,
+            label: this.t('sendActivation'),
+            type: InputType.CHECK,
+            state: ComponentStates.ENABLED,
+            labelPlacement: 'end',
+        }));
         this.submitting = signal(false);
         this.errorMsg = signal('');
         this.results = signal(null);
@@ -50248,7 +50263,7 @@ class MemberImportModalComponent {
             .importMembers(this.orgId, {
             users,
             onConflict: (this.onConflictControl.value ?? 'assignRole'),
-            sendActivation: this.sendActivation,
+            sendActivation: this.sendActivationControl.value ?? true,
         })
             .subscribe({
             next: res => {
@@ -50277,6 +50292,7 @@ class MemberImportModalComponent {
         this.fileName.set('');
         this.errorMsg.set('');
         this.results.set(null);
+        this.importMode.set('file');
     }
     dismiss() {
         this._modalRef?.dismiss(null, 'cancel');
@@ -50298,10 +50314,9 @@ class MemberImportModalComponent {
 
     <ion-content class="ion-padding">
       <val-display [props]="{ content: t('title'), size: 'small', color: 'dark' }" />
+      <val-title [props]="{ content: t('subtitle'), size: 'large', color: '', bold: false }" />
 
       @if (!results()) {
-        <val-title [props]="{ content: t('hint'), size: 'large', color: '', bold: false }" />
-
         @if (rolesHint()) {
           <val-text
             class="import-roles-hint"
@@ -50309,40 +50324,79 @@ class MemberImportModalComponent {
           />
         }
 
-        <!-- Subida de archivo: label nativo envuelve el input (label trick, igual
-             que val-attachment-uploader) → gesto confiable en iOS/PWA. -->
-        <div class="import-upload">
-          <label class="import-upload__btn">
-            <ion-icon name="cloud-upload-outline" />
-            <span>{{ t('uploadFile') }}</span>
-            <input type="file" accept=".csv,text/csv,text/plain" (change)="onFileSelected($event)" />
-          </label>
-          <span class="import-upload__hint">{{ t('orPaste') }}</span>
+        <!-- Selector de método de importación -->
+        <div class="import-section">
+          <val-title [props]="{ content: t('importMethodLabel'), size: 'small', color: 'dark', bold: true }" />
+          <div class="import-method-cards">
+            <button
+              type="button"
+              class="import-method-card"
+              [class.import-method-card--active]="importMode() === 'file'"
+              (click)="importMode.set('file')"
+            >
+              <ion-icon name="cloud-upload-outline" class="import-method-card__icon" />
+              <span class="import-method-card__title">{{ t('importMethodFile') }}</span>
+              <span class="import-method-card__hint">{{ t('importMethodFileHint') }}</span>
+            </button>
+            <button
+              type="button"
+              class="import-method-card"
+              [class.import-method-card--active]="importMode() === 'paste'"
+              (click)="importMode.set('paste')"
+            >
+              <ion-icon name="document-text-outline" class="import-method-card__icon" />
+              <span class="import-method-card__title">{{ t('importMethodPaste') }}</span>
+              <span class="import-method-card__hint">{{ t('importMethodPasteHint') }}</span>
+            </button>
+          </div>
         </div>
 
-        @if (fileName()) {
-          <p class="import-file-loaded">
-            {{ t('fileLoaded').replace('{name}', fileName()) }}
-          </p>
+        <!-- Subida de archivo (label trick — gesto confiable en iOS/PWA) -->
+        @if (importMode() === 'file') {
+          <div class="import-section">
+            <label class="import-upload__btn">
+              <ion-icon name="cloud-upload-outline" />
+              <span>{{ t('uploadFile') }}</span>
+              <input type="file" accept=".csv,text/csv,text/plain" (change)="onFileSelected($event)" />
+            </label>
+            @if (fileName()) {
+              <p class="import-file-loaded">
+                {{ t('fileLoaded').replace('{name}', fileName()) }}
+              </p>
+            }
+          </div>
         }
 
-        <ion-textarea
-          class="import-csv"
-          [autoGrow]="true"
-          [rows]="6"
-          [placeholder]="t('csvPlaceholder')"
-          [(ngModel)]="csv"
-        />
+        <!-- Pegar CSV -->
+        @if (importMode() === 'paste') {
+          <div class="import-section">
+            <ion-textarea
+              class="import-csv"
+              [autoGrow]="true"
+              [rows]="6"
+              [placeholder]="t('csvPlaceholder')"
+              [(ngModel)]="csv"
+            />
+          </div>
+        }
+
+        <!-- Si hubo carga de archivo, mostrar textarea de solo lectura para revisar -->
+        @if (importMode() === 'file' && csv) {
+          <div class="import-section">
+            <ion-textarea class="import-csv" [autoGrow]="true" [rows]="4" [readonly]="true" [value]="csv" />
+          </div>
+        }
 
-        <!-- Selector de conflicto: val-title + val-select-input (mismo patrón que invite modal) -->
-        <div class="conflict-select-wrap">
-          <val-title [props]="{ content: t('onConflictLabel'), size: 'small', color: 'dark', bold: false }" />
-          <val-select-input [props]="conflictSelectProps()" />
+        <!-- Conflicto: radio buttons -->
+        <div class="import-section">
+          <val-title [props]="{ content: t('onConflictLabel'), size: 'small', color: 'dark', bold: true }" />
+          <val-radio-input [props]="conflictRadioProps()" />
         </div>
 
-        <ion-checkbox class="import-activation" labelPlacement="end" [(ngModel)]="sendActivation">
-          {{ t('sendActivation') }}
-        </ion-checkbox>
+        <!-- Activación: val-check-input -->
+        <div class="import-section">
+          <val-check-input [props]="sendActivationProps()" />
+        </div>
 
         @if (errorMsg()) {
           <p class="import-error">{{ errorMsg() }}</p>
@@ -50379,7 +50433,7 @@ class MemberImportModalComponent {
         </div>
       }
     </ion-content>
-  `, isInline: true, styles: ["val-display{display:block;margin-bottom:4px}val-title{display:block;margin-bottom:16px}.import-roles-hint{display:block;margin-bottom:16px}.import-upload{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:16px}.import-upload__btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid var(--ion-color-medium, #92949c);border-radius:10px;background:var(--ion-color-light);color:var(--ion-color-dark);font-size:.875rem;font-weight:600;cursor:pointer;transition:border-color .15s ease}.import-upload__btn:hover{border-color:var(--ion-color-primary, #7026df)}.import-upload__btn ion-icon{font-size:1.25rem}.import-upload__btn input[type=file]{display:none}.import-upload__hint{font-size:.8125rem;color:var(--ion-color-medium)}.import-file-loaded{margin:0 0 16px;font-size:.8125rem;color:var(--ion-color-medium-shade, #6b6e76)}.import-csv{--background: var(--ion-color-light);border-radius:10px;margin-bottom:20px;font-family:monospace;font-size:.8125rem}.conflict-select-wrap{margin-bottom:20px}.conflict-select-wrap val-title{display:block;margin-bottom:6px}.import-activation{display:block;margin-bottom:20px;font-size:.875rem}.import-error{margin:0 0 12px;font-size:.875rem;color:var(--ion-color-danger, #c0392b)}.import-actions{margin-top:8px}.import-results{display:flex;flex-direction:column;gap:6px;margin:12px 0}.import-row{display:grid;grid-template-columns:1fr auto;grid-row-gap:2px;align-items:center;padding:10px 12px;border-radius:8px;border-left:3px solid var(--ion-color-medium);background:var(--ion-color-light);font-size:14px}.import-row--created{border-left-color:var(--ion-color-success, #2dd36f)}.import-row--assigned{border-left-color:var(--ion-color-primary, #7026df)}.import-row--skipped{border-left-color:var(--ion-color-medium, #92949c)}.import-row--error{border-left-color:var(--ion-color-danger, #c0392b)}.import-row__email{font-weight:600;color:var(--ion-color-dark)}.import-row__status{text-align:right;color:var(--ion-color-medium-shade, #6b6e76)}.import-row__reason{grid-column:1 / -1;font-size:12px;color:var(--ion-color-danger, #c0392b)}\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: "ngmodule", type: ReactiveFormsModule }, { 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: IonTextarea, selector: "ion-textarea", inputs: ["autoGrow", "autocapitalize", "autofocus", "clearOnEdit", "color", "cols", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "maxlength", "minlength", "mode", "name", "placeholder", "readonly", "required", "rows", "shape", "spellcheck", "value", "wrap"] }, { 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: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { 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"] }, { kind: "component", type: SearchSelectorComponent, selector: "val-select-input", inputs: ["preset", "props"] }] }); }
+  `, isInline: true, styles: ["val-display{display:block;margin-bottom:4px}val-title{display:block;margin-bottom:8px}.import-roles-hint{display:block;margin-bottom:24px}.import-section{margin-bottom:28px}.import-section val-title{margin-bottom:10px}.import-method-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px}.import-method-card{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:14px 16px;border:1.5px solid var(--ion-color-light-shade, #d7d8da);border-radius:12px;background:var(--ion-color-light);cursor:pointer;text-align:left;transition:border-color .15s ease,background .15s ease}.import-method-card:hover{border-color:var(--ion-color-medium, #92949c)}.import-method-card--active{border-color:var(--ion-color-primary, #7026df);background:color-mix(in srgb,var(--ion-color-primary, #7026df) 6%,var(--ion-color-light))}.import-method-card__icon{font-size:1.375rem;color:var(--ion-color-medium-shade, #6b6e76);margin-bottom:4px}.import-method-card--active .import-method-card__icon{color:var(--ion-color-primary, #7026df)}.import-method-card__title{font-size:.875rem;font-weight:600;color:var(--ion-color-dark)}.import-method-card__hint{font-size:.75rem;color:var(--ion-color-medium, #92949c);line-height:1.3}.import-upload__btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid var(--ion-color-medium, #92949c);border-radius:10px;background:var(--ion-color-light);color:var(--ion-color-dark);font-size:.875rem;font-weight:600;cursor:pointer;transition:border-color .15s ease}.import-upload__btn:hover{border-color:var(--ion-color-primary, #7026df)}.import-upload__btn ion-icon{font-size:1.25rem}.import-upload__btn input[type=file]{display:none}.import-file-loaded{margin:10px 0 0;font-size:.8125rem;color:var(--ion-color-medium-shade, #6b6e76)}.import-csv{--background: var(--ion-color-light);border-radius:10px;font-family:monospace;font-size:.8125rem}.import-error{margin:0 0 12px;font-size:.875rem;color:var(--ion-color-danger, #c0392b)}.import-actions{margin-top:8px}.import-results{display:flex;flex-direction:column;gap:6px;margin:12px 0}.import-row{display:grid;grid-template-columns:1fr auto;grid-row-gap:2px;align-items:center;padding:10px 12px;border-radius:8px;border-left:3px solid var(--ion-color-medium);background:var(--ion-color-light);font-size:.875rem}.import-row--created{border-left-color:var(--ion-color-success, #2dd36f)}.import-row--assigned{border-left-color:var(--ion-color-primary, #7026df)}.import-row--skipped{border-left-color:var(--ion-color-medium, #92949c)}.import-row--error{border-left-color:var(--ion-color-danger, #c0392b)}.import-row__email{font-weight:600;color:var(--ion-color-dark)}.import-row__status{text-align:right;color:var(--ion-color-medium-shade, #6b6e76)}.import-row__reason{grid-column:1 / -1;font-size:.75rem;color:var(--ion-color-danger, #c0392b)}\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: "ngmodule", type: ReactiveFormsModule }, { 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: IonTextarea, selector: "ion-textarea", inputs: ["autoGrow", "autocapitalize", "autofocus", "clearOnEdit", "color", "cols", "counter", "counterFormatter", "debounce", "disabled", "enterkeyhint", "errorText", "fill", "helperText", "inputmode", "label", "labelPlacement", "maxlength", "minlength", "mode", "name", "placeholder", "readonly", "required", "rows", "shape", "spellcheck", "value", "wrap"] }, { 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: DisplayComponent, selector: "val-display", inputs: ["props"] }, { kind: "component", type: TextComponent, selector: "val-text", inputs: ["props"] }, { kind: "component", type: TitleComponent, selector: "val-title", inputs: ["props"] }, { kind: "component", type: RadioInputComponent, selector: "val-radio-input", inputs: ["props"] }, { kind: "component", type: CheckInputComponent, selector: "val-check-input", inputs: ["preset", "props"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MemberImportModalComponent, decorators: [{
             type: Component,
@@ -50392,13 +50446,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         IonButton,
                         IonContent,
                         IonTextarea,
-                        IonCheckbox,
                         IonSpinner,
                         IonIcon,
                         DisplayComponent,
                         TextComponent,
                         TitleComponent,
-                        SearchSelectorComponent,
+                        RadioInputComponent,
+                        CheckInputComponent,
                     ], template: `
     <ion-header>
       <ion-toolbar>
@@ -50412,10 +50466,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 
     <ion-content class="ion-padding">
       <val-display [props]="{ content: t('title'), size: 'small', color: 'dark' }" />
+      <val-title [props]="{ content: t('subtitle'), size: 'large', color: '', bold: false }" />
 
       @if (!results()) {
-        <val-title [props]="{ content: t('hint'), size: 'large', color: '', bold: false }" />
-
         @if (rolesHint()) {
           <val-text
             class="import-roles-hint"
@@ -50423,40 +50476,79 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
           />
         }
 
-        <!-- Subida de archivo: label nativo envuelve el input (label trick, igual
-             que val-attachment-uploader) → gesto confiable en iOS/PWA. -->
-        <div class="import-upload">
-          <label class="import-upload__btn">
-            <ion-icon name="cloud-upload-outline" />
-            <span>{{ t('uploadFile') }}</span>
-            <input type="file" accept=".csv,text/csv,text/plain" (change)="onFileSelected($event)" />
-          </label>
-          <span class="import-upload__hint">{{ t('orPaste') }}</span>
+        <!-- Selector de método de importación -->
+        <div class="import-section">
+          <val-title [props]="{ content: t('importMethodLabel'), size: 'small', color: 'dark', bold: true }" />
+          <div class="import-method-cards">
+            <button
+              type="button"
+              class="import-method-card"
+              [class.import-method-card--active]="importMode() === 'file'"
+              (click)="importMode.set('file')"
+            >
+              <ion-icon name="cloud-upload-outline" class="import-method-card__icon" />
+              <span class="import-method-card__title">{{ t('importMethodFile') }}</span>
+              <span class="import-method-card__hint">{{ t('importMethodFileHint') }}</span>
+            </button>
+            <button
+              type="button"
+              class="import-method-card"
+              [class.import-method-card--active]="importMode() === 'paste'"
+              (click)="importMode.set('paste')"
+            >
+              <ion-icon name="document-text-outline" class="import-method-card__icon" />
+              <span class="import-method-card__title">{{ t('importMethodPaste') }}</span>
+              <span class="import-method-card__hint">{{ t('importMethodPasteHint') }}</span>
+            </button>
+          </div>
         </div>
 
-        @if (fileName()) {
-          <p class="import-file-loaded">
-            {{ t('fileLoaded').replace('{name}', fileName()) }}
-          </p>
+        <!-- Subida de archivo (label trick — gesto confiable en iOS/PWA) -->
+        @if (importMode() === 'file') {
+          <div class="import-section">
+            <label class="import-upload__btn">
+              <ion-icon name="cloud-upload-outline" />
+              <span>{{ t('uploadFile') }}</span>
+              <input type="file" accept=".csv,text/csv,text/plain" (change)="onFileSelected($event)" />
+            </label>
+            @if (fileName()) {
+              <p class="import-file-loaded">
+                {{ t('fileLoaded').replace('{name}', fileName()) }}
+              </p>
+            }
+          </div>
         }
 
-        <ion-textarea
-          class="import-csv"
-          [autoGrow]="true"
-          [rows]="6"
-          [placeholder]="t('csvPlaceholder')"
-          [(ngModel)]="csv"
-        />
+        <!-- Pegar CSV -->
+        @if (importMode() === 'paste') {
+          <div class="import-section">
+            <ion-textarea
+              class="import-csv"
+              [autoGrow]="true"
+              [rows]="6"
+              [placeholder]="t('csvPlaceholder')"
+              [(ngModel)]="csv"
+            />
+          </div>
+        }
+
+        <!-- Si hubo carga de archivo, mostrar textarea de solo lectura para revisar -->
+        @if (importMode() === 'file' && csv) {
+          <div class="import-section">
+            <ion-textarea class="import-csv" [autoGrow]="true" [rows]="4" [readonly]="true" [value]="csv" />
+          </div>
+        }
 
-        <!-- Selector de conflicto: val-title + val-select-input (mismo patrón que invite modal) -->
-        <div class="conflict-select-wrap">
-          <val-title [props]="{ content: t('onConflictLabel'), size: 'small', color: 'dark', bold: false }" />
-          <val-select-input [props]="conflictSelectProps()" />
+        <!-- Conflicto: radio buttons -->
+        <div class="import-section">
+          <val-title [props]="{ content: t('onConflictLabel'), size: 'small', color: 'dark', bold: true }" />
+          <val-radio-input [props]="conflictRadioProps()" />
         </div>
 
-        <ion-checkbox class="import-activation" labelPlacement="end" [(ngModel)]="sendActivation">
-          {{ t('sendActivation') }}
-        </ion-checkbox>
+        <!-- Activación: val-check-input -->
+        <div class="import-section">
+          <val-check-input [props]="sendActivationProps()" />
+        </div>
 
         @if (errorMsg()) {
           <p class="import-error">{{ errorMsg() }}</p>
@@ -50493,7 +50585,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         </div>
       }
     </ion-content>
-  `, styles: ["val-display{display:block;margin-bottom:4px}val-title{display:block;margin-bottom:16px}.import-roles-hint{display:block;margin-bottom:16px}.import-upload{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:16px}.import-upload__btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid var(--ion-color-medium, #92949c);border-radius:10px;background:var(--ion-color-light);color:var(--ion-color-dark);font-size:.875rem;font-weight:600;cursor:pointer;transition:border-color .15s ease}.import-upload__btn:hover{border-color:var(--ion-color-primary, #7026df)}.import-upload__btn ion-icon{font-size:1.25rem}.import-upload__btn input[type=file]{display:none}.import-upload__hint{font-size:.8125rem;color:var(--ion-color-medium)}.import-file-loaded{margin:0 0 16px;font-size:.8125rem;color:var(--ion-color-medium-shade, #6b6e76)}.import-csv{--background: var(--ion-color-light);border-radius:10px;margin-bottom:20px;font-family:monospace;font-size:.8125rem}.conflict-select-wrap{margin-bottom:20px}.conflict-select-wrap val-title{display:block;margin-bottom:6px}.import-activation{display:block;margin-bottom:20px;font-size:.875rem}.import-error{margin:0 0 12px;font-size:.875rem;color:var(--ion-color-danger, #c0392b)}.import-actions{margin-top:8px}.import-results{display:flex;flex-direction:column;gap:6px;margin:12px 0}.import-row{display:grid;grid-template-columns:1fr auto;grid-row-gap:2px;align-items:center;padding:10px 12px;border-radius:8px;border-left:3px solid var(--ion-color-medium);background:var(--ion-color-light);font-size:14px}.import-row--created{border-left-color:var(--ion-color-success, #2dd36f)}.import-row--assigned{border-left-color:var(--ion-color-primary, #7026df)}.import-row--skipped{border-left-color:var(--ion-color-medium, #92949c)}.import-row--error{border-left-color:var(--ion-color-danger, #c0392b)}.import-row__email{font-weight:600;color:var(--ion-color-dark)}.import-row__status{text-align:right;color:var(--ion-color-medium-shade, #6b6e76)}.import-row__reason{grid-column:1 / -1;font-size:12px;color:var(--ion-color-danger, #c0392b)}\n"] }]
+  `, styles: ["val-display{display:block;margin-bottom:4px}val-title{display:block;margin-bottom:8px}.import-roles-hint{display:block;margin-bottom:24px}.import-section{margin-bottom:28px}.import-section val-title{margin-bottom:10px}.import-method-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px}.import-method-card{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:14px 16px;border:1.5px solid var(--ion-color-light-shade, #d7d8da);border-radius:12px;background:var(--ion-color-light);cursor:pointer;text-align:left;transition:border-color .15s ease,background .15s ease}.import-method-card:hover{border-color:var(--ion-color-medium, #92949c)}.import-method-card--active{border-color:var(--ion-color-primary, #7026df);background:color-mix(in srgb,var(--ion-color-primary, #7026df) 6%,var(--ion-color-light))}.import-method-card__icon{font-size:1.375rem;color:var(--ion-color-medium-shade, #6b6e76);margin-bottom:4px}.import-method-card--active .import-method-card__icon{color:var(--ion-color-primary, #7026df)}.import-method-card__title{font-size:.875rem;font-weight:600;color:var(--ion-color-dark)}.import-method-card__hint{font-size:.75rem;color:var(--ion-color-medium, #92949c);line-height:1.3}.import-upload__btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid var(--ion-color-medium, #92949c);border-radius:10px;background:var(--ion-color-light);color:var(--ion-color-dark);font-size:.875rem;font-weight:600;cursor:pointer;transition:border-color .15s ease}.import-upload__btn:hover{border-color:var(--ion-color-primary, #7026df)}.import-upload__btn ion-icon{font-size:1.25rem}.import-upload__btn input[type=file]{display:none}.import-file-loaded{margin:10px 0 0;font-size:.8125rem;color:var(--ion-color-medium-shade, #6b6e76)}.import-csv{--background: var(--ion-color-light);border-radius:10px;font-family:monospace;font-size:.8125rem}.import-error{margin:0 0 12px;font-size:.875rem;color:var(--ion-color-danger, #c0392b)}.import-actions{margin-top:8px}.import-results{display:flex;flex-direction:column;gap:6px;margin:12px 0}.import-row{display:grid;grid-template-columns:1fr auto;grid-row-gap:2px;align-items:center;padding:10px 12px;border-radius:8px;border-left:3px solid var(--ion-color-medium);background:var(--ion-color-light);font-size:.875rem}.import-row--created{border-left-color:var(--ion-color-success, #2dd36f)}.import-row--assigned{border-left-color:var(--ion-color-primary, #7026df)}.import-row--skipped{border-left-color:var(--ion-color-medium, #92949c)}.import-row--error{border-left-color:var(--ion-color-danger, #c0392b)}.import-row__email{font-weight:600;color:var(--ion-color-dark)}.import-row__status{text-align:right;color:var(--ion-color-medium-shade, #6b6e76)}.import-row__reason{grid-column:1 / -1;font-size:.75rem;color:var(--ion-color-danger, #c0392b)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { orgId: [{
                 type: Input
             }], availableRoles: [{