@dataclouder/ngx-agent-cards 0.2.11 → 0.2.12

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.
@@ -239,6 +239,7 @@ var EAccountsPlatform;
239
239
  EAccountsPlatform["Tiktok"] = "tiktok";
240
240
  EAccountsPlatform["Instagram"] = "instagram";
241
241
  EAccountsPlatform["Youtube"] = "youtube";
242
+ EAccountsPlatform["Facebook"] = "facebook";
242
243
  })(EAccountsPlatform || (EAccountsPlatform = {}));
243
244
  class WordTimestamps {
244
245
  constructor() {
@@ -7370,66 +7371,93 @@ class AccountPlatformForm {
7370
7371
  this.fb = inject(FormBuilder);
7371
7372
  this.router = inject(Router);
7372
7373
  this.toastService = inject(TOAST_ALERTS_TOKEN);
7374
+ this.cdr = inject(ChangeDetectorRef);
7373
7375
  // Format the platform options for dropdown display
7374
7376
  this.platformOptions = Object.values(EAccountsPlatform).map((value) => ({
7375
7377
  label: value.charAt(0).toUpperCase() + value.slice(1), // Capitalize first letter
7376
7378
  value: value,
7377
7379
  }));
7380
+ this.authMethodOptions = [
7381
+ { label: 'Google OAuth', value: 'google' },
7382
+ { label: 'Otro / Contraseña', value: 'other' }
7383
+ ];
7378
7384
  this.genericId = this.route.snapshot.params['id'];
7385
+ // Keep track of which indexes are expanded. By default, all are minimized (empty Set).
7386
+ this.expandedIndexes = new Set();
7379
7387
  }
7380
7388
  async ngOnInit() {
7381
7389
  // Initialize the form if not provided as input
7382
7390
  if (!this.formArray) {
7383
7391
  this.formArray = this.fb.array([]);
7384
7392
  }
7385
- else {
7386
- this.formArray.push(this.fb.group({
7387
- name: [''],
7388
- platform: [''],
7389
- email: [''],
7390
- }));
7391
- }
7393
+ // Force initial change detection
7394
+ this.cdr.markForCheck();
7395
+ // Force change detection when the FormArray's structure or values change asynchronously
7396
+ this.formArray.valueChanges.subscribe(() => {
7397
+ this.cdr.markForCheck();
7398
+ });
7392
7399
  }
7393
- async save() {
7394
- if (this.formArray.valid) {
7395
- try {
7396
- // Add your save logic here
7397
- const formData = {
7398
- ...this.formArray.value,
7399
- };
7400
- console.log('Form data to save:', formData);
7401
- const successToast = {
7402
- title: 'Success',
7403
- subtitle: 'Form saved successfully',
7404
- };
7405
- this.toastService.success(successToast);
7406
- // Navigate back or to a specific route after saving
7407
- this.router.navigate(['../'], { relativeTo: this.route });
7400
+ createAccountFormGroup(account) {
7401
+ return this.fb.group({
7402
+ platform: [account?.platform || EAccountsPlatform.Google],
7403
+ user: [account?.user || ''],
7404
+ email: [account?.email || ''],
7405
+ authMethod: [account?.authMethod || 'google'],
7406
+ pass: [account?.pass || ''],
7407
+ });
7408
+ }
7409
+ addAccount() {
7410
+ const newIndex = this.formArray.length;
7411
+ this.formArray.push(this.createAccountFormGroup());
7412
+ // Auto expand newly added accounts
7413
+ this.expandedIndexes.add(newIndex);
7414
+ this.formArray.markAsDirty();
7415
+ this.cdr.markForCheck();
7416
+ }
7417
+ removeAccount(index, event) {
7418
+ if (event) {
7419
+ event.stopPropagation();
7420
+ }
7421
+ this.formArray.removeAt(index);
7422
+ this.expandedIndexes.delete(index);
7423
+ // Adjust set of expanded indexes to account for index shift
7424
+ const newExpanded = new Set();
7425
+ this.expandedIndexes.forEach((idx) => {
7426
+ if (idx > index) {
7427
+ newExpanded.add(idx - 1);
7408
7428
  }
7409
- catch (error) {
7410
- console.error('Error saving form:', error);
7411
- const errorToast = {
7412
- title: 'Error',
7413
- subtitle: 'Error saving form',
7414
- };
7415
- this.toastService.error(errorToast);
7429
+ else if (idx < index) {
7430
+ newExpanded.add(idx);
7416
7431
  }
7432
+ });
7433
+ this.expandedIndexes = newExpanded;
7434
+ this.formArray.markAsDirty();
7435
+ this.cdr.markForCheck();
7436
+ }
7437
+ toggleExpand(index, event) {
7438
+ if (event) {
7439
+ event.stopPropagation();
7440
+ }
7441
+ if (this.expandedIndexes.has(index)) {
7442
+ this.expandedIndexes.delete(index);
7417
7443
  }
7418
7444
  else {
7419
- this.formArray.markAllAsTouched();
7420
- const infoToast = {
7421
- title: 'Warning',
7422
- subtitle: 'Please fill all required fields',
7423
- };
7424
- this.toastService.warn(infoToast);
7445
+ this.expandedIndexes.add(index);
7425
7446
  }
7447
+ this.cdr.markForCheck();
7448
+ }
7449
+ isExpanded(index) {
7450
+ return this.expandedIndexes.has(index);
7451
+ }
7452
+ getPlatformLabel(value) {
7453
+ return value ? value.charAt(0).toUpperCase() + value.slice(1) : 'Plataforma';
7426
7454
  }
7427
7455
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: AccountPlatformForm, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
7428
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: AccountPlatformForm, isStandalone: true, selector: "account-platform-form", inputs: { formArray: "formArray" }, ngImport: i0, template: "<div class=\"source-form-card\">\n <p-card header=\"Cuenta\">\n @for (formAccount of formArray.controls; track formAccount) {\n <form [formGroup]=\"$any(formAccount)\">\n <div class=\"form-field\">\n <label class=\"block\">Platform</label>\n <p-select [options]=\"platformOptions\" formControlName=\"platform\" optionLabel=\"label\" optionValue=\"value\" placeholder=\"Select a platform\"></p-select>\n </div>\n\n <div class=\"form-field\">\n <label for=\"name\" class=\"block\">Username</label>\n <input pInputText id=\"name\" type=\"text\" formControlName=\"name\" placeholder=\"Enter name\" class=\"w-full\" />\n </div>\n\n <div class=\"form-field\">\n <label class=\"block\">Email</label>\n <input pInputText type=\"text\" formControlName=\"email\" placeholder=\"Enter name\" class=\"w-full\" />\n </div>\n </form>\n }\n </p-card>\n</div>\n", styles: [":host{display:block;padding:1rem}.source-form-card{max-width:800px;margin:0 auto}.form-field{margin-bottom:1.5rem;display:flex;flex-direction:column}.form-field label{margin-bottom:.5rem;font-weight:500;color:#495057}.form-field input,.form-field textarea,.form-field ::ng-deep .p-element{margin-top:.25rem}:host ::ng-deep .p-card .p-card-content>div:last-child{margin-top:1.5rem;display:flex;justify-content:flex-end}:host ::ng-deep .p-card .p-card-header{background-color:#f8f9fa;padding:1rem;border-bottom:1px solid #dee2e6}h3{color:#495057;margin-bottom:1.5rem;text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i2$6.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i6.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$3.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: ChipModule }, { kind: "ngmodule", type: TooltipModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
7456
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: AccountPlatformForm, isStandalone: true, selector: "account-platform-form", inputs: { formArray: "formArray" }, ngImport: i0, template: "<div class=\"accounts-container\" style=\"display: flex; flex-direction: column; gap: 1rem;\">\n <div style=\"display: flex; justify-content: space-between; align-items: center;\">\n <span style=\"font-weight: 600; font-size: 1.1rem; color: var(--p-text-color);\">Cuentas Vinculadas</span>\n <p-button type=\"button\" severity=\"success\" icon=\"pi pi-plus\" label=\"Agregar cuenta\" (click)=\"addAccount()\"></p-button>\n </div>\n\n @if (formArray?.controls?.length === 0) {\n <div style=\"text-align: center; padding: 2rem; color: var(--p-text-muted-color); border: 1px dashed var(--p-content-border-color); border-radius: 6px;\">\n <i class=\"pi pi-info-circle\" style=\"font-size: 1.5rem; margin-bottom: 0.5rem; display: block;\"></i>\n No hay cuentas vinculadas. Presiona \"Agregar cuenta\" para registrar una.\n </div>\n } @else {\n <div style=\"display: flex; flex-direction: column; gap: 0.75rem;\">\n @for (formAccount of formArray.controls; track formAccount; let idx = $index) {\n <div \n [style.border]=\"'1px solid var(--p-content-border-color)'\" \n [style.borderRadius]=\"'6px'\"\n [style.backgroundColor]=\"'var(--p-content-background)'\"\n [style.overflow]=\"'hidden'\"\n [style.transition]=\"'all 0.2s ease'\">\n \n <!-- Compact Row Header (Always visible, click to toggle) -->\n <div \n (click)=\"toggleExpand(idx)\" \n style=\"display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; cursor: pointer; background-color: var(--p-content-background); transition: background-color 0.15s;\"\n [style.borderBottom]=\"isExpanded(idx) ? '1px solid var(--p-content-border-color)' : 'none'\"\n class=\"hover:bg-muted-light\">\n \n <div style=\"display: flex; align-items: center; gap: 0.75rem;\">\n <i class=\"pi\" [class.pi-chevron-right]=\"!isExpanded(idx)\" [class.pi-chevron-down]=\"isExpanded(idx)\" style=\"font-size: 0.85rem; color: var(--p-text-muted-color);\"></i>\n \n <!-- Badge/Chip for Platform -->\n <span \n [style.fontWeight]=\"'600'\" \n [style.fontSize]=\"'0.95rem'\"\n [style.color]=\"'var(--p-primary-color)'\">\n {{ getPlatformLabel(formAccount.get('platform')?.value) }}\n </span>\n\n <!-- Muted details -->\n @if (formAccount.get('user')?.value || formAccount.get('email')?.value) {\n <span style=\"font-size: 0.85rem; color: var(--p-text-muted-color);\">\n \u2014 {{ formAccount.get('user')?.value || formAccount.get('email')?.value }}\n </span>\n }\n </div>\n\n <!-- Actions -->\n <div style=\"display: flex; align-items: center; gap: 0.5rem;\" (click)=\"$event.stopPropagation()\">\n <p-button \n type=\"button\" \n severity=\"danger\" \n [text]=\"true\" \n icon=\"pi pi-trash\" \n pTooltip=\"Eliminar cuenta\" \n (click)=\"removeAccount(idx, $event)\">\n </p-button>\n </div>\n </div>\n\n <!-- Expanded Body (Only visible if expanded) -->\n @if (isExpanded(idx)) {\n <div style=\"padding: 1.25rem; background-color: var(--p-content-background);\">\n <form [formGroup]=\"$any(formAccount)\" style=\"display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem;\">\n <div class=\"form-field\" style=\"display: flex; flex-direction: column; gap: 0.25rem;\">\n <label style=\"font-weight: 500; font-size: 0.85rem;\">Plataforma</label>\n <p-select [options]=\"platformOptions\" formControlName=\"platform\" optionLabel=\"label\" optionValue=\"value\" placeholder=\"Selecciona una plataforma\" styleClass=\"w-full\"></p-select>\n </div>\n\n <div class=\"form-field\" style=\"display: flex; flex-direction: column; gap: 0.25rem;\">\n <label style=\"font-weight: 500; font-size: 0.85rem;\">Usuario</label>\n <input pInputText type=\"text\" formControlName=\"user\" placeholder=\"Nombre de usuario\" class=\"w-full\" />\n </div>\n\n <div class=\"form-field\" style=\"display: flex; flex-direction: column; gap: 0.25rem;\">\n <label style=\"font-weight: 500; font-size: 0.85rem;\">Correo Electr\u00F3nico</label>\n <input pInputText type=\"email\" formControlName=\"email\" placeholder=\"ejemplo@correo.com\" class=\"w-full\" />\n </div>\n\n <div class=\"form-field\" style=\"display: flex; flex-direction: column; gap: 0.25rem;\">\n <label style=\"font-weight: 500; font-size: 0.85rem;\">M\u00E9todo de Autenticaci\u00F3n</label>\n <p-select [options]=\"authMethodOptions\" formControlName=\"authMethod\" optionLabel=\"label\" optionValue=\"value\" placeholder=\"Selecciona un m\u00E9todo\" styleClass=\"w-full\"></p-select>\n </div>\n\n <div class=\"form-field\" style=\"display: flex; flex-direction: column; gap: 0.25rem;\">\n <label style=\"font-weight: 500; font-size: 0.85rem;\">Contrase\u00F1a / Token</label>\n <input pInputText type=\"password\" formControlName=\"pass\" placeholder=\"Ingresa la contrase\u00F1a\" class=\"w-full\" />\n </div>\n </form>\n </div>\n }\n </div>\n }\n </div>\n }\n</div>\n", styles: [":host{display:block;padding:1rem}.source-form-card{max-width:800px;margin:0 auto}.form-field{margin-bottom:1.5rem;display:flex;flex-direction:column}.form-field label{margin-bottom:.5rem;font-weight:500;color:#495057}.form-field input,.form-field textarea,.form-field ::ng-deep .p-element{margin-top:.25rem}:host ::ng-deep .p-card .p-card-content>div:last-child{margin-top:1.5rem;display:flex;justify-content:flex-end}:host ::ng-deep .p-card .p-card-header{background-color:#f8f9fa;padding:1rem;border-bottom:1px solid #dee2e6}h3{color:#495057;margin-bottom:1.5rem;text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CardModule }, { kind: "ngmodule", type: TextareaModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i6.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$3.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: ChipModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i5.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
7429
7457
  }
7430
7458
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: AccountPlatformForm, decorators: [{
7431
7459
  type: Component,
7432
- args: [{ selector: 'account-platform-form', imports: [ReactiveFormsModule, CardModule, TextareaModule, ButtonModule, SelectModule, InputTextModule, ChipModule, TooltipModule], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"source-form-card\">\n <p-card header=\"Cuenta\">\n @for (formAccount of formArray.controls; track formAccount) {\n <form [formGroup]=\"$any(formAccount)\">\n <div class=\"form-field\">\n <label class=\"block\">Platform</label>\n <p-select [options]=\"platformOptions\" formControlName=\"platform\" optionLabel=\"label\" optionValue=\"value\" placeholder=\"Select a platform\"></p-select>\n </div>\n\n <div class=\"form-field\">\n <label for=\"name\" class=\"block\">Username</label>\n <input pInputText id=\"name\" type=\"text\" formControlName=\"name\" placeholder=\"Enter name\" class=\"w-full\" />\n </div>\n\n <div class=\"form-field\">\n <label class=\"block\">Email</label>\n <input pInputText type=\"text\" formControlName=\"email\" placeholder=\"Enter name\" class=\"w-full\" />\n </div>\n </form>\n }\n </p-card>\n</div>\n", styles: [":host{display:block;padding:1rem}.source-form-card{max-width:800px;margin:0 auto}.form-field{margin-bottom:1.5rem;display:flex;flex-direction:column}.form-field label{margin-bottom:.5rem;font-weight:500;color:#495057}.form-field input,.form-field textarea,.form-field ::ng-deep .p-element{margin-top:.25rem}:host ::ng-deep .p-card .p-card-content>div:last-child{margin-top:1.5rem;display:flex;justify-content:flex-end}:host ::ng-deep .p-card .p-card-header{background-color:#f8f9fa;padding:1rem;border-bottom:1px solid #dee2e6}h3{color:#495057;margin-bottom:1.5rem;text-align:center}\n"] }]
7460
+ args: [{ selector: 'account-platform-form', imports: [ReactiveFormsModule, CardModule, TextareaModule, ButtonModule, SelectModule, InputTextModule, ChipModule, TooltipModule], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"accounts-container\" style=\"display: flex; flex-direction: column; gap: 1rem;\">\n <div style=\"display: flex; justify-content: space-between; align-items: center;\">\n <span style=\"font-weight: 600; font-size: 1.1rem; color: var(--p-text-color);\">Cuentas Vinculadas</span>\n <p-button type=\"button\" severity=\"success\" icon=\"pi pi-plus\" label=\"Agregar cuenta\" (click)=\"addAccount()\"></p-button>\n </div>\n\n @if (formArray?.controls?.length === 0) {\n <div style=\"text-align: center; padding: 2rem; color: var(--p-text-muted-color); border: 1px dashed var(--p-content-border-color); border-radius: 6px;\">\n <i class=\"pi pi-info-circle\" style=\"font-size: 1.5rem; margin-bottom: 0.5rem; display: block;\"></i>\n No hay cuentas vinculadas. Presiona \"Agregar cuenta\" para registrar una.\n </div>\n } @else {\n <div style=\"display: flex; flex-direction: column; gap: 0.75rem;\">\n @for (formAccount of formArray.controls; track formAccount; let idx = $index) {\n <div \n [style.border]=\"'1px solid var(--p-content-border-color)'\" \n [style.borderRadius]=\"'6px'\"\n [style.backgroundColor]=\"'var(--p-content-background)'\"\n [style.overflow]=\"'hidden'\"\n [style.transition]=\"'all 0.2s ease'\">\n \n <!-- Compact Row Header (Always visible, click to toggle) -->\n <div \n (click)=\"toggleExpand(idx)\" \n style=\"display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; cursor: pointer; background-color: var(--p-content-background); transition: background-color 0.15s;\"\n [style.borderBottom]=\"isExpanded(idx) ? '1px solid var(--p-content-border-color)' : 'none'\"\n class=\"hover:bg-muted-light\">\n \n <div style=\"display: flex; align-items: center; gap: 0.75rem;\">\n <i class=\"pi\" [class.pi-chevron-right]=\"!isExpanded(idx)\" [class.pi-chevron-down]=\"isExpanded(idx)\" style=\"font-size: 0.85rem; color: var(--p-text-muted-color);\"></i>\n \n <!-- Badge/Chip for Platform -->\n <span \n [style.fontWeight]=\"'600'\" \n [style.fontSize]=\"'0.95rem'\"\n [style.color]=\"'var(--p-primary-color)'\">\n {{ getPlatformLabel(formAccount.get('platform')?.value) }}\n </span>\n\n <!-- Muted details -->\n @if (formAccount.get('user')?.value || formAccount.get('email')?.value) {\n <span style=\"font-size: 0.85rem; color: var(--p-text-muted-color);\">\n \u2014 {{ formAccount.get('user')?.value || formAccount.get('email')?.value }}\n </span>\n }\n </div>\n\n <!-- Actions -->\n <div style=\"display: flex; align-items: center; gap: 0.5rem;\" (click)=\"$event.stopPropagation()\">\n <p-button \n type=\"button\" \n severity=\"danger\" \n [text]=\"true\" \n icon=\"pi pi-trash\" \n pTooltip=\"Eliminar cuenta\" \n (click)=\"removeAccount(idx, $event)\">\n </p-button>\n </div>\n </div>\n\n <!-- Expanded Body (Only visible if expanded) -->\n @if (isExpanded(idx)) {\n <div style=\"padding: 1.25rem; background-color: var(--p-content-background);\">\n <form [formGroup]=\"$any(formAccount)\" style=\"display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem;\">\n <div class=\"form-field\" style=\"display: flex; flex-direction: column; gap: 0.25rem;\">\n <label style=\"font-weight: 500; font-size: 0.85rem;\">Plataforma</label>\n <p-select [options]=\"platformOptions\" formControlName=\"platform\" optionLabel=\"label\" optionValue=\"value\" placeholder=\"Selecciona una plataforma\" styleClass=\"w-full\"></p-select>\n </div>\n\n <div class=\"form-field\" style=\"display: flex; flex-direction: column; gap: 0.25rem;\">\n <label style=\"font-weight: 500; font-size: 0.85rem;\">Usuario</label>\n <input pInputText type=\"text\" formControlName=\"user\" placeholder=\"Nombre de usuario\" class=\"w-full\" />\n </div>\n\n <div class=\"form-field\" style=\"display: flex; flex-direction: column; gap: 0.25rem;\">\n <label style=\"font-weight: 500; font-size: 0.85rem;\">Correo Electr\u00F3nico</label>\n <input pInputText type=\"email\" formControlName=\"email\" placeholder=\"ejemplo@correo.com\" class=\"w-full\" />\n </div>\n\n <div class=\"form-field\" style=\"display: flex; flex-direction: column; gap: 0.25rem;\">\n <label style=\"font-weight: 500; font-size: 0.85rem;\">M\u00E9todo de Autenticaci\u00F3n</label>\n <p-select [options]=\"authMethodOptions\" formControlName=\"authMethod\" optionLabel=\"label\" optionValue=\"value\" placeholder=\"Selecciona un m\u00E9todo\" styleClass=\"w-full\"></p-select>\n </div>\n\n <div class=\"form-field\" style=\"display: flex; flex-direction: column; gap: 0.25rem;\">\n <label style=\"font-weight: 500; font-size: 0.85rem;\">Contrase\u00F1a / Token</label>\n <input pInputText type=\"password\" formControlName=\"pass\" placeholder=\"Ingresa la contrase\u00F1a\" class=\"w-full\" />\n </div>\n </form>\n </div>\n }\n </div>\n }\n </div>\n }\n</div>\n", styles: [":host{display:block;padding:1rem}.source-form-card{max-width:800px;margin:0 auto}.form-field{margin-bottom:1.5rem;display:flex;flex-direction:column}.form-field label{margin-bottom:.5rem;font-weight:500;color:#495057}.form-field input,.form-field textarea,.form-field ::ng-deep .p-element{margin-top:.25rem}:host ::ng-deep .p-card .p-card-content>div:last-child{margin-top:1.5rem;display:flex;justify-content:flex-end}:host ::ng-deep .p-card .p-card-header{background-color:#f8f9fa;padding:1rem;border-bottom:1px solid #dee2e6}h3{color:#495057;margin-bottom:1.5rem;text-align:center}\n"] }]
7433
7461
  }], propDecorators: { formArray: [{
7434
7462
  type: Input
7435
7463
  }] } });
@@ -7560,6 +7588,15 @@ class CharacterFormGroupService {
7560
7588
  });
7561
7589
  }
7562
7590
  }
7591
+ const accountsFormArray = form.get('accounts');
7592
+ if (accountsFormArray) {
7593
+ accountsFormArray.clear();
7594
+ if (agentCard.accounts?.length) {
7595
+ agentCard.accounts.forEach((account) => {
7596
+ accountsFormArray.push(this.createAccountFormGroup(account));
7597
+ });
7598
+ }
7599
+ }
7563
7600
  }
7564
7601
  createCharacterCardFormGroup(characterCard) {
7565
7602
  return this.fb.group({
@@ -7630,6 +7667,15 @@ class CharacterFormGroupService {
7630
7667
  accounts: this.fb.array([]),
7631
7668
  });
7632
7669
  }
7670
+ createAccountFormGroup(account) {
7671
+ return this.fb.group({
7672
+ platform: [account?.platform || 'google'],
7673
+ user: [account?.user || ''],
7674
+ email: [account?.email || ''],
7675
+ authMethod: [account?.authMethod || 'google'],
7676
+ pass: [account?.pass || ''],
7677
+ });
7678
+ }
7633
7679
  createModelFormGroup(model) {
7634
7680
  return this.fb.group({
7635
7681
  id: this.fb.control(model?.id || ''),