ng-components-tsi 0.0.46 → 0.0.48
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.
- package/fesm2022/ng-components-tsi.mjs +33 -18
- package/fesm2022/ng-components-tsi.mjs.map +1 -1
- package/lib/modals/general/md-generico/md-generico.component.d.ts +2 -2
- package/lib/service/alert-confirmation.service.d.ts +4 -2
- package/lib/ui/alerts/alert-confirmation/alert-confirmation.component.d.ts +8 -4
- package/lib/ui/forms/inputs/check-box/check-box.component.d.ts +1 -1
- package/lib/ui/forms/inputs/input/input.component.d.ts +4 -4
- package/lib/ui/forms/inputs/input-radio/input-radio.component.d.ts +2 -2
- package/lib/ui/forms/lists/list-option/list-option.component.d.ts +2 -2
- package/lib/ui/forms/lists/list-situaciones/list-situaciones.component.d.ts +1 -1
- package/lib/ui/tables/paginador/paginador.component.d.ts +1 -1
- package/package.json +1 -1
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
import * as i1 from '@angular/common';
|
|
2
2
|
import { CommonModule, NgClass, NgTemplateOutlet, DecimalPipe, DatePipe } from '@angular/common';
|
|
3
3
|
import * as i0 from '@angular/core';
|
|
4
|
-
import { input, output, HostListener, Directive, inject, viewChild, signal, effect, ViewChild, Component, computed, Injectable, ChangeDetectionStrategy, contentChild, ContentChild,
|
|
4
|
+
import { input, output, HostListener, Directive, inject, viewChild, signal, effect, ViewChild, Component, computed, Injectable, model, ChangeDetectionStrategy, contentChild, ContentChild, ViewChildren, ElementRef, Renderer2, Input, linkedSignal, untracked, TemplateRef, contentChildren } from '@angular/core';
|
|
5
5
|
import * as i1$2 from '@angular/forms';
|
|
6
6
|
import { FormsModule, NgModel } from '@angular/forms';
|
|
7
7
|
import { DomSanitizer } from '@angular/platform-browser';
|
|
8
8
|
import * as i1$1 from '@ng-bootstrap/ng-bootstrap';
|
|
9
9
|
import { NgbTooltipModule, NgbActiveModal, NgbDropdownModule, NgbDropdown, NgbNavModule, NgbModal } from '@ng-bootstrap/ng-bootstrap';
|
|
10
|
+
import { validaArray, validarVacioAndNull, getFirstItem, beep, cleanNumber, obtenerTipoClases, validarBoolean, formatNumber } from 'shared-tsi';
|
|
10
11
|
import { trigger, transition, style, animate, state } from '@angular/animations';
|
|
11
12
|
import * as i1$3 from '@angular/cdk/overlay';
|
|
12
13
|
import { OverlayModule } from '@angular/cdk/overlay';
|
|
13
14
|
import { Subject, debounceTime, distinctUntilChanged, filter, startWith, map, fromEvent, throttleTime, catchError, throwError, switchMap, of, EMPTY, isObservable } from 'rxjs';
|
|
14
|
-
import { beep, validaArray, getFirstItem, validarVacioAndNull, cleanNumber, obtenerTipoClases, validarBoolean, formatNumber } from 'shared-tsi';
|
|
15
15
|
import { SelectionModel } from '@angular/cdk/collections';
|
|
16
16
|
import { ActivatedRoute, Router, NavigationEnd, RouterLink, RouterOutlet, RouterLinkActive } from '@angular/router';
|
|
17
17
|
import { toSignal, rxResource } from '@angular/core/rxjs-interop';
|
|
@@ -147,8 +147,11 @@ class ButtonComponent {
|
|
|
147
147
|
}
|
|
148
148
|
constructor() {
|
|
149
149
|
effect(() => {
|
|
150
|
-
if (this.
|
|
151
|
-
|
|
150
|
+
if (this.autoFocus() && this.buttonNormal()) {
|
|
151
|
+
setTimeout(() => {
|
|
152
|
+
this.buttonNormal().nativeElement.focus();
|
|
153
|
+
this.hasFocus.set(true);
|
|
154
|
+
}, 100);
|
|
152
155
|
}
|
|
153
156
|
});
|
|
154
157
|
}
|
|
@@ -296,7 +299,9 @@ class AlertConfirmationComponent {
|
|
|
296
299
|
});
|
|
297
300
|
select = signal(false);
|
|
298
301
|
opciones = signal([]);
|
|
299
|
-
|
|
302
|
+
isArrayString = computed(() => this.opciones().every(opt => typeof opt == 'string'));
|
|
303
|
+
opcionesFormateadas = computed(() => this.opciones().map(op => typeof op == 'string' ? { codigo: op, descri: op } : op));
|
|
304
|
+
selectedOption = model('');
|
|
300
305
|
textareaValue = signal('');
|
|
301
306
|
confirmar = signal('Aceptar');
|
|
302
307
|
mostrarConfirmar = signal(true);
|
|
@@ -307,6 +312,7 @@ class AlertConfirmationComponent {
|
|
|
307
312
|
colorExtra = signal('azul');
|
|
308
313
|
maxLength = signal(200);
|
|
309
314
|
focus = signal(true);
|
|
315
|
+
showLabel = signal(true);
|
|
310
316
|
get textareaValueModel() {
|
|
311
317
|
return this.textareaValue();
|
|
312
318
|
}
|
|
@@ -316,24 +322,29 @@ class AlertConfirmationComponent {
|
|
|
316
322
|
mostrarTextareaComputed = computed(() => {
|
|
317
323
|
if (!this.select())
|
|
318
324
|
return true;
|
|
319
|
-
const opts = this.
|
|
325
|
+
const opts = this.opcionesFormateadas();
|
|
320
326
|
const sel = this.selectedOption();
|
|
321
|
-
return sel == opts[opts.length - 1];
|
|
327
|
+
return sel == opts[opts.length - 1].codigo;
|
|
322
328
|
});
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
if (this.
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
+
constructor() {
|
|
330
|
+
effect(() => {
|
|
331
|
+
if (!this.select())
|
|
332
|
+
return;
|
|
333
|
+
if (!validaArray(this.opcionesFormateadas()))
|
|
334
|
+
return;
|
|
335
|
+
if (validarVacioAndNull(this.selectedOption()))
|
|
336
|
+
return;
|
|
337
|
+
const first = getFirstItem(this.opcionesFormateadas());
|
|
338
|
+
this.selectedOption.set(first.codigo);
|
|
339
|
+
});
|
|
329
340
|
}
|
|
330
341
|
onTextareaChange(value) {
|
|
331
342
|
this.textareaValue.set(value);
|
|
332
343
|
}
|
|
333
344
|
onConfirmar() {
|
|
334
|
-
const opts = this.
|
|
345
|
+
const opts = this.opcionesFormateadas();
|
|
335
346
|
const selected = this.selectedOption();
|
|
336
|
-
if (this.select() && selected == opts[0]) {
|
|
347
|
+
if (this.select() && selected == opts[0].codigo) {
|
|
337
348
|
this.toast.warning('Advertencia', 'Debe seleccionar una opción correcta.');
|
|
338
349
|
return;
|
|
339
350
|
}
|
|
@@ -360,12 +371,12 @@ class AlertConfirmationComponent {
|
|
|
360
371
|
this.activeModal.close();
|
|
361
372
|
}
|
|
362
373
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AlertConfirmationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
363
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: AlertConfirmationComponent, isStandalone: true, selector: "app-alert-confirmation", ngImport: i0, template: "<div class=\"p-4\">\r\n <div class=\"d-flex justify-content-center mb-3\">\r\n <i class=\"fas fa-exclamation-circle color-icon\"></i>\r\n </div>\r\n\r\n <div class=\"fs-8 text-center\" [innerHTML]=\"textoFormateado()\"></div>\r\n\r\n @if(select()){\r\n <div class=\"d-flex align-items-center gap-2 mt-3\">\r\n <label class=\"form-label mb-0 nowrap\">Motivo:</label>\r\n <select class=\"form-select text-center\" [
|
|
374
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: AlertConfirmationComponent, isStandalone: true, selector: "app-alert-confirmation", inputs: { selectedOption: { classPropertyName: "selectedOption", publicName: "selectedOption", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedOption: "selectedOptionChange" }, ngImport: i0, template: "<div class=\"p-4\">\r\n <div class=\"d-flex justify-content-center mb-3\">\r\n <i class=\"fas fa-exclamation-circle color-icon\"></i>\r\n </div>\r\n\r\n <div class=\"fs-8 text-center\" [innerHTML]=\"textoFormateado()\"></div>\r\n\r\n @if(select()){\r\n <div class=\"d-flex align-items-center gap-2 mt-3\">\r\n @if (showLabel()) {\r\n <label class=\"form-label mb-0 nowrap\">Motivo:</label>\r\n }\r\n <select class=\"form-select text-center\" [(ngModel)]=\"selectedOption\">\r\n @for(opt of opcionesFormateadas(); track $index){\r\n <option [value]=\"opt.codigo\">\r\n {{ opt.descri }}\r\n </option>\r\n }\r\n </select>\r\n </div>\r\n }\r\n\r\n @if(showTextarea() && mostrarTextareaComputed()){\r\n <textarea class=\"form-control mt-3 fs-6 ch-100\" placeholder=\"Ingresar motivo...\" [(ngModel)]=\"textareaValueModel\"\r\n (ngModelChange)=\"onTextareaChange($event)\" [maxlength]=\"maxLength()\">\r\n </textarea>\r\n <div class=\"character-counter\" [class.color-caracter]=\"(maxLength() - (textareaValueModel?.length || 0)) < 10\">\r\n Caracteres disponibles: {{ maxLength() - (textareaValueModel?.length || 0) }} de {{ maxLength() }}\r\n </div>\r\n }\r\n\r\n <div class=\"d-flex justify-content-center gap-2 mt-3\">\r\n @if(mostrarConfirmar()){\r\n <app-button [texto]=\"confirmar()\" color=\"azul\" (accion)=\"onConfirmar()\" [isHtml]=\"true\" [autoFocus]=\"focus()\" />\r\n }\r\n @if(mostrarExtra()){\r\n <app-button [texto]=\"extra()\" [color]=\"colorExtra()\" (accion)=\"onExtra()\" [isHtml]=\"true\" />\r\n }\r\n @if(mostrarCancelar()){\r\n <app-button [texto]=\"cancelar()\" color=\"rojo\" (accion)=\"closeModal()\" [isHtml]=\"true\" [autoFocus]=\"!focus()\" />\r\n }\r\n </div>\r\n</div>", styles: ["@keyframes metronomeSwing{0%{transform:rotate(0)}25%{transform:rotate(-10deg)}50%{transform:rotate(10deg)}75%{transform:rotate(-10deg)}to{transform:rotate(0)}}.color-icon{animation:metronomeSwing 1.5s infinite ease-in-out;font-size:80px;color:#e9a837}.textarea-container{position:relative}.color-caracter{color:#e9a837!important}.character-counter{font-size:.8rem;color:#666;text-align:right;margin-top:.25rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ButtonComponent, selector: "app-button", inputs: ["autoFocus", "color", "outline", "icon", "tooltip", "texto", "isHtml", "closeButton", "sunatButton", "inputButton", "buttonDeshabilitado", "atajo", "dropdownButton", "extraClass", "disabled", "uploadButton", "accept", "isRounded", "isNotStyle"], outputs: ["accion", "fileSelected"] }] });
|
|
364
375
|
}
|
|
365
376
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AlertConfirmationComponent, decorators: [{
|
|
366
377
|
type: Component,
|
|
367
|
-
args: [{ selector: 'app-alert-confirmation', imports: [CommonModule, FormsModule, ButtonComponent], template: "<div class=\"p-4\">\r\n <div class=\"d-flex justify-content-center mb-3\">\r\n <i class=\"fas fa-exclamation-circle color-icon\"></i>\r\n </div>\r\n\r\n <div class=\"fs-8 text-center\" [innerHTML]=\"textoFormateado()\"></div>\r\n\r\n @if(select()){\r\n <div class=\"d-flex align-items-center gap-2 mt-3\">\r\n <label class=\"form-label mb-0 nowrap\">Motivo:</label>\r\n <select class=\"form-select text-center\" [
|
|
368
|
-
}] });
|
|
378
|
+
args: [{ selector: 'app-alert-confirmation', imports: [CommonModule, FormsModule, ButtonComponent], template: "<div class=\"p-4\">\r\n <div class=\"d-flex justify-content-center mb-3\">\r\n <i class=\"fas fa-exclamation-circle color-icon\"></i>\r\n </div>\r\n\r\n <div class=\"fs-8 text-center\" [innerHTML]=\"textoFormateado()\"></div>\r\n\r\n @if(select()){\r\n <div class=\"d-flex align-items-center gap-2 mt-3\">\r\n @if (showLabel()) {\r\n <label class=\"form-label mb-0 nowrap\">Motivo:</label>\r\n }\r\n <select class=\"form-select text-center\" [(ngModel)]=\"selectedOption\">\r\n @for(opt of opcionesFormateadas(); track $index){\r\n <option [value]=\"opt.codigo\">\r\n {{ opt.descri }}\r\n </option>\r\n }\r\n </select>\r\n </div>\r\n }\r\n\r\n @if(showTextarea() && mostrarTextareaComputed()){\r\n <textarea class=\"form-control mt-3 fs-6 ch-100\" placeholder=\"Ingresar motivo...\" [(ngModel)]=\"textareaValueModel\"\r\n (ngModelChange)=\"onTextareaChange($event)\" [maxlength]=\"maxLength()\">\r\n </textarea>\r\n <div class=\"character-counter\" [class.color-caracter]=\"(maxLength() - (textareaValueModel?.length || 0)) < 10\">\r\n Caracteres disponibles: {{ maxLength() - (textareaValueModel?.length || 0) }} de {{ maxLength() }}\r\n </div>\r\n }\r\n\r\n <div class=\"d-flex justify-content-center gap-2 mt-3\">\r\n @if(mostrarConfirmar()){\r\n <app-button [texto]=\"confirmar()\" color=\"azul\" (accion)=\"onConfirmar()\" [isHtml]=\"true\" [autoFocus]=\"focus()\" />\r\n }\r\n @if(mostrarExtra()){\r\n <app-button [texto]=\"extra()\" [color]=\"colorExtra()\" (accion)=\"onExtra()\" [isHtml]=\"true\" />\r\n }\r\n @if(mostrarCancelar()){\r\n <app-button [texto]=\"cancelar()\" color=\"rojo\" (accion)=\"closeModal()\" [isHtml]=\"true\" [autoFocus]=\"!focus()\" />\r\n }\r\n </div>\r\n</div>", styles: ["@keyframes metronomeSwing{0%{transform:rotate(0)}25%{transform:rotate(-10deg)}50%{transform:rotate(10deg)}75%{transform:rotate(-10deg)}to{transform:rotate(0)}}.color-icon{animation:metronomeSwing 1.5s infinite ease-in-out;font-size:80px;color:#e9a837}.textarea-container{position:relative}.color-caracter{color:#e9a837!important}.character-counter{font-size:.8rem;color:#666;text-align:right;margin-top:.25rem}\n"] }]
|
|
379
|
+
}], ctorParameters: () => [] });
|
|
369
380
|
|
|
370
381
|
var alertConfirmation_component = /*#__PURE__*/Object.freeze({
|
|
371
382
|
__proto__: null,
|
|
@@ -4536,6 +4547,7 @@ class AlertConfirmationConfig {
|
|
|
4536
4547
|
colorExtra;
|
|
4537
4548
|
maxLength;
|
|
4538
4549
|
focus;
|
|
4550
|
+
showLabel;
|
|
4539
4551
|
}
|
|
4540
4552
|
class AlertConfirmationService {
|
|
4541
4553
|
modalService = inject(NgbModal);
|
|
@@ -4589,6 +4601,9 @@ class AlertConfirmationService {
|
|
|
4589
4601
|
modalRef.componentInstance.focus.set(config.focus);
|
|
4590
4602
|
}
|
|
4591
4603
|
modalRef.componentInstance.maxLength.set(config.maxLength ?? 200);
|
|
4604
|
+
if (config.showLabel !== undefined) {
|
|
4605
|
+
modalRef.componentInstance.showLabel.set(config.showLabel);
|
|
4606
|
+
}
|
|
4592
4607
|
return modalRef;
|
|
4593
4608
|
}
|
|
4594
4609
|
async mostrarModalConfirmacion(config) {
|