tickera-angular-components 0.0.1-dev.180 → 0.0.1-dev.181
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.
|
@@ -83,7 +83,10 @@ var deleteConfirmation$1 = {
|
|
|
83
83
|
instructions: "Escriba <strong>eliminar</strong> para confirmar",
|
|
84
84
|
placeholder: "Escriba eliminar",
|
|
85
85
|
cancel: "Cancelar",
|
|
86
|
-
"delete": "Eliminar"
|
|
86
|
+
"delete": "Eliminar",
|
|
87
|
+
finalWarning: "Esta es tu última oportunidad para cancelar.",
|
|
88
|
+
finalMessage: "¿Confirmas que deseas eliminar {{resource}} de forma permanente? Esta acción no se puede deshacer.",
|
|
89
|
+
finalConfirm: "Sí, eliminar definitivamente"
|
|
87
90
|
};
|
|
88
91
|
var changePassword$1 = {
|
|
89
92
|
title: "Cambiar contraseña",
|
|
@@ -265,7 +268,10 @@ var deleteConfirmation = {
|
|
|
265
268
|
instructions: "Type <strong>delete</strong> to confirm",
|
|
266
269
|
placeholder: "Type delete",
|
|
267
270
|
cancel: "Cancel",
|
|
268
|
-
"delete": "Delete"
|
|
271
|
+
"delete": "Delete",
|
|
272
|
+
finalWarning: "This is your last chance to cancel.",
|
|
273
|
+
finalMessage: "Are you sure you want to permanently delete {{resource}}? This action cannot be undone.",
|
|
274
|
+
finalConfirm: "Yes, delete permanently"
|
|
269
275
|
};
|
|
270
276
|
var changePassword = {
|
|
271
277
|
title: "Change password",
|
|
@@ -5330,6 +5336,14 @@ class DeleteConfirmationComponent {
|
|
|
5330
5336
|
deleteConfirmationService;
|
|
5331
5337
|
transloco;
|
|
5332
5338
|
deleteConfirmationForm;
|
|
5339
|
+
/**
|
|
5340
|
+
* Two-step flow:
|
|
5341
|
+
* 1. 'input' -> the user must type the resource name to unlock the delete action.
|
|
5342
|
+
* 2. 'final' -> a last feedback/confirmation step is shown before the delete
|
|
5343
|
+
* callback actually runs, so a slip of the mouse on the first
|
|
5344
|
+
* step can never trigger a real deletion by itself.
|
|
5345
|
+
*/
|
|
5346
|
+
step = 'input';
|
|
5333
5347
|
constructor(fb, deleteConfirmationService, transloco) {
|
|
5334
5348
|
this.fb = fb;
|
|
5335
5349
|
this.deleteConfirmationService = deleteConfirmationService;
|
|
@@ -5355,20 +5369,43 @@ class DeleteConfirmationComponent {
|
|
|
5355
5369
|
const confirmation = this.confirmationText;
|
|
5356
5370
|
return value === confirmation;
|
|
5357
5371
|
}
|
|
5372
|
+
get isFinalStep() {
|
|
5373
|
+
return this.step === 'final';
|
|
5374
|
+
}
|
|
5375
|
+
/** Cancels the whole flow (from either step) without deleting anything. */
|
|
5358
5376
|
onCloseModal() {
|
|
5359
|
-
this.
|
|
5377
|
+
this.resetState();
|
|
5360
5378
|
this.deleteConfirmationService.close();
|
|
5361
5379
|
}
|
|
5380
|
+
/** Step 1 submit: only advances to the final confirmation, never deletes. */
|
|
5362
5381
|
onConfirmDelete() {
|
|
5382
|
+
if (!this.isConfirmationValid)
|
|
5383
|
+
return;
|
|
5384
|
+
this.step = 'final';
|
|
5385
|
+
}
|
|
5386
|
+
/**
|
|
5387
|
+
* Step 2 cancel: goes back to the input step without touching what the
|
|
5388
|
+
* user typed, so they don't have to retype it if they just want to
|
|
5389
|
+
* double-check before deleting.
|
|
5390
|
+
*/
|
|
5391
|
+
onBackToInput() {
|
|
5392
|
+
this.step = 'input';
|
|
5393
|
+
}
|
|
5394
|
+
/** Step 2 submit: this is the only place that actually triggers deletion. */
|
|
5395
|
+
onFinalConfirm() {
|
|
5363
5396
|
const callback = this.deleteConfirmationService.getConfirmDeleteCallback();
|
|
5364
5397
|
if (callback) {
|
|
5365
5398
|
callback();
|
|
5366
5399
|
}
|
|
5367
|
-
this.
|
|
5400
|
+
this.resetState();
|
|
5368
5401
|
this.deleteConfirmationService.close();
|
|
5369
5402
|
}
|
|
5403
|
+
resetState() {
|
|
5404
|
+
this.deleteConfirmationForm.reset();
|
|
5405
|
+
this.step = 'input';
|
|
5406
|
+
}
|
|
5370
5407
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DeleteConfirmationComponent, deps: [{ token: i1$2.FormBuilder }, { token: DeleteConfirmationService }, { token: i2.TranslocoService }], target: i0.ɵɵFactoryTarget.Component });
|
|
5371
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: DeleteConfirmationComponent, isStandalone: true, selector: "delete-confirmation", ngImport: i0, template: "@if (isOpen()) {\n <app-modal\n [title]=\"title\"\n [isOpen]=\"isOpen\"\n (closeModal)=\"onCloseModal()\"\n [interactiveClose]=\"false\"\n >\n <form\n
|
|
5408
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: DeleteConfirmationComponent, isStandalone: true, selector: "delete-confirmation", ngImport: i0, template: "@if (isOpen()) {\n <app-modal\n [title]=\"title\"\n [isOpen]=\"isOpen\"\n (closeModal)=\"onCloseModal()\"\n [interactiveClose]=\"false\"\n >\n @if (!isFinalStep) {\n <form\n [formGroup]=\"deleteConfirmationForm\"\n method=\"POST\"\n class=\"delete-confirmation-content\"\n (ngSubmit)=\"onConfirmDelete()\"\n >\n <app-alert\n type=\"warning\"\n [text]=\"'deleteConfirmation.warning' | transloco\"\n size=\"sm\"\n [closeable]=\"false\"\n />\n\n <p class=\"delete-confirmation-instructions\">\n {{ 'deleteConfirmation.instructions' | transloco }}\n\n <span class=\"delete-confirmation-highlight\">\n {{ confirmationText }}\n </span>\n </p>\n\n <form-input\n name=\"confirmationText\"\n type=\"text\"\n class=\"delete-confirmation-field\"\n [required]=\"true\"\n autocomplete=\"off\"\n formControlName=\"confirmationText\"\n [placeholder]=\"\n transloco.translate('deleteConfirmation.placeholder', { text: confirmationText })\n \"\n />\n\n <div class=\"delete-confirmation-actions\">\n <app-button\n variant=\"tertiary\"\n [text]=\"'deleteConfirmation.cancel' | transloco\"\n (click)=\"onCloseModal()\"\n size=\"sm\"\n />\n\n <app-button\n type=\"submit\"\n variant=\"primary\"\n [text]=\"'deleteConfirmation.delete' | transloco\"\n [disabled]=\"!isConfirmationValid\"\n size=\"sm\"\n />\n </div>\n </form>\n } @else {\n <div class=\"delete-confirmation-content\" data-testid=\"delete-confirmation-final-step\">\n <app-alert\n type=\"warning\"\n [text]=\"'deleteConfirmation.finalWarning' | transloco\"\n size=\"sm\"\n [closeable]=\"false\"\n />\n\n <p class=\"delete-confirmation-instructions\">\n {{ transloco.translate('deleteConfirmation.finalMessage', { resource: resourceName }) }}\n </p>\n\n <div class=\"delete-confirmation-actions\">\n <app-button\n type=\"button\"\n variant=\"tertiary\"\n [text]=\"'deleteConfirmation.cancel' | transloco\"\n (click)=\"onBackToInput()\"\n size=\"sm\"\n />\n\n <app-button\n type=\"button\"\n variant=\"primary\"\n [text]=\"'deleteConfirmation.finalConfirm' | transloco\"\n (click)=\"onFinalConfirm()\"\n size=\"sm\"\n />\n </div>\n </div>\n }\n </app-modal>\n}\n", styles: [".delete-confirmation-content{display:flex;flex-direction:column;gap:1rem;animation:slideUp .3s ease-out}.delete-confirmation-instructions{font-size:.75rem;color:#4b5563;margin:0}@media(prefers-color-scheme:dark){.delete-confirmation-instructions{color:#9ca3af}}.delete-confirmation-highlight{display:inline-flex;align-items:center;gap:.25rem;padding:.25rem .5rem;margin-top:.25rem;background-color:#e5e7eb;color:#dc2626;font-weight:600;font-size:.875rem;border-radius:.375rem}@media(prefers-color-scheme:dark){.delete-confirmation-highlight{background-color:#374151}}.delete-confirmation-field{flex:1}.delete-confirmation-actions{display:flex;gap:.75rem}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { 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: TranslocoModule }, { kind: "component", type: AppButtonComponent, selector: "app-button", inputs: ["disabled", "loading", "type", "variant", "text", "size", "loadingText", "icon", "tooltip"], outputs: ["clicked"] }, { kind: "component", type: FormInputComponent, selector: "form-input", inputs: ["label", "type", "name", "id", "placeholder", "required", "readonly", "maxlength", "minlength", "max", "min", "step", "pattern", "fieldGroupClass", "autocomplete"] }, { kind: "component", type: AppModalComponent, selector: "app-modal", inputs: ["title", "disableClose", "showHeader", "showCloseButton", "showTitle", "interactiveClose", "isOpen", "size"], outputs: ["closeModal"] }, { kind: "component", type: AppAlertComponent, selector: "app-alert", inputs: ["type", "text", "closeable", "size"] }, { kind: "pipe", type: i2.TranslocoPipe, name: "transloco" }], encapsulation: i0.ViewEncapsulation.None });
|
|
5372
5409
|
}
|
|
5373
5410
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: DeleteConfirmationComponent, decorators: [{
|
|
5374
5411
|
type: Component,
|
|
@@ -5380,7 +5417,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
|
|
|
5380
5417
|
FormInputComponent,
|
|
5381
5418
|
AppModalComponent,
|
|
5382
5419
|
AppAlertComponent,
|
|
5383
|
-
], encapsulation: ViewEncapsulation.None, template: "@if (isOpen()) {\n <app-modal\n [title]=\"title\"\n [isOpen]=\"isOpen\"\n (closeModal)=\"onCloseModal()\"\n [interactiveClose]=\"false\"\n >\n <form\n
|
|
5420
|
+
], encapsulation: ViewEncapsulation.None, template: "@if (isOpen()) {\n <app-modal\n [title]=\"title\"\n [isOpen]=\"isOpen\"\n (closeModal)=\"onCloseModal()\"\n [interactiveClose]=\"false\"\n >\n @if (!isFinalStep) {\n <form\n [formGroup]=\"deleteConfirmationForm\"\n method=\"POST\"\n class=\"delete-confirmation-content\"\n (ngSubmit)=\"onConfirmDelete()\"\n >\n <app-alert\n type=\"warning\"\n [text]=\"'deleteConfirmation.warning' | transloco\"\n size=\"sm\"\n [closeable]=\"false\"\n />\n\n <p class=\"delete-confirmation-instructions\">\n {{ 'deleteConfirmation.instructions' | transloco }}\n\n <span class=\"delete-confirmation-highlight\">\n {{ confirmationText }}\n </span>\n </p>\n\n <form-input\n name=\"confirmationText\"\n type=\"text\"\n class=\"delete-confirmation-field\"\n [required]=\"true\"\n autocomplete=\"off\"\n formControlName=\"confirmationText\"\n [placeholder]=\"\n transloco.translate('deleteConfirmation.placeholder', { text: confirmationText })\n \"\n />\n\n <div class=\"delete-confirmation-actions\">\n <app-button\n variant=\"tertiary\"\n [text]=\"'deleteConfirmation.cancel' | transloco\"\n (click)=\"onCloseModal()\"\n size=\"sm\"\n />\n\n <app-button\n type=\"submit\"\n variant=\"primary\"\n [text]=\"'deleteConfirmation.delete' | transloco\"\n [disabled]=\"!isConfirmationValid\"\n size=\"sm\"\n />\n </div>\n </form>\n } @else {\n <div class=\"delete-confirmation-content\" data-testid=\"delete-confirmation-final-step\">\n <app-alert\n type=\"warning\"\n [text]=\"'deleteConfirmation.finalWarning' | transloco\"\n size=\"sm\"\n [closeable]=\"false\"\n />\n\n <p class=\"delete-confirmation-instructions\">\n {{ transloco.translate('deleteConfirmation.finalMessage', { resource: resourceName }) }}\n </p>\n\n <div class=\"delete-confirmation-actions\">\n <app-button\n type=\"button\"\n variant=\"tertiary\"\n [text]=\"'deleteConfirmation.cancel' | transloco\"\n (click)=\"onBackToInput()\"\n size=\"sm\"\n />\n\n <app-button\n type=\"button\"\n variant=\"primary\"\n [text]=\"'deleteConfirmation.finalConfirm' | transloco\"\n (click)=\"onFinalConfirm()\"\n size=\"sm\"\n />\n </div>\n </div>\n }\n </app-modal>\n}\n", styles: [".delete-confirmation-content{display:flex;flex-direction:column;gap:1rem;animation:slideUp .3s ease-out}.delete-confirmation-instructions{font-size:.75rem;color:#4b5563;margin:0}@media(prefers-color-scheme:dark){.delete-confirmation-instructions{color:#9ca3af}}.delete-confirmation-highlight{display:inline-flex;align-items:center;gap:.25rem;padding:.25rem .5rem;margin-top:.25rem;background-color:#e5e7eb;color:#dc2626;font-weight:600;font-size:.875rem;border-radius:.375rem}@media(prefers-color-scheme:dark){.delete-confirmation-highlight{background-color:#374151}}.delete-confirmation-field{flex:1}.delete-confirmation-actions{display:flex;gap:.75rem}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}\n"] }]
|
|
5384
5421
|
}], ctorParameters: () => [{ type: i1$2.FormBuilder }, { type: DeleteConfirmationService }, { type: i2.TranslocoService }] });
|
|
5385
5422
|
|
|
5386
5423
|
class AppBadgeComponent {
|