ng-components-tsi 0.0.24 → 0.0.26

package/fesm2022/ng-components-tsi.mjs

@@ -1,7 +1,7 @@
 import * as i1 from '@angular/common';
 import { CommonModule, NgClass, NgTemplateOutlet, DecimalPipe, DatePipe } from '@angular/common';
 import * as i0 from '@angular/core';
-import { input, output, HostListener, Directive, inject, viewChild, effect, ViewChild, Component, signal, computed, Injectable, ChangeDetectionStrategy, contentChild, ContentChild, model, ViewChildren, ElementRef, linkedSignal, untracked, Renderer2, TemplateRef, contentChildren } from '@angular/core';
+import { input, output, HostListener, Directive, inject, viewChild, effect, ViewChild, Component, signal, computed, Injectable, ChangeDetectionStrategy, contentChild, ContentChild, model, ViewChildren, ElementRef, linkedSignal, untracked, Renderer2, Input, TemplateRef, contentChildren } from '@angular/core';
 import * as i1$2 from '@angular/forms';
 import { FormsModule, NgModel } from '@angular/forms';
 import { DomSanitizer } from '@angular/platform-browser';
@@ -730,12 +730,15 @@ class CheckBoxComponent {
     value = input();
     disabled = input(false);
     binding = model();
+    class = input('');
+    checked = input(false);
+    changeCheck = output();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CheckBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: CheckBoxComponent, isStandalone: true, selector: "app-check-box", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, binding: { classPropertyName: "binding", publicName: "binding", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { binding: "bindingChange" }, ngImport: i0, template: "<div class=\"form-check\">\r\n    <input class=\"form-check-input\" type=\"checkbox\" [name]=\"name()\" [id]=\"id()\" [value]=\"value()\"\r\n        [(ngModel)]=\"binding\" [disabled]=\"disabled()\">\r\n    <label class=\"form-check-label cursor-pointer\" [for]=\"id()\">\r\n        {{ label() }}\r\n    </label>\r\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: CheckBoxComponent, isStandalone: true, selector: "app-check-box", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, binding: { classPropertyName: "binding", publicName: "binding", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { binding: "bindingChange", changeCheck: "changeCheck" }, ngImport: i0, template: "<label [ngClass]=\"class()\" >\r\n    <input type=\"checkbox\" animatedCheckbox [name]=\"name()\" [id]=\"id()\" [value]=\"value()\" [(ngModel)]=\"binding\" [disabled]=\"disabled()\"\r\n    [checked]=\"checked()\" (change)=\"changeCheck.emit($event)\"\r\n    >\r\n    <span class=\"text-dark\">{{ label() }}</span>\r\n</label>", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CheckBoxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-check-box', imports: [FormsModule], template: "<div class=\"form-check\">\r\n    <input class=\"form-check-input\" type=\"checkbox\" [name]=\"name()\" [id]=\"id()\" [value]=\"value()\"\r\n        [(ngModel)]=\"binding\" [disabled]=\"disabled()\">\r\n    <label class=\"form-check-label cursor-pointer\" [for]=\"id()\">\r\n        {{ label() }}\r\n    </label>\r\n</div>" }]
+            args: [{ selector: 'app-check-box', imports: [FormsModule, NgClass], changeDetection: ChangeDetectionStrategy.OnPush, template: "<label [ngClass]=\"class()\" >\r\n    <input type=\"checkbox\" animatedCheckbox [name]=\"name()\" [id]=\"id()\" [value]=\"value()\" [(ngModel)]=\"binding\" [disabled]=\"disabled()\"\r\n    [checked]=\"checked()\" (change)=\"changeCheck.emit($event)\"\r\n    >\r\n    <span class=\"text-dark\">{{ label() }}</span>\r\n</label>" }]
         }] });
 
 class AutocompleteV2Component {
@@ -847,7 +850,7 @@ class AutocompleteV2Component {
         itemElement?.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AutocompleteV2Component, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: AutocompleteV2Component, isStandalone: true, selector: "app-autocomplete-v2", inputs: { wlabel: { classPropertyName: "wlabel", publicName: "wlabel", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, isRequired: { classPropertyName: "isRequired", publicName: "isRequired", isSignal: true, isRequired: false, transformFunction: null }, keyCodigo: { classPropertyName: "keyCodigo", publicName: "keyCodigo", isSignal: true, isRequired: false, transformFunction: null }, keyDescri: { classPropertyName: "keyDescri", publicName: "keyDescri", isSignal: true, isRequired: false, transformFunction: null }, withTodos: { classPropertyName: "withTodos", publicName: "withTodos", isSignal: true, isRequired: false, transformFunction: null }, searchIdText: { classPropertyName: "searchIdText", publicName: "searchIdText", isSignal: true, isRequired: false, transformFunction: null }, disabled1: { classPropertyName: "disabled1", publicName: "disabled1", isSignal: true, isRequired: false, transformFunction: null }, disabled2: { classPropertyName: "disabled2", publicName: "disabled2", isSignal: true, isRequired: false, transformFunction: null }, isVertical: { classPropertyName: "isVertical", publicName: "isVertical", isSignal: true, isRequired: false, transformFunction: null }, joinInfo: { classPropertyName: "joinInfo", publicName: "joinInfo", isSignal: true, isRequired: false, transformFunction: null }, activeFocus: { classPropertyName: "activeFocus", publicName: "activeFocus", isSignal: true, isRequired: false, transformFunction: null }, customBorderColor: { classPropertyName: "customBorderColor", publicName: "customBorderColor", isSignal: true, isRequired: false, transformFunction: null }, customBoxShadow: { classPropertyName: "customBoxShadow", publicName: "customBoxShadow", isSignal: true, isRequired: false, transformFunction: null }, customTransition: { classPropertyName: "customTransition", publicName: "customTransition", isSignal: true, isRequired: false, transformFunction: null }, lista: { classPropertyName: "lista", publicName: "lista", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, searchText: { classPropertyName: "searchText", publicName: "searchText", isSignal: true, isRequired: false, transformFunction: null }, withCheckTodos: { classPropertyName: "withCheckTodos", publicName: "withCheckTodos", isSignal: true, isRequired: false, transformFunction: null }, allDisabled: { classPropertyName: "allDisabled", publicName: "allDisabled", isSignal: true, isRequired: false, transformFunction: null }, altoContainer: { classPropertyName: "altoContainer", publicName: "altoContainer", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchIdText: "searchIdTextChange", disabled1: "disabled1Change", disabled2: "disabled2Change", changeInput: "changeInput", value: "valueChange", searchText: "searchTextChange", allDisabled: "allDisabledChange" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true, isSignal: true }, { propertyName: "autocompleteItems", predicate: ["autocompleteItem"], descendants: true }], ngImport: i0, template: "@if (isVertical()) {\r\n<label for=\"{{'id_' + label()}}\" [style.min-width]=\"wlabel() + 'px'\"> {{label()}} @if (isRequired()) {<span\r\n    class=\"fw-bold text-danger\">(*)</span>}</label>\r\n}\r\n<div class=\"d-flex align-items-center\">\r\n  @if (!isVertical()) {\r\n  <label for=\"{{'id_' + label()}}\" [style.min-width]=\"wlabel() + 'px'\">{{label()}} @if (isRequired()) { <span\r\n      class=\"fw-bold text-danger\">(*)</span>}</label>\r\n  }\r\n\r\n  <div class=\"autocomplete d-flex \">\r\n    @if(computedType()){\r\n    <div class=\"content-1 me-1\">\r\n      <input type=\"text\" class=\"form-control show-input\"\r\n        [attr.data-active-focus]=\"activeFocus() == false ? 'false' : ''\"\r\n        [style.--focus-border-color]=\"customBorderColor()\" [style.--focus-box-shadow]=\"customBoxShadow()\"\r\n        [style.--focus-transition]=\"customTransition()\" [disabled]=\"allDisabled() ? true : disabled1()\"\r\n        [(ngModel)]=\"value\" (blur)=\"blurKey()\" id=\"{{'id_' + label()}}\" name=\"{{'id_' + label()}}\" />\r\n    </div>\r\n    }\r\n\r\n    <div class=\"input-container content-2 me-2\">\r\n      <input type=\"text\" [(ngModel)]=\"searchText\" class=\"form-control pe-4\" cdkOverlayOrigin\r\n        #autocomplete=\"cdkOverlayOrigin\" #inputRef [attr.data-active-focus]=\"activeFocus() == false ? 'false' : ''\"\r\n        [style.--focus-border-color]=\"customBorderColor()\" [style.--focus-box-shadow]=\"customBoxShadow()\"\r\n        [style.--focus-transition]=\"customTransition()\" [disabled]=\"allDisabled() ? true : disabled2()\" (input)=\"null\"\r\n        (blur)=\"showDropdown.set(false)\" (focus)=\"showDropdown.set(true)\" (keydown)=\"onKeyDown($event)\" />\r\n      @if (searchText().length > 0) {\r\n      <button @fadeInOut type=\"button\" class=\"btn-clear text-dark\" (click)=\"clear(); inputRef.focus()\">\r\n        &times;\r\n      </button>\r\n      }\r\n      <ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"autocomplete\"\r\n        [cdkConnectedOverlayOpen]=\"showDropdown()\" [cdkConnectedOverlayHasBackdrop]=\"true\"\r\n        [cdkConnectedOverlayWidth]=\"withInput()\" (backdropClick)=\"showDropdown.set(false)\"\r\n        cdkConnectedOverlayPanelClass=\"autocomplete-overlay\" cdkConnectedOverlayBackdropClass=\"transparent-backdrop\">\r\n\r\n        <ul [style.maxHeight.px]=\"altoContainer()\">\r\n          @for (item of filteredItems(); track $index) {\r\n          <li #autocompleteItem class=\"text-dark\"\r\n            [ngClass]=\"{'fw-bold': item[keyCodigo()] == value(), 'bg-primary text-white': highlightedIndex() == $index}\"\r\n            (mousedown)=\"selectItem(item)\">\r\n            @if (joinInfo()) {\r\n            {{ item[keyCodigo()] }} - {{ item[keyDescri()] }}\r\n            } @else{\r\n            {{ item[keyDescri()] }}\r\n            }\r\n            @if (item[keyCodigo()] == value()) {\r\n            <i class=\"far fa-check-circle fw-bold text-success cw-20\"></i>\r\n            }\r\n          </li>\r\n          }\r\n        </ul>\r\n      </ng-template>\r\n    </div>\r\n    @if (withCheckTodos()) {\r\n    <div class=\"px-2\"> <app-check-box label=\"Todos\" name=\"check_todos\" [value]=\"true\" [(binding)]=\"allDisabled\"\r\n        (bindingChange)=\"value.set('');\" /></div>\r\n    }\r\n  </div>\r\n</div>", styles: [".autocomplete{position:relative;width:100%}ul{width:100%;list-style:none;padding:0;margin:0;overflow:hidden;transition:max-height .3s ease-out,opacity .3s ease-out;box-shadow:0 4px 6px #0000001a;overflow-y:auto;border-radius:0 0 8px 8px;z-index:9999}li{padding:8px;font-size:.7rem;font-weight:400;cursor:pointer;opacity:80%}li:hover{opacity:100%;background:#16161616}.dropdown-arrow{position:absolute;right:15px;font-size:11px;transition:transform .3s ease-in-out;cursor:pointer;-webkit-user-select:none;user-select:none}@media (max-width: 442px){.d-flex{flex-direction:column!important;align-items:stretch!important}}.content-1{flex-basis:23%;display:flex;align-items:center}.content-2{flex-grow:1;display:flex;align-items:center}.input-container{position:relative;display:flex;align-items:center;width:70%}.show-input{display:block}@media (max-width: 443px){.show-input{display:none}.input-container{width:100%;padding-right:8px}}.btn-clear{position:absolute;right:8px;background:transparent;border:none;font-size:1.3rem;font-weight:500;line-height:1;cursor:pointer;padding:0}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$3.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$3.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: CheckBoxComponent, selector: "app-check-box", inputs: ["name", "id", "label", "value", "disabled", "binding"], outputs: ["bindingChange"] }], animations: [fadeInOut] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: AutocompleteV2Component, isStandalone: true, selector: "app-autocomplete-v2", inputs: { wlabel: { classPropertyName: "wlabel", publicName: "wlabel", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, isRequired: { classPropertyName: "isRequired", publicName: "isRequired", isSignal: true, isRequired: false, transformFunction: null }, keyCodigo: { classPropertyName: "keyCodigo", publicName: "keyCodigo", isSignal: true, isRequired: false, transformFunction: null }, keyDescri: { classPropertyName: "keyDescri", publicName: "keyDescri", isSignal: true, isRequired: false, transformFunction: null }, withTodos: { classPropertyName: "withTodos", publicName: "withTodos", isSignal: true, isRequired: false, transformFunction: null }, searchIdText: { classPropertyName: "searchIdText", publicName: "searchIdText", isSignal: true, isRequired: false, transformFunction: null }, disabled1: { classPropertyName: "disabled1", publicName: "disabled1", isSignal: true, isRequired: false, transformFunction: null }, disabled2: { classPropertyName: "disabled2", publicName: "disabled2", isSignal: true, isRequired: false, transformFunction: null }, isVertical: { classPropertyName: "isVertical", publicName: "isVertical", isSignal: true, isRequired: false, transformFunction: null }, joinInfo: { classPropertyName: "joinInfo", publicName: "joinInfo", isSignal: true, isRequired: false, transformFunction: null }, activeFocus: { classPropertyName: "activeFocus", publicName: "activeFocus", isSignal: true, isRequired: false, transformFunction: null }, customBorderColor: { classPropertyName: "customBorderColor", publicName: "customBorderColor", isSignal: true, isRequired: false, transformFunction: null }, customBoxShadow: { classPropertyName: "customBoxShadow", publicName: "customBoxShadow", isSignal: true, isRequired: false, transformFunction: null }, customTransition: { classPropertyName: "customTransition", publicName: "customTransition", isSignal: true, isRequired: false, transformFunction: null }, lista: { classPropertyName: "lista", publicName: "lista", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, searchText: { classPropertyName: "searchText", publicName: "searchText", isSignal: true, isRequired: false, transformFunction: null }, withCheckTodos: { classPropertyName: "withCheckTodos", publicName: "withCheckTodos", isSignal: true, isRequired: false, transformFunction: null }, allDisabled: { classPropertyName: "allDisabled", publicName: "allDisabled", isSignal: true, isRequired: false, transformFunction: null }, altoContainer: { classPropertyName: "altoContainer", publicName: "altoContainer", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchIdText: "searchIdTextChange", disabled1: "disabled1Change", disabled2: "disabled2Change", changeInput: "changeInput", value: "valueChange", searchText: "searchTextChange", allDisabled: "allDisabledChange" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true, isSignal: true }, { propertyName: "autocompleteItems", predicate: ["autocompleteItem"], descendants: true }], ngImport: i0, template: "@if (isVertical()) {\r\n<label for=\"{{'id_' + label()}}\" [style.min-width]=\"wlabel() + 'px'\"> {{label()}} @if (isRequired()) {<span\r\n    class=\"fw-bold text-danger\">(*)</span>}</label>\r\n}\r\n<div class=\"d-flex align-items-center\">\r\n  @if (!isVertical()) {\r\n  <label for=\"{{'id_' + label()}}\" [style.min-width]=\"wlabel() + 'px'\">{{label()}} @if (isRequired()) { <span\r\n      class=\"fw-bold text-danger\">(*)</span>}</label>\r\n  }\r\n\r\n  <div class=\"autocomplete d-flex \">\r\n    @if(computedType()){\r\n    <div class=\"content-1 me-1\">\r\n      <input type=\"text\" class=\"form-control show-input\"\r\n        [attr.data-active-focus]=\"activeFocus() == false ? 'false' : ''\"\r\n        [style.--focus-border-color]=\"customBorderColor()\" [style.--focus-box-shadow]=\"customBoxShadow()\"\r\n        [style.--focus-transition]=\"customTransition()\" [disabled]=\"allDisabled() ? true : disabled1()\"\r\n        [(ngModel)]=\"value\" (blur)=\"blurKey()\" id=\"{{'id_' + label()}}\" name=\"{{'id_' + label()}}\" />\r\n    </div>\r\n    }\r\n\r\n    <div class=\"input-container content-2 me-2\">\r\n      <input type=\"text\" [(ngModel)]=\"searchText\" class=\"form-control pe-4\" cdkOverlayOrigin\r\n        #autocomplete=\"cdkOverlayOrigin\" #inputRef [attr.data-active-focus]=\"activeFocus() == false ? 'false' : ''\"\r\n        [style.--focus-border-color]=\"customBorderColor()\" [style.--focus-box-shadow]=\"customBoxShadow()\"\r\n        [style.--focus-transition]=\"customTransition()\" [disabled]=\"allDisabled() ? true : disabled2()\" (input)=\"null\"\r\n        (blur)=\"showDropdown.set(false)\" (focus)=\"showDropdown.set(true)\" (keydown)=\"onKeyDown($event)\" />\r\n      @if (searchText().length > 0) {\r\n      <button @fadeInOut type=\"button\" class=\"btn-clear text-dark\" (click)=\"clear(); inputRef.focus()\">\r\n        &times;\r\n      </button>\r\n      }\r\n      <ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"autocomplete\"\r\n        [cdkConnectedOverlayOpen]=\"showDropdown()\" [cdkConnectedOverlayHasBackdrop]=\"true\"\r\n        [cdkConnectedOverlayWidth]=\"withInput()\" (backdropClick)=\"showDropdown.set(false)\"\r\n        cdkConnectedOverlayPanelClass=\"autocomplete-overlay\" cdkConnectedOverlayBackdropClass=\"transparent-backdrop\">\r\n\r\n        <ul [style.maxHeight.px]=\"altoContainer()\">\r\n          @for (item of filteredItems(); track $index) {\r\n          <li #autocompleteItem class=\"text-dark\"\r\n            [ngClass]=\"{'fw-bold': item[keyCodigo()] == value(), 'bg-primary text-white': highlightedIndex() == $index}\"\r\n            (mousedown)=\"selectItem(item)\">\r\n            @if (joinInfo()) {\r\n            {{ item[keyCodigo()] }} - {{ item[keyDescri()] }}\r\n            } @else{\r\n            {{ item[keyDescri()] }}\r\n            }\r\n            @if (item[keyCodigo()] == value()) {\r\n            <i class=\"far fa-check-circle fw-bold text-success cw-20\"></i>\r\n            }\r\n          </li>\r\n          }\r\n        </ul>\r\n      </ng-template>\r\n    </div>\r\n    @if (withCheckTodos()) {\r\n    <div class=\"px-2\"> <app-check-box label=\"Todos\" name=\"check_todos\" [value]=\"true\" [(binding)]=\"allDisabled\"\r\n        (bindingChange)=\"value.set('');\" /></div>\r\n    }\r\n  </div>\r\n</div>", styles: [".autocomplete{position:relative;width:100%}ul{width:100%;list-style:none;padding:0;margin:0;overflow:hidden;transition:max-height .3s ease-out,opacity .3s ease-out;box-shadow:0 4px 6px #0000001a;overflow-y:auto;border-radius:0 0 8px 8px;z-index:9999}li{padding:8px;font-size:.7rem;font-weight:400;cursor:pointer;opacity:80%}li:hover{opacity:100%;background:#16161616}.dropdown-arrow{position:absolute;right:15px;font-size:11px;transition:transform .3s ease-in-out;cursor:pointer;-webkit-user-select:none;user-select:none}@media (max-width: 442px){.d-flex{flex-direction:column!important;align-items:stretch!important}}.content-1{flex-basis:23%;display:flex;align-items:center}.content-2{flex-grow:1;display:flex;align-items:center}.input-container{position:relative;display:flex;align-items:center;width:70%}.show-input{display:block}@media (max-width: 443px){.show-input{display:none}.input-container{width:100%;padding-right:8px}}.btn-clear{position:absolute;right:8px;background:transparent;border:none;font-size:1.3rem;font-weight:500;line-height:1;cursor:pointer;padding:0}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$3.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$3.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: CheckBoxComponent, selector: "app-check-box", inputs: ["name", "id", "label", "value", "disabled", "binding", "class", "checked"], outputs: ["bindingChange", "changeCheck"] }], animations: [fadeInOut] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AutocompleteV2Component, decorators: [{
             type: Component,
@@ -973,23 +976,24 @@ class DecimalDirective {
         this.isFocused = false;
         this.formatValue();
     }
-    onInput(event) {
-        const input = event.target;
-        const rawValue = input.value;
-        const cleaned = rawValue.replace(/[^0-9.,-]/g, '');
-        const normalized = cleaned.replace(',', '.');
-        const parsed = parseFloat(normalized);
-        if (!isNaN(parsed)) {
-            this.ngModel.update.emit(parsed);
-        }
-    }
+    // @HostListener('input', ['$event'])
+    // onInput(event: Event): void {
+    //   const input = event.target as HTMLInputElement
+    //   const rawValue = input.value
+    //   const cleaned = rawValue.replace(/[^0-9.,-]/g, '')
+    //   const normalized = cleaned.replace(',', '.')
+    //   const parsed = parseFloat(normalized)
+    //   if (!isNaN(parsed)) {
+    //     this.ngModel.update.emit(parsed)
+    //   }
+    // }
     formatValue() {
         const value = cleanNumber(this.ngModel.model);
         const formatted = this.decimalPipe.transform(value, (this.appDecimal() ?? '1.2-2'));
         this.elementRef.nativeElement.value = formatted !== null ? formatted : this.decimalPipe.transform(0, (this.appDecimal() ?? '1.2-2'));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DecimalDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.15", type: DecimalDirective, isStandalone: true, selector: "[appDecimal]", inputs: { appDecimal: { classPropertyName: "appDecimal", publicName: "appDecimal", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "blur": "onBlur()", "input": "onInput($event)" } }, providers: [DecimalPipe], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.15", type: DecimalDirective, isStandalone: true, selector: "[appDecimal]", inputs: { appDecimal: { classPropertyName: "appDecimal", publicName: "appDecimal", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "blur": "onBlur()" } }, providers: [DecimalPipe], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DecimalDirective, decorators: [{
             type: Directive,
@@ -1000,9 +1004,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
         }], propDecorators: { onBlur: [{
                 type: HostListener,
                 args: ['blur']
-            }], onInput: [{
-                type: HostListener,
-                args: ['input', ['$event']]
             }] } });
 
 class OnlyNumberDirective {
@@ -1356,11 +1357,11 @@ class InputComponent {
         this.changeInput.emit(encontrar);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: InputComponent, isStandalone: true, selector: "app-input", inputs: { wlabel: { classPropertyName: "wlabel", publicName: "wlabel", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, withBuscar: { classPropertyName: "withBuscar", publicName: "withBuscar", isSignal: true, isRequired: false, transformFunction: null }, isRequired: { classPropertyName: "isRequired", publicName: "isRequired", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, value2: { classPropertyName: "value2", publicName: "value2", isSignal: true, isRequired: false, transformFunction: null }, position_row: { classPropertyName: "position_row", publicName: "position_row", isSignal: true, isRequired: false, transformFunction: null }, withChangeInput: { classPropertyName: "withChangeInput", publicName: "withChangeInput", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, isImportant: { classPropertyName: "isImportant", publicName: "isImportant", isSignal: true, isRequired: false, transformFunction: null }, lista: { classPropertyName: "lista", publicName: "lista", isSignal: true, isRequired: false, transformFunction: null }, keyCodigo: { classPropertyName: "keyCodigo", publicName: "keyCodigo", isSignal: true, isRequired: false, transformFunction: null }, keyDescri: { classPropertyName: "keyDescri", publicName: "keyDescri", isSignal: true, isRequired: false, transformFunction: null }, joinInfo: { classPropertyName: "joinInfo", publicName: "joinInfo", isSignal: true, isRequired: false, transformFunction: null }, withTodos: { classPropertyName: "withTodos", publicName: "withTodos", isSignal: true, isRequired: false, transformFunction: null }, allDisabled: { classPropertyName: "allDisabled", publicName: "allDisabled", isSignal: true, isRequired: false, transformFunction: null }, isVertical: { classPropertyName: "isVertical", publicName: "isVertical", isSignal: true, isRequired: false, transformFunction: null }, alto: { classPropertyName: "alto", publicName: "alto", isSignal: true, isRequired: false, transformFunction: null }, formatNumber: { classPropertyName: "formatNumber", publicName: "formatNumber", isSignal: true, isRequired: false, transformFunction: null }, blur: { classPropertyName: "blur", publicName: "blur", isSignal: true, isRequired: false, transformFunction: null }, enter: { classPropertyName: "enter", publicName: "enter", isSignal: true, isRequired: false, transformFunction: null }, keyup: { classPropertyName: "keyup", publicName: "keyup", isSignal: true, isRequired: false, transformFunction: null }, invalidInput: { classPropertyName: "invalidInput", publicName: "invalidInput", isSignal: true, isRequired: false, transformFunction: null }, activeFocus: { classPropertyName: "activeFocus", publicName: "activeFocus", isSignal: true, isRequired: false, transformFunction: null }, customBorderColor: { classPropertyName: "customBorderColor", publicName: "customBorderColor", isSignal: true, isRequired: false, transformFunction: null }, customBoxShadow: { classPropertyName: "customBoxShadow", publicName: "customBoxShadow", isSignal: true, isRequired: false, transformFunction: null }, customTransition: { classPropertyName: "customTransition", publicName: "customTransition", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, textoAyuda: { classPropertyName: "textoAyuda", publicName: "textoAyuda", isSignal: true, isRequired: false, transformFunction: null }, sinAyuda: { classPropertyName: "sinAyuda", publicName: "sinAyuda", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, showTopLabel: { classPropertyName: "showTopLabel", publicName: "showTopLabel", isSignal: true, isRequired: false, transformFunction: null }, topLabelText: { classPropertyName: "topLabelText", publicName: "topLabelText", isSignal: true, isRequired: false, transformFunction: null }, firstItemDefault: { classPropertyName: "firstItemDefault", publicName: "firstItemDefault", isSignal: true, isRequired: false, transformFunction: null }, typeKey: { classPropertyName: "typeKey", publicName: "typeKey", isSignal: true, isRequired: false, transformFunction: null }, validaCodigo: { classPropertyName: "validaCodigo", publicName: "validaCodigo", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", value2: "value2Change", disabled: "disabledChange", allDisabled: "allDisabledChange", invalidInput: "invalidInputChange", accion: "accion", changeInput: "changeInput" }, ngImport: i0, template: "@if (isVertical()) {\r\n<label [ngClass]=\"{'text-error': isImportant()}\" for=\"{{'id_' + label()}}\" [style.min-width]=\"wlabel() + 'px'\"> {{label()}} @if (isRequired()) {<span\r\n        class=\"fw-bold text-danger\">(*)</span>}</label>\r\n}\r\n<div class=\"d-flex align-items-{{position_row()}}\">\r\n    @if (!isVertical()) {\r\n    <label [ngClass]=\"{'text-error': isImportant()}\" for=\"{{'id_' + label()}}\" [style.min-width]=\"wlabel() + 'px'\"> {{label()}} @if (isRequired()) {<span\r\n            class=\"fw-bold text-danger\">(*)</span>}</label>\r\n    }\r\n    <div class=\"flex-grow-1 me-2\">\r\n        <div [ngClass]=\"{'d-block': typeStandar() == 'date','d-flex': typeStandar() != 'date', 'flex-column': showTopLabel() }\"\r\n            class=\"position-relative\">\r\n            \r\n            @if (showTopLabel() && topLabelText()) {\r\n            <div class=\"input-top-label\">\r\n                <label class=\"fw-bold\">{{ topLabelText() }}</label>\r\n            </div>\r\n            }\r\n            \r\n            @if (!distintInputs.includes(typeStandar())) {\r\n            <input [type]=\"typeStandar()\" (blur)=\"callBlur()\" (keyup.enter)=\"ejecutarAccion()\" (input)=\"keyup()?.()\"\r\n                class=\"form-control text-{{position()}}\"\r\n                [attr.data-active-focus]=\"activeFocus() == false ? 'false' : ''\"\r\n                [style.--focus-border-color]=\"customBorderColor()\" [style.--focus-box-shadow]=\"customBoxShadow()\"\r\n                [style.--focus-transition]=\"customTransition()\" [style.max-width.px]=\"maxWidth()\"\r\n                (focus)=\"invalidInput.set(false)\" autocomplete=\"off\" [ngClass]=\"invalidInput() ? 'input-error' : ''\"\r\n                [disabled]=\"allDisabled() ? true : disabled()\" [(ngModel)]=\"value\" id=\"{{'id_' + label()}}\" [caracteresCodigo]=\"validaCodigo()\"\r\n                name=\"{{'id_' + label()}}\" [attr.maxlength]=\"maxLength()\">\r\n            }\r\n\r\n            @if (typeStandar() == 'input-switch') {\r\n            <div class=\"d-flex w-100\">\r\n                <div class=\"flex-grow-1\">\r\n                    <input type=\"text\" class=\"form-control\" (blur)=\"callBlur()\" (input)=\"keyup()?.()\"\r\n                [attr.data-active-focus]=\"activeFocus() == false ? 'false' : ''\"\r\n                [style.--focus-border-color]=\"customBorderColor()\" [style.--focus-box-shadow]=\"customBoxShadow()\"\r\n                [style.--focus-transition]=\"customTransition()\" [ngClass]=\"'text-' + position()\"\r\n                [style.max-width.px]=\"maxWidth()\" [disabled]=\"allDisabled() ? true : disabled()\" [(ngModel)]=\"value\"\r\n                id=\"{{'id_' + label()}}\" name=\"{{'id_' + label()}}\" [caracteresCodigo]=\"validaCodigo()\"\r\n                [attr.maxlength]=\"maxLength()\" (focus)=\"invalidInput.set(false)\">\r\n                </div>\r\n                <div class=\"px-2\">\r\n                    <app-switch-activo valueOn=\"S\" valueOff=\"N\" [id]=\"label()\" [(model)]=\"value2\" />\r\n                </div>\r\n            </div>\r\n            }\r\n\r\n            @if (typeStandar() == 'number-format-decimal') {\r\n            <input type=\"text\" class=\"form-control\" (blur)=\"callBlur()\" (input)=\"keyup()?.()\"\r\n                [attr.data-active-focus]=\"activeFocus() == false ? 'false' : ''\"\r\n                [style.--focus-border-color]=\"customBorderColor()\" [style.--focus-box-shadow]=\"customBoxShadow()\"\r\n                [style.--focus-transition]=\"customTransition()\" [ngClass]=\"'text-' + position()\"\r\n                [style.max-width.px]=\"maxWidth()\" [disabled]=\"allDisabled() ? true : disabled()\" [(ngModel)]=\"value\"\r\n                id=\"{{'id_' + label()}}\" name=\"{{'id_' + label()}}\" [appDecimal]=\"formatNumber()\" onlyNumberFlex\r\n                [attr.maxlength]=\"maxLength()\" (focus)=\"invalidInput.set(false)\">\r\n            }\r\n\r\n            @if (typeStandar() == 'number-integer') {\r\n            <input type=\"text\" class=\"form-control text-{{position()}}\" (blur)=\"callBlur()\" (input)=\"keyup()?.()\"\r\n                [attr.data-active-focus]=\"activeFocus() == false ? 'false' : ''\"\r\n                [style.--focus-border-color]=\"customBorderColor()\" [style.--focus-box-shadow]=\"customBoxShadow()\"\r\n                [style.--focus-transition]=\"customTransition()\" [style.max-width.px]=\"maxWidth()\"\r\n                [ngClass]=\"invalidInput() ? 'input-error' : ''\" [disabled]=\"allDisabled() ? true : disabled()\"\r\n                [(ngModel)]=\"value\" id=\"{{'id_' + label()}}\" name=\"{{'id_' + label()}}\" onlyNumber\r\n                [attr.maxlength]=\"maxLength()\" (focus)=\"invalidInput.set(false)\">\r\n            }\r\n\r\n            @if (typeStandar() == 'day') {\r\n            <input type=\"text\" class=\"form-control text-{{position()}}\" (blur)=\"callBlur()\" (input)=\"keyup()?.()\"\r\n                [attr.data-active-focus]=\"activeFocus() == false ? 'false' : ''\"\r\n                [style.--focus-border-color]=\"customBorderColor()\" [style.--focus-box-shadow]=\"customBoxShadow()\"\r\n                [style.--focus-transition]=\"customTransition()\" [style.max-width.px]=\"maxWidth()\"\r\n                [ngClass]=\"invalidInput() ? 'input-error' : ''\" [disabled]=\"allDisabled() ? true : disabled()\"\r\n                [(ngModel)]=\"value\" id=\"{{'id_' + label()}}\" name=\"{{'id_' + label()}}\" onlyDay\r\n                [attr.maxlength]=\"maxLength()\" (focus)=\"invalidInput.set(false)\">\r\n            }\r\n\r\n            @if (typeStandar() == 'date') {\r\n            <input type=\"date\" class=\"form-control text-{{position()}}\" (blur)=\"callBlur()\" (input)=\"keyup()?.()\"\r\n                [attr.data-active-focus]=\"activeFocus() == false ? 'false' : ''\"\r\n                [style.--focus-border-color]=\"customBorderColor()\" [style.--focus-box-shadow]=\"customBoxShadow()\"\r\n                [style.--focus-transition]=\"customTransition()\" [ngClass]=\"invalidInput() ? 'input-error' : ''\"\r\n                [disabled]=\"allDisabled() ? true : disabled()\" [(ngModel)]=\"value\" id=\"{{'id_' + label()}}\"\r\n                name=\"{{'id_' + label()}}\" (focus)=\"invalidInput.set(false)\">\r\n            }\r\n\r\n            @if (typeStandar() == 'time') {\r\n            <input type=\"time\" class=\"form-control text-{{position()}}\" (blur)=\"callBlur()\" (input)=\"keyup()?.()\"\r\n                [attr.data-active-focus]=\"activeFocus() == false ? 'false' : ''\"\r\n                [style.--focus-border-color]=\"customBorderColor()\" [style.--focus-box-shadow]=\"customBoxShadow()\"\r\n                [style.--focus-transition]=\"customTransition()\" [ngClass]=\"invalidInput() ? 'input-error' : ''\"\r\n                [disabled]=\"allDisabled() ? true : disabled()\" [(ngModel)]=\"value\" id=\"{{'id_' + label()}}\"\r\n                name=\"{{'id_' + label()}}\" (focus)=\"invalidInput.set(false)\">\r\n            }\r\n\r\n            @if (typeStandar() == 'text-area') {\r\n            <textarea class=\"{{'text-' + position()}} form-area\"\r\n                [attr.data-active-focus]=\"activeFocus() == false ? 'false' : ''\"\r\n                [style.--focus-border-color]=\"customBorderColor()\" [style.--focus-box-shadow]=\"customBoxShadow()\"\r\n                [style.--focus-transition]=\"customTransition()\" id=\"{{'id_' + label()}}\" name=\"{{'id_' + label()}}\"\r\n                [disabled]=\"allDisabled() ? true : disabled()\" [(ngModel)]=\"value\" [rows]=\"alto()\"\r\n                [attr.maxlength]=\"maxLength()\" (focus)=\"invalidInput.set(false)\">\r\n\r\n                </textarea>\r\n            }\r\n\r\n            @if (typeStandar() == 'select') {\r\n            <select class=\"form-select\" [attr.data-active-focus]=\"activeFocus() == false ? 'false' : ''\"\r\n                [class.text-error]=\"isImportant()\"\r\n                [style.--focus-border-color]=\"customBorderColor()\" [style.--focus-box-shadow]=\"customBoxShadow()\"\r\n                [style.--focus-transition]=\"customTransition()\" [style.max-width.px]=\"maxWidth()\" [style.min-width.px]=\"maxWidth()\" [(ngModel)]=\"value\"\r\n                [disabled]=\"allDisabled() ? true : disabled()\" id=\"{{'id_content' + label()}}\"\r\n                name=\"{{'id_content' + label()}}\" (change)=\"emitirChange()\" (focus)=\"focusInput()\">\r\n                @if (withTodos()) {\r\n                <option [value]=\"typeKey() == 'number' ? -1 : ''\">Todos</option>\r\n                }\r\n                @for (item of lista(); track $index) {\r\n                @if (!keyCodigo()) {\r\n                <option [value]=\"item\"> {{ item }}</option>\r\n                }\r\n                @if (keyCodigo()) {\r\n                <option [value]=\"item[keyCodigo()]\"> {{ joinInfo() ? item[keyCodigo()] + ' - ' + item[keyDescri()] :\r\n                    item[keyDescri()]}}</option>\r\n                }\r\n\r\n                }\r\n            </select>\r\n            }\r\n\r\n            @if (withBuscar()) {\r\n            <button class=\"btn btn-dark boton-buscar fs-7\" [disabled]=\"allDisabled()\" (click)=\"ejecutarAccion()\">\r\n                <i class=\"fa fa-search\"></i>\r\n            </button>\r\n            }\r\n            @if (withChangeInput()) {\r\n            <button class=\"btn btn-dark boton-buscar fs-7\" [disabled]=\"allDisabled()\" (click)=\"changeInputAction()\">\r\n                <i [ngClass]=\"typeStandar() == 'select' ? 'fas fa-times' : 'fa solid fa-pen'\"></i>\r\n            </button>\r\n            }\r\n            @if (invalidInput()) {\r\n            <div class=\"infoBox\" @fadeInOut><i class=\"fas fa-exclamation-triangle fs-9 text-danger\"></i> Ocurri\u00F3 un\r\n                error: El campo es obligatorio, aseg\u00FArese de ingresar datos v\u00E1lidos.</div>\r\n            }\r\n\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n@if (textoAyuda() && typeStandar() == 'text-area') {\r\n<div class=\"d-flex flex-wrap justify-content-between align-items-center px-2\">\r\n    <span class=\"text-error fs-6\">{{textoAyuda()}}</span>\r\n    <span class=\"text-dark fs-6 fw-5\">{{ valueSize() }}/{{maxLength()}} caracteres</span>\r\n</div>\r\n}\r\n\r\n@if (sinAyuda() && typeStandar() == 'text-area') {\r\n<div class=\"d-flex flex-wrap justify-content-between align-items-center px-2\">\r\n    <span class=\"text-error fs-6\"></span>\r\n    <span class=\"text-dark fs-6 fw-5\">{{ valueSize() }}/{{maxLength()}} caracteres</span>\r\n</div>\r\n}", styles: [".text-error{color:#d60000!important;font-weight:700!important}@media (max-width: 442px){.d-flex{flex-direction:column!important;align-items:stretch!important}.infoBox{font-size:12px;padding:8px 12px;width:100%!important;max-width:100%!important}}@media (max-width: 900px){.infoBox{width:250px!important}}.infoBox{position:absolute;width:400px;top:calc(100% + 10px);left:0;right:0;margin-top:2px;background:#be0000d5;box-shadow:0 4px 12px #0003;border-radius:6px;padding:15px 12px;font-size:14px;color:#dbdbdb;z-index:10;font-size:12px;font-weight:600}.infoBox:before{content:\"\";position:absolute;top:-10px;left:20px;border-width:0 8px 10px 8px;border-style:solid;border-color:transparent transparent rgba(190,0,0,.835) transparent;filter:drop-shadow(0 -1px 1px rgba(0,0,0,.1))}.input-error{border:1px solid rgb(203,0,0);color:#cb0000!important;animation:aura-pulse 1.5s ease-out infinite;position:relative;z-index:1}@keyframes aura-pulse{0%{box-shadow:0 0 #cb0000b3}70%{box-shadow:0 0 0 5px #cb000000}to{box-shadow:0 0 #cb000000}}\n"], dependencies: [{ 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: DecimalDirective, selector: "[appDecimal]", inputs: ["appDecimal"] }, { kind: "directive", type: OnlyNumberDirective, selector: "[onlyNumber]" }, { kind: "directive", type: OnlyDayDirective, selector: "[onlyDay]" }, { kind: "component", type: SwitchActivoComponent, selector: "app-switch-activo", inputs: ["valueOn", "valueOff", "labelOn", "labelOff", "iconOn", "iconOff", "colorOn", "colorOff", "id", "model"], outputs: ["modelChange"] }, { kind: "directive", type: OnlyNumberFlexDirective, selector: "[onlyNumberFlex]" }, { kind: "directive", type: CaracteresCodigoDirective, selector: "[caracteresCodigo]", inputs: ["caracteresCodigo"] }], animations: [fadeInOut] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: InputComponent, isStandalone: true, selector: "app-input", inputs: { wlabel: { classPropertyName: "wlabel", publicName: "wlabel", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, withBuscar: { classPropertyName: "withBuscar", publicName: "withBuscar", isSignal: true, isRequired: false, transformFunction: null }, isRequired: { classPropertyName: "isRequired", publicName: "isRequired", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, value2: { classPropertyName: "value2", publicName: "value2", isSignal: true, isRequired: false, transformFunction: null }, position_row: { classPropertyName: "position_row", publicName: "position_row", isSignal: true, isRequired: false, transformFunction: null }, withChangeInput: { classPropertyName: "withChangeInput", publicName: "withChangeInput", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, isImportant: { classPropertyName: "isImportant", publicName: "isImportant", isSignal: true, isRequired: false, transformFunction: null }, lista: { classPropertyName: "lista", publicName: "lista", isSignal: true, isRequired: false, transformFunction: null }, keyCodigo: { classPropertyName: "keyCodigo", publicName: "keyCodigo", isSignal: true, isRequired: false, transformFunction: null }, keyDescri: { classPropertyName: "keyDescri", publicName: "keyDescri", isSignal: true, isRequired: false, transformFunction: null }, joinInfo: { classPropertyName: "joinInfo", publicName: "joinInfo", isSignal: true, isRequired: false, transformFunction: null }, withTodos: { classPropertyName: "withTodos", publicName: "withTodos", isSignal: true, isRequired: false, transformFunction: null }, allDisabled: { classPropertyName: "allDisabled", publicName: "allDisabled", isSignal: true, isRequired: false, transformFunction: null }, isVertical: { classPropertyName: "isVertical", publicName: "isVertical", isSignal: true, isRequired: false, transformFunction: null }, alto: { classPropertyName: "alto", publicName: "alto", isSignal: true, isRequired: false, transformFunction: null }, formatNumber: { classPropertyName: "formatNumber", publicName: "formatNumber", isSignal: true, isRequired: false, transformFunction: null }, blur: { classPropertyName: "blur", publicName: "blur", isSignal: true, isRequired: false, transformFunction: null }, enter: { classPropertyName: "enter", publicName: "enter", isSignal: true, isRequired: false, transformFunction: null }, keyup: { classPropertyName: "keyup", publicName: "keyup", isSignal: true, isRequired: false, transformFunction: null }, invalidInput: { classPropertyName: "invalidInput", publicName: "invalidInput", isSignal: true, isRequired: false, transformFunction: null }, activeFocus: { classPropertyName: "activeFocus", publicName: "activeFocus", isSignal: true, isRequired: false, transformFunction: null }, customBorderColor: { classPropertyName: "customBorderColor", publicName: "customBorderColor", isSignal: true, isRequired: false, transformFunction: null }, customBoxShadow: { classPropertyName: "customBoxShadow", publicName: "customBoxShadow", isSignal: true, isRequired: false, transformFunction: null }, customTransition: { classPropertyName: "customTransition", publicName: "customTransition", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, textoAyuda: { classPropertyName: "textoAyuda", publicName: "textoAyuda", isSignal: true, isRequired: false, transformFunction: null }, sinAyuda: { classPropertyName: "sinAyuda", publicName: "sinAyuda", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, showTopLabel: { classPropertyName: "showTopLabel", publicName: "showTopLabel", isSignal: true, isRequired: false, transformFunction: null }, topLabelText: { classPropertyName: "topLabelText", publicName: "topLabelText", isSignal: true, isRequired: false, transformFunction: null }, firstItemDefault: { classPropertyName: "firstItemDefault", publicName: "firstItemDefault", isSignal: true, isRequired: false, transformFunction: null }, typeKey: { classPropertyName: "typeKey", publicName: "typeKey", isSignal: true, isRequired: false, transformFunction: null }, validaCodigo: { classPropertyName: "validaCodigo", publicName: "validaCodigo", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", value2: "value2Change", disabled: "disabledChange", allDisabled: "allDisabledChange", invalidInput: "invalidInputChange", accion: "accion", changeInput: "changeInput" }, ngImport: i0, template: "@if (isVertical()) {\r\n<label [ngClass]=\"{'text-error': isImportant()}\" for=\"{{'id_' + label()}}\" [style.min-width]=\"wlabel() + 'px'\"> {{label()}} @if (isRequired()) {<span\r\n        class=\"fw-bold text-danger\">(*)</span>}</label>\r\n}\r\n<div class=\"d-flex align-items-{{position_row()}}\">\r\n    @if (!isVertical()) {\r\n    <label [ngClass]=\"{'text-error': isImportant()}\" for=\"{{'id_' + label()}}\" [style.min-width]=\"wlabel() + 'px'\"> {{label()}} @if (isRequired()) {<span\r\n            class=\"fw-bold text-danger\">(*)</span>}</label>\r\n    }\r\n    <div class=\"flex-grow-1 me-2\">\r\n        <div [ngClass]=\"{'d-block': typeStandar() == 'date','d-flex': typeStandar() != 'date', 'flex-column': showTopLabel() }\"\r\n            class=\"position-relative\">\r\n            \r\n            @if (showTopLabel() && topLabelText()) {\r\n            <div class=\"input-top-label\">\r\n                <label class=\"fw-bold\">{{ topLabelText() }}</label>\r\n            </div>\r\n            }\r\n            \r\n            @if (!distintInputs.includes(typeStandar())) {\r\n            <input [type]=\"typeStandar()\" (blur)=\"callBlur()\" (keyup.enter)=\"ejecutarAccion()\" (input)=\"keyup()?.()\"\r\n                class=\"form-control text-{{position()}}\"\r\n                [attr.data-active-focus]=\"activeFocus() == false ? 'false' : ''\"\r\n                [style.--focus-border-color]=\"customBorderColor()\" [style.--focus-box-shadow]=\"customBoxShadow()\"\r\n                [style.--focus-transition]=\"customTransition()\" [style.max-width.px]=\"maxWidth()\"\r\n                (focus)=\"invalidInput.set(false)\" autocomplete=\"off\" [ngClass]=\"invalidInput() ? 'input-error' : ''\"\r\n                [disabled]=\"allDisabled() ? true : disabled()\" [(ngModel)]=\"value\" id=\"{{'id_' + label()}}\" [caracteresCodigo]=\"validaCodigo()\"\r\n                name=\"{{'id_' + label()}}\" [attr.maxlength]=\"maxLength()\">\r\n            }\r\n\r\n            @if (typeStandar() == 'input-switch') {\r\n            <div class=\"d-flex w-100\">\r\n                <div class=\"flex-grow-1\">\r\n                    <input type=\"text\" class=\"form-control\" (blur)=\"callBlur()\" (input)=\"keyup()?.()\"\r\n                [attr.data-active-focus]=\"activeFocus() == false ? 'false' : ''\"\r\n                [style.--focus-border-color]=\"customBorderColor()\" [style.--focus-box-shadow]=\"customBoxShadow()\"\r\n                [style.--focus-transition]=\"customTransition()\" [ngClass]=\"'text-' + position()\"\r\n                [style.max-width.px]=\"maxWidth()\" [disabled]=\"allDisabled() ? true : disabled()\" [(ngModel)]=\"value\"\r\n                id=\"{{'id_' + label()}}\" name=\"{{'id_' + label()}}\" [caracteresCodigo]=\"validaCodigo()\"\r\n                [attr.maxlength]=\"maxLength()\" (focus)=\"invalidInput.set(false)\">\r\n                </div>\r\n                <div class=\"px-2\">\r\n                    <app-switch-activo valueOn=\"S\" valueOff=\"N\" [id]=\"label()\" [(model)]=\"value2\" />\r\n                </div>\r\n            </div>\r\n            }\r\n\r\n            @if (typeStandar() == 'number-format-decimal') {\r\n            <input type=\"text\" class=\"form-control\" (blur)=\"callBlur()\" (input)=\"keyup()?.()\"\r\n                [attr.data-active-focus]=\"activeFocus() == false ? 'false' : ''\"\r\n                [style.--focus-border-color]=\"customBorderColor()\" [style.--focus-box-shadow]=\"customBoxShadow()\"\r\n                [style.--focus-transition]=\"customTransition()\" [ngClass]=\"'text-' + position()\"\r\n                [style.max-width.px]=\"maxWidth()\" [disabled]=\"allDisabled() ? true : disabled()\" [(ngModel)]=\"value\"\r\n                id=\"{{'id_' + label()}}\" name=\"{{'id_' + label()}}\" [appDecimal]=\"formatNumber()\" onlyNumberFlex\r\n                [attr.maxlength]=\"maxLength()\" (focus)=\"invalidInput.set(false)\">\r\n            }\r\n\r\n            @if (typeStandar() == 'number-integer') {\r\n            <input type=\"text\" class=\"form-control text-{{position()}}\" (blur)=\"callBlur()\" (input)=\"keyup()?.()\"\r\n                [attr.data-active-focus]=\"activeFocus() == false ? 'false' : ''\"\r\n                [style.--focus-border-color]=\"customBorderColor()\" [style.--focus-box-shadow]=\"customBoxShadow()\"\r\n                [style.--focus-transition]=\"customTransition()\" [style.max-width.px]=\"maxWidth()\"\r\n                [ngClass]=\"invalidInput() ? 'input-error' : ''\" [disabled]=\"allDisabled() ? true : disabled()\"\r\n                [(ngModel)]=\"value\" id=\"{{'id_' + label()}}\" name=\"{{'id_' + label()}}\" onlyNumber\r\n                [attr.maxlength]=\"maxLength()\" (focus)=\"invalidInput.set(false)\">\r\n            }\r\n\r\n            @if (typeStandar() == 'day') {\r\n            <input type=\"text\" class=\"form-control text-{{position()}}\" (blur)=\"callBlur()\" (input)=\"keyup()?.()\"\r\n                [attr.data-active-focus]=\"activeFocus() == false ? 'false' : ''\"\r\n                [style.--focus-border-color]=\"customBorderColor()\" [style.--focus-box-shadow]=\"customBoxShadow()\"\r\n                [style.--focus-transition]=\"customTransition()\" [style.max-width.px]=\"maxWidth()\"\r\n                [ngClass]=\"invalidInput() ? 'input-error' : ''\" [disabled]=\"allDisabled() ? true : disabled()\"\r\n                [(ngModel)]=\"value\" id=\"{{'id_' + label()}}\" name=\"{{'id_' + label()}}\" onlyDay\r\n                [attr.maxlength]=\"maxLength()\" (focus)=\"invalidInput.set(false)\">\r\n            }\r\n\r\n            @if (typeStandar() == 'date') {\r\n            <input type=\"date\" class=\"form-control text-{{position()}}\" (blur)=\"callBlur()\" (input)=\"keyup()?.()\"\r\n                [attr.data-active-focus]=\"activeFocus() == false ? 'false' : ''\"\r\n                [style.--focus-border-color]=\"customBorderColor()\" [style.--focus-box-shadow]=\"customBoxShadow()\"\r\n                [style.--focus-transition]=\"customTransition()\" [ngClass]=\"invalidInput() ? 'input-error' : ''\"\r\n                [disabled]=\"allDisabled() ? true : disabled()\" [(ngModel)]=\"value\" id=\"{{'id_' + label()}}\"\r\n                name=\"{{'id_' + label()}}\" (focus)=\"invalidInput.set(false)\">\r\n            }\r\n\r\n            @if (typeStandar() == 'time') {\r\n            <input type=\"time\" class=\"form-control text-{{position()}}\" (blur)=\"callBlur()\" (input)=\"keyup()?.()\"\r\n                [attr.data-active-focus]=\"activeFocus() == false ? 'false' : ''\"\r\n                [style.--focus-border-color]=\"customBorderColor()\" [style.--focus-box-shadow]=\"customBoxShadow()\"\r\n                [style.--focus-transition]=\"customTransition()\" [ngClass]=\"invalidInput() ? 'input-error' : ''\"\r\n                [disabled]=\"allDisabled() ? true : disabled()\" [(ngModel)]=\"value\" id=\"{{'id_' + label()}}\"\r\n                name=\"{{'id_' + label()}}\" (focus)=\"invalidInput.set(false)\">\r\n            }\r\n\r\n            @if (typeStandar() == 'text-area') {\r\n            <textarea class=\"{{'text-' + position()}} form-area\"\r\n                [attr.data-active-focus]=\"activeFocus() == false ? 'false' : ''\"\r\n                [style.--focus-border-color]=\"customBorderColor()\" [style.--focus-box-shadow]=\"customBoxShadow()\"\r\n                [style.--focus-transition]=\"customTransition()\" id=\"{{'id_' + label()}}\" name=\"{{'id_' + label()}}\"\r\n                [disabled]=\"allDisabled() ? true : disabled()\" [(ngModel)]=\"value\" [rows]=\"alto()\"\r\n                [attr.maxlength]=\"maxLength()\" (focus)=\"invalidInput.set(false)\">\r\n\r\n                </textarea>\r\n            }\r\n\r\n            @if (typeStandar() == 'select') {\r\n            <select class=\"form-select\" [attr.data-active-focus]=\"activeFocus() == false ? 'false' : ''\"\r\n                [class.text-error]=\"isImportant()\"\r\n                [style.--focus-border-color]=\"customBorderColor()\" [style.--focus-box-shadow]=\"customBoxShadow()\"\r\n                [style.--focus-transition]=\"customTransition()\" [style.max-width.px]=\"maxWidth()\" [style.min-width.px]=\"maxWidth()\" [(ngModel)]=\"value\"\r\n                [disabled]=\"allDisabled() ? true : disabled()\" id=\"{{'id_content' + label()}}\"\r\n                name=\"{{'id_content' + label()}}\" (change)=\"emitirChange()\" (focus)=\"focusInput()\">\r\n                @if (withTodos()) {\r\n                <option [value]=\"typeKey() == 'number' ? -1 : ''\">Todos</option>\r\n                }\r\n                @for (item of lista(); track $index) {\r\n                @if (!keyCodigo()) {\r\n                <option [value]=\"item\"> {{ item }}</option>\r\n                }\r\n                @if (keyCodigo()) {\r\n                <option [value]=\"item[keyCodigo()]\"> {{ joinInfo() ? item[keyCodigo()] + ' - ' + item[keyDescri()] :\r\n                    item[keyDescri()]}}</option>\r\n                }\r\n\r\n                }\r\n            </select>\r\n            }\r\n\r\n            @if (withBuscar()) {\r\n            <button class=\"btn btn-dark boton-buscar fs-7\" [disabled]=\"allDisabled()\" (click)=\"ejecutarAccion()\">\r\n                <i class=\"fa fa-search\"></i>\r\n            </button>\r\n            }\r\n            @if (withChangeInput()) {\r\n            <button class=\"btn btn-dark boton-buscar fs-7\" [disabled]=\"allDisabled()\" (click)=\"changeInputAction()\">\r\n                <i [ngClass]=\"typeStandar() == 'select' ? 'fas fa-times' : 'fa solid fa-pen'\"></i>\r\n            </button>\r\n            }\r\n            @if (invalidInput()) {\r\n            <div class=\"infoBox\" @fadeInOut><i class=\"fas fa-exclamation-triangle fs-9 text-danger\"></i> Ocurri\u00F3 un\r\n                error: El campo es obligatorio, aseg\u00FArese de ingresar datos v\u00E1lidos.</div>\r\n            }\r\n\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n@if (textoAyuda() && typeStandar() == 'text-area') {\r\n<div class=\"d-flex flex-wrap justify-content-between align-items-center px-2\">\r\n    <span class=\"text-error fs-6\">{{textoAyuda()}}</span>\r\n    <span class=\"text-dark fs-6 fw-5\">{{ valueSize() }}/{{maxLength()}} caracteres</span>\r\n</div>\r\n}\r\n\r\n@if (sinAyuda() && typeStandar() == 'text-area') {\r\n<div class=\"d-flex flex-wrap justify-content-between align-items-center px-2\">\r\n    <span class=\"text-error fs-6\"></span>\r\n    <span class=\"text-dark fs-6 fw-5\">{{ valueSize() }}/{{maxLength()}} caracteres</span>\r\n</div>\r\n}", styles: [".text-error{color:#d60000!important;font-weight:700!important}@media (max-width: 442px){.d-flex{flex-direction:column!important;align-items:stretch!important}.infoBox{font-size:12px;padding:8px 12px;width:100%!important;max-width:100%!important}}@media (max-width: 900px){.infoBox{width:250px!important}}.infoBox{position:absolute;width:400px;top:calc(100% + 10px);left:0;right:0;margin-top:2px;background:#be0000d5;box-shadow:0 4px 12px #0003;border-radius:6px;padding:15px 12px;font-size:14px;color:#dbdbdb;z-index:10;font-size:12px;font-weight:600}.infoBox:before{content:\"\";position:absolute;top:-10px;left:20px;border-width:0 8px 10px 8px;border-style:solid;border-color:transparent transparent rgba(190,0,0,.835) transparent;filter:drop-shadow(0 -1px 1px rgba(0,0,0,.1))}.input-error{border:1px solid rgb(203,0,0);color:#cb0000!important;animation:aura-pulse 1.5s ease-out infinite;position:relative;z-index:1}@keyframes aura-pulse{0%{box-shadow:0 0 #cb0000b3}70%{box-shadow:0 0 0 5px #cb000000}to{box-shadow:0 0 #cb000000}}\n"], dependencies: [{ 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: DecimalDirective, selector: "[appDecimal]", inputs: ["appDecimal"] }, { kind: "directive", type: OnlyNumberDirective, selector: "[onlyNumber]" }, { kind: "directive", type: OnlyDayDirective, selector: "[onlyDay]" }, { kind: "component", type: SwitchActivoComponent, selector: "app-switch-activo", inputs: ["valueOn", "valueOff", "labelOn", "labelOff", "iconOn", "iconOff", "colorOn", "colorOff", "id", "model"], outputs: ["modelChange"] }, { kind: "directive", type: OnlyNumberFlexDirective, selector: "[onlyNumberFlex]" }, { kind: "directive", type: CaracteresCodigoDirective, selector: "[caracteresCodigo]", inputs: ["caracteresCodigo"] }], animations: [fadeInOut], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: InputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-input', imports: [FormsModule, CommonModule, DecimalDirective, OnlyNumberDirective, OnlyDayDirective, SwitchActivoComponent, OnlyNumberFlexDirective, CaracteresCodigoDirective], animations: [fadeInOut], template: "@if (isVertical()) {\r\n<label [ngClass]=\"{'text-error': isImportant()}\" for=\"{{'id_' + label()}}\" [style.min-width]=\"wlabel() + 'px'\"> {{label()}} @if (isRequired()) {<span\r\n        class=\"fw-bold text-danger\">(*)</span>}</label>\r\n}\r\n<div class=\"d-flex align-items-{{position_row()}}\">\r\n    @if (!isVertical()) {\r\n    <label [ngClass]=\"{'text-error': isImportant()}\" for=\"{{'id_' + label()}}\" [style.min-width]=\"wlabel() + 'px'\"> {{label()}} @if (isRequired()) {<span\r\n            class=\"fw-bold text-danger\">(*)</span>}</label>\r\n    }\r\n    <div class=\"flex-grow-1 me-2\">\r\n        <div [ngClass]=\"{'d-block': typeStandar() == 'date','d-flex': typeStandar() != 'date', 'flex-column': showTopLabel() }\"\r\n            class=\"position-relative\">\r\n            \r\n            @if (showTopLabel() && topLabelText()) {\r\n            <div class=\"input-top-label\">\r\n                <label class=\"fw-bold\">{{ topLabelText() }}</label>\r\n            </div>\r\n            }\r\n            \r\n            @if (!distintInputs.includes(typeStandar())) {\r\n            <input [type]=\"typeStandar()\" (blur)=\"callBlur()\" (keyup.enter)=\"ejecutarAccion()\" (input)=\"keyup()?.()\"\r\n                class=\"form-control text-{{position()}}\"\r\n                [attr.data-active-focus]=\"activeFocus() == false ? 'false' : ''\"\r\n                [style.--focus-border-color]=\"customBorderColor()\" [style.--focus-box-shadow]=\"customBoxShadow()\"\r\n                [style.--focus-transition]=\"customTransition()\" [style.max-width.px]=\"maxWidth()\"\r\n                (focus)=\"invalidInput.set(false)\" autocomplete=\"off\" [ngClass]=\"invalidInput() ? 'input-error' : ''\"\r\n                [disabled]=\"allDisabled() ? true : disabled()\" [(ngModel)]=\"value\" id=\"{{'id_' + label()}}\" [caracteresCodigo]=\"validaCodigo()\"\r\n                name=\"{{'id_' + label()}}\" [attr.maxlength]=\"maxLength()\">\r\n            }\r\n\r\n            @if (typeStandar() == 'input-switch') {\r\n            <div class=\"d-flex w-100\">\r\n                <div class=\"flex-grow-1\">\r\n                    <input type=\"text\" class=\"form-control\" (blur)=\"callBlur()\" (input)=\"keyup()?.()\"\r\n                [attr.data-active-focus]=\"activeFocus() == false ? 'false' : ''\"\r\n                [style.--focus-border-color]=\"customBorderColor()\" [style.--focus-box-shadow]=\"customBoxShadow()\"\r\n                [style.--focus-transition]=\"customTransition()\" [ngClass]=\"'text-' + position()\"\r\n                [style.max-width.px]=\"maxWidth()\" [disabled]=\"allDisabled() ? true : disabled()\" [(ngModel)]=\"value\"\r\n                id=\"{{'id_' + label()}}\" name=\"{{'id_' + label()}}\" [caracteresCodigo]=\"validaCodigo()\"\r\n                [attr.maxlength]=\"maxLength()\" (focus)=\"invalidInput.set(false)\">\r\n                </div>\r\n                <div class=\"px-2\">\r\n                    <app-switch-activo valueOn=\"S\" valueOff=\"N\" [id]=\"label()\" [(model)]=\"value2\" />\r\n                </div>\r\n            </div>\r\n            }\r\n\r\n            @if (typeStandar() == 'number-format-decimal') {\r\n            <input type=\"text\" class=\"form-control\" (blur)=\"callBlur()\" (input)=\"keyup()?.()\"\r\n                [attr.data-active-focus]=\"activeFocus() == false ? 'false' : ''\"\r\n                [style.--focus-border-color]=\"customBorderColor()\" [style.--focus-box-shadow]=\"customBoxShadow()\"\r\n                [style.--focus-transition]=\"customTransition()\" [ngClass]=\"'text-' + position()\"\r\n                [style.max-width.px]=\"maxWidth()\" [disabled]=\"allDisabled() ? true : disabled()\" [(ngModel)]=\"value\"\r\n                id=\"{{'id_' + label()}}\" name=\"{{'id_' + label()}}\" [appDecimal]=\"formatNumber()\" onlyNumberFlex\r\n                [attr.maxlength]=\"maxLength()\" (focus)=\"invalidInput.set(false)\">\r\n            }\r\n\r\n            @if (typeStandar() == 'number-integer') {\r\n            <input type=\"text\" class=\"form-control text-{{position()}}\" (blur)=\"callBlur()\" (input)=\"keyup()?.()\"\r\n                [attr.data-active-focus]=\"activeFocus() == false ? 'false' : ''\"\r\n                [style.--focus-border-color]=\"customBorderColor()\" [style.--focus-box-shadow]=\"customBoxShadow()\"\r\n                [style.--focus-transition]=\"customTransition()\" [style.max-width.px]=\"maxWidth()\"\r\n                [ngClass]=\"invalidInput() ? 'input-error' : ''\" [disabled]=\"allDisabled() ? true : disabled()\"\r\n                [(ngModel)]=\"value\" id=\"{{'id_' + label()}}\" name=\"{{'id_' + label()}}\" onlyNumber\r\n                [attr.maxlength]=\"maxLength()\" (focus)=\"invalidInput.set(false)\">\r\n            }\r\n\r\n            @if (typeStandar() == 'day') {\r\n            <input type=\"text\" class=\"form-control text-{{position()}}\" (blur)=\"callBlur()\" (input)=\"keyup()?.()\"\r\n                [attr.data-active-focus]=\"activeFocus() == false ? 'false' : ''\"\r\n                [style.--focus-border-color]=\"customBorderColor()\" [style.--focus-box-shadow]=\"customBoxShadow()\"\r\n                [style.--focus-transition]=\"customTransition()\" [style.max-width.px]=\"maxWidth()\"\r\n                [ngClass]=\"invalidInput() ? 'input-error' : ''\" [disabled]=\"allDisabled() ? true : disabled()\"\r\n                [(ngModel)]=\"value\" id=\"{{'id_' + label()}}\" name=\"{{'id_' + label()}}\" onlyDay\r\n                [attr.maxlength]=\"maxLength()\" (focus)=\"invalidInput.set(false)\">\r\n            }\r\n\r\n            @if (typeStandar() == 'date') {\r\n            <input type=\"date\" class=\"form-control text-{{position()}}\" (blur)=\"callBlur()\" (input)=\"keyup()?.()\"\r\n                [attr.data-active-focus]=\"activeFocus() == false ? 'false' : ''\"\r\n                [style.--focus-border-color]=\"customBorderColor()\" [style.--focus-box-shadow]=\"customBoxShadow()\"\r\n                [style.--focus-transition]=\"customTransition()\" [ngClass]=\"invalidInput() ? 'input-error' : ''\"\r\n                [disabled]=\"allDisabled() ? true : disabled()\" [(ngModel)]=\"value\" id=\"{{'id_' + label()}}\"\r\n                name=\"{{'id_' + label()}}\" (focus)=\"invalidInput.set(false)\">\r\n            }\r\n\r\n            @if (typeStandar() == 'time') {\r\n            <input type=\"time\" class=\"form-control text-{{position()}}\" (blur)=\"callBlur()\" (input)=\"keyup()?.()\"\r\n                [attr.data-active-focus]=\"activeFocus() == false ? 'false' : ''\"\r\n                [style.--focus-border-color]=\"customBorderColor()\" [style.--focus-box-shadow]=\"customBoxShadow()\"\r\n                [style.--focus-transition]=\"customTransition()\" [ngClass]=\"invalidInput() ? 'input-error' : ''\"\r\n                [disabled]=\"allDisabled() ? true : disabled()\" [(ngModel)]=\"value\" id=\"{{'id_' + label()}}\"\r\n                name=\"{{'id_' + label()}}\" (focus)=\"invalidInput.set(false)\">\r\n            }\r\n\r\n            @if (typeStandar() == 'text-area') {\r\n            <textarea class=\"{{'text-' + position()}} form-area\"\r\n                [attr.data-active-focus]=\"activeFocus() == false ? 'false' : ''\"\r\n                [style.--focus-border-color]=\"customBorderColor()\" [style.--focus-box-shadow]=\"customBoxShadow()\"\r\n                [style.--focus-transition]=\"customTransition()\" id=\"{{'id_' + label()}}\" name=\"{{'id_' + label()}}\"\r\n                [disabled]=\"allDisabled() ? true : disabled()\" [(ngModel)]=\"value\" [rows]=\"alto()\"\r\n                [attr.maxlength]=\"maxLength()\" (focus)=\"invalidInput.set(false)\">\r\n\r\n                </textarea>\r\n            }\r\n\r\n            @if (typeStandar() == 'select') {\r\n            <select class=\"form-select\" [attr.data-active-focus]=\"activeFocus() == false ? 'false' : ''\"\r\n                [class.text-error]=\"isImportant()\"\r\n                [style.--focus-border-color]=\"customBorderColor()\" [style.--focus-box-shadow]=\"customBoxShadow()\"\r\n                [style.--focus-transition]=\"customTransition()\" [style.max-width.px]=\"maxWidth()\" [style.min-width.px]=\"maxWidth()\" [(ngModel)]=\"value\"\r\n                [disabled]=\"allDisabled() ? true : disabled()\" id=\"{{'id_content' + label()}}\"\r\n                name=\"{{'id_content' + label()}}\" (change)=\"emitirChange()\" (focus)=\"focusInput()\">\r\n                @if (withTodos()) {\r\n                <option [value]=\"typeKey() == 'number' ? -1 : ''\">Todos</option>\r\n                }\r\n                @for (item of lista(); track $index) {\r\n                @if (!keyCodigo()) {\r\n                <option [value]=\"item\"> {{ item }}</option>\r\n                }\r\n                @if (keyCodigo()) {\r\n                <option [value]=\"item[keyCodigo()]\"> {{ joinInfo() ? item[keyCodigo()] + ' - ' + item[keyDescri()] :\r\n                    item[keyDescri()]}}</option>\r\n                }\r\n\r\n                }\r\n            </select>\r\n            }\r\n\r\n            @if (withBuscar()) {\r\n            <button class=\"btn btn-dark boton-buscar fs-7\" [disabled]=\"allDisabled()\" (click)=\"ejecutarAccion()\">\r\n                <i class=\"fa fa-search\"></i>\r\n            </button>\r\n            }\r\n            @if (withChangeInput()) {\r\n            <button class=\"btn btn-dark boton-buscar fs-7\" [disabled]=\"allDisabled()\" (click)=\"changeInputAction()\">\r\n                <i [ngClass]=\"typeStandar() == 'select' ? 'fas fa-times' : 'fa solid fa-pen'\"></i>\r\n            </button>\r\n            }\r\n            @if (invalidInput()) {\r\n            <div class=\"infoBox\" @fadeInOut><i class=\"fas fa-exclamation-triangle fs-9 text-danger\"></i> Ocurri\u00F3 un\r\n                error: El campo es obligatorio, aseg\u00FArese de ingresar datos v\u00E1lidos.</div>\r\n            }\r\n\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n@if (textoAyuda() && typeStandar() == 'text-area') {\r\n<div class=\"d-flex flex-wrap justify-content-between align-items-center px-2\">\r\n    <span class=\"text-error fs-6\">{{textoAyuda()}}</span>\r\n    <span class=\"text-dark fs-6 fw-5\">{{ valueSize() }}/{{maxLength()}} caracteres</span>\r\n</div>\r\n}\r\n\r\n@if (sinAyuda() && typeStandar() == 'text-area') {\r\n<div class=\"d-flex flex-wrap justify-content-between align-items-center px-2\">\r\n    <span class=\"text-error fs-6\"></span>\r\n    <span class=\"text-dark fs-6 fw-5\">{{ valueSize() }}/{{maxLength()}} caracteres</span>\r\n</div>\r\n}", styles: [".text-error{color:#d60000!important;font-weight:700!important}@media (max-width: 442px){.d-flex{flex-direction:column!important;align-items:stretch!important}.infoBox{font-size:12px;padding:8px 12px;width:100%!important;max-width:100%!important}}@media (max-width: 900px){.infoBox{width:250px!important}}.infoBox{position:absolute;width:400px;top:calc(100% + 10px);left:0;right:0;margin-top:2px;background:#be0000d5;box-shadow:0 4px 12px #0003;border-radius:6px;padding:15px 12px;font-size:14px;color:#dbdbdb;z-index:10;font-size:12px;font-weight:600}.infoBox:before{content:\"\";position:absolute;top:-10px;left:20px;border-width:0 8px 10px 8px;border-style:solid;border-color:transparent transparent rgba(190,0,0,.835) transparent;filter:drop-shadow(0 -1px 1px rgba(0,0,0,.1))}.input-error{border:1px solid rgb(203,0,0);color:#cb0000!important;animation:aura-pulse 1.5s ease-out infinite;position:relative;z-index:1}@keyframes aura-pulse{0%{box-shadow:0 0 #cb0000b3}70%{box-shadow:0 0 0 5px #cb000000}to{box-shadow:0 0 #cb000000}}\n"] }]
+            args: [{ selector: 'app-input', imports: [FormsModule, CommonModule, DecimalDirective, OnlyNumberDirective, OnlyDayDirective, SwitchActivoComponent, OnlyNumberFlexDirective, CaracteresCodigoDirective], animations: [fadeInOut], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (isVertical()) {\r\n<label [ngClass]=\"{'text-error': isImportant()}\" for=\"{{'id_' + label()}}\" [style.min-width]=\"wlabel() + 'px'\"> {{label()}} @if (isRequired()) {<span\r\n        class=\"fw-bold text-danger\">(*)</span>}</label>\r\n}\r\n<div class=\"d-flex align-items-{{position_row()}}\">\r\n    @if (!isVertical()) {\r\n    <label [ngClass]=\"{'text-error': isImportant()}\" for=\"{{'id_' + label()}}\" [style.min-width]=\"wlabel() + 'px'\"> {{label()}} @if (isRequired()) {<span\r\n            class=\"fw-bold text-danger\">(*)</span>}</label>\r\n    }\r\n    <div class=\"flex-grow-1 me-2\">\r\n        <div [ngClass]=\"{'d-block': typeStandar() == 'date','d-flex': typeStandar() != 'date', 'flex-column': showTopLabel() }\"\r\n            class=\"position-relative\">\r\n            \r\n            @if (showTopLabel() && topLabelText()) {\r\n            <div class=\"input-top-label\">\r\n                <label class=\"fw-bold\">{{ topLabelText() }}</label>\r\n            </div>\r\n            }\r\n            \r\n            @if (!distintInputs.includes(typeStandar())) {\r\n            <input [type]=\"typeStandar()\" (blur)=\"callBlur()\" (keyup.enter)=\"ejecutarAccion()\" (input)=\"keyup()?.()\"\r\n                class=\"form-control text-{{position()}}\"\r\n                [attr.data-active-focus]=\"activeFocus() == false ? 'false' : ''\"\r\n                [style.--focus-border-color]=\"customBorderColor()\" [style.--focus-box-shadow]=\"customBoxShadow()\"\r\n                [style.--focus-transition]=\"customTransition()\" [style.max-width.px]=\"maxWidth()\"\r\n                (focus)=\"invalidInput.set(false)\" autocomplete=\"off\" [ngClass]=\"invalidInput() ? 'input-error' : ''\"\r\n                [disabled]=\"allDisabled() ? true : disabled()\" [(ngModel)]=\"value\" id=\"{{'id_' + label()}}\" [caracteresCodigo]=\"validaCodigo()\"\r\n                name=\"{{'id_' + label()}}\" [attr.maxlength]=\"maxLength()\">\r\n            }\r\n\r\n            @if (typeStandar() == 'input-switch') {\r\n            <div class=\"d-flex w-100\">\r\n                <div class=\"flex-grow-1\">\r\n                    <input type=\"text\" class=\"form-control\" (blur)=\"callBlur()\" (input)=\"keyup()?.()\"\r\n                [attr.data-active-focus]=\"activeFocus() == false ? 'false' : ''\"\r\n                [style.--focus-border-color]=\"customBorderColor()\" [style.--focus-box-shadow]=\"customBoxShadow()\"\r\n                [style.--focus-transition]=\"customTransition()\" [ngClass]=\"'text-' + position()\"\r\n                [style.max-width.px]=\"maxWidth()\" [disabled]=\"allDisabled() ? true : disabled()\" [(ngModel)]=\"value\"\r\n                id=\"{{'id_' + label()}}\" name=\"{{'id_' + label()}}\" [caracteresCodigo]=\"validaCodigo()\"\r\n                [attr.maxlength]=\"maxLength()\" (focus)=\"invalidInput.set(false)\">\r\n                </div>\r\n                <div class=\"px-2\">\r\n                    <app-switch-activo valueOn=\"S\" valueOff=\"N\" [id]=\"label()\" [(model)]=\"value2\" />\r\n                </div>\r\n            </div>\r\n            }\r\n\r\n            @if (typeStandar() == 'number-format-decimal') {\r\n            <input type=\"text\" class=\"form-control\" (blur)=\"callBlur()\" (input)=\"keyup()?.()\"\r\n                [attr.data-active-focus]=\"activeFocus() == false ? 'false' : ''\"\r\n                [style.--focus-border-color]=\"customBorderColor()\" [style.--focus-box-shadow]=\"customBoxShadow()\"\r\n                [style.--focus-transition]=\"customTransition()\" [ngClass]=\"'text-' + position()\"\r\n                [style.max-width.px]=\"maxWidth()\" [disabled]=\"allDisabled() ? true : disabled()\" [(ngModel)]=\"value\"\r\n                id=\"{{'id_' + label()}}\" name=\"{{'id_' + label()}}\" [appDecimal]=\"formatNumber()\" onlyNumberFlex\r\n                [attr.maxlength]=\"maxLength()\" (focus)=\"invalidInput.set(false)\">\r\n            }\r\n\r\n            @if (typeStandar() == 'number-integer') {\r\n            <input type=\"text\" class=\"form-control text-{{position()}}\" (blur)=\"callBlur()\" (input)=\"keyup()?.()\"\r\n                [attr.data-active-focus]=\"activeFocus() == false ? 'false' : ''\"\r\n                [style.--focus-border-color]=\"customBorderColor()\" [style.--focus-box-shadow]=\"customBoxShadow()\"\r\n                [style.--focus-transition]=\"customTransition()\" [style.max-width.px]=\"maxWidth()\"\r\n                [ngClass]=\"invalidInput() ? 'input-error' : ''\" [disabled]=\"allDisabled() ? true : disabled()\"\r\n                [(ngModel)]=\"value\" id=\"{{'id_' + label()}}\" name=\"{{'id_' + label()}}\" onlyNumber\r\n                [attr.maxlength]=\"maxLength()\" (focus)=\"invalidInput.set(false)\">\r\n            }\r\n\r\n            @if (typeStandar() == 'day') {\r\n            <input type=\"text\" class=\"form-control text-{{position()}}\" (blur)=\"callBlur()\" (input)=\"keyup()?.()\"\r\n                [attr.data-active-focus]=\"activeFocus() == false ? 'false' : ''\"\r\n                [style.--focus-border-color]=\"customBorderColor()\" [style.--focus-box-shadow]=\"customBoxShadow()\"\r\n                [style.--focus-transition]=\"customTransition()\" [style.max-width.px]=\"maxWidth()\"\r\n                [ngClass]=\"invalidInput() ? 'input-error' : ''\" [disabled]=\"allDisabled() ? true : disabled()\"\r\n                [(ngModel)]=\"value\" id=\"{{'id_' + label()}}\" name=\"{{'id_' + label()}}\" onlyDay\r\n                [attr.maxlength]=\"maxLength()\" (focus)=\"invalidInput.set(false)\">\r\n            }\r\n\r\n            @if (typeStandar() == 'date') {\r\n            <input type=\"date\" class=\"form-control text-{{position()}}\" (blur)=\"callBlur()\" (input)=\"keyup()?.()\"\r\n                [attr.data-active-focus]=\"activeFocus() == false ? 'false' : ''\"\r\n                [style.--focus-border-color]=\"customBorderColor()\" [style.--focus-box-shadow]=\"customBoxShadow()\"\r\n                [style.--focus-transition]=\"customTransition()\" [ngClass]=\"invalidInput() ? 'input-error' : ''\"\r\n                [disabled]=\"allDisabled() ? true : disabled()\" [(ngModel)]=\"value\" id=\"{{'id_' + label()}}\"\r\n                name=\"{{'id_' + label()}}\" (focus)=\"invalidInput.set(false)\">\r\n            }\r\n\r\n            @if (typeStandar() == 'time') {\r\n            <input type=\"time\" class=\"form-control text-{{position()}}\" (blur)=\"callBlur()\" (input)=\"keyup()?.()\"\r\n                [attr.data-active-focus]=\"activeFocus() == false ? 'false' : ''\"\r\n                [style.--focus-border-color]=\"customBorderColor()\" [style.--focus-box-shadow]=\"customBoxShadow()\"\r\n                [style.--focus-transition]=\"customTransition()\" [ngClass]=\"invalidInput() ? 'input-error' : ''\"\r\n                [disabled]=\"allDisabled() ? true : disabled()\" [(ngModel)]=\"value\" id=\"{{'id_' + label()}}\"\r\n                name=\"{{'id_' + label()}}\" (focus)=\"invalidInput.set(false)\">\r\n            }\r\n\r\n            @if (typeStandar() == 'text-area') {\r\n            <textarea class=\"{{'text-' + position()}} form-area\"\r\n                [attr.data-active-focus]=\"activeFocus() == false ? 'false' : ''\"\r\n                [style.--focus-border-color]=\"customBorderColor()\" [style.--focus-box-shadow]=\"customBoxShadow()\"\r\n                [style.--focus-transition]=\"customTransition()\" id=\"{{'id_' + label()}}\" name=\"{{'id_' + label()}}\"\r\n                [disabled]=\"allDisabled() ? true : disabled()\" [(ngModel)]=\"value\" [rows]=\"alto()\"\r\n                [attr.maxlength]=\"maxLength()\" (focus)=\"invalidInput.set(false)\">\r\n\r\n                </textarea>\r\n            }\r\n\r\n            @if (typeStandar() == 'select') {\r\n            <select class=\"form-select\" [attr.data-active-focus]=\"activeFocus() == false ? 'false' : ''\"\r\n                [class.text-error]=\"isImportant()\"\r\n                [style.--focus-border-color]=\"customBorderColor()\" [style.--focus-box-shadow]=\"customBoxShadow()\"\r\n                [style.--focus-transition]=\"customTransition()\" [style.max-width.px]=\"maxWidth()\" [style.min-width.px]=\"maxWidth()\" [(ngModel)]=\"value\"\r\n                [disabled]=\"allDisabled() ? true : disabled()\" id=\"{{'id_content' + label()}}\"\r\n                name=\"{{'id_content' + label()}}\" (change)=\"emitirChange()\" (focus)=\"focusInput()\">\r\n                @if (withTodos()) {\r\n                <option [value]=\"typeKey() == 'number' ? -1 : ''\">Todos</option>\r\n                }\r\n                @for (item of lista(); track $index) {\r\n                @if (!keyCodigo()) {\r\n                <option [value]=\"item\"> {{ item }}</option>\r\n                }\r\n                @if (keyCodigo()) {\r\n                <option [value]=\"item[keyCodigo()]\"> {{ joinInfo() ? item[keyCodigo()] + ' - ' + item[keyDescri()] :\r\n                    item[keyDescri()]}}</option>\r\n                }\r\n\r\n                }\r\n            </select>\r\n            }\r\n\r\n            @if (withBuscar()) {\r\n            <button class=\"btn btn-dark boton-buscar fs-7\" [disabled]=\"allDisabled()\" (click)=\"ejecutarAccion()\">\r\n                <i class=\"fa fa-search\"></i>\r\n            </button>\r\n            }\r\n            @if (withChangeInput()) {\r\n            <button class=\"btn btn-dark boton-buscar fs-7\" [disabled]=\"allDisabled()\" (click)=\"changeInputAction()\">\r\n                <i [ngClass]=\"typeStandar() == 'select' ? 'fas fa-times' : 'fa solid fa-pen'\"></i>\r\n            </button>\r\n            }\r\n            @if (invalidInput()) {\r\n            <div class=\"infoBox\" @fadeInOut><i class=\"fas fa-exclamation-triangle fs-9 text-danger\"></i> Ocurri\u00F3 un\r\n                error: El campo es obligatorio, aseg\u00FArese de ingresar datos v\u00E1lidos.</div>\r\n            }\r\n\r\n        </div>\r\n    </div>\r\n</div>\r\n\r\n@if (textoAyuda() && typeStandar() == 'text-area') {\r\n<div class=\"d-flex flex-wrap justify-content-between align-items-center px-2\">\r\n    <span class=\"text-error fs-6\">{{textoAyuda()}}</span>\r\n    <span class=\"text-dark fs-6 fw-5\">{{ valueSize() }}/{{maxLength()}} caracteres</span>\r\n</div>\r\n}\r\n\r\n@if (sinAyuda() && typeStandar() == 'text-area') {\r\n<div class=\"d-flex flex-wrap justify-content-between align-items-center px-2\">\r\n    <span class=\"text-error fs-6\"></span>\r\n    <span class=\"text-dark fs-6 fw-5\">{{ valueSize() }}/{{maxLength()}} caracteres</span>\r\n</div>\r\n}", styles: [".text-error{color:#d60000!important;font-weight:700!important}@media (max-width: 442px){.d-flex{flex-direction:column!important;align-items:stretch!important}.infoBox{font-size:12px;padding:8px 12px;width:100%!important;max-width:100%!important}}@media (max-width: 900px){.infoBox{width:250px!important}}.infoBox{position:absolute;width:400px;top:calc(100% + 10px);left:0;right:0;margin-top:2px;background:#be0000d5;box-shadow:0 4px 12px #0003;border-radius:6px;padding:15px 12px;font-size:14px;color:#dbdbdb;z-index:10;font-size:12px;font-weight:600}.infoBox:before{content:\"\";position:absolute;top:-10px;left:20px;border-width:0 8px 10px 8px;border-style:solid;border-color:transparent transparent rgba(190,0,0,.835) transparent;filter:drop-shadow(0 -1px 1px rgba(0,0,0,.1))}.input-error{border:1px solid rgb(203,0,0);color:#cb0000!important;animation:aura-pulse 1.5s ease-out infinite;position:relative;z-index:1}@keyframes aura-pulse{0%{box-shadow:0 0 #cb0000b3}70%{box-shadow:0 0 0 5px #cb000000}to{box-shadow:0 0 #cb000000}}\n"] }]
         }], ctorParameters: () => [] });
 
 class InputClaseComponent {
@@ -1518,11 +1519,11 @@ class MultiselectedComponent {
         this.selection.clear();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: MultiselectedComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: MultiselectedComponent, isStandalone: true, selector: "app-multiselected", inputs: { lista: { classPropertyName: "lista", publicName: "lista", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, viewInput: { classPropertyName: "viewInput", publicName: "viewInput", isSignal: true, isRequired: false, transformFunction: null }, withTodos: { classPropertyName: "withTodos", publicName: "withTodos", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, keyCodigo: { classPropertyName: "keyCodigo", publicName: "keyCodigo", isSignal: true, isRequired: false, transformFunction: null }, keyDescri: { classPropertyName: "keyDescri", publicName: "keyDescri", isSignal: true, isRequired: false, transformFunction: null }, joinInfo: { classPropertyName: "joinInfo", publicName: "joinInfo", isSignal: true, isRequired: false, transformFunction: null }, wlabel: { classPropertyName: "wlabel", publicName: "wlabel", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, isRequired: { classPropertyName: "isRequired", publicName: "isRequired", isSignal: true, isRequired: false, transformFunction: null }, isVertical: { classPropertyName: "isVertical", publicName: "isVertical", isSignal: true, isRequired: false, transformFunction: null }, allDisabled: { classPropertyName: "allDisabled", publicName: "allDisabled", isSignal: true, isRequired: false, transformFunction: null }, activeFocus: { classPropertyName: "activeFocus", publicName: "activeFocus", isSignal: true, isRequired: false, transformFunction: null }, customBorderColor: { classPropertyName: "customBorderColor", publicName: "customBorderColor", isSignal: true, isRequired: false, transformFunction: null }, customBoxShadow: { classPropertyName: "customBoxShadow", publicName: "customBoxShadow", isSignal: true, isRequired: false, transformFunction: null }, customTransition: { classPropertyName: "customTransition", publicName: "customTransition", isSignal: true, isRequired: false, transformFunction: null }, altoContainer: { classPropertyName: "altoContainer", publicName: "altoContainer", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (isVertical()) {\r\n<label for=\"{{'id_' + label()}}\" [style.min-width]=\"wlabel() + 'px'\"> {{label()}} @if (isRequired()) {<span\r\n    class=\"fw-bold text-danger\">(*)</span>}</label>\r\n}\r\n<div class=\"d-flex align-items-center\">\r\n  @if (!isVertical()) {\r\n  <label for=\"{{'id_' + label()}}\" [style.min-width]=\"wlabel() + 'px'\">{{label()}} @if (isRequired()) { <span\r\n      class=\"fw-bold text-danger\">(*)</span>}</label>\r\n  }\r\n  <div class=\"multiselect d-flex \">\r\n    @if(computedType()){\r\n    <div class=\"content-1 me-1\">\r\n      <input type=\"text\" class=\"form-control show-input\"\r\n        [attr.data-active-focus]=\"activeFocus() == false ? 'false' : ''\"\r\n        [style.--focus-border-color]=\"customBorderColor()\" [style.--focus-box-shadow]=\"customBoxShadow()\"\r\n        [style.--focus-transition]=\"customTransition()\" [(ngModel)]=\"value\" [disabled]=\"allDisabled()\"\r\n        id=\"{{'id_' + label()}}\" name=\"{{'id_' + label()}}\" />\r\n    </div>\r\n    }\r\n\r\n    <div class=\"input-container content-2 me-2\">\r\n      <input type=\"text\" [value]=\"selectedItems\"  class=\"form-control pe-4\" cdkOverlayOrigin readonly\r\n        #autocomplete=\"cdkOverlayOrigin\" #inputRef [attr.data-active-focus]=\"activeFocus() == false ? 'false' : ''\"\r\n        [style.--focus-border-color]=\"customBorderColor()\" [style.--focus-box-shadow]=\"customBoxShadow()\"\r\n        [style.--focus-transition]=\"customTransition()\" (input)=\"null\"\r\n        (focus)=\"showDropdown.set(true);\" [disabled]=\"allDisabled()\" />\r\n      @if (selectedItems.length > 0) {\r\n      <button @fadeInOut type=\"button\" class=\"btn-clear text-dark\" (click)=\"clear(); inputRef.focus()\">\r\n        &times;\r\n      </button>\r\n      }\r\n      <ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"autocomplete\"\r\n        [cdkConnectedOverlayOpen]=\"showDropdown()\" [cdkConnectedOverlayHasBackdrop]=\"true\"\r\n        [cdkConnectedOverlayWidth]=\"withInput()\" (backdropClick)=\"showDropdown.set(false)\"\r\n        cdkConnectedOverlayPanelClass=\"autocomplete-overlay\" cdkConnectedOverlayBackdropClass=\"transparent-backdrop\">\r\n\r\n        <ul [style.maxHeight.px]=\"altoContainer()\">\r\n          @for (item of lista(); track $index) {\r\n          <li>\r\n            <label class=\"checkbox-animated\">\r\n              <input type=\"checkbox\" [id]=\"item[keyCodigo()]\" [checked]=\"selection.isSelected(item)\" (change)=\"selection.toggle(item)\">\r\n              <span class=\"text-dark\">{{item[keyDescri()]}}</span>\r\n            </label>\r\n          </li>\r\n          }\r\n          <li>\r\n            <label class=\"checkbox-animated\">\r\n              <input type=\"checkbox\" [id]=\"-1\" [checked]=\"allSelected\" (change)=\"toogleAllSelection()\">\r\n              <span class=\"text-dark\">Todos</span>\r\n            </label>\r\n          </li>\r\n        </ul>\r\n      </ng-template>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".multiselect{position:relative;width:100%}ul{width:100%;list-style:none;padding:0;margin:0;overflow:hidden;transition:max-height .3s ease-out,opacity .3s ease-out;box-shadow:0 4px 6px #0000001a;overflow-y:auto;border-radius:0 0 8px 8px;z-index:9999}li{padding:8px;font-size:.7rem;font-weight:400;color:#353535;cursor:pointer;opacity:90%}li:hover{opacity:100%;background:#1010100b}@media (max-width: 442px){.d-flex{flex-direction:column!important;align-items:stretch!important}}.content-1{flex-basis:23%;display:flex;align-items:center}.content-2{flex-grow:1;display:flex;align-items:center}.input-container{position:relative;display:flex;align-items:center;width:70%}@media (max-width: 443px){.input-container{width:100%;padding-right:8px}}.btn-clear{position:absolute;right:8px;background:transparent;border:none;font-size:1.3rem;font-weight:500;line-height:1;cursor:pointer;padding:0}.checkbox-animated{display:flex;align-items:center;gap:10px;cursor:pointer;font-family:Inter,sans-serif;font-size:15px;color:#333}.checkbox-animated input[type=checkbox]{appearance:none;-webkit-appearance:none;width:18px;height:18px;min-height:18px;min-width:18px;border:2px solid #999;border-radius:6px;background-color:#fff;position:relative;outline:none;cursor:pointer;transition:all .25s ease;box-shadow:0 1px 3px #0000001a}.checkbox-animated input[type=checkbox]:hover{border-color:#04f;transform:scale(1.05)}.checkbox-animated input[type=checkbox]:active{transform:scale(.9)}.checkbox-animated input[type=checkbox]:after{content:\"\";position:absolute;top:1px;left:5px;width:5px;height:10px;border:solid white;border-width:0 2px 2px 0;opacity:0;transform:rotate(45deg) scale(.5);transition:all .3s ease}.checkbox-animated input[type=checkbox]:checked{background-color:#04f;border-color:#04f;box-shadow:0 3px 8px #007bff4d;animation:pop .25s ease}.checkbox-animated input[type=checkbox]:checked:after{opacity:1;transform:rotate(45deg) scale(1)}@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.3)}to{transform:scale(1)}}\n"], dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$3.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$3.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: FormsModule }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], animations: [fadeInOut] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: MultiselectedComponent, isStandalone: true, selector: "app-multiselected", inputs: { lista: { classPropertyName: "lista", publicName: "lista", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, viewInput: { classPropertyName: "viewInput", publicName: "viewInput", isSignal: true, isRequired: false, transformFunction: null }, withTodos: { classPropertyName: "withTodos", publicName: "withTodos", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, keyCodigo: { classPropertyName: "keyCodigo", publicName: "keyCodigo", isSignal: true, isRequired: false, transformFunction: null }, keyDescri: { classPropertyName: "keyDescri", publicName: "keyDescri", isSignal: true, isRequired: false, transformFunction: null }, joinInfo: { classPropertyName: "joinInfo", publicName: "joinInfo", isSignal: true, isRequired: false, transformFunction: null }, wlabel: { classPropertyName: "wlabel", publicName: "wlabel", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, isRequired: { classPropertyName: "isRequired", publicName: "isRequired", isSignal: true, isRequired: false, transformFunction: null }, isVertical: { classPropertyName: "isVertical", publicName: "isVertical", isSignal: true, isRequired: false, transformFunction: null }, allDisabled: { classPropertyName: "allDisabled", publicName: "allDisabled", isSignal: true, isRequired: false, transformFunction: null }, activeFocus: { classPropertyName: "activeFocus", publicName: "activeFocus", isSignal: true, isRequired: false, transformFunction: null }, customBorderColor: { classPropertyName: "customBorderColor", publicName: "customBorderColor", isSignal: true, isRequired: false, transformFunction: null }, customBoxShadow: { classPropertyName: "customBoxShadow", publicName: "customBoxShadow", isSignal: true, isRequired: false, transformFunction: null }, customTransition: { classPropertyName: "customTransition", publicName: "customTransition", isSignal: true, isRequired: false, transformFunction: null }, altoContainer: { classPropertyName: "altoContainer", publicName: "altoContainer", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (isVertical()) {\r\n<label for=\"{{'id_' + label()}}\" [style.min-width]=\"wlabel() + 'px'\"> {{label()}} @if (isRequired()) {<span\r\n    class=\"fw-bold text-danger\">(*)</span>}</label>\r\n}\r\n<div class=\"d-flex align-items-center\">\r\n  @if (!isVertical()) {\r\n  <label for=\"{{'id_' + label()}}\" [style.min-width]=\"wlabel() + 'px'\">{{label()}} @if (isRequired()) { <span\r\n      class=\"fw-bold text-danger\">(*)</span>}</label>\r\n  }\r\n  <div class=\"multiselect d-flex \">\r\n    @if(computedType()){\r\n    <div class=\"content-1 me-1\">\r\n      <input type=\"text\" class=\"form-control show-input\"\r\n        [attr.data-active-focus]=\"activeFocus() == false ? 'false' : ''\"\r\n        [style.--focus-border-color]=\"customBorderColor()\" [style.--focus-box-shadow]=\"customBoxShadow()\"\r\n        [style.--focus-transition]=\"customTransition()\" [(ngModel)]=\"value\" [disabled]=\"allDisabled()\"\r\n        id=\"{{'id_' + label()}}\" name=\"{{'id_' + label()}}\" />\r\n    </div>\r\n    }\r\n\r\n    <div class=\"input-container content-2 me-2\">\r\n      <input type=\"text\" [value]=\"selectedItems\"  class=\"form-control pe-4\" cdkOverlayOrigin readonly\r\n        #autocomplete=\"cdkOverlayOrigin\" #inputRef [attr.data-active-focus]=\"activeFocus() == false ? 'false' : ''\"\r\n        [style.--focus-border-color]=\"customBorderColor()\" [style.--focus-box-shadow]=\"customBoxShadow()\"\r\n        [style.--focus-transition]=\"customTransition()\" (input)=\"null\"\r\n        (focus)=\"showDropdown.set(true);\" [disabled]=\"allDisabled()\" />\r\n      @if (selectedItems.length > 0) {\r\n      <button @fadeInOut type=\"button\" class=\"btn-clear text-dark\" (click)=\"clear(); inputRef.focus()\">\r\n        &times;\r\n      </button>\r\n      }\r\n      <ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"autocomplete\"\r\n        [cdkConnectedOverlayOpen]=\"showDropdown()\" [cdkConnectedOverlayHasBackdrop]=\"true\"\r\n        [cdkConnectedOverlayWidth]=\"withInput()\" (backdropClick)=\"showDropdown.set(false)\"\r\n        cdkConnectedOverlayPanelClass=\"autocomplete-overlay\" cdkConnectedOverlayBackdropClass=\"transparent-backdrop\">\r\n\r\n        <ul [style.maxHeight.px]=\"altoContainer()\">\r\n          @for (item of lista(); track $index) {\r\n          <li>\r\n            <label class=\"checkbox-animated\">\r\n              <input type=\"checkbox\" [id]=\"item[keyCodigo()]\" [checked]=\"selection.isSelected(item)\" (change)=\"selection.toggle(item)\">\r\n              <span class=\"text-dark\">{{item[keyDescri()]}}</span>\r\n            </label>\r\n          </li>\r\n          }\r\n          <li>\r\n            <label class=\"checkbox-animated\">\r\n              <input type=\"checkbox\" [id]=\"-1\" [checked]=\"allSelected\" (change)=\"toogleAllSelection()\">\r\n              <span class=\"text-dark\">Todos</span>\r\n            </label>\r\n          </li>\r\n        </ul>\r\n      </ng-template>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".multiselect{position:relative;width:100%}ul{width:100%;list-style:none;padding:0;margin:0;overflow:hidden;transition:max-height .3s ease-out,opacity .3s ease-out;box-shadow:0 4px 6px #0000001a;overflow-y:auto;border-radius:0 0 8px 8px;z-index:9999}li{padding:8px;font-size:.7rem;font-weight:400;color:#353535;cursor:pointer;opacity:90%}li:hover{opacity:100%;background:#1010100b}@media (max-width: 442px){.d-flex{flex-direction:column!important;align-items:stretch!important}}.content-1{flex-basis:23%;display:flex;align-items:center}.content-2{flex-grow:1;display:flex;align-items:center}.input-container{position:relative;display:flex;align-items:center;width:70%}@media (max-width: 443px){.input-container{width:100%;padding-right:8px}}.btn-clear{position:absolute;right:8px;background:transparent;border:none;font-size:1.3rem;font-weight:500;line-height:1;cursor:pointer;padding:0}.checkbox-animated{display:flex;align-items:center;gap:10px;cursor:pointer;font-family:Inter,sans-serif;font-size:15px;color:#333}.checkbox-animated input[type=checkbox]{appearance:none;-webkit-appearance:none;width:18px;height:18px;min-height:18px;min-width:18px;border:2px solid #999;border-radius:6px;background-color:#fff;position:relative;outline:none;cursor:pointer;transition:all .25s ease;box-shadow:0 1px 3px #0000001a}.checkbox-animated input[type=checkbox]:hover{border-color:#00cf00;transform:scale(1.05)}.checkbox-animated input[type=checkbox]:active{transform:scale(.9)}.checkbox-animated input[type=checkbox]:after{content:\"\";position:absolute;top:1px;left:5px;width:5px;height:10px;border:solid white;border-width:0 2px 2px 0;opacity:0;transform:rotate(45deg) scale(.5);transition:all .3s ease}.checkbox-animated input[type=checkbox]:checked{background-color:#04f;border-color:#04f;box-shadow:0 3px 8px #007bff4d;animation:pop .25s ease}.checkbox-animated input[type=checkbox]:checked:after{opacity:1;transform:rotate(45deg) scale(1)}@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.3)}to{transform:scale(1)}}\n"], dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$3.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$3.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: FormsModule }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], animations: [fadeInOut] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: MultiselectedComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-multiselected', imports: [OverlayModule, FormsModule], animations: [fadeInOut], template: "@if (isVertical()) {\r\n<label for=\"{{'id_' + label()}}\" [style.min-width]=\"wlabel() + 'px'\"> {{label()}} @if (isRequired()) {<span\r\n    class=\"fw-bold text-danger\">(*)</span>}</label>\r\n}\r\n<div class=\"d-flex align-items-center\">\r\n  @if (!isVertical()) {\r\n  <label for=\"{{'id_' + label()}}\" [style.min-width]=\"wlabel() + 'px'\">{{label()}} @if (isRequired()) { <span\r\n      class=\"fw-bold text-danger\">(*)</span>}</label>\r\n  }\r\n  <div class=\"multiselect d-flex \">\r\n    @if(computedType()){\r\n    <div class=\"content-1 me-1\">\r\n      <input type=\"text\" class=\"form-control show-input\"\r\n        [attr.data-active-focus]=\"activeFocus() == false ? 'false' : ''\"\r\n        [style.--focus-border-color]=\"customBorderColor()\" [style.--focus-box-shadow]=\"customBoxShadow()\"\r\n        [style.--focus-transition]=\"customTransition()\" [(ngModel)]=\"value\" [disabled]=\"allDisabled()\"\r\n        id=\"{{'id_' + label()}}\" name=\"{{'id_' + label()}}\" />\r\n    </div>\r\n    }\r\n\r\n    <div class=\"input-container content-2 me-2\">\r\n      <input type=\"text\" [value]=\"selectedItems\"  class=\"form-control pe-4\" cdkOverlayOrigin readonly\r\n        #autocomplete=\"cdkOverlayOrigin\" #inputRef [attr.data-active-focus]=\"activeFocus() == false ? 'false' : ''\"\r\n        [style.--focus-border-color]=\"customBorderColor()\" [style.--focus-box-shadow]=\"customBoxShadow()\"\r\n        [style.--focus-transition]=\"customTransition()\" (input)=\"null\"\r\n        (focus)=\"showDropdown.set(true);\" [disabled]=\"allDisabled()\" />\r\n      @if (selectedItems.length > 0) {\r\n      <button @fadeInOut type=\"button\" class=\"btn-clear text-dark\" (click)=\"clear(); inputRef.focus()\">\r\n        &times;\r\n      </button>\r\n      }\r\n      <ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"autocomplete\"\r\n        [cdkConnectedOverlayOpen]=\"showDropdown()\" [cdkConnectedOverlayHasBackdrop]=\"true\"\r\n        [cdkConnectedOverlayWidth]=\"withInput()\" (backdropClick)=\"showDropdown.set(false)\"\r\n        cdkConnectedOverlayPanelClass=\"autocomplete-overlay\" cdkConnectedOverlayBackdropClass=\"transparent-backdrop\">\r\n\r\n        <ul [style.maxHeight.px]=\"altoContainer()\">\r\n          @for (item of lista(); track $index) {\r\n          <li>\r\n            <label class=\"checkbox-animated\">\r\n              <input type=\"checkbox\" [id]=\"item[keyCodigo()]\" [checked]=\"selection.isSelected(item)\" (change)=\"selection.toggle(item)\">\r\n              <span class=\"text-dark\">{{item[keyDescri()]}}</span>\r\n            </label>\r\n          </li>\r\n          }\r\n          <li>\r\n            <label class=\"checkbox-animated\">\r\n              <input type=\"checkbox\" [id]=\"-1\" [checked]=\"allSelected\" (change)=\"toogleAllSelection()\">\r\n              <span class=\"text-dark\">Todos</span>\r\n            </label>\r\n          </li>\r\n        </ul>\r\n      </ng-template>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".multiselect{position:relative;width:100%}ul{width:100%;list-style:none;padding:0;margin:0;overflow:hidden;transition:max-height .3s ease-out,opacity .3s ease-out;box-shadow:0 4px 6px #0000001a;overflow-y:auto;border-radius:0 0 8px 8px;z-index:9999}li{padding:8px;font-size:.7rem;font-weight:400;color:#353535;cursor:pointer;opacity:90%}li:hover{opacity:100%;background:#1010100b}@media (max-width: 442px){.d-flex{flex-direction:column!important;align-items:stretch!important}}.content-1{flex-basis:23%;display:flex;align-items:center}.content-2{flex-grow:1;display:flex;align-items:center}.input-container{position:relative;display:flex;align-items:center;width:70%}@media (max-width: 443px){.input-container{width:100%;padding-right:8px}}.btn-clear{position:absolute;right:8px;background:transparent;border:none;font-size:1.3rem;font-weight:500;line-height:1;cursor:pointer;padding:0}.checkbox-animated{display:flex;align-items:center;gap:10px;cursor:pointer;font-family:Inter,sans-serif;font-size:15px;color:#333}.checkbox-animated input[type=checkbox]{appearance:none;-webkit-appearance:none;width:18px;height:18px;min-height:18px;min-width:18px;border:2px solid #999;border-radius:6px;background-color:#fff;position:relative;outline:none;cursor:pointer;transition:all .25s ease;box-shadow:0 1px 3px #0000001a}.checkbox-animated input[type=checkbox]:hover{border-color:#04f;transform:scale(1.05)}.checkbox-animated input[type=checkbox]:active{transform:scale(.9)}.checkbox-animated input[type=checkbox]:after{content:\"\";position:absolute;top:1px;left:5px;width:5px;height:10px;border:solid white;border-width:0 2px 2px 0;opacity:0;transform:rotate(45deg) scale(.5);transition:all .3s ease}.checkbox-animated input[type=checkbox]:checked{background-color:#04f;border-color:#04f;box-shadow:0 3px 8px #007bff4d;animation:pop .25s ease}.checkbox-animated input[type=checkbox]:checked:after{opacity:1;transform:rotate(45deg) scale(1)}@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.3)}to{transform:scale(1)}}\n"] }]
+            args: [{ selector: 'app-multiselected', imports: [OverlayModule, FormsModule], animations: [fadeInOut], template: "@if (isVertical()) {\r\n<label for=\"{{'id_' + label()}}\" [style.min-width]=\"wlabel() + 'px'\"> {{label()}} @if (isRequired()) {<span\r\n    class=\"fw-bold text-danger\">(*)</span>}</label>\r\n}\r\n<div class=\"d-flex align-items-center\">\r\n  @if (!isVertical()) {\r\n  <label for=\"{{'id_' + label()}}\" [style.min-width]=\"wlabel() + 'px'\">{{label()}} @if (isRequired()) { <span\r\n      class=\"fw-bold text-danger\">(*)</span>}</label>\r\n  }\r\n  <div class=\"multiselect d-flex \">\r\n    @if(computedType()){\r\n    <div class=\"content-1 me-1\">\r\n      <input type=\"text\" class=\"form-control show-input\"\r\n        [attr.data-active-focus]=\"activeFocus() == false ? 'false' : ''\"\r\n        [style.--focus-border-color]=\"customBorderColor()\" [style.--focus-box-shadow]=\"customBoxShadow()\"\r\n        [style.--focus-transition]=\"customTransition()\" [(ngModel)]=\"value\" [disabled]=\"allDisabled()\"\r\n        id=\"{{'id_' + label()}}\" name=\"{{'id_' + label()}}\" />\r\n    </div>\r\n    }\r\n\r\n    <div class=\"input-container content-2 me-2\">\r\n      <input type=\"text\" [value]=\"selectedItems\"  class=\"form-control pe-4\" cdkOverlayOrigin readonly\r\n        #autocomplete=\"cdkOverlayOrigin\" #inputRef [attr.data-active-focus]=\"activeFocus() == false ? 'false' : ''\"\r\n        [style.--focus-border-color]=\"customBorderColor()\" [style.--focus-box-shadow]=\"customBoxShadow()\"\r\n        [style.--focus-transition]=\"customTransition()\" (input)=\"null\"\r\n        (focus)=\"showDropdown.set(true);\" [disabled]=\"allDisabled()\" />\r\n      @if (selectedItems.length > 0) {\r\n      <button @fadeInOut type=\"button\" class=\"btn-clear text-dark\" (click)=\"clear(); inputRef.focus()\">\r\n        &times;\r\n      </button>\r\n      }\r\n      <ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"autocomplete\"\r\n        [cdkConnectedOverlayOpen]=\"showDropdown()\" [cdkConnectedOverlayHasBackdrop]=\"true\"\r\n        [cdkConnectedOverlayWidth]=\"withInput()\" (backdropClick)=\"showDropdown.set(false)\"\r\n        cdkConnectedOverlayPanelClass=\"autocomplete-overlay\" cdkConnectedOverlayBackdropClass=\"transparent-backdrop\">\r\n\r\n        <ul [style.maxHeight.px]=\"altoContainer()\">\r\n          @for (item of lista(); track $index) {\r\n          <li>\r\n            <label class=\"checkbox-animated\">\r\n              <input type=\"checkbox\" [id]=\"item[keyCodigo()]\" [checked]=\"selection.isSelected(item)\" (change)=\"selection.toggle(item)\">\r\n              <span class=\"text-dark\">{{item[keyDescri()]}}</span>\r\n            </label>\r\n          </li>\r\n          }\r\n          <li>\r\n            <label class=\"checkbox-animated\">\r\n              <input type=\"checkbox\" [id]=\"-1\" [checked]=\"allSelected\" (change)=\"toogleAllSelection()\">\r\n              <span class=\"text-dark\">Todos</span>\r\n            </label>\r\n          </li>\r\n        </ul>\r\n      </ng-template>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".multiselect{position:relative;width:100%}ul{width:100%;list-style:none;padding:0;margin:0;overflow:hidden;transition:max-height .3s ease-out,opacity .3s ease-out;box-shadow:0 4px 6px #0000001a;overflow-y:auto;border-radius:0 0 8px 8px;z-index:9999}li{padding:8px;font-size:.7rem;font-weight:400;color:#353535;cursor:pointer;opacity:90%}li:hover{opacity:100%;background:#1010100b}@media (max-width: 442px){.d-flex{flex-direction:column!important;align-items:stretch!important}}.content-1{flex-basis:23%;display:flex;align-items:center}.content-2{flex-grow:1;display:flex;align-items:center}.input-container{position:relative;display:flex;align-items:center;width:70%}@media (max-width: 443px){.input-container{width:100%;padding-right:8px}}.btn-clear{position:absolute;right:8px;background:transparent;border:none;font-size:1.3rem;font-weight:500;line-height:1;cursor:pointer;padding:0}.checkbox-animated{display:flex;align-items:center;gap:10px;cursor:pointer;font-family:Inter,sans-serif;font-size:15px;color:#333}.checkbox-animated input[type=checkbox]{appearance:none;-webkit-appearance:none;width:18px;height:18px;min-height:18px;min-width:18px;border:2px solid #999;border-radius:6px;background-color:#fff;position:relative;outline:none;cursor:pointer;transition:all .25s ease;box-shadow:0 1px 3px #0000001a}.checkbox-animated input[type=checkbox]:hover{border-color:#00cf00;transform:scale(1.05)}.checkbox-animated input[type=checkbox]:active{transform:scale(.9)}.checkbox-animated input[type=checkbox]:after{content:\"\";position:absolute;top:1px;left:5px;width:5px;height:10px;border:solid white;border-width:0 2px 2px 0;opacity:0;transform:rotate(45deg) scale(.5);transition:all .3s ease}.checkbox-animated input[type=checkbox]:checked{background-color:#04f;border-color:#04f;box-shadow:0 3px 8px #007bff4d;animation:pop .25s ease}.checkbox-animated input[type=checkbox]:checked:after{opacity:1;transform:rotate(45deg) scale(1)}@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.3)}to{transform:scale(1)}}\n"] }]
         }], ctorParameters: () => [] });
 
 class SwitchComponent {
@@ -1582,7 +1583,7 @@ class ListOptionComponent {
     customBoxShadow = input('');
     customTransition = input('');
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ListOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ListOptionComponent, isStandalone: true, selector: "app-list-option", inputs: { wlabel: { classPropertyName: "wlabel", publicName: "wlabel", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, isRequired: { classPropertyName: "isRequired", publicName: "isRequired", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, position_row: { classPropertyName: "position_row", publicName: "position_row", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, lista: { classPropertyName: "lista", publicName: "lista", isSignal: true, isRequired: false, transformFunction: null }, keyCodigo: { classPropertyName: "keyCodigo", publicName: "keyCodigo", isSignal: true, isRequired: false, transformFunction: null }, keyDescri: { classPropertyName: "keyDescri", publicName: "keyDescri", isSignal: true, isRequired: false, transformFunction: null }, allDisabled: { classPropertyName: "allDisabled", publicName: "allDisabled", isSignal: true, isRequired: false, transformFunction: null }, isVertical: { classPropertyName: "isVertical", publicName: "isVertical", isSignal: true, isRequired: false, transformFunction: null }, activeFocus: { classPropertyName: "activeFocus", publicName: "activeFocus", isSignal: true, isRequired: false, transformFunction: null }, customBorderColor: { classPropertyName: "customBorderColor", publicName: "customBorderColor", isSignal: true, isRequired: false, transformFunction: null }, customBoxShadow: { classPropertyName: "customBoxShadow", publicName: "customBoxShadow", isSignal: true, isRequired: false, transformFunction: null }, customTransition: { classPropertyName: "customTransition", publicName: "customTransition", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", disabled: "disabledChange", allDisabled: "allDisabledChange" }, ngImport: i0, template: "\r\n@if (isVertical()) {\r\n<label for=\"{{'id_' + label()}}\" [style.min-width]=\"wlabel() + 'px'\"> {{label()}} @if (isRequired()) {<span\r\n        class=\"fw-bold text-danger\">(*)</span>}</label>\r\n}\r\n<div class=\"d-flex align-items-{{position_row()}}\">\r\n    @if (!isVertical()) {\r\n    <label for=\"{{'id_' + label()}}\" [style.min-width]=\"wlabel() + 'px'\"> {{label()}} @if (isRequired()) {<span\r\n            class=\"fw-bold text-danger\">(*)</span>}</label>\r\n    }\r\n    <div class=\"flex-grow-1 me-2\">\r\n        <div class=\"d-flex flex-{{position()}}\">\r\n            @for (item of lista(); track $index) {\r\n                @switch (type()) {\r\n                    @case ('check') {\r\n                        <app-check-box [name]=\"name()\" [label]=\"item[keyDescri()]\" [value]=\"item[keyCodigo()]\" [id]=\"`check_box_${item[keyCodigo()]}_${item[keyDescri()]}`\" [(binding)]=\"value\" />\r\n                    }@case ('radio') {\r\n                        <app-radio [name]=\"name()\" [label]=\"item[keyDescri()]\" [disabled]=\"allDisabled()\" [value]=\"item[keyCodigo()]\" [id]=\"`radio_${item[keyCodigo()]}_${item[keyDescri()]}`\" [(binding)]=\"value\" />\r\n                    }\r\n                }\r\n            }\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: ["@media (max-width: 442px){.d-flex{flex-direction:column!important;align-items:stretch!important}.infoBox{font-size:12px;padding:8px 12px;width:100%!important;max-width:100%!important}}@media (max-width: 900px){.infoBox{width:250px!important}}.infoBox{position:absolute;width:400px;top:calc(100% + 10px);left:0;right:0;margin-top:2px;background:#be0000d5;box-shadow:0 4px 12px #0003;border-radius:6px;padding:15px 12px;font-size:14px;color:#dbdbdb;z-index:10;font-size:12px;font-weight:600}.infoBox:before{content:\"\";position:absolute;top:-10px;left:20px;border-width:0 8px 10px 8px;border-style:solid;border-color:transparent transparent rgba(190,0,0,.835) transparent;filter:drop-shadow(0 -1px 1px rgba(0,0,0,.1))}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "component", type: CheckBoxComponent, selector: "app-check-box", inputs: ["name", "id", "label", "value", "disabled", "binding"], outputs: ["bindingChange"] }, { kind: "component", type: RadioComponent, selector: "app-radio", inputs: ["name", "id", "label", "value", "binding", "checked", "disabled"], outputs: ["bindingChange", "changed"] }], animations: [fadeInOut] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ListOptionComponent, isStandalone: true, selector: "app-list-option", inputs: { wlabel: { classPropertyName: "wlabel", publicName: "wlabel", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, isRequired: { classPropertyName: "isRequired", publicName: "isRequired", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, position_row: { classPropertyName: "position_row", publicName: "position_row", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, lista: { classPropertyName: "lista", publicName: "lista", isSignal: true, isRequired: false, transformFunction: null }, keyCodigo: { classPropertyName: "keyCodigo", publicName: "keyCodigo", isSignal: true, isRequired: false, transformFunction: null }, keyDescri: { classPropertyName: "keyDescri", publicName: "keyDescri", isSignal: true, isRequired: false, transformFunction: null }, allDisabled: { classPropertyName: "allDisabled", publicName: "allDisabled", isSignal: true, isRequired: false, transformFunction: null }, isVertical: { classPropertyName: "isVertical", publicName: "isVertical", isSignal: true, isRequired: false, transformFunction: null }, activeFocus: { classPropertyName: "activeFocus", publicName: "activeFocus", isSignal: true, isRequired: false, transformFunction: null }, customBorderColor: { classPropertyName: "customBorderColor", publicName: "customBorderColor", isSignal: true, isRequired: false, transformFunction: null }, customBoxShadow: { classPropertyName: "customBoxShadow", publicName: "customBoxShadow", isSignal: true, isRequired: false, transformFunction: null }, customTransition: { classPropertyName: "customTransition", publicName: "customTransition", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", disabled: "disabledChange", allDisabled: "allDisabledChange" }, ngImport: i0, template: "\r\n@if (isVertical()) {\r\n<label for=\"{{'id_' + label()}}\" [style.min-width]=\"wlabel() + 'px'\"> {{label()}} @if (isRequired()) {<span\r\n        class=\"fw-bold text-danger\">(*)</span>}</label>\r\n}\r\n<div class=\"d-flex align-items-{{position_row()}}\">\r\n    @if (!isVertical()) {\r\n    <label for=\"{{'id_' + label()}}\" [style.min-width]=\"wlabel() + 'px'\"> {{label()}} @if (isRequired()) {<span\r\n            class=\"fw-bold text-danger\">(*)</span>}</label>\r\n    }\r\n    <div class=\"flex-grow-1 me-2\">\r\n        <div class=\"d-flex flex-{{position()}}\">\r\n            @for (item of lista(); track $index) {\r\n                @switch (type()) {\r\n                    @case ('check') {\r\n                        <app-check-box [name]=\"name()\" [label]=\"item[keyDescri()]\" [value]=\"item[keyCodigo()]\" [id]=\"`check_box_${item[keyCodigo()]}_${item[keyDescri()]}`\" [(binding)]=\"value\" />\r\n                    }@case ('radio') {\r\n                        <app-radio [name]=\"name()\" [label]=\"item[keyDescri()]\" [disabled]=\"allDisabled()\" [value]=\"item[keyCodigo()]\" [id]=\"`radio_${item[keyCodigo()]}_${item[keyDescri()]}`\" [(binding)]=\"value\" />\r\n                    }\r\n                }\r\n            }\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: ["@media (max-width: 442px){.d-flex{flex-direction:column!important;align-items:stretch!important}.infoBox{font-size:12px;padding:8px 12px;width:100%!important;max-width:100%!important}}@media (max-width: 900px){.infoBox{width:250px!important}}.infoBox{position:absolute;width:400px;top:calc(100% + 10px);left:0;right:0;margin-top:2px;background:#be0000d5;box-shadow:0 4px 12px #0003;border-radius:6px;padding:15px 12px;font-size:14px;color:#dbdbdb;z-index:10;font-size:12px;font-weight:600}.infoBox:before{content:\"\";position:absolute;top:-10px;left:20px;border-width:0 8px 10px 8px;border-style:solid;border-color:transparent transparent rgba(190,0,0,.835) transparent;filter:drop-shadow(0 -1px 1px rgba(0,0,0,.1))}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "component", type: CheckBoxComponent, selector: "app-check-box", inputs: ["name", "id", "label", "value", "disabled", "binding", "class", "checked"], outputs: ["bindingChange", "changeCheck"] }, { kind: "component", type: RadioComponent, selector: "app-radio", inputs: ["name", "id", "label", "value", "binding", "checked", "disabled"], outputs: ["bindingChange", "changed"] }], animations: [fadeInOut] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ListOptionComponent, decorators: [{
             type: Component,
@@ -1659,7 +1660,7 @@ class ListSituacionesComponent {
         this.dataselected.set(extraer ? extraer.join(',') : '');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ListSituacionesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ListSituacionesComponent, isStandalone: true, selector: "app-list-situaciones", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, alert: { classPropertyName: "alert", publicName: "alert", isSignal: true, isRequired: false, transformFunction: null }, keyid: { classPropertyName: "keyid", publicName: "keyid", isSignal: true, isRequired: false, transformFunction: null }, keydesc: { classPropertyName: "keydesc", publicName: "keydesc", isSignal: true, isRequired: false, transformFunction: null }, indexSelected: { classPropertyName: "indexSelected", publicName: "indexSelected", isSignal: true, isRequired: false, transformFunction: null }, dataselected: { classPropertyName: "dataselected", publicName: "dataselected", isSignal: true, isRequired: false, transformFunction: null }, isVertical: { classPropertyName: "isVertical", publicName: "isVertical", isSignal: true, isRequired: false, transformFunction: null }, positionRow: { classPropertyName: "positionRow", publicName: "positionRow", isSignal: true, isRequired: false, transformFunction: null }, wlabel: { classPropertyName: "wlabel", publicName: "wlabel", isSignal: true, isRequired: false, transformFunction: null }, classRow: { classPropertyName: "classRow", publicName: "classRow", isSignal: true, isRequired: false, transformFunction: null }, isModal: { classPropertyName: "isModal", publicName: "isModal", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dataselected: "dataselectedChange" }, ngImport: i0, template: "<div class=\"row mt-2\">\r\n    @if (isVertical()) {\r\n        <label class=\"d-block mb-1\" [style.min-width]=\"wlabel() + 'px'\">{{label()}}</label>\r\n    }\r\n    <div class=\"col-12\">\r\n        <div [ngClass]=\"!isVertical() ? 'd-flex flex-{{positionRow()}}' : 'd-flex'\">\r\n            @if (!isVertical()) {\r\n                <label class=\"d-block mb-1\" [style.min-width]=\"wlabel() + 'px'\">{{label()}}</label>\r\n            }\r\n            <div class=\"row\">\r\n                @if (positionRow() == 'row') {\r\n                    @for (si of allData(); track $index) {\r\n                    <div class=\"{{classRow()}}\">\r\n                        <app-check-box [name]=\"'situacion-' + $index\" [id]=\"'situacion-' + $index\" [label]=\"si.nombre\" [value]=\"si.id\"\r\n                            [(binding)]=\"si.selected\" (bindingChange)=\"onCheckboxChange($event, $index)\" />\r\n                            </div>\r\n                    }\r\n                }@else {\r\n                    @for (si of allData(); track $index) {\r\n                        <app-check-box [name]=\"'situacion-' + $index\" [id]=\"'situacion-' + $index\" [label]=\"si.nombre\" [value]=\"si.id\"\r\n                            [(binding)]=\"si.selected\" (bindingChange)=\"onCheckboxChange($event, $index)\" />\r\n                    }\r\n                }\r\n                \r\n            </div>\r\n                \r\n        </div> \r\n    </div>\r\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: CheckBoxComponent, selector: "app-check-box", inputs: ["name", "id", "label", "value", "disabled", "binding"], outputs: ["bindingChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ListSituacionesComponent, isStandalone: true, selector: "app-list-situaciones", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, alert: { classPropertyName: "alert", publicName: "alert", isSignal: true, isRequired: false, transformFunction: null }, keyid: { classPropertyName: "keyid", publicName: "keyid", isSignal: true, isRequired: false, transformFunction: null }, keydesc: { classPropertyName: "keydesc", publicName: "keydesc", isSignal: true, isRequired: false, transformFunction: null }, indexSelected: { classPropertyName: "indexSelected", publicName: "indexSelected", isSignal: true, isRequired: false, transformFunction: null }, dataselected: { classPropertyName: "dataselected", publicName: "dataselected", isSignal: true, isRequired: false, transformFunction: null }, isVertical: { classPropertyName: "isVertical", publicName: "isVertical", isSignal: true, isRequired: false, transformFunction: null }, positionRow: { classPropertyName: "positionRow", publicName: "positionRow", isSignal: true, isRequired: false, transformFunction: null }, wlabel: { classPropertyName: "wlabel", publicName: "wlabel", isSignal: true, isRequired: false, transformFunction: null }, classRow: { classPropertyName: "classRow", publicName: "classRow", isSignal: true, isRequired: false, transformFunction: null }, isModal: { classPropertyName: "isModal", publicName: "isModal", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dataselected: "dataselectedChange" }, ngImport: i0, template: "<div class=\"row mt-2\">\r\n    @if (isVertical()) {\r\n        <label class=\"d-block mb-1\" [style.min-width]=\"wlabel() + 'px'\">{{label()}}</label>\r\n    }\r\n    <div class=\"col-12\">\r\n        <div [ngClass]=\"!isVertical() ? 'd-flex flex-{{positionRow()}}' : 'd-flex'\">\r\n            @if (!isVertical()) {\r\n                <label class=\"d-block mb-1\" [style.min-width]=\"wlabel() + 'px'\">{{label()}}</label>\r\n            }\r\n            <div class=\"row\">\r\n                @if (positionRow() == 'row') {\r\n                    @for (si of allData(); track $index) {\r\n                    <div class=\"{{classRow()}}\">\r\n                        <app-check-box [name]=\"'situacion-' + $index\" [id]=\"'situacion-' + $index\" [label]=\"si.nombre\" [value]=\"si.id\"\r\n                            [(binding)]=\"si.selected\" (bindingChange)=\"onCheckboxChange($event, $index)\" />\r\n                            </div>\r\n                    }\r\n                }@else {\r\n                    @for (si of allData(); track $index) {\r\n                        <app-check-box [name]=\"'situacion-' + $index\" [id]=\"'situacion-' + $index\" [label]=\"si.nombre\" [value]=\"si.id\"\r\n                            [(binding)]=\"si.selected\" (bindingChange)=\"onCheckboxChange($event, $index)\" />\r\n                    }\r\n                }\r\n                \r\n            </div>\r\n                \r\n        </div> \r\n    </div>\r\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: CheckBoxComponent, selector: "app-check-box", inputs: ["name", "id", "label", "value", "disabled", "binding", "class", "checked"], outputs: ["bindingChange", "changeCheck"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ListSituacionesComponent, decorators: [{
             type: Component,
@@ -3374,6 +3375,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                 }]
         }] });
 
+class AnimatedCheckboxDirective {
+    cbClass = '';
+    el = inject((ElementRef));
+    renderer = inject(Renderer2);
+    ngOnInit() {
+        const input = this.el.nativeElement;
+        const label = input.closest('label');
+        if (!label)
+            return;
+        this.renderer.addClass(label, 'checkbox-animated');
+        if (this.cbClass) {
+            this.renderer.addClass(label, this.cbClass);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AnimatedCheckboxDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: AnimatedCheckboxDirective, isStandalone: true, selector: "input[type=checkbox][animatedCheckbox]", inputs: { cbClass: "cbClass" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AnimatedCheckboxDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input[type=checkbox][animatedCheckbox]',
+                    standalone: true
+                }]
+        }], propDecorators: { cbClass: [{
+                type: Input
+            }] } });
+
 class TableUltimateComponent {
     tableHeaders = viewChild('thElement');
     customActions = contentChild('customActions');
@@ -3411,9 +3439,10 @@ class TableUltimateComponent {
     maxItems = input(50);
     batchSize = input(40);
     rowClassFn = input(null);
+    rowDisabledFn = input(null);
     rowEvent = output();
     rowFormat = computed(() => this.formateador.procesarLista(this.rows(), this.columns()));
-    rowFilter = computed(() => {
+    rowFilter = linkedSignal(() => {
         const term = this.busqueda().toLowerCase();
         const currentRows = this.rowFormat?.() || [];
         return currentRows.filter(item => this.filtraItem(item, term));
@@ -3473,12 +3502,7 @@ class TableUltimateComponent {
                 });
             }
         });
-        effect(() => {
-            const filtered = this.rowFilter();
-            const firstBatch = filtered.slice(0, this.batchSize());
-            this.dataVirtual.set(firstBatch);
-            this.loadedCount = firstBatch.length;
-        });
+        effect(() => this.resetSroll());
         effect(() => {
             if (!this.activeMobileMode())
                 return;
@@ -3497,6 +3521,12 @@ class TableUltimateComponent {
             return;
         this.isMobile.set(event.target.innerWidth <= 768);
     }
+    resetSroll() {
+        const filtered = this.rowFilter();
+        const firstBatch = filtered.slice(0, this.batchSize());
+        this.dataVirtual.set(firstBatch);
+        this.loadedCount = firstBatch.length;
+    }
     actionsAnchor() {
         this.observer = new IntersectionObserver(entries => {
             if (entries[0].isIntersecting && this.loadedCount < this.rowFilter().length && !this.isLoading()) {
@@ -3522,18 +3552,31 @@ class TableUltimateComponent {
             this.sortColumn = column;
             this.sortDirection = 'asc';
         }
-        this.dataVirtual().sort((a, b) => {
+        const sorted = [...this.rowFilter()].sort((a, b) => {
             const valueA = a[column] ?? '';
             const valueB = b[column] ?? '';
-            if (typeof valueA == 'number' && typeof valueB == 'number') {
-                return this.sortDirection == 'asc' ? valueA - valueB : valueB - valueA;
-            }
-            else {
-                return this.sortDirection == 'asc'
-                    ? valueA.toString().localeCompare(valueB.toString())
-                    : valueB.toString().localeCompare(valueA.toString());
+            if (typeof valueA === 'number' && typeof valueB === 'number') {
+                return this.sortDirection === 'asc'
+                    ? valueA - valueB
+                    : valueB - valueA;
             }
+            return this.sortDirection === 'asc'
+                ? valueA.toString().localeCompare(valueB.toString())
+                : valueB.toString().localeCompare(valueA.toString());
         });
+        this.rowFilter.set(sorted);
+        this.resetSroll();
+        // this.dataVirtual().sort((a, b) => {
+        //   const valueA = a[column] ?? ''
+        //   const valueB = b[column] ?? ''
+        //   if (typeof valueA == 'number' && typeof valueB == 'number') {
+        //     return this.sortDirection == 'asc' ? valueA - valueB : valueB - valueA
+        //   } else {
+        //     return this.sortDirection == 'asc'
+        //       ? valueA.toString().localeCompare(valueB.toString())
+        //       : valueB.toString().localeCompare(valueA.toString())
+        //   }
+        // })
     }
     toggleExpandRow(index) {
         this.expandedRows = this.expandedRows == index ? -1 : index;
@@ -3574,25 +3617,34 @@ class TableUltimateComponent {
     validaVisibilidad(value) {
         return validarBoolean(value);
     }
+    isCheckboxDisabled(row) {
+        return this.rowDisabledFn?.()?.(row) ?? false;
+    }
     allCheck(event) {
         const input = event.target;
         if (input.checked) {
-            const keys = this.rowFilter().map(row => ({ id: row.idListTsi, data: row }));
-            this.selectItems.set(keys);
+            const total = this.rowFilter()
+                .filter(r => !this.isCheckboxDisabled(r))
+                .map(r => ({ id: r.idListTsi, data: r }));
+            this.selectItems.set(total);
         }
         else {
             this.selectItems.set([]);
         }
     }
     validaAllCheck() {
+        const selectable = this.rowFilter().filter(r => !this.isCheckboxDisabled(r));
         const selectedIds = new Set(this.selectItems().map(s => s.id));
-        const rows = this.rowFilter();
-        return rows.length > 0 && rows.every(row => selectedIds.has(row.idListTsi));
+        return selectable.length > 0 && selectable.every(row => selectedIds.has(row.idListTsi));
     }
     isItemSelected(id) {
         return this.selectItems().some(item => item.id == id);
     }
     toogleItem(data, event) {
+        const row = this.rowFilter().find(r => r.idListTsi == data.idListTsi);
+        if (!row || this.isCheckboxDisabled(row)) {
+            return;
+        }
         const input = event.target;
         if (input.checked) {
             const item = { id: data.idListTsi, data: data };
@@ -3661,11 +3713,11 @@ class TableUltimateComponent {
         this.rowEvent.emit({ usecase: 3, data: row });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TableUltimateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TableUltimateComponent, isStandalone: true, selector: "app-table-ultimate", inputs: { titleTabla: { classPropertyName: "titleTabla", publicName: "titleTabla", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, withDetails: { classPropertyName: "withDetails", publicName: "withDetails", isSignal: true, isRequired: false, transformFunction: null }, withFiltro: { classPropertyName: "withFiltro", publicName: "withFiltro", isSignal: true, isRequired: false, transformFunction: null }, altoContainer: { classPropertyName: "altoContainer", publicName: "altoContainer", isSignal: true, isRequired: false, transformFunction: null }, colorHeader: { classPropertyName: "colorHeader", publicName: "colorHeader", isSignal: true, isRequired: false, transformFunction: null }, selectedRow: { classPropertyName: "selectedRow", publicName: "selectedRow", isSignal: true, isRequired: false, transformFunction: null }, identifier: { classPropertyName: "identifier", publicName: "identifier", isSignal: true, isRequired: false, transformFunction: null }, withHeight: { classPropertyName: "withHeight", publicName: "withHeight", isSignal: true, isRequired: false, transformFunction: null }, rendered: { classPropertyName: "rendered", publicName: "rendered", isSignal: true, isRequired: false, transformFunction: null }, withTotal: { classPropertyName: "withTotal", publicName: "withTotal", isSignal: true, isRequired: false, transformFunction: null }, withCheckbox: { classPropertyName: "withCheckbox", publicName: "withCheckbox", isSignal: true, isRequired: false, transformFunction: null }, selectItems: { classPropertyName: "selectItems", publicName: "selectItems", isSignal: true, isRequired: false, transformFunction: null }, isDarkMode: { classPropertyName: "isDarkMode", publicName: "isDarkMode", isSignal: true, isRequired: false, transformFunction: null }, activeMobileMode: { classPropertyName: "activeMobileMode", publicName: "activeMobileMode", isSignal: true, isRequired: false, transformFunction: null }, maxItems: { classPropertyName: "maxItems", publicName: "maxItems", isSignal: true, isRequired: false, transformFunction: null }, batchSize: { classPropertyName: "batchSize", publicName: "batchSize", isSignal: true, isRequired: false, transformFunction: null }, rowClassFn: { classPropertyName: "rowClassFn", publicName: "rowClassFn", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedRow: "selectedRowChange", selectItems: "selectItemsChange", rowEvent: "rowEvent" }, host: { listeners: { "window:resize": "onResize($event)" } }, queries: [{ propertyName: "customActions", first: true, predicate: ["customActions"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "tableHeaders", first: true, predicate: ["thElement"], descendants: true, isSignal: true }, { propertyName: "anchor", first: true, predicate: ["anchor"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (withFiltro()) {\r\n<div class=\"col-12 mb-2 mt-2 d-flex justify-content-end align-items-center position-relative\">\r\n    <label for=\"\" class=\"form-label me-2 pt-2\">Buscar</label>\r\n    <input type=\"text\" class=\"form-control cw-250\" (input)=\"textoDigitado($event)\">\r\n    <button (click)=\"togglePopoverFilter()\" class=\"btn btn-dark boton-buscar fs-7\">\r\n        <i class=\"fas fa-cog\"></i>\r\n    </button>\r\n    @if (showPopoverFilter()) {\r\n    <div class=\"popover-menu-filter bg-white shadow\" @dropdownAnimation>\r\n        <div class=\"popover-title fs-7 bg-white\">Filtros</div>\r\n        <div class=\"form-check form-switch text-start\">\r\n            <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"true\" (change)=\"toggleFiltros($event)\">\r\n            <label class=\"form-check-label\">Todos</label>\r\n        </div>\r\n        @for (col of columns(); track col.caption) {\r\n        <div class=\"form-check form-switch text-start\">\r\n            <input type=\"checkbox\" class=\"form-check-input\" id=\"{{ 'filter_' + col.caption }}\"\r\n                [(ngModel)]=\"filtrarColumnas()[col.fieldname]\" />\r\n            <label class=\"form-check-label\" for=\"{{ 'filter_' + col.caption }}\">\r\n                {{ col.caption }}\r\n            </label>\r\n        </div>\r\n        }\r\n    </div>\r\n    }\r\n</div>\r\n}\r\n\r\n<!-- VISTA MOBILE -->\r\n@if (activeMobileMode()) {\r\n    @if (isLoadingResponsive()) {\r\n    <div class=\"d-flex flex-column justify-content-center align-items-center py-2\">\r\n        <div class=\"spinner-border text-secondary mb-2\" role=\"status\"></div>\r\n        <span class=\"ms-2 fs-6\">Cargando...</span>\r\n    </div>\r\n    }\r\n\r\n    @if (!isLoadingResponsive()) {\r\n        @if (isMobile()) {\r\n        <app-card-mobile [data]=\"rowFilter()\" [columns]=\"columns()\" [actions]=\"customActions()\" [identifier]=\"identifier()\"\r\n            [titleTabla]=\"titleTabla()\" [altoContainer]=\"altoContainer()\" />\r\n        }\r\n        @if (!isMobile()) {\r\n        <ng-container *ngTemplateOutlet=\"table\"></ng-container>\r\n        }\r\n    }\r\n}\r\n@else {\r\n    <ng-container *ngTemplateOutlet=\"table\"></ng-container>\r\n}\r\n\r\n<ng-template #table>\r\n    <div class=\"table-container table-responsive\"\r\n        [style.height]=\"withHeight() && altoContenedor() ? 'calc(100vh - ' + altoContenedor() + 'px)' : ''\"\r\n        [style.max-height]=\"altoContenedor()? 'calc(100vh - ' + altoContenedor() + 'px)' : ''\">\r\n        <div>\r\n            <table #table class=\"table table-striped normal-table\" [ngClass]=\"isDarkMode() ? 'table-dark' : ''\">\r\n                <thead>\r\n                    <tr class=\"shadow-sm\">\r\n                        @if (withDetails()) {\r\n                        <th class=\"cw-20 b-table\" [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\"></th>\r\n                        }\r\n\r\n                        @if (withCheckbox()) {\r\n                        <th class=\"cw-20 b-table\" [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\">\r\n                            <input type=\"checkbox\" class=\"form-check-input fs-8 border border-secondary\"\r\n                                [checked]=\"validaAllCheck()\" (change)=\"allCheck($event)\">\r\n                        </th>\r\n                        }\r\n\r\n                        @if (customActions()) {\r\n                        <th class=\"cw-40 b-table\" [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\">\r\n\r\n                            <app-dropdown-cdk>\r\n                                <ng-template #trigger>\r\n                                    <button class=\"btn p-0 text-dark d-flex mx-auto border-0\">\r\n                                        <i class=\"fas fa-cog\"></i>\r\n                                    </button>\r\n                                </ng-template>\r\n                                <ng-template #content>\r\n                                    <div class=\"popover-menu-column bg-white shadow\" @dropdownAnimation>\r\n                                        <div class=\"popover-title fs-7 bg-white\">Columnas</div>\r\n                                        @for (col of columns(); track col.caption) {\r\n                                        @if (col.caption) {\r\n                                        <div class=\"form-check form-switch text-start\">\r\n                                            <input type=\"checkbox\" class=\"form-check-input py-0 my-0 cw-25 ch-15\"\r\n                                                id=\"{{'switch_' + col.caption}}\"\r\n                                                [(ngModel)]=\"visibilidadColumn()[col.caption]\" />\r\n                                            <label class=\"form-check-label ps-1 fs-6 cursor-pointer font-label\"\r\n                                                for=\"{{'switch_' + col.caption}}\">{{ col.caption }}</label>\r\n                                        </div>\r\n                                        }\r\n                                        }\r\n                                    </div>\r\n                                </ng-template>\r\n                            </app-dropdown-cdk>\r\n                        </th>\r\n                        }\r\n                        @for (column of columns(); track $index) {\r\n                        @if (validaVisibilidad(column.visible) && visibilidadColumn()[column.caption] !== false) {\r\n                        <th class=\"b-table\" #thElement [title]=\"column.caption\"\r\n                            [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\">\r\n                            {{ column.caption }}\r\n                            @if(column.caption){\r\n                            @if (sortColumn == column.fieldname) {\r\n                            <span (click)=\"sortTable(column.fieldname)\" class=\"cursor-pointer\">\r\n                                <i\r\n                                    [ngClass]=\"sortDirection == 'asc' ? 'fas fa-angle-up fs-6':'fas fa-angle-down fs-6'\"></i>\r\n                            </span>\r\n                            }\r\n                            @if (sortColumn !== column.fieldname) {\r\n                            <i class=\"fas fa-sort icon-sort cursor-pointer\" (click)=\"sortTable(column.fieldname)\"></i>\r\n                            }\r\n                            }\r\n                        </th>\r\n                        }\r\n                        }\r\n                    </tr>\r\n                </thead>\r\n                <tbody>\r\n                    @for (row of dataVirtual(); track row.idListTsi) {\r\n                    <tr [ngClass]=\"{'table-active': (identifier().length < 1 ? selectedRow() == $index : selectedRow() == concatenarValue(row,identifier()))}\"\r\n                        (click)=\"selectRow(identifier().length < 1 ? $index : row); onClick(row)\"\r\n                        (dblclick)=\"onDoubleClick(row)\" (contextmenu)=\"onRightClick($event,row)\"\r\n                        [id]=\"identifier().length < 1 ? ('row_table_' + $index) : ('row_table_'+ concatenarValue(row,identifier()))\">\r\n                        @if (withDetails()) {\r\n                        <td class=\"b-table text-center mwp-25\">\r\n                            <a (click)=\"toggleExpandRow($index)\" class=\"text-dark cursor-pointer fs-6\">\r\n                                <i class=\"fa-solid\" [class.fa-chevron-right]=\"expandedRows != $index\"\r\n                                    [class.fa-chevron-down]=\"expandedRows == $index\"></i>\r\n                            </a>\r\n                        </td>\r\n                        }\r\n\r\n                        @if (withCheckbox()) {\r\n                        <td scope=\"col\" class=\"text-center b-table\">\r\n                            <input type=\"checkbox\" class=\"form-check-input fs-8 border border-secondary my-0 py-0\"\r\n                                [checked]=\"isItemSelected(row.idListTsi)\" (change)=\"toogleItem(row, $event)\">\r\n                        </td>\r\n                        }\r\n\r\n                        @if (customActions()) {\r\n                        <td class=\"text-center mwp-90 b-table\">\r\n                            <ng-container\r\n                                *ngTemplateOutlet=\"customActions(); context: { $implicit: row }\"></ng-container>\r\n                        </td>\r\n                        }\r\n                        @for (column of columns(); track $index) {\r\n                        @if (validaVisibilidad(column.visible) && visibilidadColumn()[column.caption] !== false) {\r\n                        @switch (column.tipo) {\r\n                        @case ('cell-render') {\r\n                        @let resolverItem = resolveCell(column.fieldname, row);\r\n                        @if (resolverItem) {\r\n                        <td class=\"b-table\" [title]=\"resolverItem.text\" [class.text-center]=\"resolverItem.icon\">\r\n                            @if (resolverItem.icon) {\r\n                            <i class=\"fs-5\" [ngClass]=\"resolverItem.icon\"></i>\r\n                            } @else if (resolverItem.class) {\r\n                            <span [ngClass]=\"row.situac == 'J' ? 'text-error' : resolverItem.class\">\r\n                                {{ resolverItem.text }}\r\n                            </span>\r\n                            } @else {\r\n                            {{ resolverItem.text }}\r\n                            }\r\n                        </td>\r\n                        }\r\n                        }\r\n\r\n                        @default {\r\n                        <td [innerHTML]=\"getHighlight(row._format?.[column.fieldname] ?? row[column.fieldname], column.fieldname)\"\r\n                            [title]=\"row._format?.[column.fieldname] ?? row[column.fieldname]\"\r\n                            [ngClass]=\"rowClassFn() ? rowClassFn()(row) : getRowClass(row)\" class=\"b-table {{getPosition(column)}}\">\r\n                        </td>\r\n                        }\r\n                        }\r\n                        }\r\n                        }\r\n                    </tr>\r\n                    @if ($index == expandedRows) {\r\n                    <tr @fadeInOut>\r\n                        <td [attr.colspan]=\"columns().length + (withDetails()? 1 : 0) + (customActions() ? 1 : 0) + (withCheckbox() ? 1 : 0)\"\r\n                            class=\"table-blank\">\r\n                            <div class=\"d-flex flex-column auditoria\">\r\n                                <span class=\"fw-bold fs-7 text-dark\">Datos de auditor\u00EDa</span>\r\n                                <span class=\"fs-6 text-dark fw-bold\">\r\n                                    Creaci\u00F3n: {{ row.nomucreac }} el {{ row._format?.fcreac ?? row.fcreac }} a las {{\r\n                                    row.hcreac }}\r\n                                </span>\r\n                                <span class=\"fs-6 text-dark fw-bold\">\r\n                                    Actualizaci\u00F3n: {{ row.nomuactua }} el {{ row._format?.factua ?? row.factua }} a las\r\n                                    {{\r\n                                    row.hactua }}\r\n                                </span>\r\n                            </div>\r\n                        </td>\r\n                    </tr>\r\n                    }\r\n                    }\r\n                    <tr #anchor>\r\n                        <td [attr.colspan]=\"columns().length + (withDetails()? 1 : 0) + (customActions() ? 1 : 0) + (withCheckbox() ? 1 : 0)\"\r\n                            class=\"text-center text-muted py-3\">\r\n                            @if (isLoading()) {\r\n                            <span>Cargando m\u00E1s registros...</span>\r\n                            }\r\n                            @if (!isLoading() && dataVirtual().length >= 5000) {\r\n                            <span>No hay m\u00E1s registros</span>\r\n                            }\r\n                        </td>\r\n                    </tr>\r\n                </tbody>\r\n\r\n                @if (withTotal()) {\r\n                <tfoot>\r\n                    <tr>\r\n                        <td class=\"b-table\" [attr.colspan]=\"getColspanBeforeTotals()\">Totales:</td>\r\n                        @for (col of columns() ; track $index) {\r\n                        @if (col.totalizable) {\r\n                        <td class=\"b-table text-end\">\r\n                            {{ getTotals(col.fieldname)}}\r\n                        </td>\r\n                        }\r\n                        }\r\n                    </tr>\r\n                </tfoot>\r\n                }\r\n            </table>\r\n        </div>\r\n    </div>\r\n\r\n</ng-template>\r\n\r\n<!-- FIN VISTA MOBILE -->", styles: [".flex-table{width:100%;min-width:max-content;border-collapse:collapse;table-layout:fixed}.flex-table th,td{border:1px solid #ddd;padding:8px;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:40px}.flex-table th{transition:width .1s ease-out;padding-right:15px}.resize-handle{width:5px;height:100%;background:#d7d7d7;position:absolute;right:0;top:0;cursor:ew-resize;-webkit-user-select:none;user-select:none}.flex-table thead tr th{font-size:12px;font-weight:700;color:#000;border:none;border-bottom:1px solid rgb(206,206,206)}.flex-table tbody tr td{font-size:11px;font-weight:600;color:#000;border:none;border-bottom:1px solid rgb(206,206,206);padding-top:7px;padding-bottom:7px}.flex-table tbody tr{transition:transform .3s ease-in-out,opacity .6s ease-in-out}thead{position:sticky;top:0;z-index:1}.icon-sort{font-size:11px}.collapsed{display:none;max-height:0;opacity:0;overflow:hidden;transition:max-height .4s ease-out,opacity .3s ease-out}.expand-row{max-height:100px;opacity:1;transition:max-height .4s ease-in,opacity .3s ease-in}.table-container{width:100%;max-width:100%;overflow-x:auto;display:block;white-space:nowrap}.text-error{color:#d60000!important;font-weight:700!important}.text-error2{color:#d60000;font-weight:700!important}.text-exito{color:#00773c!important;font-weight:700!important}.text-alerta{color:#e9a700!important;font-weight:700!important}.text-exito2{color:#00773c;font-weight:700!important}@media (max-width: 1600px){.flex-table tbody tr td{font-size:9px}.flex-table thead tr th{font-size:10px}}.table-blank{--bs-table-bg-state: white !important}.normal-table thead tr th{font-size:12px;text-align:center;font-weight:700;max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}.normal-table tbody tr{height:30px}.normal-table tbody tr td{font-size:11px;vertical-align:middle;font-weight:500;white-space:nowrap;text-overflow:ellipsis;padding-top:0;padding-bottom:0}.normal-table thead{position:sticky;top:0;z-index:1}@media (max-width: 1600px){.normal-table tbody tr td{font-size:9px}.normal-table thead tr th{font-size:10px}}.grilla-error td{color:#d60000!important}.auditoria{padding-left:35px;padding-top:8px;padding-bottom:10px}.popover-menu-column{position:absolute;top:100%;left:0;border-radius:.375rem;padding:0rem .75rem;display:block;max-height:300px;width:250px;overflow-y:auto}.popover-title{font-weight:700;margin-bottom:.7rem;margin-left:-.75rem;margin-right:-.75rem;padding:.4rem .75rem;border-bottom:1px solid #7e7e7e;position:sticky;top:0;text-align:center}.popover-menu-column::-webkit-scrollbar{width:5px}.popover-menu-column::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.popover-menu-column::-webkit-scrollbar-thumb{background-color:#d7d7d7;border-radius:4px;border:2px solid transparent}.popover-menu-filter{position:absolute;top:85%;right:0;background-color:#fff;border:1px solid #ddd;border-radius:.375rem;padding:0rem .75rem;display:block;max-height:300px;width:250px;overflow-y:auto;z-index:2}.popover-menu-filter::-webkit-scrollbar{width:5px}.popover-menu-filter::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.popover-menu-filter::-webkit-scrollbar-thumb{background-color:#d7d7d7;border-radius:4px;border:2px solid transparent}.font-label{font-weight:500!important}.mtn-0{margin-top:0}.normal-table tfoot tr{height:50px}.normal-table tfoot tr td{font-size:11px;vertical-align:middle;font-weight:500;white-space:nowrap;text-overflow:ellipsis;padding-top:0;padding-bottom:0}.normal-table tfoot{position:sticky;bottom:0;z-index:1}\n"], dependencies: [{ kind: "component", type: DropdownCdkComponent, selector: "app-dropdown-cdk", inputs: ["inline", "altoContainer"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CardMobileComponent, selector: "app-card-mobile", inputs: ["data", "columns", "identifier", "titleTabla", "actions", "altoContainer", "rendered"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TableUltimateComponent, isStandalone: true, selector: "app-table-ultimate", inputs: { titleTabla: { classPropertyName: "titleTabla", publicName: "titleTabla", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, withDetails: { classPropertyName: "withDetails", publicName: "withDetails", isSignal: true, isRequired: false, transformFunction: null }, withFiltro: { classPropertyName: "withFiltro", publicName: "withFiltro", isSignal: true, isRequired: false, transformFunction: null }, altoContainer: { classPropertyName: "altoContainer", publicName: "altoContainer", isSignal: true, isRequired: false, transformFunction: null }, colorHeader: { classPropertyName: "colorHeader", publicName: "colorHeader", isSignal: true, isRequired: false, transformFunction: null }, selectedRow: { classPropertyName: "selectedRow", publicName: "selectedRow", isSignal: true, isRequired: false, transformFunction: null }, identifier: { classPropertyName: "identifier", publicName: "identifier", isSignal: true, isRequired: false, transformFunction: null }, withHeight: { classPropertyName: "withHeight", publicName: "withHeight", isSignal: true, isRequired: false, transformFunction: null }, rendered: { classPropertyName: "rendered", publicName: "rendered", isSignal: true, isRequired: false, transformFunction: null }, withTotal: { classPropertyName: "withTotal", publicName: "withTotal", isSignal: true, isRequired: false, transformFunction: null }, withCheckbox: { classPropertyName: "withCheckbox", publicName: "withCheckbox", isSignal: true, isRequired: false, transformFunction: null }, selectItems: { classPropertyName: "selectItems", publicName: "selectItems", isSignal: true, isRequired: false, transformFunction: null }, isDarkMode: { classPropertyName: "isDarkMode", publicName: "isDarkMode", isSignal: true, isRequired: false, transformFunction: null }, activeMobileMode: { classPropertyName: "activeMobileMode", publicName: "activeMobileMode", isSignal: true, isRequired: false, transformFunction: null }, maxItems: { classPropertyName: "maxItems", publicName: "maxItems", isSignal: true, isRequired: false, transformFunction: null }, batchSize: { classPropertyName: "batchSize", publicName: "batchSize", isSignal: true, isRequired: false, transformFunction: null }, rowClassFn: { classPropertyName: "rowClassFn", publicName: "rowClassFn", isSignal: true, isRequired: false, transformFunction: null }, rowDisabledFn: { classPropertyName: "rowDisabledFn", publicName: "rowDisabledFn", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedRow: "selectedRowChange", selectItems: "selectItemsChange", rowEvent: "rowEvent" }, host: { listeners: { "window:resize": "onResize($event)" } }, queries: [{ propertyName: "customActions", first: true, predicate: ["customActions"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "tableHeaders", first: true, predicate: ["thElement"], descendants: true, isSignal: true }, { propertyName: "anchor", first: true, predicate: ["anchor"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (withFiltro()) {\r\n<div class=\"col-12 mb-2 mt-2 d-flex justify-content-end align-items-center position-relative\">\r\n    <label for=\"\" class=\"form-label me-2 pt-2\">Buscar</label>\r\n    <input type=\"text\" class=\"form-control cw-250\" (input)=\"textoDigitado($event)\">\r\n    <button (click)=\"togglePopoverFilter()\" class=\"btn btn-dark boton-buscar fs-7\">\r\n        <i class=\"fas fa-cog\"></i>\r\n    </button>\r\n    @if (showPopoverFilter()) {\r\n    <div class=\"popover-menu-filter bg-white shadow\" @dropdownAnimation>\r\n        <div class=\"popover-title fs-7 bg-white\">Filtros</div>\r\n        <div class=\"form-check form-switch text-start\">\r\n            <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"true\" (change)=\"toggleFiltros($event)\">\r\n            <label class=\"form-check-label\">Todos</label>\r\n        </div>\r\n        @for (col of columns(); track col.caption) {\r\n        <div class=\"form-check form-switch text-start\">\r\n            <input type=\"checkbox\" class=\"form-check-input\" id=\"{{ 'filter_' + col.caption }}\"\r\n                [(ngModel)]=\"filtrarColumnas()[col.fieldname]\" />\r\n            <label class=\"form-check-label\" for=\"{{ 'filter_' + col.caption }}\">\r\n                {{ col.caption }}\r\n            </label>\r\n        </div>\r\n        }\r\n    </div>\r\n    }\r\n</div>\r\n}\r\n\r\n<!-- VISTA MOBILE -->\r\n@if (activeMobileMode()) {\r\n@if (isLoadingResponsive()) {\r\n<div class=\"d-flex flex-column justify-content-center align-items-center py-2\">\r\n    <div class=\"spinner-border text-secondary mb-2\" role=\"status\"></div>\r\n    <span class=\"ms-2 fs-6\">Cargando...</span>\r\n</div>\r\n}\r\n\r\n@if (!isLoadingResponsive()) {\r\n@if (isMobile()) {\r\n<app-card-mobile [data]=\"rowFilter()\" [columns]=\"columns()\" [actions]=\"customActions()\" [identifier]=\"identifier()\"\r\n    [titleTabla]=\"titleTabla()\" [altoContainer]=\"altoContainer()\" />\r\n}\r\n@if (!isMobile()) {\r\n<ng-container *ngTemplateOutlet=\"table\"></ng-container>\r\n}\r\n}\r\n}\r\n@else {\r\n<ng-container *ngTemplateOutlet=\"table\"></ng-container>\r\n}\r\n\r\n<ng-template #table>\r\n    <div class=\"table-container table-responsive\"\r\n        [style.height]=\"withHeight() && altoContenedor() ? 'calc(100vh - ' + altoContenedor() + 'px)' : ''\"\r\n        [style.max-height]=\"altoContenedor()? 'calc(100vh - ' + altoContenedor() + 'px)' : ''\">\r\n        <div>\r\n            <table #table class=\"table table-striped normal-table\" [ngClass]=\"isDarkMode() ? 'table-dark' : ''\">\r\n                <thead>\r\n                    <tr class=\"shadow-sm\">\r\n                        @if (withDetails()) {\r\n                        <th class=\"cw-20 b-table\" [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\"></th>\r\n                        }\r\n\r\n                        @if (withCheckbox()) {\r\n                        <th class=\"cw-20 b-table\" [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\">\r\n                            <label>\r\n                                <input type=\"checkbox\" name=\"check_box_select_table_main\"\r\n                                    id=\"check_box_select_table_main\" animatedCheckbox [checked]=\"validaAllCheck()\"\r\n                                    (change)=\"allCheck($event)\">\r\n                            </label>\r\n                        </th>\r\n                        }\r\n\r\n                        @if (customActions()) {\r\n                        <th class=\"cw-40 b-table\" [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\">\r\n\r\n                            <app-dropdown-cdk>\r\n                                <ng-template #trigger>\r\n                                    <button class=\"btn p-0 text-dark d-flex mx-auto border-0\">\r\n                                        <i class=\"fas fa-cog\"></i>\r\n                                    </button>\r\n                                </ng-template>\r\n                                <ng-template #content>\r\n                                    <div class=\"popover-menu-column bg-white shadow\" @dropdownAnimation>\r\n                                        <div class=\"popover-title fs-7 bg-white\">Columnas</div>\r\n                                        @for (col of columns(); track col.caption) {\r\n                                        @if (col.caption) {\r\n                                        <div class=\"form-check form-switch text-start\">\r\n                                            <input type=\"checkbox\" class=\"form-check-input py-0 my-0 cw-25 ch-15\"\r\n                                                id=\"{{'switch_' + col.caption}}\"\r\n                                                [(ngModel)]=\"visibilidadColumn()[col.caption]\" />\r\n                                            <label class=\"form-check-label ps-1 fs-6 cursor-pointer font-label\"\r\n                                                for=\"{{'switch_' + col.caption}}\">{{ col.caption }}</label>\r\n                                        </div>\r\n                                        }\r\n                                        }\r\n                                    </div>\r\n                                </ng-template>\r\n                            </app-dropdown-cdk>\r\n                        </th>\r\n                        }\r\n                        @for (column of columns(); track $index) {\r\n                        @if (validaVisibilidad(column.visible) && visibilidadColumn()[column.caption] !== false) {\r\n                        <th class=\"b-table\" #thElement [title]=\"column.caption\" [style.width.px]=\"column?.width\"\r\n                            [style.max-width.px]=\"column?.width\" [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\">\r\n                            {{ column.caption }}\r\n                            @if(column.caption){\r\n                            @if (sortColumn == column.fieldname) {\r\n                            <span (click)=\"sortTable(column.fieldname)\" class=\"cursor-pointer\">\r\n                                <i\r\n                                    [ngClass]=\"sortDirection == 'asc' ? 'fas fa-angle-up fs-6':'fas fa-angle-down fs-6'\"></i>\r\n                            </span>\r\n                            }\r\n                            @if (sortColumn !== column.fieldname) {\r\n                            <i class=\"fas fa-sort icon-sort cursor-pointer\" (click)=\"sortTable(column.fieldname)\"></i>\r\n                            }\r\n                            }\r\n                        </th>\r\n                        }\r\n                        }\r\n                    </tr>\r\n                </thead>\r\n                <tbody>\r\n                    @for (row of dataVirtual(); track row.idListTsi) {\r\n                    @let idList = row.idListTsi;\r\n                    <tr [ngClass]=\"{'table-active': (identifier().length < 1 ? selectedRow() == $index : selectedRow() == concatenarValue(row,identifier()))}\"\r\n                        (click)=\"selectRow(identifier().length < 1 ? $index : row); onClick(row)\"\r\n                        (dblclick)=\"onDoubleClick(row)\" (contextmenu)=\"onRightClick($event,row)\"\r\n                        [id]=\"identifier().length < 1 ? ('row_table_' + $index) : ('row_table_'+ concatenarValue(row,identifier()))\">\r\n                        @if (withDetails()) {\r\n                        <td class=\"b-table text-center mwp-25\">\r\n                            <a (click)=\"toggleExpandRow($index)\" class=\"text-dark cursor-pointer fs-6\">\r\n                                <i class=\"fa-solid\" [class.fa-chevron-right]=\"expandedRows != $index\"\r\n                                    [class.fa-chevron-down]=\"expandedRows == $index\"></i>\r\n                            </a>\r\n                        </td>\r\n                        }\r\n\r\n                        @if (withCheckbox()) {\r\n                        <td scope=\"col\" class=\"text-center b-table\">\r\n                            <label>\r\n                                <input type=\"checkbox\" [name]=\"'check_box_select_table_' + idList\"\r\n                                    [id]=\"'check_box_select_table_' + idList\" animatedCheckbox\r\n                                    [checked]=\"isItemSelected(idList)\" (change)=\"toogleItem(idList , $event)\"\r\n                                    [disabled]=\"isCheckboxDisabled(row)\">\r\n                            </label>\r\n                        </td>\r\n                        }\r\n\r\n                        @if (customActions()) {\r\n                        <td class=\"text-center mwp-90 b-table\">\r\n                            <ng-container\r\n                                *ngTemplateOutlet=\"customActions(); context: { $implicit: row }\"></ng-container>\r\n                        </td>\r\n                        }\r\n                        @for (column of columns(); track $index) {\r\n                        @if (validaVisibilidad(column.visible) && visibilidadColumn()[column.caption] !== false) {\r\n\r\n                        @if (column.template) {\r\n                        <td class=\"b-table\">\r\n                            <ng-container\r\n                                *ngTemplateOutlet=\"column.template; context: { $implicit: row, column: column }\">\r\n                            </ng-container>\r\n                        </td>\r\n                        }@else {\r\n                        @switch (column.tipo) {\r\n                        @case ('cell-render') {\r\n                        @let resolverItem = resolveCell(column.fieldname, row);\r\n                        @if (resolverItem) {\r\n                        <td class=\"b-table\" [title]=\"resolverItem.text\" [class.text-center]=\"resolverItem.icon\">\r\n                            @if (resolverItem.icon) {\r\n                            <i class=\"fs-5\" [ngClass]=\"resolverItem.icon\"></i>\r\n                            } @else if (resolverItem.class) {\r\n                            <span [ngClass]=\"row.situac == 'J' ? 'text-error' : resolverItem.class\">\r\n                                {{ resolverItem.text }}\r\n                            </span>\r\n                            } @else {\r\n                            {{ resolverItem.text }}\r\n                            }\r\n                        </td>\r\n                        }\r\n                        }\r\n\r\n                        @default {\r\n                        <td [innerHTML]=\"getHighlight(row._format?.[column.fieldname] ?? row[column.fieldname], column.fieldname)\"\r\n                            [style.width.px]=\"column?.width\" [style.max-width.px]=\"column?.width\"\r\n                            [title]=\"row._format?.[column.fieldname] ?? row[column.fieldname]\"\r\n                            [ngClass]=\"rowClassFn() ? rowClassFn()(row) : getRowClass(row)\"\r\n                            class=\"b-table {{getPosition(column)}}\">\r\n                        </td>\r\n                        }\r\n                        }\r\n\r\n                        }\r\n                        }\r\n                        }\r\n                    </tr>\r\n                    @if ($index == expandedRows) {\r\n                    <tr @fadeInOut>\r\n                        <td [attr.colspan]=\"columns().length + (withDetails()? 1 : 0) + (customActions() ? 1 : 0) + (withCheckbox() ? 1 : 0)\"\r\n                            class=\"table-blank\">\r\n                            <div class=\"d-flex flex-column auditoria\">\r\n                                <span class=\"fw-bold fs-7 text-dark\">Datos de auditor\u00EDa</span>\r\n                                <span class=\"fs-6 text-dark fw-bold\">\r\n                                    Creaci\u00F3n: {{ row.nomucreac }} el {{ row._format?.fcreac ?? row.fcreac }} a las {{\r\n                                    row.hcreac }}\r\n                                </span>\r\n                                <span class=\"fs-6 text-dark fw-bold\">\r\n                                    Actualizaci\u00F3n: {{ row.nomuactua }} el {{ row._format?.factua ?? row.factua }} a las\r\n                                    {{\r\n                                    row.hactua }}\r\n                                </span>\r\n                            </div>\r\n                        </td>\r\n                    </tr>\r\n                    }\r\n                    }\r\n                    <tr #anchor>\r\n                        <td [attr.colspan]=\"columns().length + (withDetails()? 1 : 0) + (customActions() ? 1 : 0) + (withCheckbox() ? 1 : 0)\"\r\n                            class=\"text-center text-muted py-3\">\r\n                            @if (isLoading()) {\r\n                            <span>Cargando m\u00E1s registros...</span>\r\n                            }\r\n                            @if (!isLoading() && dataVirtual().length >= 5000) {\r\n                            <span>No hay m\u00E1s registros</span>\r\n                            }\r\n                        </td>\r\n                    </tr>\r\n                </tbody>\r\n\r\n                @if (withTotal()) {\r\n                <tfoot>\r\n                    <tr>\r\n                        <td class=\"b-table\" [attr.colspan]=\"getColspanBeforeTotals()\">Totales:</td>\r\n                        @for (col of columns() ; track $index) {\r\n                        @if (col.totalizable) {\r\n                        <td class=\"b-table text-end\">\r\n                            {{ getTotals(col.fieldname)}}\r\n                        </td>\r\n                        }\r\n                        }\r\n                    </tr>\r\n                </tfoot>\r\n                }\r\n            </table>\r\n        </div>\r\n    </div>\r\n\r\n</ng-template>\r\n\r\n<!-- FIN VISTA MOBILE -->", styles: [".flex-table{width:100%;min-width:max-content;border-collapse:collapse;table-layout:fixed}.flex-table th,td{border:1px solid #ddd;padding:8px;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:40px}.flex-table th{transition:width .1s ease-out;padding-right:15px}.resize-handle{width:5px;height:100%;background:#d7d7d7;position:absolute;right:0;top:0;cursor:ew-resize;-webkit-user-select:none;user-select:none}.flex-table thead tr th{font-size:12px;font-weight:700;color:#000;border:none;border-bottom:1px solid rgb(206,206,206)}.flex-table tbody tr td{font-size:11px;font-weight:600;color:#000;border:none;border-bottom:1px solid rgb(206,206,206);padding-top:7px;padding-bottom:7px}.flex-table tbody tr{transition:transform .3s ease-in-out,opacity .6s ease-in-out}thead{position:sticky;top:0;z-index:1}.icon-sort{font-size:11px}.collapsed{display:none;max-height:0;opacity:0;overflow:hidden;transition:max-height .4s ease-out,opacity .3s ease-out}.expand-row{max-height:100px;opacity:1;transition:max-height .4s ease-in,opacity .3s ease-in}.table-container{width:100%;max-width:100%;overflow-x:auto;display:block;white-space:nowrap}.text-error{color:#d60000!important;font-weight:700!important}.text-error2{color:#d60000;font-weight:700!important}.text-exito{color:#00773c!important;font-weight:700!important}.text-alerta{color:#e9a700!important;font-weight:700!important}.text-exito2{color:#00773c;font-weight:700!important}@media (max-width: 1600px){.flex-table tbody tr td{font-size:9px}.flex-table thead tr th{font-size:10px}}.table-blank{--bs-table-bg-state: white !important}.normal-table thead tr th{font-size:12px;text-align:center;font-weight:700;max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}.normal-table tbody tr{height:30px}.normal-table tbody tr td{font-size:11px;vertical-align:middle;font-weight:500;white-space:nowrap;text-overflow:ellipsis;padding-top:0;padding-bottom:0}.normal-table thead{position:sticky;top:0;z-index:1}@media (max-width: 1600px){.normal-table tbody tr td{font-size:9px}.normal-table thead tr th{font-size:10px}}.grilla-error td{color:#d60000!important}.auditoria{padding-left:35px;padding-top:8px;padding-bottom:10px}.popover-menu-column{position:absolute;top:100%;left:0;border-radius:.375rem;padding:0rem .75rem;display:block;max-height:300px;width:250px;overflow-y:auto}.popover-title{font-weight:700;margin-bottom:.7rem;margin-left:-.75rem;margin-right:-.75rem;padding:.4rem .75rem;border-bottom:1px solid #7e7e7e;position:sticky;top:0;text-align:center}.popover-menu-column::-webkit-scrollbar{width:5px}.popover-menu-column::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.popover-menu-column::-webkit-scrollbar-thumb{background-color:#d7d7d7;border-radius:4px;border:2px solid transparent}.popover-menu-filter{position:absolute;top:85%;right:0;background-color:#fff;border:1px solid #ddd;border-radius:.375rem;padding:0rem .75rem;display:block;max-height:300px;width:250px;overflow-y:auto;z-index:2}.popover-menu-filter::-webkit-scrollbar{width:5px}.popover-menu-filter::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.popover-menu-filter::-webkit-scrollbar-thumb{background-color:#d7d7d7;border-radius:4px;border:2px solid transparent}.font-label{font-weight:500!important}.mtn-0{margin-top:0}.normal-table tfoot tr{height:50px}.normal-table tfoot tr td{font-size:11px;vertical-align:middle;font-weight:500;white-space:nowrap;text-overflow:ellipsis;padding-top:0;padding-bottom:0}.normal-table tfoot{position:sticky;bottom:0;z-index:1}\n"], dependencies: [{ kind: "component", type: DropdownCdkComponent, selector: "app-dropdown-cdk", inputs: ["inline", "altoContainer"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CardMobileComponent, selector: "app-card-mobile", inputs: ["data", "columns", "identifier", "titleTabla", "actions", "altoContainer", "rendered"] }, { kind: "directive", type: AnimatedCheckboxDirective, selector: "input[type=checkbox][animatedCheckbox]", inputs: ["cbClass"] }], animations: [fadeInOut] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TableUltimateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-table-ultimate', imports: [DropdownCdkComponent, FormsModule, NgClass, NgTemplateOutlet, CardMobileComponent], template: "@if (withFiltro()) {\r\n<div class=\"col-12 mb-2 mt-2 d-flex justify-content-end align-items-center position-relative\">\r\n    <label for=\"\" class=\"form-label me-2 pt-2\">Buscar</label>\r\n    <input type=\"text\" class=\"form-control cw-250\" (input)=\"textoDigitado($event)\">\r\n    <button (click)=\"togglePopoverFilter()\" class=\"btn btn-dark boton-buscar fs-7\">\r\n        <i class=\"fas fa-cog\"></i>\r\n    </button>\r\n    @if (showPopoverFilter()) {\r\n    <div class=\"popover-menu-filter bg-white shadow\" @dropdownAnimation>\r\n        <div class=\"popover-title fs-7 bg-white\">Filtros</div>\r\n        <div class=\"form-check form-switch text-start\">\r\n            <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"true\" (change)=\"toggleFiltros($event)\">\r\n            <label class=\"form-check-label\">Todos</label>\r\n        </div>\r\n        @for (col of columns(); track col.caption) {\r\n        <div class=\"form-check form-switch text-start\">\r\n            <input type=\"checkbox\" class=\"form-check-input\" id=\"{{ 'filter_' + col.caption }}\"\r\n                [(ngModel)]=\"filtrarColumnas()[col.fieldname]\" />\r\n            <label class=\"form-check-label\" for=\"{{ 'filter_' + col.caption }}\">\r\n                {{ col.caption }}\r\n            </label>\r\n        </div>\r\n        }\r\n    </div>\r\n    }\r\n</div>\r\n}\r\n\r\n<!-- VISTA MOBILE -->\r\n@if (activeMobileMode()) {\r\n    @if (isLoadingResponsive()) {\r\n    <div class=\"d-flex flex-column justify-content-center align-items-center py-2\">\r\n        <div class=\"spinner-border text-secondary mb-2\" role=\"status\"></div>\r\n        <span class=\"ms-2 fs-6\">Cargando...</span>\r\n    </div>\r\n    }\r\n\r\n    @if (!isLoadingResponsive()) {\r\n        @if (isMobile()) {\r\n        <app-card-mobile [data]=\"rowFilter()\" [columns]=\"columns()\" [actions]=\"customActions()\" [identifier]=\"identifier()\"\r\n            [titleTabla]=\"titleTabla()\" [altoContainer]=\"altoContainer()\" />\r\n        }\r\n        @if (!isMobile()) {\r\n        <ng-container *ngTemplateOutlet=\"table\"></ng-container>\r\n        }\r\n    }\r\n}\r\n@else {\r\n    <ng-container *ngTemplateOutlet=\"table\"></ng-container>\r\n}\r\n\r\n<ng-template #table>\r\n    <div class=\"table-container table-responsive\"\r\n        [style.height]=\"withHeight() && altoContenedor() ? 'calc(100vh - ' + altoContenedor() + 'px)' : ''\"\r\n        [style.max-height]=\"altoContenedor()? 'calc(100vh - ' + altoContenedor() + 'px)' : ''\">\r\n        <div>\r\n            <table #table class=\"table table-striped normal-table\" [ngClass]=\"isDarkMode() ? 'table-dark' : ''\">\r\n                <thead>\r\n                    <tr class=\"shadow-sm\">\r\n                        @if (withDetails()) {\r\n                        <th class=\"cw-20 b-table\" [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\"></th>\r\n                        }\r\n\r\n                        @if (withCheckbox()) {\r\n                        <th class=\"cw-20 b-table\" [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\">\r\n                            <input type=\"checkbox\" class=\"form-check-input fs-8 border border-secondary\"\r\n                                [checked]=\"validaAllCheck()\" (change)=\"allCheck($event)\">\r\n                        </th>\r\n                        }\r\n\r\n                        @if (customActions()) {\r\n                        <th class=\"cw-40 b-table\" [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\">\r\n\r\n                            <app-dropdown-cdk>\r\n                                <ng-template #trigger>\r\n                                    <button class=\"btn p-0 text-dark d-flex mx-auto border-0\">\r\n                                        <i class=\"fas fa-cog\"></i>\r\n                                    </button>\r\n                                </ng-template>\r\n                                <ng-template #content>\r\n                                    <div class=\"popover-menu-column bg-white shadow\" @dropdownAnimation>\r\n                                        <div class=\"popover-title fs-7 bg-white\">Columnas</div>\r\n                                        @for (col of columns(); track col.caption) {\r\n                                        @if (col.caption) {\r\n                                        <div class=\"form-check form-switch text-start\">\r\n                                            <input type=\"checkbox\" class=\"form-check-input py-0 my-0 cw-25 ch-15\"\r\n                                                id=\"{{'switch_' + col.caption}}\"\r\n                                                [(ngModel)]=\"visibilidadColumn()[col.caption]\" />\r\n                                            <label class=\"form-check-label ps-1 fs-6 cursor-pointer font-label\"\r\n                                                for=\"{{'switch_' + col.caption}}\">{{ col.caption }}</label>\r\n                                        </div>\r\n                                        }\r\n                                        }\r\n                                    </div>\r\n                                </ng-template>\r\n                            </app-dropdown-cdk>\r\n                        </th>\r\n                        }\r\n                        @for (column of columns(); track $index) {\r\n                        @if (validaVisibilidad(column.visible) && visibilidadColumn()[column.caption] !== false) {\r\n                        <th class=\"b-table\" #thElement [title]=\"column.caption\"\r\n                            [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\">\r\n                            {{ column.caption }}\r\n                            @if(column.caption){\r\n                            @if (sortColumn == column.fieldname) {\r\n                            <span (click)=\"sortTable(column.fieldname)\" class=\"cursor-pointer\">\r\n                                <i\r\n                                    [ngClass]=\"sortDirection == 'asc' ? 'fas fa-angle-up fs-6':'fas fa-angle-down fs-6'\"></i>\r\n                            </span>\r\n                            }\r\n                            @if (sortColumn !== column.fieldname) {\r\n                            <i class=\"fas fa-sort icon-sort cursor-pointer\" (click)=\"sortTable(column.fieldname)\"></i>\r\n                            }\r\n                            }\r\n                        </th>\r\n                        }\r\n                        }\r\n                    </tr>\r\n                </thead>\r\n                <tbody>\r\n                    @for (row of dataVirtual(); track row.idListTsi) {\r\n                    <tr [ngClass]=\"{'table-active': (identifier().length < 1 ? selectedRow() == $index : selectedRow() == concatenarValue(row,identifier()))}\"\r\n                        (click)=\"selectRow(identifier().length < 1 ? $index : row); onClick(row)\"\r\n                        (dblclick)=\"onDoubleClick(row)\" (contextmenu)=\"onRightClick($event,row)\"\r\n                        [id]=\"identifier().length < 1 ? ('row_table_' + $index) : ('row_table_'+ concatenarValue(row,identifier()))\">\r\n                        @if (withDetails()) {\r\n                        <td class=\"b-table text-center mwp-25\">\r\n                            <a (click)=\"toggleExpandRow($index)\" class=\"text-dark cursor-pointer fs-6\">\r\n                                <i class=\"fa-solid\" [class.fa-chevron-right]=\"expandedRows != $index\"\r\n                                    [class.fa-chevron-down]=\"expandedRows == $index\"></i>\r\n                            </a>\r\n                        </td>\r\n                        }\r\n\r\n                        @if (withCheckbox()) {\r\n                        <td scope=\"col\" class=\"text-center b-table\">\r\n                            <input type=\"checkbox\" class=\"form-check-input fs-8 border border-secondary my-0 py-0\"\r\n                                [checked]=\"isItemSelected(row.idListTsi)\" (change)=\"toogleItem(row, $event)\">\r\n                        </td>\r\n                        }\r\n\r\n                        @if (customActions()) {\r\n                        <td class=\"text-center mwp-90 b-table\">\r\n                            <ng-container\r\n                                *ngTemplateOutlet=\"customActions(); context: { $implicit: row }\"></ng-container>\r\n                        </td>\r\n                        }\r\n                        @for (column of columns(); track $index) {\r\n                        @if (validaVisibilidad(column.visible) && visibilidadColumn()[column.caption] !== false) {\r\n                        @switch (column.tipo) {\r\n                        @case ('cell-render') {\r\n                        @let resolverItem = resolveCell(column.fieldname, row);\r\n                        @if (resolverItem) {\r\n                        <td class=\"b-table\" [title]=\"resolverItem.text\" [class.text-center]=\"resolverItem.icon\">\r\n                            @if (resolverItem.icon) {\r\n                            <i class=\"fs-5\" [ngClass]=\"resolverItem.icon\"></i>\r\n                            } @else if (resolverItem.class) {\r\n                            <span [ngClass]=\"row.situac == 'J' ? 'text-error' : resolverItem.class\">\r\n                                {{ resolverItem.text }}\r\n                            </span>\r\n                            } @else {\r\n                            {{ resolverItem.text }}\r\n                            }\r\n                        </td>\r\n                        }\r\n                        }\r\n\r\n                        @default {\r\n                        <td [innerHTML]=\"getHighlight(row._format?.[column.fieldname] ?? row[column.fieldname], column.fieldname)\"\r\n                            [title]=\"row._format?.[column.fieldname] ?? row[column.fieldname]\"\r\n                            [ngClass]=\"rowClassFn() ? rowClassFn()(row) : getRowClass(row)\" class=\"b-table {{getPosition(column)}}\">\r\n                        </td>\r\n                        }\r\n                        }\r\n                        }\r\n                        }\r\n                    </tr>\r\n                    @if ($index == expandedRows) {\r\n                    <tr @fadeInOut>\r\n                        <td [attr.colspan]=\"columns().length + (withDetails()? 1 : 0) + (customActions() ? 1 : 0) + (withCheckbox() ? 1 : 0)\"\r\n                            class=\"table-blank\">\r\n                            <div class=\"d-flex flex-column auditoria\">\r\n                                <span class=\"fw-bold fs-7 text-dark\">Datos de auditor\u00EDa</span>\r\n                                <span class=\"fs-6 text-dark fw-bold\">\r\n                                    Creaci\u00F3n: {{ row.nomucreac }} el {{ row._format?.fcreac ?? row.fcreac }} a las {{\r\n                                    row.hcreac }}\r\n                                </span>\r\n                                <span class=\"fs-6 text-dark fw-bold\">\r\n                                    Actualizaci\u00F3n: {{ row.nomuactua }} el {{ row._format?.factua ?? row.factua }} a las\r\n                                    {{\r\n                                    row.hactua }}\r\n                                </span>\r\n                            </div>\r\n                        </td>\r\n                    </tr>\r\n                    }\r\n                    }\r\n                    <tr #anchor>\r\n                        <td [attr.colspan]=\"columns().length + (withDetails()? 1 : 0) + (customActions() ? 1 : 0) + (withCheckbox() ? 1 : 0)\"\r\n                            class=\"text-center text-muted py-3\">\r\n                            @if (isLoading()) {\r\n                            <span>Cargando m\u00E1s registros...</span>\r\n                            }\r\n                            @if (!isLoading() && dataVirtual().length >= 5000) {\r\n                            <span>No hay m\u00E1s registros</span>\r\n                            }\r\n                        </td>\r\n                    </tr>\r\n                </tbody>\r\n\r\n                @if (withTotal()) {\r\n                <tfoot>\r\n                    <tr>\r\n                        <td class=\"b-table\" [attr.colspan]=\"getColspanBeforeTotals()\">Totales:</td>\r\n                        @for (col of columns() ; track $index) {\r\n                        @if (col.totalizable) {\r\n                        <td class=\"b-table text-end\">\r\n                            {{ getTotals(col.fieldname)}}\r\n                        </td>\r\n                        }\r\n                        }\r\n                    </tr>\r\n                </tfoot>\r\n                }\r\n            </table>\r\n        </div>\r\n    </div>\r\n\r\n</ng-template>\r\n\r\n<!-- FIN VISTA MOBILE -->", styles: [".flex-table{width:100%;min-width:max-content;border-collapse:collapse;table-layout:fixed}.flex-table th,td{border:1px solid #ddd;padding:8px;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:40px}.flex-table th{transition:width .1s ease-out;padding-right:15px}.resize-handle{width:5px;height:100%;background:#d7d7d7;position:absolute;right:0;top:0;cursor:ew-resize;-webkit-user-select:none;user-select:none}.flex-table thead tr th{font-size:12px;font-weight:700;color:#000;border:none;border-bottom:1px solid rgb(206,206,206)}.flex-table tbody tr td{font-size:11px;font-weight:600;color:#000;border:none;border-bottom:1px solid rgb(206,206,206);padding-top:7px;padding-bottom:7px}.flex-table tbody tr{transition:transform .3s ease-in-out,opacity .6s ease-in-out}thead{position:sticky;top:0;z-index:1}.icon-sort{font-size:11px}.collapsed{display:none;max-height:0;opacity:0;overflow:hidden;transition:max-height .4s ease-out,opacity .3s ease-out}.expand-row{max-height:100px;opacity:1;transition:max-height .4s ease-in,opacity .3s ease-in}.table-container{width:100%;max-width:100%;overflow-x:auto;display:block;white-space:nowrap}.text-error{color:#d60000!important;font-weight:700!important}.text-error2{color:#d60000;font-weight:700!important}.text-exito{color:#00773c!important;font-weight:700!important}.text-alerta{color:#e9a700!important;font-weight:700!important}.text-exito2{color:#00773c;font-weight:700!important}@media (max-width: 1600px){.flex-table tbody tr td{font-size:9px}.flex-table thead tr th{font-size:10px}}.table-blank{--bs-table-bg-state: white !important}.normal-table thead tr th{font-size:12px;text-align:center;font-weight:700;max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}.normal-table tbody tr{height:30px}.normal-table tbody tr td{font-size:11px;vertical-align:middle;font-weight:500;white-space:nowrap;text-overflow:ellipsis;padding-top:0;padding-bottom:0}.normal-table thead{position:sticky;top:0;z-index:1}@media (max-width: 1600px){.normal-table tbody tr td{font-size:9px}.normal-table thead tr th{font-size:10px}}.grilla-error td{color:#d60000!important}.auditoria{padding-left:35px;padding-top:8px;padding-bottom:10px}.popover-menu-column{position:absolute;top:100%;left:0;border-radius:.375rem;padding:0rem .75rem;display:block;max-height:300px;width:250px;overflow-y:auto}.popover-title{font-weight:700;margin-bottom:.7rem;margin-left:-.75rem;margin-right:-.75rem;padding:.4rem .75rem;border-bottom:1px solid #7e7e7e;position:sticky;top:0;text-align:center}.popover-menu-column::-webkit-scrollbar{width:5px}.popover-menu-column::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.popover-menu-column::-webkit-scrollbar-thumb{background-color:#d7d7d7;border-radius:4px;border:2px solid transparent}.popover-menu-filter{position:absolute;top:85%;right:0;background-color:#fff;border:1px solid #ddd;border-radius:.375rem;padding:0rem .75rem;display:block;max-height:300px;width:250px;overflow-y:auto;z-index:2}.popover-menu-filter::-webkit-scrollbar{width:5px}.popover-menu-filter::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.popover-menu-filter::-webkit-scrollbar-thumb{background-color:#d7d7d7;border-radius:4px;border:2px solid transparent}.font-label{font-weight:500!important}.mtn-0{margin-top:0}.normal-table tfoot tr{height:50px}.normal-table tfoot tr td{font-size:11px;vertical-align:middle;font-weight:500;white-space:nowrap;text-overflow:ellipsis;padding-top:0;padding-bottom:0}.normal-table tfoot{position:sticky;bottom:0;z-index:1}\n"] }]
+            args: [{ selector: 'app-table-ultimate', imports: [DropdownCdkComponent, FormsModule, NgClass, NgTemplateOutlet, CardMobileComponent, AnimatedCheckboxDirective], animations: [fadeInOut], template: "@if (withFiltro()) {\r\n<div class=\"col-12 mb-2 mt-2 d-flex justify-content-end align-items-center position-relative\">\r\n    <label for=\"\" class=\"form-label me-2 pt-2\">Buscar</label>\r\n    <input type=\"text\" class=\"form-control cw-250\" (input)=\"textoDigitado($event)\">\r\n    <button (click)=\"togglePopoverFilter()\" class=\"btn btn-dark boton-buscar fs-7\">\r\n        <i class=\"fas fa-cog\"></i>\r\n    </button>\r\n    @if (showPopoverFilter()) {\r\n    <div class=\"popover-menu-filter bg-white shadow\" @dropdownAnimation>\r\n        <div class=\"popover-title fs-7 bg-white\">Filtros</div>\r\n        <div class=\"form-check form-switch text-start\">\r\n            <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"true\" (change)=\"toggleFiltros($event)\">\r\n            <label class=\"form-check-label\">Todos</label>\r\n        </div>\r\n        @for (col of columns(); track col.caption) {\r\n        <div class=\"form-check form-switch text-start\">\r\n            <input type=\"checkbox\" class=\"form-check-input\" id=\"{{ 'filter_' + col.caption }}\"\r\n                [(ngModel)]=\"filtrarColumnas()[col.fieldname]\" />\r\n            <label class=\"form-check-label\" for=\"{{ 'filter_' + col.caption }}\">\r\n                {{ col.caption }}\r\n            </label>\r\n        </div>\r\n        }\r\n    </div>\r\n    }\r\n</div>\r\n}\r\n\r\n<!-- VISTA MOBILE -->\r\n@if (activeMobileMode()) {\r\n@if (isLoadingResponsive()) {\r\n<div class=\"d-flex flex-column justify-content-center align-items-center py-2\">\r\n    <div class=\"spinner-border text-secondary mb-2\" role=\"status\"></div>\r\n    <span class=\"ms-2 fs-6\">Cargando...</span>\r\n</div>\r\n}\r\n\r\n@if (!isLoadingResponsive()) {\r\n@if (isMobile()) {\r\n<app-card-mobile [data]=\"rowFilter()\" [columns]=\"columns()\" [actions]=\"customActions()\" [identifier]=\"identifier()\"\r\n    [titleTabla]=\"titleTabla()\" [altoContainer]=\"altoContainer()\" />\r\n}\r\n@if (!isMobile()) {\r\n<ng-container *ngTemplateOutlet=\"table\"></ng-container>\r\n}\r\n}\r\n}\r\n@else {\r\n<ng-container *ngTemplateOutlet=\"table\"></ng-container>\r\n}\r\n\r\n<ng-template #table>\r\n    <div class=\"table-container table-responsive\"\r\n        [style.height]=\"withHeight() && altoContenedor() ? 'calc(100vh - ' + altoContenedor() + 'px)' : ''\"\r\n        [style.max-height]=\"altoContenedor()? 'calc(100vh - ' + altoContenedor() + 'px)' : ''\">\r\n        <div>\r\n            <table #table class=\"table table-striped normal-table\" [ngClass]=\"isDarkMode() ? 'table-dark' : ''\">\r\n                <thead>\r\n                    <tr class=\"shadow-sm\">\r\n                        @if (withDetails()) {\r\n                        <th class=\"cw-20 b-table\" [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\"></th>\r\n                        }\r\n\r\n                        @if (withCheckbox()) {\r\n                        <th class=\"cw-20 b-table\" [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\">\r\n                            <label>\r\n                                <input type=\"checkbox\" name=\"check_box_select_table_main\"\r\n                                    id=\"check_box_select_table_main\" animatedCheckbox [checked]=\"validaAllCheck()\"\r\n                                    (change)=\"allCheck($event)\">\r\n                            </label>\r\n                        </th>\r\n                        }\r\n\r\n                        @if (customActions()) {\r\n                        <th class=\"cw-40 b-table\" [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\">\r\n\r\n                            <app-dropdown-cdk>\r\n                                <ng-template #trigger>\r\n                                    <button class=\"btn p-0 text-dark d-flex mx-auto border-0\">\r\n                                        <i class=\"fas fa-cog\"></i>\r\n                                    </button>\r\n                                </ng-template>\r\n                                <ng-template #content>\r\n                                    <div class=\"popover-menu-column bg-white shadow\" @dropdownAnimation>\r\n                                        <div class=\"popover-title fs-7 bg-white\">Columnas</div>\r\n                                        @for (col of columns(); track col.caption) {\r\n                                        @if (col.caption) {\r\n                                        <div class=\"form-check form-switch text-start\">\r\n                                            <input type=\"checkbox\" class=\"form-check-input py-0 my-0 cw-25 ch-15\"\r\n                                                id=\"{{'switch_' + col.caption}}\"\r\n                                                [(ngModel)]=\"visibilidadColumn()[col.caption]\" />\r\n                                            <label class=\"form-check-label ps-1 fs-6 cursor-pointer font-label\"\r\n                                                for=\"{{'switch_' + col.caption}}\">{{ col.caption }}</label>\r\n                                        </div>\r\n                                        }\r\n                                        }\r\n                                    </div>\r\n                                </ng-template>\r\n                            </app-dropdown-cdk>\r\n                        </th>\r\n                        }\r\n                        @for (column of columns(); track $index) {\r\n                        @if (validaVisibilidad(column.visible) && visibilidadColumn()[column.caption] !== false) {\r\n                        <th class=\"b-table\" #thElement [title]=\"column.caption\" [style.width.px]=\"column?.width\"\r\n                            [style.max-width.px]=\"column?.width\" [ngClass]=\"colorHeader()== 'normal' ? 'h-table' : ''\">\r\n                            {{ column.caption }}\r\n                            @if(column.caption){\r\n                            @if (sortColumn == column.fieldname) {\r\n                            <span (click)=\"sortTable(column.fieldname)\" class=\"cursor-pointer\">\r\n                                <i\r\n                                    [ngClass]=\"sortDirection == 'asc' ? 'fas fa-angle-up fs-6':'fas fa-angle-down fs-6'\"></i>\r\n                            </span>\r\n                            }\r\n                            @if (sortColumn !== column.fieldname) {\r\n                            <i class=\"fas fa-sort icon-sort cursor-pointer\" (click)=\"sortTable(column.fieldname)\"></i>\r\n                            }\r\n                            }\r\n                        </th>\r\n                        }\r\n                        }\r\n                    </tr>\r\n                </thead>\r\n                <tbody>\r\n                    @for (row of dataVirtual(); track row.idListTsi) {\r\n                    @let idList = row.idListTsi;\r\n                    <tr [ngClass]=\"{'table-active': (identifier().length < 1 ? selectedRow() == $index : selectedRow() == concatenarValue(row,identifier()))}\"\r\n                        (click)=\"selectRow(identifier().length < 1 ? $index : row); onClick(row)\"\r\n                        (dblclick)=\"onDoubleClick(row)\" (contextmenu)=\"onRightClick($event,row)\"\r\n                        [id]=\"identifier().length < 1 ? ('row_table_' + $index) : ('row_table_'+ concatenarValue(row,identifier()))\">\r\n                        @if (withDetails()) {\r\n                        <td class=\"b-table text-center mwp-25\">\r\n                            <a (click)=\"toggleExpandRow($index)\" class=\"text-dark cursor-pointer fs-6\">\r\n                                <i class=\"fa-solid\" [class.fa-chevron-right]=\"expandedRows != $index\"\r\n                                    [class.fa-chevron-down]=\"expandedRows == $index\"></i>\r\n                            </a>\r\n                        </td>\r\n                        }\r\n\r\n                        @if (withCheckbox()) {\r\n                        <td scope=\"col\" class=\"text-center b-table\">\r\n                            <label>\r\n                                <input type=\"checkbox\" [name]=\"'check_box_select_table_' + idList\"\r\n                                    [id]=\"'check_box_select_table_' + idList\" animatedCheckbox\r\n                                    [checked]=\"isItemSelected(idList)\" (change)=\"toogleItem(idList , $event)\"\r\n                                    [disabled]=\"isCheckboxDisabled(row)\">\r\n                            </label>\r\n                        </td>\r\n                        }\r\n\r\n                        @if (customActions()) {\r\n                        <td class=\"text-center mwp-90 b-table\">\r\n                            <ng-container\r\n                                *ngTemplateOutlet=\"customActions(); context: { $implicit: row }\"></ng-container>\r\n                        </td>\r\n                        }\r\n                        @for (column of columns(); track $index) {\r\n                        @if (validaVisibilidad(column.visible) && visibilidadColumn()[column.caption] !== false) {\r\n\r\n                        @if (column.template) {\r\n                        <td class=\"b-table\">\r\n                            <ng-container\r\n                                *ngTemplateOutlet=\"column.template; context: { $implicit: row, column: column }\">\r\n                            </ng-container>\r\n                        </td>\r\n                        }@else {\r\n                        @switch (column.tipo) {\r\n                        @case ('cell-render') {\r\n                        @let resolverItem = resolveCell(column.fieldname, row);\r\n                        @if (resolverItem) {\r\n                        <td class=\"b-table\" [title]=\"resolverItem.text\" [class.text-center]=\"resolverItem.icon\">\r\n                            @if (resolverItem.icon) {\r\n                            <i class=\"fs-5\" [ngClass]=\"resolverItem.icon\"></i>\r\n                            } @else if (resolverItem.class) {\r\n                            <span [ngClass]=\"row.situac == 'J' ? 'text-error' : resolverItem.class\">\r\n                                {{ resolverItem.text }}\r\n                            </span>\r\n                            } @else {\r\n                            {{ resolverItem.text }}\r\n                            }\r\n                        </td>\r\n                        }\r\n                        }\r\n\r\n                        @default {\r\n                        <td [innerHTML]=\"getHighlight(row._format?.[column.fieldname] ?? row[column.fieldname], column.fieldname)\"\r\n                            [style.width.px]=\"column?.width\" [style.max-width.px]=\"column?.width\"\r\n                            [title]=\"row._format?.[column.fieldname] ?? row[column.fieldname]\"\r\n                            [ngClass]=\"rowClassFn() ? rowClassFn()(row) : getRowClass(row)\"\r\n                            class=\"b-table {{getPosition(column)}}\">\r\n                        </td>\r\n                        }\r\n                        }\r\n\r\n                        }\r\n                        }\r\n                        }\r\n                    </tr>\r\n                    @if ($index == expandedRows) {\r\n                    <tr @fadeInOut>\r\n                        <td [attr.colspan]=\"columns().length + (withDetails()? 1 : 0) + (customActions() ? 1 : 0) + (withCheckbox() ? 1 : 0)\"\r\n                            class=\"table-blank\">\r\n                            <div class=\"d-flex flex-column auditoria\">\r\n                                <span class=\"fw-bold fs-7 text-dark\">Datos de auditor\u00EDa</span>\r\n                                <span class=\"fs-6 text-dark fw-bold\">\r\n                                    Creaci\u00F3n: {{ row.nomucreac }} el {{ row._format?.fcreac ?? row.fcreac }} a las {{\r\n                                    row.hcreac }}\r\n                                </span>\r\n                                <span class=\"fs-6 text-dark fw-bold\">\r\n                                    Actualizaci\u00F3n: {{ row.nomuactua }} el {{ row._format?.factua ?? row.factua }} a las\r\n                                    {{\r\n                                    row.hactua }}\r\n                                </span>\r\n                            </div>\r\n                        </td>\r\n                    </tr>\r\n                    }\r\n                    }\r\n                    <tr #anchor>\r\n                        <td [attr.colspan]=\"columns().length + (withDetails()? 1 : 0) + (customActions() ? 1 : 0) + (withCheckbox() ? 1 : 0)\"\r\n                            class=\"text-center text-muted py-3\">\r\n                            @if (isLoading()) {\r\n                            <span>Cargando m\u00E1s registros...</span>\r\n                            }\r\n                            @if (!isLoading() && dataVirtual().length >= 5000) {\r\n                            <span>No hay m\u00E1s registros</span>\r\n                            }\r\n                        </td>\r\n                    </tr>\r\n                </tbody>\r\n\r\n                @if (withTotal()) {\r\n                <tfoot>\r\n                    <tr>\r\n                        <td class=\"b-table\" [attr.colspan]=\"getColspanBeforeTotals()\">Totales:</td>\r\n                        @for (col of columns() ; track $index) {\r\n                        @if (col.totalizable) {\r\n                        <td class=\"b-table text-end\">\r\n                            {{ getTotals(col.fieldname)}}\r\n                        </td>\r\n                        }\r\n                        }\r\n                    </tr>\r\n                </tfoot>\r\n                }\r\n            </table>\r\n        </div>\r\n    </div>\r\n\r\n</ng-template>\r\n\r\n<!-- FIN VISTA MOBILE -->", styles: [".flex-table{width:100%;min-width:max-content;border-collapse:collapse;table-layout:fixed}.flex-table th,td{border:1px solid #ddd;padding:8px;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:40px}.flex-table th{transition:width .1s ease-out;padding-right:15px}.resize-handle{width:5px;height:100%;background:#d7d7d7;position:absolute;right:0;top:0;cursor:ew-resize;-webkit-user-select:none;user-select:none}.flex-table thead tr th{font-size:12px;font-weight:700;color:#000;border:none;border-bottom:1px solid rgb(206,206,206)}.flex-table tbody tr td{font-size:11px;font-weight:600;color:#000;border:none;border-bottom:1px solid rgb(206,206,206);padding-top:7px;padding-bottom:7px}.flex-table tbody tr{transition:transform .3s ease-in-out,opacity .6s ease-in-out}thead{position:sticky;top:0;z-index:1}.icon-sort{font-size:11px}.collapsed{display:none;max-height:0;opacity:0;overflow:hidden;transition:max-height .4s ease-out,opacity .3s ease-out}.expand-row{max-height:100px;opacity:1;transition:max-height .4s ease-in,opacity .3s ease-in}.table-container{width:100%;max-width:100%;overflow-x:auto;display:block;white-space:nowrap}.text-error{color:#d60000!important;font-weight:700!important}.text-error2{color:#d60000;font-weight:700!important}.text-exito{color:#00773c!important;font-weight:700!important}.text-alerta{color:#e9a700!important;font-weight:700!important}.text-exito2{color:#00773c;font-weight:700!important}@media (max-width: 1600px){.flex-table tbody tr td{font-size:9px}.flex-table thead tr th{font-size:10px}}.table-blank{--bs-table-bg-state: white !important}.normal-table thead tr th{font-size:12px;text-align:center;font-weight:700;max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}.normal-table tbody tr{height:30px}.normal-table tbody tr td{font-size:11px;vertical-align:middle;font-weight:500;white-space:nowrap;text-overflow:ellipsis;padding-top:0;padding-bottom:0}.normal-table thead{position:sticky;top:0;z-index:1}@media (max-width: 1600px){.normal-table tbody tr td{font-size:9px}.normal-table thead tr th{font-size:10px}}.grilla-error td{color:#d60000!important}.auditoria{padding-left:35px;padding-top:8px;padding-bottom:10px}.popover-menu-column{position:absolute;top:100%;left:0;border-radius:.375rem;padding:0rem .75rem;display:block;max-height:300px;width:250px;overflow-y:auto}.popover-title{font-weight:700;margin-bottom:.7rem;margin-left:-.75rem;margin-right:-.75rem;padding:.4rem .75rem;border-bottom:1px solid #7e7e7e;position:sticky;top:0;text-align:center}.popover-menu-column::-webkit-scrollbar{width:5px}.popover-menu-column::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.popover-menu-column::-webkit-scrollbar-thumb{background-color:#d7d7d7;border-radius:4px;border:2px solid transparent}.popover-menu-filter{position:absolute;top:85%;right:0;background-color:#fff;border:1px solid #ddd;border-radius:.375rem;padding:0rem .75rem;display:block;max-height:300px;width:250px;overflow-y:auto;z-index:2}.popover-menu-filter::-webkit-scrollbar{width:5px}.popover-menu-filter::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.popover-menu-filter::-webkit-scrollbar-thumb{background-color:#d7d7d7;border-radius:4px;border:2px solid transparent}.font-label{font-weight:500!important}.mtn-0{margin-top:0}.normal-table tfoot tr{height:50px}.normal-table tfoot tr td{font-size:11px;vertical-align:middle;font-weight:500;white-space:nowrap;text-overflow:ellipsis;padding-top:0;padding-bottom:0}.normal-table tfoot{position:sticky;bottom:0;z-index:1}\n"] }]
         }], ctorParameters: () => [], propDecorators: { onResize: [{
                 type: HostListener,
                 args: ['window:resize', ['$event']]
@@ -3701,7 +3753,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
         }] });
 
 class MdGenericoComponent {
-    // private estadoInputsService = inject(EstadoInputsService)
     modalService = inject(NgbActiveModal, { optional: true });
     title = input('');
     continuar = output();
@@ -3709,6 +3760,7 @@ class MdGenericoComponent {
     scrollable = input(true);
     type = input('1');
     content = contentChild(TemplateRef);
+    footer = contentChild(TemplateRef);
     showAlerta = input(false);
     textAlerta = input('La consulta muestra los 100 primeros registros.');
     sizeTitle = input('8');
@@ -3721,11 +3773,11 @@ class MdGenericoComponent {
         this.modalService.dismiss();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: MdGenericoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: MdGenericoComponent, isStandalone: true, selector: "app-md-generico", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, scrollable: { classPropertyName: "scrollable", publicName: "scrollable", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", 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 }, sizeTitle: { classPropertyName: "sizeTitle", publicName: "sizeTitle", 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 }, dataFiltro: { classPropertyName: "dataFiltro", publicName: "dataFiltro", isSignal: true, isRequired: false, transformFunction: null }, isModal: { classPropertyName: "isModal", publicName: "isModal", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { continuar: "continuar", continuar2: "continuar2", withFiltro: "withFiltroChange", emitirFiltro: "emitirFiltro" }, queries: [{ propertyName: "content", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"modal-header py-2\">\r\n    <div class=\"w-100\">\r\n        <app-header [isModal]=\"isModal()\" (cerrarModal)=\"cerrarModal()\" [tamanio]=\"sizeTitle()\" [showAlerta]=\"showAlerta()\"\r\n            [textAlerta]=\"textAlerta()\" [title]=\"title()\" [showFiltro]=\"showFiltro()\" [hasData]=\"dataFiltro()\"\r\n            [(withFiltro)]=\"withFiltro\" />\r\n    </div>\r\n</div>\r\n\r\n<div class=\"modal-body\" [ngClass]=\"{ 'max-height': scrollable() }\">\r\n    <ng-container *ngTemplateOutlet=\"content();\"></ng-container>\r\n</div>\r\n\r\n@if( type() != 'APROB'){\r\n<div class=\"modal-footer\">\r\n    @if (type() == '1') {\r\n    <app-button icon=\"adelante\" texto=\"Continuar\" color=\"verde\" (accion)=\"continuar.emit()\" />\r\n    }\r\n    @if (type() == '2') {\r\n    <app-button icon=\"guardar\" texto=\"Guardar\" color=\"azul\" (accion)=\"continuar.emit()\" />\r\n    }\r\n    @if (type() == '3') {\r\n    <app-button icon=\"imprimir\" texto=\"Imprimir\" color=\"gris\" (accion)=\"continuar.emit()\" />\r\n    }\r\n    @if( type() == '4'){\r\n    <app-button icon=\"agregar\" texto=\"Adicionar\" color=\"verde\" (accion)=\"continuar.emit()\" />\r\n    }\r\n    @if( type() == '6'){\r\n    <app-button icon=\"check\" texto=\"Actualizar\" color=\"azul\" (accion)=\"continuar.emit()\" />\r\n    }\r\n    @if( type() != '5'){\r\n    <app-button icon=\"cancelar\" texto=\"Cancelar\" color=\"amarillo\" (accion)=\"cerrarModal()\" />\r\n    }\r\n</div>\r\n}\r\n\r\n@if( type() == 'APROB'){\r\n<div class=\"modal-footer d-flex justify-content-center\">\r\n    <app-button icon=\"aprobar\" texto=\"Aprobar\" color=\"verde\" (accion)=\"continuar.emit()\" />\r\n    <app-button icon=\"desaprobar\" texto=\"Desaprobar\" color=\"rojo\" (accion)=\"continuar2.emit()\" />\r\n</div>\r\n}", styles: [".max-height{max-height:calc(100dvh - 210px);overflow-y:auto}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: HeaderComponent, selector: "app-header", inputs: ["title", "tamanio", "showFiltro", "withFiltro", "hasData", "isModal", "showAlerta", "textAlerta"], outputs: ["withFiltroChange", "cerrarModal"] }, { 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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: MdGenericoComponent, isStandalone: true, selector: "app-md-generico", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, scrollable: { classPropertyName: "scrollable", publicName: "scrollable", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", 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 }, sizeTitle: { classPropertyName: "sizeTitle", publicName: "sizeTitle", 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 }, dataFiltro: { classPropertyName: "dataFiltro", publicName: "dataFiltro", isSignal: true, isRequired: false, transformFunction: null }, isModal: { classPropertyName: "isModal", publicName: "isModal", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { continuar: "continuar", continuar2: "continuar2", withFiltro: "withFiltroChange", emitirFiltro: "emitirFiltro" }, queries: [{ propertyName: "content", first: true, predicate: TemplateRef, descendants: true, isSignal: true }, { propertyName: "footer", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"modal-header py-2\">\r\n    <div class=\"w-100\">\r\n        <app-header [isModal]=\"isModal()\" (cerrarModal)=\"cerrarModal()\" [tamanio]=\"sizeTitle()\" [showAlerta]=\"showAlerta()\"\r\n            [textAlerta]=\"textAlerta()\" [title]=\"title()\" [showFiltro]=\"showFiltro()\" [hasData]=\"dataFiltro()\"\r\n            [(withFiltro)]=\"withFiltro\" />\r\n    </div>\r\n</div>\r\n\r\n<div class=\"modal-body\" [ngClass]=\"{ 'max-height': scrollable() }\">\r\n    <ng-container *ngTemplateOutlet=\"content();\"></ng-container>\r\n</div>\r\n\r\n@if( type() != 'APROB'){\r\n<div class=\"modal-footer\">\r\n    @if (footer()) {\r\n        <ng-container *ngTemplateOutlet=\"footer();\"></ng-container>\r\n    }\r\n    @if (type() == '1') {\r\n    <app-button icon=\"adelante\" texto=\"Continuar\" color=\"verde\" (accion)=\"continuar.emit()\" />\r\n    }\r\n    @if (type() == '2') {\r\n    <app-button icon=\"guardar\" texto=\"Guardar\" color=\"azul\" (accion)=\"continuar.emit()\" />\r\n    }\r\n    @if (type() == '3') {\r\n    <app-button icon=\"imprimir\" texto=\"Imprimir\" color=\"gris\" (accion)=\"continuar.emit()\" />\r\n    }\r\n    @if( type() == '4'){\r\n    <app-button icon=\"agregar\" texto=\"Adicionar\" color=\"verde\" (accion)=\"continuar.emit()\" />\r\n    }\r\n    @if( type() == '6'){\r\n    <app-button icon=\"check\" texto=\"Actualizar\" color=\"azul\" (accion)=\"continuar.emit()\" />\r\n    }\r\n    @if( type() != '5'){\r\n    <app-button icon=\"cancelar\" texto=\"Cancelar\" color=\"amarillo\" (accion)=\"cerrarModal()\" />\r\n    }\r\n</div>\r\n}\r\n\r\n@if( type() == 'APROB'){\r\n<div class=\"modal-footer d-flex justify-content-center\">\r\n    <app-button icon=\"aprobar\" texto=\"Aprobar\" color=\"verde\" (accion)=\"continuar.emit()\" />\r\n    <app-button icon=\"desaprobar\" texto=\"Desaprobar\" color=\"rojo\" (accion)=\"continuar2.emit()\" />\r\n</div>\r\n}", styles: [".max-height{max-height:calc(100dvh - 210px);overflow-y:auto}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: HeaderComponent, selector: "app-header", inputs: ["title", "tamanio", "showFiltro", "withFiltro", "hasData", "isModal", "showAlerta", "textAlerta"], outputs: ["withFiltroChange", "cerrarModal"] }, { 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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: MdGenericoComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-md-generico', imports: [NgClass, NgTemplateOutlet, HeaderComponent, ButtonComponent], template: "<div class=\"modal-header py-2\">\r\n    <div class=\"w-100\">\r\n        <app-header [isModal]=\"isModal()\" (cerrarModal)=\"cerrarModal()\" [tamanio]=\"sizeTitle()\" [showAlerta]=\"showAlerta()\"\r\n            [textAlerta]=\"textAlerta()\" [title]=\"title()\" [showFiltro]=\"showFiltro()\" [hasData]=\"dataFiltro()\"\r\n            [(withFiltro)]=\"withFiltro\" />\r\n    </div>\r\n</div>\r\n\r\n<div class=\"modal-body\" [ngClass]=\"{ 'max-height': scrollable() }\">\r\n    <ng-container *ngTemplateOutlet=\"content();\"></ng-container>\r\n</div>\r\n\r\n@if( type() != 'APROB'){\r\n<div class=\"modal-footer\">\r\n    @if (type() == '1') {\r\n    <app-button icon=\"adelante\" texto=\"Continuar\" color=\"verde\" (accion)=\"continuar.emit()\" />\r\n    }\r\n    @if (type() == '2') {\r\n    <app-button icon=\"guardar\" texto=\"Guardar\" color=\"azul\" (accion)=\"continuar.emit()\" />\r\n    }\r\n    @if (type() == '3') {\r\n    <app-button icon=\"imprimir\" texto=\"Imprimir\" color=\"gris\" (accion)=\"continuar.emit()\" />\r\n    }\r\n    @if( type() == '4'){\r\n    <app-button icon=\"agregar\" texto=\"Adicionar\" color=\"verde\" (accion)=\"continuar.emit()\" />\r\n    }\r\n    @if( type() == '6'){\r\n    <app-button icon=\"check\" texto=\"Actualizar\" color=\"azul\" (accion)=\"continuar.emit()\" />\r\n    }\r\n    @if( type() != '5'){\r\n    <app-button icon=\"cancelar\" texto=\"Cancelar\" color=\"amarillo\" (accion)=\"cerrarModal()\" />\r\n    }\r\n</div>\r\n}\r\n\r\n@if( type() == 'APROB'){\r\n<div class=\"modal-footer d-flex justify-content-center\">\r\n    <app-button icon=\"aprobar\" texto=\"Aprobar\" color=\"verde\" (accion)=\"continuar.emit()\" />\r\n    <app-button icon=\"desaprobar\" texto=\"Desaprobar\" color=\"rojo\" (accion)=\"continuar2.emit()\" />\r\n</div>\r\n}", styles: [".max-height{max-height:calc(100dvh - 210px);overflow-y:auto}\n"] }]
+            args: [{ selector: 'app-md-generico', imports: [NgClass, NgTemplateOutlet, HeaderComponent, ButtonComponent], template: "<div class=\"modal-header py-2\">\r\n    <div class=\"w-100\">\r\n        <app-header [isModal]=\"isModal()\" (cerrarModal)=\"cerrarModal()\" [tamanio]=\"sizeTitle()\" [showAlerta]=\"showAlerta()\"\r\n            [textAlerta]=\"textAlerta()\" [title]=\"title()\" [showFiltro]=\"showFiltro()\" [hasData]=\"dataFiltro()\"\r\n            [(withFiltro)]=\"withFiltro\" />\r\n    </div>\r\n</div>\r\n\r\n<div class=\"modal-body\" [ngClass]=\"{ 'max-height': scrollable() }\">\r\n    <ng-container *ngTemplateOutlet=\"content();\"></ng-container>\r\n</div>\r\n\r\n@if( type() != 'APROB'){\r\n<div class=\"modal-footer\">\r\n    @if (footer()) {\r\n        <ng-container *ngTemplateOutlet=\"footer();\"></ng-container>\r\n    }\r\n    @if (type() == '1') {\r\n    <app-button icon=\"adelante\" texto=\"Continuar\" color=\"verde\" (accion)=\"continuar.emit()\" />\r\n    }\r\n    @if (type() == '2') {\r\n    <app-button icon=\"guardar\" texto=\"Guardar\" color=\"azul\" (accion)=\"continuar.emit()\" />\r\n    }\r\n    @if (type() == '3') {\r\n    <app-button icon=\"imprimir\" texto=\"Imprimir\" color=\"gris\" (accion)=\"continuar.emit()\" />\r\n    }\r\n    @if( type() == '4'){\r\n    <app-button icon=\"agregar\" texto=\"Adicionar\" color=\"verde\" (accion)=\"continuar.emit()\" />\r\n    }\r\n    @if( type() == '6'){\r\n    <app-button icon=\"check\" texto=\"Actualizar\" color=\"azul\" (accion)=\"continuar.emit()\" />\r\n    }\r\n    @if( type() != '5'){\r\n    <app-button icon=\"cancelar\" texto=\"Cancelar\" color=\"amarillo\" (accion)=\"cerrarModal()\" />\r\n    }\r\n</div>\r\n}\r\n\r\n@if( type() == 'APROB'){\r\n<div class=\"modal-footer d-flex justify-content-center\">\r\n    <app-button icon=\"aprobar\" texto=\"Aprobar\" color=\"verde\" (accion)=\"continuar.emit()\" />\r\n    <app-button icon=\"desaprobar\" texto=\"Desaprobar\" color=\"rojo\" (accion)=\"continuar2.emit()\" />\r\n</div>\r\n}", styles: [".max-height{max-height:calc(100dvh - 210px);overflow-y:auto}\n"] }]
         }] });
 
 class AlertService {
@@ -4413,7 +4465,10 @@ function getInputsObligatorios(data) {
 }
 
 function handleErrorsApi(err, alert) {
-    alert.mostrarModalError(err.error);
+    const safeError = typeof err === 'string' ? err :
+        typeof err?.error === 'string' ? err.error :
+            'Error de servicio';
+    alert.mostrarModalError(safeError);
 }
 function throwIfEmptyArray() {
     return switchMap((res) => {
@@ -4510,5 +4565,5 @@ var TABLE_EVENTS;
  * Generated bundle index. Do not edit.
  */
 
-export { AlertConfirmationComponent, AlertConfirmationConfig, AlertConfirmationService, AlertErrorComponent, AlertErrorService, AlertService, AlertaComponent, Almacenes, AtajosDirective, AutocompleteComponent, AutocompleteV2Component, BadgeComponent, ButtonComponent, ButtonProperties, CaracteresCodigoDirective, CardMobileComponent, CheckBoxComponent, Cobradores, DecimalDirective, DetalleCreditoComponent, Direcciones, DobleInputComponent, DropdownCdkComponent, DropdownComponent, DropdownMenuComponent, DropdownOption, FormateadorService, HeaderComponent, InputClaseComponent, InputComponent, InputDinamicoComponent, InputRadioComponent, ListOptionComponent, ListSituacionesComponent, MdGenericoComponent, Monedas, MontosCalcularComponent, Motivos, MultiSelectDropdownComponent, MultiselectedComponent, NavTabsComponent, OnlyNumberDirective, OnlyNumberFlexDirective, PaginadorComponent, RadioComponent, Recursos, Series, SidebarComponent, SpinnerComponent, SwitchActivoComponent, SwitchComponent, TABLE_EVENTS, TBanco, TabItemComponent, TableAdvanceComponent, TableAdvanceOptimizadaComponent, TableBusquedaComponent, TableData, TableDetalleComponent, TableSimpleComponent, TableUltimateComponent, TipoDocumento, ToastService, ToasterComponent, Transportista, Vendedor, configModal, getInputsObligatorios, handleEmptyResult, handleErrorsApi, handleModal, handleReset, handleResetNoSignal, handleResource, handleResourceV2, handleSuccessApi, handleSuccessResult, showError, throwIfEmptyArray, validaFecha, validaLista, validaPeriodo, validaPosicion, validaTipo, validarObligatorio, validarSituacion };
+export { AlertConfirmationComponent, AlertConfirmationConfig, AlertConfirmationService, AlertErrorComponent, AlertErrorService, AlertService, AlertaComponent, Almacenes, AnimatedCheckboxDirective, AtajosDirective, AutocompleteComponent, AutocompleteV2Component, BadgeComponent, ButtonComponent, ButtonProperties, CaracteresCodigoDirective, CardMobileComponent, CheckBoxComponent, Cobradores, DecimalDirective, DetalleCreditoComponent, Direcciones, DobleInputComponent, DropdownCdkComponent, DropdownComponent, DropdownMenuComponent, DropdownOption, FormateadorService, HeaderComponent, InputClaseComponent, InputComponent, InputDinamicoComponent, InputRadioComponent, ListOptionComponent, ListSituacionesComponent, MdGenericoComponent, Monedas, MontosCalcularComponent, Motivos, MultiSelectDropdownComponent, MultiselectedComponent, NavTabsComponent, OnlyNumberDirective, OnlyNumberFlexDirective, PaginadorComponent, RadioComponent, Recursos, Series, SidebarComponent, SpinnerComponent, SwitchActivoComponent, SwitchComponent, TABLE_EVENTS, TBanco, TabItemComponent, TableAdvanceComponent, TableAdvanceOptimizadaComponent, TableBusquedaComponent, TableData, TableDetalleComponent, TableSimpleComponent, TableUltimateComponent, TipoDocumento, ToastService, ToasterComponent, Transportista, Vendedor, configModal, getInputsObligatorios, handleEmptyResult, handleErrorsApi, handleModal, handleReset, handleResetNoSignal, handleResource, handleResourceV2, handleSuccessApi, handleSuccessResult, showError, throwIfEmptyArray, validaFecha, validaLista, validaPeriodo, validaPosicion, validaTipo, validarObligatorio, validarSituacion };
 //# sourceMappingURL=ng-components-tsi.mjs.map