valtech-components 2.0.1030 → 2.0.1032

package/fesm2022/valtech-components.mjs

@@ -25,7 +25,7 @@ import { getApps, getApp, initializeApp as initializeApp$1 } from 'firebase/app'
 import * as i2$1 from '@ionic/angular/standalone';
 import { AlertController, IonAvatar, IonCard, IonIcon, IonButton, IonSpinner, IonText, IonModal, IonHeader, IonToolbar, IonContent, IonButtons, IonTitle, IonProgressBar, IonSkeletonText, IonFab, IonFabButton, IonFabList, IonLabel, IonCardContent, IonCardHeader, IonCardTitle, IonCardSubtitle, IonCheckbox, IonTextarea, IonDatetime, IonInput, IonSelect, IonSelectOption, IonPopover, IonList, IonItem, IonRadioGroup, IonRadio, IonRange, IonSearchbar, IonSegment, IonSegmentButton, IonToggle, IonRippleEffect, IonAccordion, IonAccordionGroup, IonTabBar, IonTabButton, IonBadge, IonBreadcrumb, IonBreadcrumbs, IonChip, IonNote, IonDatetimeButton, ToastController as ToastController$1, IonCol, IonRow, IonRefresher, IonRefresherContent, IonMenuButton, IonFooter, IonListHeader, IonInfiniteScroll, IonInfiniteScrollContent, IonGrid, MenuController, IonMenu, IonMenuToggle, IonSplitPane } from '@ionic/angular/standalone';
 import { addIcons } from 'ionicons';
-import { addOutline, addCircleOutline, alertOutline, alertCircleOutline, arrowBackOutline, arrowForwardOutline, arrowDownOutline, settings, settingsOutline, checkmarkCircleOutline, ellipsisHorizontalOutline, notifications, notificationsOutline, openOutline, closeOutline, chatbubblesOutline, shareOutline, heart, heartOutline, home, homeOutline, eyeOffOutline, eyeOutline, scanOutline, chevronDownOutline, chevronForwardOutline, checkmarkOutline, clipboardOutline, copyOutline, filterOutline, locationOutline, calendarOutline, businessOutline, logoTwitter, logoInstagram, logoLinkedin, logoYoutube, logoTiktok, logoFacebook, logoGoogle, createOutline, trashOutline, playOutline, peopleOutline, phonePortraitOutline, refreshOutline, documentTextOutline, lockClosedOutline, informationCircleOutline, logoNpm, removeOutline, optionsOutline, personOutline, shieldCheckmarkOutline, keyOutline, desktopOutline, logOutOutline, cloudDownloadOutline, cloudOutline, gitBranchOutline, layersOutline, serverOutline, warningOutline, bulbOutline, lockOpenOutline, diamondOutline, add, close, share, create, trash, star, camera, mic, send, downloadOutline, chevronDown, language, globeOutline, checkmark, list, grid, apps, menu, search, person, helpCircle, informationCircle, documentText, mail, calendar, folder, chevronForward, ellipsisHorizontal, chevronBack, playBack, playForward, ellipse, starOutline, starHalf, heartHalf, checkmarkCircle, timeOutline, flag, trendingUp, trendingDown, remove, analytics, people, cash, cart, eye, chatbubbleOutline, thumbsUpOutline, thumbsUp, happyOutline, happy, sadOutline, sad, chevronUp, pin, pencil, callOutline, logoWhatsapp, paperPlaneOutline, mailOutline, chevronDownCircleOutline, closeCircle, alertCircle, logoApple, logoMicrosoft, linkOutline, unlinkOutline, cloudOfflineOutline, documentOutline, attachOutline, cameraOutline, closeCircleOutline, imageOutline, chevronBackOutline, sendOutline, chatbubbleEllipsesOutline, swapVerticalOutline, chevronUpOutline, searchOutline, cartOutline, chatbubble, compass, compassOutline, gridOutline, listOutline, folderOutline, documents, documentsOutline, statsChart, statsChartOutline, laptopOutline, swapHorizontalOutline, notificationsOffOutline, alarmOutline, chatboxEllipsesOutline, checkmarkDoneOutline, cogOutline, shareSocialOutline, helpCircleOutline, menuOutline, stopCircleOutline, videocamOffOutline } from 'ionicons/icons';
+import { addOutline, addCircleOutline, alertOutline, alertCircleOutline, arrowBackOutline, arrowForwardOutline, arrowDownOutline, settings, settingsOutline, checkmarkCircleOutline, ellipsisHorizontalOutline, notifications, notificationsOutline, openOutline, closeOutline, chatbubblesOutline, shareOutline, heart, heartOutline, home, homeOutline, eyeOffOutline, eyeOutline, scanOutline, chevronDownOutline, chevronForwardOutline, checkmarkOutline, clipboardOutline, copyOutline, filterOutline, locationOutline, calendarOutline, businessOutline, logoTwitter, logoInstagram, logoLinkedin, logoYoutube, logoTiktok, logoFacebook, logoGoogle, createOutline, trashOutline, playOutline, peopleOutline, phonePortraitOutline, refreshOutline, documentTextOutline, lockClosedOutline, informationCircleOutline, logoNpm, removeOutline, optionsOutline, personOutline, shieldCheckmarkOutline, keyOutline, desktopOutline, logOutOutline, cloudDownloadOutline, cloudOutline, gitBranchOutline, layersOutline, serverOutline, warningOutline, bulbOutline, lockOpenOutline, diamondOutline, add, close, share, create, trash, star, camera, mic, send, downloadOutline, chevronDown, language, globeOutline, checkmark, list, grid, apps, menu, search, person, helpCircle, informationCircle, documentText, mail, calendar, folder, chevronForward, ellipsisHorizontal, chevronBack, playBack, playForward, ellipse, starOutline, starHalf, heartHalf, checkmarkCircle, timeOutline, flag, trendingUp, trendingDown, remove, analytics, people, cash, cart, eye, chatbubbleOutline, thumbsUpOutline, thumbsUp, happyOutline, happy, sadOutline, sad, chevronUp, pin, pencil, callOutline, logoWhatsapp, paperPlaneOutline, mailOutline, chevronDownCircleOutline, closeCircle, alertCircle, logoApple, logoMicrosoft, linkOutline, unlinkOutline, cloudOfflineOutline, documentOutline, attachOutline, cameraOutline, closeCircleOutline, imageOutline, chevronBackOutline, sendOutline, chatbubbleEllipsesOutline, swapVerticalOutline, chevronUpOutline, searchOutline, cartOutline, chatbubble, compass, compassOutline, gridOutline, listOutline, folderOutline, documents, documentsOutline, statsChart, statsChartOutline, laptopOutline, swapHorizontalOutline, cloudUploadOutline, notificationsOffOutline, alarmOutline, chatboxEllipsesOutline, checkmarkDoneOutline, cogOutline, shareSocialOutline, helpCircleOutline, menuOutline, stopCircleOutline, videocamOffOutline } from 'ionicons/icons';
 import { Browser } from '@capacitor/browser';
 import * as i1$6 from '@angular/platform-browser';
 import { DomSanitizer, Meta, Title } from '@angular/platform-browser';
@@ -55,7 +55,7 @@ import { BrowserMultiFormatReader } from '@zxing/browser';
  * Current version of valtech-components.
  * This is automatically updated during the publish process.
  */
-const VERSION = '2.0.1030';
+const VERSION = '2.0.1032';
 
 // Control de estado de refresco (singleton a nivel de módulo)
 let isRefreshing = false;
@@ -49233,6 +49233,10 @@ const MEMBER_IMPORT_MODAL_I18N = {
         title: 'Importar miembros',
         hint: 'Pega un CSV con columnas: email, nombre, rol (una fila por persona).',
         csvPlaceholder: 'email,nombre,rol\nana@x.com,Ana,editor\nbeto@x.com,Beto,viewer',
+        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',
         conflictAssign: 'Asignar el rol',
@@ -49261,6 +49265,10 @@ const MEMBER_IMPORT_MODAL_I18N = {
         title: 'Import members',
         hint: 'Paste a CSV with columns: email, name, role (one row per person).',
         csvPlaceholder: 'email,name,role\nana@x.com,Ana,editor\nbeto@x.com,Beto,viewer',
+        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',
         conflictAssign: 'Assign the role',
@@ -49288,6 +49296,7 @@ const MEMBER_IMPORT_MODAL_I18N = {
 };
 
 const DEFAULT_NAMESPACE$8 = 'Settings.ImportModal';
+addIcons({ cloudUploadOutline });
 /**
  * `val-member-import-modal` — panel de carga masiva de miembros (ADR-023 fase 6).
  *
@@ -49313,6 +49322,8 @@ class MemberImportModalComponent {
         this.submitting = signal(false);
         this.errorMsg = signal('');
         this.results = signal(null);
+        /** Nombre del archivo CSV cargado (vacío si se pegó manualmente). */
+        this.fileName = signal('');
         this.rolesHint = computed(() => this.availableRoles.length ? `${this.t('rolesAvailable')} ${this.availableRoles.join(', ')}` : '');
         this.summaryLabel = computed(() => {
             const s = this.results()?.summary;
@@ -49329,6 +49340,23 @@ class MemberImportModalComponent {
             this.i18n.registerContent(this.i18nNamespace, MEMBER_IMPORT_MODAL_I18N);
         }
     }
+    /** Carga un archivo CSV seleccionado: lee su texto al textarea (`csv`). */
+    onFileSelected(event) {
+        const input = event.target;
+        const file = input.files?.[0];
+        if (!file)
+            return;
+        this.errorMsg.set('');
+        const reader = new FileReader();
+        reader.onload = () => {
+            this.csv = String(reader.result ?? '');
+            this.fileName.set(file.name);
+        };
+        reader.onerror = () => this.errorMsg.set(this.t('fileReadError'));
+        reader.readAsText(file);
+        // Permite re-seleccionar el mismo archivo (el change no dispara si no se limpia).
+        input.value = '';
+    }
     /** Parsea el CSV pegado a filas {email,name,roleName}. Tolera header. */
     parseCsv() {
         const rows = [];
@@ -49387,6 +49415,7 @@ class MemberImportModalComponent {
     }
     reset() {
         this.csv = '';
+        this.fileName.set('');
         this.errorMsg.set('');
         this.results.set(null);
     }
@@ -49418,6 +49447,23 @@ class MemberImportModalComponent {
           <val-text [props]="{ content: rolesHint(), size: 'small', color: 'medium', bold: false }" />
         }
 
+        <!-- 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>
+        </div>
+
+        @if (fileName()) {
+          <p class="import-file-loaded">
+            {{ t('fileLoaded').replace('{name}', fileName()) }}
+          </p>
+        }
+
         <ion-textarea
           class="import-csv"
           [autoGrow]="true"
@@ -49426,17 +49472,19 @@ class MemberImportModalComponent {
           [(ngModel)]="csv"
         />
 
-        <ion-select
-          class="import-conflict"
-          label="{{ t('onConflictLabel') }}"
-          labelPlacement="stacked"
-          interface="popover"
-          [(ngModel)]="onConflict"
-        >
-          <ion-select-option value="assignRole">{{ t('conflictAssign') }}</ion-select-option>
-          <ion-select-option value="skip">{{ t('conflictSkip') }}</ion-select-option>
-          <ion-select-option value="error">{{ t('conflictError') }}</ion-select-option>
-        </ion-select>
+        <div class="import-conflict-box">
+          <ion-select
+            class="import-conflict"
+            label="{{ t('onConflictLabel') }}"
+            labelPlacement="stacked"
+            interface="popover"
+            [(ngModel)]="onConflict"
+          >
+            <ion-select-option value="assignRole">{{ t('conflictAssign') }}</ion-select-option>
+            <ion-select-option value="skip">{{ t('conflictSkip') }}</ion-select-option>
+            <ion-select-option value="error">{{ t('conflictError') }}</ion-select-option>
+          </ion-select>
+        </div>
 
         <ion-checkbox class="import-activation" labelPlacement="end" [(ngModel)]="sendActivation">
           {{ t('sendActivation') }}
@@ -49477,7 +49525,7 @@ class MemberImportModalComponent {
         </div>
       }
     </ion-content>
-  `, isInline: true, styles: ["val-display{display:block;margin-bottom:4px}val-title{display:block;margin-bottom:12px}.import-csv{--background: var(--ion-color-light);border-radius:10px;margin-bottom:16px;font-family:monospace;font-size:13px}.import-conflict{margin-bottom:12px}.import-activation{display:block;margin-bottom:16px;font-size:14px}.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: "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: IonSelect, selector: "ion-select", inputs: ["cancelText", "color", "compareWith", "disabled", "errorText", "expandedIcon", "fill", "helperText", "interface", "interfaceOptions", "justify", "label", "labelPlacement", "mode", "multiple", "name", "okText", "placeholder", "selectedText", "shape", "toggleIcon", "value"] }, { kind: "component", type: IonSelectOption, selector: "ion-select-option", inputs: ["disabled", "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}.import-upload{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:12px}.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 12px;font-size:.8125rem;color:var(--ion-color-medium-shade, #6b6e76)}.import-csv{--background: var(--ion-color-light);border-radius:10px;margin-bottom:16px;font-family:monospace;font-size:.8125rem}.import-conflict-box{border:1px solid var(--ion-color-medium, #92949c);border-radius:10px;background:var(--ion-color-light);padding:4px 12px;margin-bottom:16px}.import-conflict{--background: transparent;width:100%}.import-activation{display:block;margin-bottom:16px;font-size:14px}.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: "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: IonSelect, selector: "ion-select", inputs: ["cancelText", "color", "compareWith", "disabled", "errorText", "expandedIcon", "fill", "helperText", "interface", "interfaceOptions", "justify", "label", "labelPlacement", "mode", "multiple", "name", "okText", "placeholder", "selectedText", "shape", "toggleIcon", "value"] }, { kind: "component", type: IonSelectOption, selector: "ion-select-option", inputs: ["disabled", "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: 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MemberImportModalComponent, decorators: [{
             type: Component,
@@ -49493,6 +49541,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         IonSelectOption,
                         IonCheckbox,
                         IonSpinner,
+                        IonIcon,
                         DisplayComponent,
                         TextComponent,
                         TitleComponent,
@@ -49517,6 +49566,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
           <val-text [props]="{ content: rolesHint(), size: 'small', color: 'medium', bold: false }" />
         }
 
+        <!-- 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>
+        </div>
+
+        @if (fileName()) {
+          <p class="import-file-loaded">
+            {{ t('fileLoaded').replace('{name}', fileName()) }}
+          </p>
+        }
+
         <ion-textarea
           class="import-csv"
           [autoGrow]="true"
@@ -49525,17 +49591,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
           [(ngModel)]="csv"
         />
 
-        <ion-select
-          class="import-conflict"
-          label="{{ t('onConflictLabel') }}"
-          labelPlacement="stacked"
-          interface="popover"
-          [(ngModel)]="onConflict"
-        >
-          <ion-select-option value="assignRole">{{ t('conflictAssign') }}</ion-select-option>
-          <ion-select-option value="skip">{{ t('conflictSkip') }}</ion-select-option>
-          <ion-select-option value="error">{{ t('conflictError') }}</ion-select-option>
-        </ion-select>
+        <div class="import-conflict-box">
+          <ion-select
+            class="import-conflict"
+            label="{{ t('onConflictLabel') }}"
+            labelPlacement="stacked"
+            interface="popover"
+            [(ngModel)]="onConflict"
+          >
+            <ion-select-option value="assignRole">{{ t('conflictAssign') }}</ion-select-option>
+            <ion-select-option value="skip">{{ t('conflictSkip') }}</ion-select-option>
+            <ion-select-option value="error">{{ t('conflictError') }}</ion-select-option>
+          </ion-select>
+        </div>
 
         <ion-checkbox class="import-activation" labelPlacement="end" [(ngModel)]="sendActivation">
           {{ t('sendActivation') }}
@@ -49576,7 +49644,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:12px}.import-csv{--background: var(--ion-color-light);border-radius:10px;margin-bottom:16px;font-family:monospace;font-size:13px}.import-conflict{margin-bottom:12px}.import-activation{display:block;margin-bottom:16px;font-size:14px}.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:12px}.import-upload{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:12px}.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 12px;font-size:.8125rem;color:var(--ion-color-medium-shade, #6b6e76)}.import-csv{--background: var(--ion-color-light);border-radius:10px;margin-bottom:16px;font-family:monospace;font-size:.8125rem}.import-conflict-box{border:1px solid var(--ion-color-medium, #92949c);border-radius:10px;background:var(--ion-color-light);padding:4px 12px;margin-bottom:16px}.import-conflict{--background: transparent;width:100%}.import-activation{display:block;margin-bottom:16px;font-size:14px}.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"] }]
         }], ctorParameters: () => [], propDecorators: { orgId: [{
                 type: Input
             }], availableRoles: [{