ng-components-tsi 0.0.32 → 0.0.33
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.
|
@@ -353,6 +353,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
353
353
|
class AlertaComponent {
|
|
354
354
|
titulo = input('Atención:');
|
|
355
355
|
mensaje = input('La consulta muestra los 100 primeros registros.');
|
|
356
|
+
iconSize = input(25);
|
|
357
|
+
classContainer = input('p-2');
|
|
358
|
+
paddingClass = input(73);
|
|
356
359
|
validateSalto = input(false);
|
|
357
360
|
mensajeFormateado = computed(() => {
|
|
358
361
|
if (!this.validateSalto()) {
|
|
@@ -361,11 +364,11 @@ class AlertaComponent {
|
|
|
361
364
|
return this.mensaje().replace(/\n/g, '<br>');
|
|
362
365
|
});
|
|
363
366
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AlertaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
364
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: AlertaComponent, isStandalone: true, selector: "app-alerta", inputs: { titulo: { classPropertyName: "titulo", publicName: "titulo", isSignal: true, isRequired: false, transformFunction: null }, mensaje: { classPropertyName: "mensaje", publicName: "mensaje", isSignal: true, isRequired: false, transformFunction: null }, validateSalto: { classPropertyName: "validateSalto", publicName: "validateSalto", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"d-flex bg-title align-items-center flex-md-row
|
|
367
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: AlertaComponent, isStandalone: true, selector: "app-alerta", inputs: { titulo: { classPropertyName: "titulo", publicName: "titulo", isSignal: true, isRequired: false, transformFunction: null }, mensaje: { classPropertyName: "mensaje", publicName: "mensaje", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, classContainer: { classPropertyName: "classContainer", publicName: "classContainer", isSignal: true, isRequired: false, transformFunction: null }, paddingClass: { classPropertyName: "paddingClass", publicName: "paddingClass", isSignal: true, isRequired: false, transformFunction: null }, validateSalto: { classPropertyName: "validateSalto", publicName: "validateSalto", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"d-flex bg-title align-items-center flex-md-row {{classContainer()}}\"\r\n [ngClass]=\"{'flex-column': (titulo()?.length || 0) + (mensajeFormateado()?.length || 0) > 100}\">\r\n <i class=\"fas fa-exclamation-circle color-icon me-sm-1 mb-1 mb-sm-0\" [style.fontSize.px]=\"iconSize()\"></i>\r\n <div class=\"text-alerta text-center text-sm-start ms-1\" [class.text-hanging]=\"validateSalto()\"\r\n [style.paddingLeft.px]=\"validateSalto() ? paddingClass() : null\" >\r\n @if (titulo()) {\r\n <strong class=\"alert-title\">{{ titulo() }}</strong>\r\n }\r\n @if (!validateSalto()) {\r\n {{ mensaje() }}\r\n }\r\n\r\n @if (validateSalto()) {\r\n <span class=\"alert-message\" [innerHTML]=\"mensajeFormateado()\"></span>\r\n }\r\n <ng-content></ng-content>\r\n </div>\r\n</div>", styles: [".bg-title{position:relative;background:#fff0d5;display:inline-flex;padding:5px;color:#000;font-weight:400;border-radius:8px;overflow:hidden}.bg-title:after{content:\"\";position:absolute;background:#f0ad86;top:0;left:0;animation:moveAround 4s linear infinite}@keyframes moveAround{0%{top:0;left:0;width:200px;height:2px}25%{top:0;left:calc(100% + -0px);width:2px;height:2px}50%{top:calc(100% - 2px);left:calc(100% - 2px);width:200px;height:50px}75%{top:calc(100% - 2px);left:0;width:2px;height:50px}to{top:0;left:0;width:2px;height:2px}}.color-icon{animation:metronomeSwing 1.5s infinite ease-in-out;color:#855d16}@keyframes metronomeSwing{0%{transform:rotate(0)}25%{transform:rotate(-15deg)}50%{transform:rotate(15deg)}75%{transform:rotate(-15deg)}to{transform:rotate(0)}}.text-alerta{font-size:14px}.text-hanging{position:relative;padding-left:73px}.text-hanging .alert-title{position:absolute;left:0;top:50%;transform:translateY(-50%)}.text-hanging .alert-message{display:block;white-space:pre-line}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
365
368
|
}
|
|
366
369
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AlertaComponent, decorators: [{
|
|
367
370
|
type: Component,
|
|
368
|
-
args: [{ selector: 'app-alerta', imports: [NgClass], template: "<div class=\"d-flex bg-title align-items-center flex-md-row
|
|
371
|
+
args: [{ selector: 'app-alerta', imports: [NgClass], template: "<div class=\"d-flex bg-title align-items-center flex-md-row {{classContainer()}}\"\r\n [ngClass]=\"{'flex-column': (titulo()?.length || 0) + (mensajeFormateado()?.length || 0) > 100}\">\r\n <i class=\"fas fa-exclamation-circle color-icon me-sm-1 mb-1 mb-sm-0\" [style.fontSize.px]=\"iconSize()\"></i>\r\n <div class=\"text-alerta text-center text-sm-start ms-1\" [class.text-hanging]=\"validateSalto()\"\r\n [style.paddingLeft.px]=\"validateSalto() ? paddingClass() : null\" >\r\n @if (titulo()) {\r\n <strong class=\"alert-title\">{{ titulo() }}</strong>\r\n }\r\n @if (!validateSalto()) {\r\n {{ mensaje() }}\r\n }\r\n\r\n @if (validateSalto()) {\r\n <span class=\"alert-message\" [innerHTML]=\"mensajeFormateado()\"></span>\r\n }\r\n <ng-content></ng-content>\r\n </div>\r\n</div>", styles: [".bg-title{position:relative;background:#fff0d5;display:inline-flex;padding:5px;color:#000;font-weight:400;border-radius:8px;overflow:hidden}.bg-title:after{content:\"\";position:absolute;background:#f0ad86;top:0;left:0;animation:moveAround 4s linear infinite}@keyframes moveAround{0%{top:0;left:0;width:200px;height:2px}25%{top:0;left:calc(100% + -0px);width:2px;height:2px}50%{top:calc(100% - 2px);left:calc(100% - 2px);width:200px;height:50px}75%{top:calc(100% - 2px);left:0;width:2px;height:50px}to{top:0;left:0;width:2px;height:2px}}.color-icon{animation:metronomeSwing 1.5s infinite ease-in-out;color:#855d16}@keyframes metronomeSwing{0%{transform:rotate(0)}25%{transform:rotate(-15deg)}50%{transform:rotate(15deg)}75%{transform:rotate(-15deg)}to{transform:rotate(0)}}.text-alerta{font-size:14px}.text-hanging{position:relative;padding-left:73px}.text-hanging .alert-title{position:absolute;left:0;top:50%;transform:translateY(-50%)}.text-hanging .alert-message{display:block;white-space:pre-line}\n"] }]
|
|
369
372
|
}] });
|
|
370
373
|
|
|
371
374
|
class AlertErrorComponent {
|
|
@@ -583,7 +586,7 @@ class HeaderComponent {
|
|
|
583
586
|
this.cerrarModal.emit();
|
|
584
587
|
}
|
|
585
588
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: HeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
586
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: HeaderComponent, isStandalone: true, selector: "app-header", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, tamanio: { classPropertyName: "tamanio", publicName: "tamanio", isSignal: true, isRequired: false, transformFunction: null }, showFiltro: { classPropertyName: "showFiltro", publicName: "showFiltro", isSignal: true, isRequired: false, transformFunction: null }, withFiltro: { classPropertyName: "withFiltro", publicName: "withFiltro", isSignal: true, isRequired: false, transformFunction: null }, hasData: { classPropertyName: "hasData", publicName: "hasData", isSignal: true, isRequired: false, transformFunction: null }, isModal: { classPropertyName: "isModal", publicName: "isModal", isSignal: true, isRequired: false, transformFunction: null }, showAlerta: { classPropertyName: "showAlerta", publicName: "showAlerta", isSignal: true, isRequired: false, transformFunction: null }, textAlerta: { classPropertyName: "textAlerta", publicName: "textAlerta", isSignal: true, isRequired: false, transformFunction: null }, validateSalto: { classPropertyName: "validateSalto", publicName: "validateSalto", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { withFiltro: "withFiltroChange", cerrarModal: "cerrarModal" }, ngImport: i0, template: "<div class=\"d-flex justify-content-between position-relative flex-wrap\"\r\n [ngClass]=\"{ 'align-items-center': !validateSalto(), 'align-items-start': validateSalto()}\">\r\n <div (click)=\"toggleFiltro()\" [ngClass]=\"{ 'cursor-pointer': !isModal() }\" class=\"d-flex align-items-center mb-2\">\r\n <h5 class=\"fw-bold no-select\" [ngClass]=\"['fs-' + tamanio(), isModal() ? 'pt-3' : 'pt-2']\">\r\n {{ title() }}\r\n </h5>\r\n @if(showFiltro()){\r\n <div [ngClass]=\"{'pt-2': isModal()}\">\r\n <app-filter-toggle [hasData]=\"hasData()\" [(withFiltro)]=\"withFiltro\" />\r\n </div>\r\n }\r\n </div>\r\n\r\n <div class=\"header-actions\">\r\n @if (showAlerta()) {\r\n <app-alerta [mensaje]=\"textAlerta()\" [validateSalto]=\"validateSalto()\" />\r\n }\r\n @if(isModal()){\r\n <app-button icon=\"cerrar\" [closeButton]=\"true\" (accion)=\"cerrar()\" />\r\n }\r\n </div>\r\n</div>", styles: [".rotate-up{transform:rotate(180deg);transition:transform .3s ease}.icon-arrow{transition:transform .3s ease;margin-left:-12px;font-size:10px}.disabled-icon{opacity:.5;cursor:not-allowed}.header-actions{display:flex;align-items:center;margin-left:auto;gap:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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"] }, { kind: "component", type: AlertaComponent, selector: "app-alerta", inputs: ["titulo", "mensaje", "validateSalto"] }, { kind: "component", type: FilterToggleComponent, selector: "app-filter-toggle", inputs: ["hasData", "tamanio", "withFiltro"], outputs: ["withFiltroChange"] }] });
|
|
589
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: HeaderComponent, isStandalone: true, selector: "app-header", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, tamanio: { classPropertyName: "tamanio", publicName: "tamanio", isSignal: true, isRequired: false, transformFunction: null }, showFiltro: { classPropertyName: "showFiltro", publicName: "showFiltro", isSignal: true, isRequired: false, transformFunction: null }, withFiltro: { classPropertyName: "withFiltro", publicName: "withFiltro", isSignal: true, isRequired: false, transformFunction: null }, hasData: { classPropertyName: "hasData", publicName: "hasData", isSignal: true, isRequired: false, transformFunction: null }, isModal: { classPropertyName: "isModal", publicName: "isModal", isSignal: true, isRequired: false, transformFunction: null }, showAlerta: { classPropertyName: "showAlerta", publicName: "showAlerta", isSignal: true, isRequired: false, transformFunction: null }, textAlerta: { classPropertyName: "textAlerta", publicName: "textAlerta", isSignal: true, isRequired: false, transformFunction: null }, validateSalto: { classPropertyName: "validateSalto", publicName: "validateSalto", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { withFiltro: "withFiltroChange", cerrarModal: "cerrarModal" }, ngImport: i0, template: "<div class=\"d-flex justify-content-between position-relative flex-wrap\"\r\n [ngClass]=\"{ 'align-items-center': !validateSalto(), 'align-items-start': validateSalto()}\">\r\n <div (click)=\"toggleFiltro()\" [ngClass]=\"{ 'cursor-pointer': !isModal() }\" class=\"d-flex align-items-center mb-2\">\r\n <h5 class=\"fw-bold no-select\" [ngClass]=\"['fs-' + tamanio(), isModal() ? 'pt-3' : 'pt-2']\">\r\n {{ title() }}\r\n </h5>\r\n @if(showFiltro()){\r\n <div [ngClass]=\"{'pt-2': isModal()}\">\r\n <app-filter-toggle [hasData]=\"hasData()\" [(withFiltro)]=\"withFiltro\" />\r\n </div>\r\n }\r\n </div>\r\n\r\n <div class=\"header-actions\">\r\n @if (showAlerta()) {\r\n <app-alerta [mensaje]=\"textAlerta()\" [validateSalto]=\"validateSalto()\" />\r\n }\r\n @if(isModal()){\r\n <app-button icon=\"cerrar\" [closeButton]=\"true\" (accion)=\"cerrar()\" />\r\n }\r\n </div>\r\n</div>", styles: [".rotate-up{transform:rotate(180deg);transition:transform .3s ease}.icon-arrow{transition:transform .3s ease;margin-left:-12px;font-size:10px}.disabled-icon{opacity:.5;cursor:not-allowed}.header-actions{display:flex;align-items:center;margin-left:auto;gap:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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"] }, { kind: "component", type: AlertaComponent, selector: "app-alerta", inputs: ["titulo", "mensaje", "iconSize", "classContainer", "paddingClass", "validateSalto"] }, { kind: "component", type: FilterToggleComponent, selector: "app-filter-toggle", inputs: ["hasData", "tamanio", "withFiltro"], outputs: ["withFiltroChange"] }] });
|
|
587
590
|
}
|
|
588
591
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: HeaderComponent, decorators: [{
|
|
589
592
|
type: Component,
|