sapenlinea-components 0.0.33 → 0.0.34

package/fesm2022/sapenlinea-components.mjs

@@ -226,7 +226,6 @@ class Table {
                 return [];
             }
         }
-        console.log('action for row: ', row);
         return acts;
     }
     sortData() {
@@ -930,7 +929,6 @@ class DateTimeFilter {
             this.close();
         }
     }
-    // ... (Rest of the helper methods like previousMonth, nextMonth, etc. remain largely the same)
     displayValue = computed(() => {
         const date = this.selectedDate();
         if (!date)
@@ -1235,7 +1233,7 @@ class DateTimeFilter {
                 useExisting: forwardRef(() => DateTimeFilter),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div class=\"filter-chips\">\r\n  @for (item of filters(); track item.value) {\r\n  <div class=\"chip-input-wrapper\" [class.has-value]=\"selectedDate() || inputTextValue()\"\r\n    [class.active]=\"activeFilterType() === item.value\">\r\n    <!-- Etiqueta flotante -->\r\n    <label class=\"floating-label\">{{ item.placeholder || item.label || 'dd/mm/aaaa' }}</label>\r\n\r\n    <!-- M\u00E1scara de gu\u00EDa de fecha din\u00E1mica (__/__/____) -->\r\n    <div class=\"chip-input-mask\">\r\n      @for (part of inputMask(); track $index) {\r\n      <span class=\"mask-char\" [class.mask-char-filled]=\"part.filled\" [class.mask-char-placeholder]=\"!part.filled\">\r\n        {{ part.char }}\r\n      </span>\r\n      }\r\n    </div>\r\n\r\n    <input type=\"text\" [value]=\"inputTextValue()\" (input)=\"onInputChange($event, item.value)\"\r\n      (focus)=\"onInputFocus(item.value)\" [placeholder]=\"item.placeholder || 'Seleccionar Fecha'\" class=\"chip-input\"\r\n      [disabled]=\"isDisabled()\" />\r\n\r\n    <button type=\"button\" class=\"calendar-icon-button\" (click)=\"toggle(item.value)\" title=\"Abrir calendario\">\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n        class=\"icon icon-tabler icons-tabler-outline icon-tabler-calendar-event\">\r\n        <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n        <path d=\"M4 5m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z\" />\r\n        <path d=\"M16 3l0 4\" />\r\n        <path d=\"M8 3l0 4\" />\r\n        <path d=\"M4 11l16 0\" />\r\n        <path d=\"M8 15h2v2h-2z\" />\r\n      </svg>\r\n    </button>\r\n\r\n    @if (isOpen() && activeFilterType() === item.value) {\r\n    <div class=\"dropdown\">\r\n      <div class=\"datetime-content\">\r\n        <!-- Secci\u00F3n del calendario -->\r\n        <div class=\"calendar-section\">\r\n          <!-- Navegaci\u00F3n -->\r\n          <div class=\"calendar-nav\">\r\n            <div class=\"nav-section\">\r\n              <button type=\"button\" class=\"nav-btn\" (click)=\"previousYear()\" title=\"A\u00F1o anterior\">\r\n                \u2039\u2039\r\n              </button>\r\n              <button type=\"button\" class=\"nav-btn\" (click)=\"previousMonth()\" title=\"Mes anterior\">\r\n                \u2039\r\n              </button>\r\n            </div>\r\n\r\n            <div class=\"current-date\">\r\n              {{ monthName() }} {{ currentYear() }}\r\n            </div>\r\n\r\n            <div class=\"nav-section\">\r\n              <button type=\"button\" class=\"nav-btn\" (click)=\"nextMonth()\" title=\"Siguiente mes\">\r\n                \u203A\r\n              </button>\r\n              <button type=\"button\" class=\"nav-btn\" (click)=\"nextYear()\" title=\"Siguiente a\u00F1o\">\r\n                \u203A\u203A\r\n              </button>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- D\u00EDas de la semana -->\r\n          <div class=\"weekdays\">\r\n            <div class=\"weekday\">Dom</div>\r\n            <div class=\"weekday\">Lun</div>\r\n            <div class=\"weekday\">Mar</div>\r\n            <div class=\"weekday\">Mi\u00E9</div>\r\n            <div class=\"weekday\">Jue</div>\r\n            <div class=\"weekday\">Vie</div>\r\n            <div class=\"weekday\">S\u00E1b</div>\r\n          </div>\r\n\r\n          <!-- D\u00EDas -->\r\n          <div class=\"calendar-grid\">\r\n            @for (day of calendarDays(); track $index) {\r\n            <div class=\"calendar-day\" [class.selected]=\"isDaySelected(day)\" [class.today]=\"isToday(day)\"\r\n              [class.disabled]=\"isDayDisabled(day)\" [class.empty]=\"!day\" (click)=\"selectDay(day)\">\r\n              {{ day || \"\" }}\r\n            </div>\r\n            }\r\n          </div>\r\n\r\n          <!-- TIME PICKER -->\r\n          @if (mode() === 'datetime') {\r\n          <div class=\"time-section\">\r\n            <div class=\"time-header\">Horario</div>\r\n\r\n            <div class=\"time-selectors\">\r\n              <div class=\"time-group\">\r\n                <div class=\"time-column\">\r\n                  <div class=\"time-label\">Hora</div>\r\n                  <div class=\"time-scroll\">\r\n                    @for (hour of hours12(); track hour.value) {\r\n                    <div class=\"time-option\" [class.selected]=\"hour.value === selectedHour12()\"\r\n                      (click)=\"setHour12(hour.value)\">\r\n                      {{ hour.display }}\r\n                    </div>\r\n                    }\r\n                  </div>\r\n                </div>\r\n\r\n                <div class=\"time-separator-vertical\">:</div>\r\n\r\n                <div class=\"time-column\">\r\n                  <div class=\"time-label\">Min</div>\r\n                  <div class=\"time-scroll\">\r\n                    @for (minute of minutes(); track minute) {\r\n                    <div class=\"time-option\" [class.selected]=\"minute === selectedMinute()\" (click)=\"setMinute(minute)\">\r\n                      {{ minute.toString().padStart(2, \"0\") }}\r\n                    </div>\r\n                    }\r\n                  </div>\r\n                </div>\r\n\r\n                <div class=\"time-column\">\r\n                  <div class=\"time-label\">AM/PM</div>\r\n                  <div class=\"time-scroll ampm\">\r\n                    <div class=\"time-option\" [class.selected]=\"selectedAmPm() === 'AM'\" (click)=\"setAmPm('AM')\">\r\n                      AM\r\n                    </div>\r\n                    <div class=\"time-option\" [class.selected]=\"selectedAmPm() === 'PM'\" (click)=\"setAmPm('PM')\">\r\n                      PM\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          }\r\n        </div>\r\n      </div>\r\n\r\n      <!-- botones -->\r\n      <div class=\"action-buttons\">\r\n        <button type=\"button\" class=\"action-btn secondary\" (click)=\"today()\">\r\n          Hoy\r\n        </button>\r\n\r\n        @if (mode() === 'datetime') {\r\n        <button type=\"button\" class=\"action-btn primary\" (click)=\"close()\">\r\n          Aceptar\r\n        </button>\r\n        }\r\n      </div>\r\n    </div>\r\n    }\r\n  </div>\r\n  }\r\n</div>", styles: [".datetime-container{position:relative;width:100%}.filter-chips{display:flex;gap:10px;border-radius:12px;position:relative}.chip-input-wrapper{position:relative;display:flex;align-items:center;border-radius:8px;border-style:solid;border-color:var(--schemes-outline-variant, #c0c7cd);border-width:1px;min-width:80px;max-width:180px;height:32px;flex-shrink:0;transition:.2s ease;background-color:transparent}.chip-input-wrapper:hover{background-color:#ececcf}.chip-input-wrapper:focus-within,.chip-input-wrapper.active{color:var(--on-surface, #171c1f);border-color:#b6b69b}.floating-label{position:absolute;left:12px;top:-8px;color:var(--schemes-on-surface-variant, #454733);font-family:var( --theme-label-large-font-family, \"Roboto-Medium\", sans-serif );font-size:1.1rem;line-height:12px;letter-spacing:var(--theme-label-large-letter-spacing, .1px);font-weight:var(--theme-label-large-font-weight, 500);opacity:0;pointer-events:none;transition:all .2s ease;z-index:2;background-color:#ebeccf;padding:0 4px;border-radius:2px;text-transform:capitalize}.chip-input-wrapper:focus-within .floating-label{opacity:.6;top:-8px}.chip-input-wrapper.has-value .floating-label{opacity:.9}.chip-input{border:none;outline:none;background:transparent;padding:6px 40px 6px 8px;height:100%;width:100%;color:transparent;caret-color:var(--schemes-on-surface-variant, #454733);font-family:var( --theme-label-large-font-family, \"Roboto-Medium\", sans-serif );font-size:var(--theme-label-large-font-size, 1.4rem);line-height:var(--theme-label-large-line-height, 20px);letter-spacing:var(--theme-label-large-letter-spacing, .1px);font-weight:var(--theme-label-large-font-weight, 500);border-radius:8px;position:relative;z-index:2}.chip-input::placeholder{color:var(--schemes-on-surface-variant, #454733);opacity:.6;text-transform:capitalize}.chip-input:disabled{cursor:not-allowed;opacity:.6}.chip-input-mask{position:absolute;left:8px;right:40px;top:50%;transform:translateY(-50%);pointer-events:none;font-family:var( --theme-label-large-font-family, \"Roboto-Medium\", sans-serif );font-size:var(--theme-label-large-font-size, 14px);font-weight:var(--theme-label-large-font-weight, 500);z-index:1;display:flex;opacity:0;transition:opacity .2s ease}.chip-input-wrapper:focus-within .chip-input-mask,.chip-input-wrapper.has-value .chip-input-mask{opacity:1}.chip-input-wrapper:focus-within .chip-input::placeholder{opacity:0}.mask-char-placeholder{color:var(--schemes-on-surface-variant, #454733);opacity:.4}.mask-char-filled{color:var(--schemes-on-surface, #171c1f);opacity:1}.calendar-icon-button{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;color:var(--schemes-on-surface-variant, #454733);border-radius:4px;transition:all .2s;z-index:3}.calendar-icon-button svg{width:18px;height:18px}.icon.icon-tabler-calendar-event{width:18px;height:18px;color:var(--on-surface-variant, #40484c)}.date-picker-container{margin-top:12px;width:100%;display:flex;justify-content:flex-start}.datetime-header{width:100%;border:1px solid #787861;border-radius:5px;padding:15px;background-color:transparent;cursor:pointer;display:flex;justify-content:space-between;align-items:center;min-height:auto;transition:border-color .2s}.datetime-header:hover,.datetime-header:focus{outline:none;border-color:#a9a97f}.datetime-header.active{border-color:#a9a97f;outline:none}.datetime-header.disabled{cursor:not-allowed;opacity:.6}.selected-text{color:#454733;font-size:1.3rem;flex:1}.selected-text.placeholder{color:#787861}.header-icons{display:flex;align-items:center;gap:8px}.clear-icon{width:20px;height:20px;display:flex;align-items:center;justify-content:center;color:#787861;font-size:1.5rem;cursor:pointer;border-radius:50%;transition:all .2s}.clear-icon:hover{background-color:#7878611a;color:#454733}.arrow{width:15px;height:15px;background-image:url(\"data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e\");background-repeat:no-repeat;background-size:15px;background-position:center;color:#787861;flex-shrink:0;transition:transform .2s}.arrow.open{transform:rotate(180deg)}.dropdown{position:absolute;top:100%;left:0;right:0;background:#e3e3d1;border:1px solid #787861;border-top:none;border-radius:0 0 5px 5px;z-index:1000;box-shadow:0 4px 12px #00000026;min-width:400px}.datetime-content{display:flex}.calendar-section{flex:1;min-width:280px}.calendar-nav{display:flex;justify-content:space-between;align-items:center;padding:15px;border-bottom:1px solid rgba(120,120,97,.2)}.nav-section{display:flex;gap:5px}.nav-btn{background:none;border:none;color:#787861;cursor:pointer;font-size:1.2rem;padding:5px 10px;border-radius:3px;transition:all .2s}.nav-btn:hover{background-color:#a9a97f1a;color:#454733}.current-date{font-weight:500;color:#454733;font-size:1.1rem}.weekdays{display:grid;grid-template-columns:repeat(7,1fr);background:#7878611a}.weekday{padding:10px 5px;text-align:center;font-size:.9rem;font-weight:500;color:#787861}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr)}.calendar-day{padding:12px 5px;text-align:center;cursor:pointer;color:#454733;font-size:1rem;border-right:1px solid rgba(120,120,97,.1);border-bottom:1px solid rgba(120,120,97,.1);transition:all .2s}.calendar-day:hover:not(.disabled):not(.empty){background-color:#a9a97f33}.calendar-day.selected{background-color:#a9a97f;color:#e3e3d1;font-weight:500}.calendar-day.today:not(.selected){background-color:#a9a97f4d;font-weight:500}.calendar-day.disabled{color:#78786166;cursor:not-allowed}.calendar-day.empty{cursor:default}.calendar-day:nth-child(7n){border-right:none}.time-section{border-left:1px solid rgba(120,120,97,.2);min-width:140px;display:flex;flex-direction:column;background:#a9a97f0d}.time-header{padding:15px;border-bottom:1px solid rgba(120,120,97,.2);text-align:center;font-weight:500;color:#454733;background:#a9a97f1a}.time-selectors{display:flex;flex-direction:column;padding:15px;gap:20px;flex:1}.time-group{display:flex;align-items:center;gap:10px}.time-column{flex:1;display:flex;flex-direction:column;align-items:center}.time-label{font-size:.9rem;color:#787861;margin-bottom:10px;font-weight:500}.time-scroll{max-height:150px;overflow-y:auto;border:1px solid rgba(120,120,97,.2);border-radius:3px;width:50px;background:#a9a97f}.time-option{padding:8px 12px;text-align:center;cursor:pointer;color:#454733;font-size:1rem;transition:all .2s}.time-option:hover{background-color:#a9a97f1a}.time-option.selected{background-color:#a9a97f;color:#e3e3d1;font-weight:500}.time-separator-vertical{font-size:1.5rem;color:#787861;font-weight:700;align-self:flex-end;margin-bottom:10px}.time-scroll::-webkit-scrollbar{width:4px}.time-scroll::-webkit-scrollbar-track{background:#7878611a}.time-scroll::-webkit-scrollbar-thumb{background:#787861;border-radius:2px}.time-scroll::-webkit-scrollbar-thumb:hover{background:#a9a97f}.action-buttons{display:flex;justify-content:space-between;padding:15px;border-top:1px solid rgba(120,120,97,.2);gap:10px}.action-btn{padding:10px 20px;border:none;border-radius:3px;cursor:pointer;font-size:1rem;transition:all .2s}.action-btn.secondary{background:transparent;color:#787861;border:1px solid #787861}.action-btn.secondary:hover{background:#7878611a;color:#454733}.action-btn.primary{background:#a9a97f;color:#e3e3d1;border:1px solid #a9a97f}.action-btn.primary:hover{background:#969669;border-color:#969669}@media (max-width: 768px){.dropdown{min-width:320px}.datetime-content{flex-direction:column}.time-section{border-left:none;border-top:1px solid rgba(120,120,97,.2)}.time-selectors{flex-direction:row;justify-content:center;padding:15px}.time-group{gap:15px}.datetime-header{padding:12px 15px}.calendar-nav{padding:12px}.calendar-day{padding:10px 3px;font-size:.9rem}.action-buttons{padding:12px}}@media (max-width: 480px){.dropdown{min-width:280px}.time-section{min-width:auto}.time-scroll{width:45px}.time-selectors{padding:10px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }] });
+        ], ngImport: i0, template: "<div class=\"filter-chips\">\r\n  @for (item of filters(); track item.value) {\r\n  <div class=\"chip-input-wrapper\" [class.has-value]=\"selectedDate() || inputTextValue()\"\r\n    [class.active]=\"activeFilterType() === item.value\">\r\n    <!-- Etiqueta flotante -->\r\n    <label class=\"floating-label\">{{ item.placeholder || item.label || 'dd/mm/aaaa' }}</label>\r\n\r\n    <!-- M\u00E1scara de gu\u00EDa de fecha din\u00E1mica (__/__/____) -->\r\n    <div class=\"chip-input-mask\">\r\n      @for (part of inputMask(); track $index) {\r\n      <span class=\"mask-char\" [class.mask-char-filled]=\"part.filled\" [class.mask-char-placeholder]=\"!part.filled\">\r\n        {{ part.char }}\r\n      </span>\r\n      }\r\n    </div>\r\n\r\n    <input type=\"text\" [value]=\"inputTextValue()\" (input)=\"onInputChange($event, item.value)\"\r\n      (focus)=\"onInputFocus(item.value)\" [placeholder]=\"item.placeholder || 'Seleccionar Fecha'\" class=\"chip-input\"\r\n      [disabled]=\"isDisabled()\" />\r\n\r\n    <button type=\"button\" class=\"calendar-icon-button\" (click)=\"toggle(item.value)\" title=\"Abrir calendario\">\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n        class=\"icon icon-tabler icons-tabler-outline icon-tabler-calendar-event\">\r\n        <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n        <path d=\"M4 5m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z\" />\r\n        <path d=\"M16 3l0 4\" />\r\n        <path d=\"M8 3l0 4\" />\r\n        <path d=\"M4 11l16 0\" />\r\n        <path d=\"M8 15h2v2h-2z\" />\r\n      </svg>\r\n    </button>\r\n\r\n    @if (isOpen() && activeFilterType() === item.value) {\r\n    <div class=\"dropdown\">\r\n      <div class=\"datetime-content\">\r\n        <!-- Secci\u00F3n del calendario -->\r\n        <div class=\"calendar-section\">\r\n          <!-- Navegaci\u00F3n -->\r\n          <div class=\"calendar-nav\">\r\n            <div class=\"nav-section\">\r\n              <button type=\"button\" class=\"nav-btn\" (click)=\"previousYear()\" title=\"A\u00F1o anterior\">\r\n                \u2039\u2039\r\n              </button>\r\n              <button type=\"button\" class=\"nav-btn\" (click)=\"previousMonth()\" title=\"Mes anterior\">\r\n                \u2039\r\n              </button>\r\n            </div>\r\n\r\n            <div class=\"current-date\">\r\n              {{ monthName() }} {{ currentYear() }}\r\n            </div>\r\n\r\n            <div class=\"nav-section\">\r\n              <button type=\"button\" class=\"nav-btn\" (click)=\"nextMonth()\" title=\"Siguiente mes\">\r\n                \u203A\r\n              </button>\r\n              <button type=\"button\" class=\"nav-btn\" (click)=\"nextYear()\" title=\"Siguiente a\u00F1o\">\r\n                \u203A\u203A\r\n              </button>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- D\u00EDas de la semana -->\r\n          <div class=\"weekdays\">\r\n            <div class=\"weekday\">Dom</div>\r\n            <div class=\"weekday\">Lun</div>\r\n            <div class=\"weekday\">Mar</div>\r\n            <div class=\"weekday\">Mi\u00E9</div>\r\n            <div class=\"weekday\">Jue</div>\r\n            <div class=\"weekday\">Vie</div>\r\n            <div class=\"weekday\">S\u00E1b</div>\r\n          </div>\r\n\r\n          <!-- D\u00EDas -->\r\n          <div class=\"calendar-grid\">\r\n            @for (day of calendarDays(); track $index) {\r\n            <div class=\"calendar-day\" [class.selected]=\"isDaySelected(day)\" [class.today]=\"isToday(day)\"\r\n              [class.disabled]=\"isDayDisabled(day)\" [class.empty]=\"!day\" (click)=\"selectDay(day)\">\r\n              {{ day || \"\" }}\r\n            </div>\r\n            }\r\n          </div>\r\n\r\n          <!-- TIME PICKER -->\r\n          @if (mode() === 'datetime') {\r\n          <div class=\"time-section\">\r\n            <div class=\"time-header\">Horario</div>\r\n\r\n            <div class=\"time-selectors\">\r\n              <div class=\"time-group\">\r\n                <div class=\"time-column\">\r\n                  <div class=\"time-label\">Hora</div>\r\n                  <div class=\"time-scroll\">\r\n                    @for (hour of hours12(); track hour.value) {\r\n                    <div class=\"time-option\" [class.selected]=\"hour.value === selectedHour12()\"\r\n                      (click)=\"setHour12(hour.value)\">\r\n                      {{ hour.display }}\r\n                    </div>\r\n                    }\r\n                  </div>\r\n                </div>\r\n\r\n                <div class=\"time-separator-vertical\">:</div>\r\n\r\n                <div class=\"time-column\">\r\n                  <div class=\"time-label\">Min</div>\r\n                  <div class=\"time-scroll\">\r\n                    @for (minute of minutes(); track minute) {\r\n                    <div class=\"time-option\" [class.selected]=\"minute === selectedMinute()\" (click)=\"setMinute(minute)\">\r\n                      {{ minute.toString().padStart(2, \"0\") }}\r\n                    </div>\r\n                    }\r\n                  </div>\r\n                </div>\r\n\r\n                <div class=\"time-column\">\r\n                  <div class=\"time-label\">AM/PM</div>\r\n                  <div class=\"time-scroll ampm\">\r\n                    <div class=\"time-option\" [class.selected]=\"selectedAmPm() === 'AM'\" (click)=\"setAmPm('AM')\">\r\n                      AM\r\n                    </div>\r\n                    <div class=\"time-option\" [class.selected]=\"selectedAmPm() === 'PM'\" (click)=\"setAmPm('PM')\">\r\n                      PM\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          }\r\n        </div>\r\n      </div>\r\n\r\n      <!-- botones -->\r\n      <div class=\"action-buttons\">\r\n        <button type=\"button\" class=\"action-btn secondary\" (click)=\"today()\">\r\n          Hoy\r\n        </button>\r\n\r\n        @if (mode() === 'datetime') {\r\n        <button type=\"button\" class=\"action-btn primary\" (click)=\"close()\">\r\n          Aceptar\r\n        </button>\r\n        }\r\n      </div>\r\n    </div>\r\n    }\r\n  </div>\r\n  }\r\n</div>", styles: [".datetime-container{position:relative;width:100%}.filter-chips{display:flex;gap:10px;border-radius:12px;position:relative}.chip-input-wrapper{position:relative;display:flex;align-items:center;border-radius:8px;border-style:solid;border-color:var(--schemes-outline-variant, #c0c7cd);border-width:1px;min-width:80px;max-width:180px;height:32px;flex-shrink:0;transition:.2s ease;background-color:transparent}.chip-input-wrapper:hover{background-color:#ececcf}.chip-input-wrapper:focus-within,.chip-input-wrapper.active{color:var(--on-surface, #171c1f);border-color:#b6b69b}.floating-label{position:absolute;left:12px;top:-8px;color:var(--schemes-on-surface-variant, #454733);font-family:var( --theme-label-large-font-family, \"Roboto-Medium\", sans-serif );font-size:1.1rem;line-height:12px;letter-spacing:var(--theme-label-large-letter-spacing, .1px);font-weight:var(--theme-label-large-font-weight, 500);opacity:0;pointer-events:none;transition:all .2s ease;z-index:2;background-color:#e3e3d1;padding:0 4px;border-radius:2px;text-transform:capitalize}.chip-input-wrapper:focus-within .floating-label{opacity:.6;top:-8px}.chip-input-wrapper.has-value .floating-label{opacity:.9}.chip-input{border:none;outline:none;background:transparent;padding:6px 40px 6px 8px;height:100%;width:100%;color:transparent;caret-color:var(--schemes-on-surface-variant, #454733);font-family:var( --theme-label-large-font-family, \"Roboto-Medium\", sans-serif );font-size:var(--theme-label-large-font-size, 1.4rem);line-height:var(--theme-label-large-line-height, 20px);letter-spacing:var(--theme-label-large-letter-spacing, .1px);font-weight:var(--theme-label-large-font-weight, 500);border-radius:8px;position:relative;z-index:2}.chip-input::placeholder{color:var(--schemes-on-surface-variant, #454733);opacity:.6;text-transform:capitalize}.chip-input:disabled{cursor:not-allowed;opacity:.6}.chip-input-mask{position:absolute;left:8px;right:40px;top:50%;transform:translateY(-50%);pointer-events:none;font-family:var( --theme-label-large-font-family, \"Roboto-Medium\", sans-serif );font-size:var(--theme-label-large-font-size, 14px);font-weight:var(--theme-label-large-font-weight, 500);z-index:1;display:flex;opacity:0;transition:opacity .2s ease}.chip-input-wrapper:focus-within .chip-input-mask,.chip-input-wrapper.has-value .chip-input-mask{opacity:1}.chip-input-wrapper:focus-within .chip-input::placeholder{opacity:0}.mask-char-placeholder{color:var(--schemes-on-surface-variant, #454733);opacity:.4}.mask-char-filled{color:var(--schemes-on-surface, #171c1f);opacity:1}.calendar-icon-button{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;color:var(--schemes-on-surface-variant, #454733);border-radius:4px;transition:all .2s;z-index:3}.calendar-icon-button svg{width:18px;height:18px}.icon.icon-tabler-calendar-event{width:18px;height:18px;color:var(--on-surface-variant, #40484c)}.date-picker-container{margin-top:12px;width:100%;display:flex;justify-content:flex-start}.datetime-header{width:100%;border:1px solid #787861;border-radius:5px;padding:15px;background-color:transparent;cursor:pointer;display:flex;justify-content:space-between;align-items:center;min-height:auto;transition:border-color .2s}.datetime-header:hover,.datetime-header:focus{outline:none;border-color:#a9a97f}.datetime-header.active{border-color:#a9a97f;outline:none}.datetime-header.disabled{cursor:not-allowed;opacity:.6}.selected-text{color:#454733;font-size:1.3rem;flex:1}.selected-text.placeholder{color:#787861}.header-icons{display:flex;align-items:center;gap:8px}.clear-icon{width:20px;height:20px;display:flex;align-items:center;justify-content:center;color:#787861;font-size:1.5rem;cursor:pointer;border-radius:50%;transition:all .2s}.clear-icon:hover{background-color:#7878611a;color:#454733}.arrow{width:15px;height:15px;background-image:url(\"data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e\");background-repeat:no-repeat;background-size:15px;background-position:center;color:#787861;flex-shrink:0;transition:transform .2s}.arrow.open{transform:rotate(180deg)}.dropdown{position:absolute;top:100%;left:0;right:0;background:#e3e3d1;border:1px solid #787861;border-top:none;border-radius:0 0 5px 5px;z-index:1000;box-shadow:0 4px 12px #00000026;min-width:400px}.datetime-content{display:flex}.calendar-section{flex:1;min-width:280px}.calendar-nav{display:flex;justify-content:space-between;align-items:center;padding:15px;border-bottom:1px solid rgba(120,120,97,.2)}.nav-section{display:flex;gap:5px}.nav-btn{background:none;border:none;color:#787861;cursor:pointer;font-size:1.2rem;padding:5px 10px;border-radius:3px;transition:all .2s}.nav-btn:hover{background-color:#a9a97f1a;color:#454733}.current-date{font-weight:500;color:#454733;font-size:1.1rem}.weekdays{display:grid;grid-template-columns:repeat(7,1fr);background:#7878611a}.weekday{padding:10px 5px;text-align:center;font-size:.9rem;font-weight:500;color:#787861}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr)}.calendar-day{padding:12px 5px;text-align:center;cursor:pointer;color:#454733;font-size:1rem;border-right:1px solid rgba(120,120,97,.1);border-bottom:1px solid rgba(120,120,97,.1);transition:all .2s}.calendar-day:hover:not(.disabled):not(.empty){background-color:#a9a97f33}.calendar-day.selected{background-color:#a9a97f;color:#e3e3d1;font-weight:500}.calendar-day.today:not(.selected){background-color:#a9a97f4d;font-weight:500}.calendar-day.disabled{color:#78786166;cursor:not-allowed}.calendar-day.empty{cursor:default}.calendar-day:nth-child(7n){border-right:none}.time-section{border-left:1px solid rgba(120,120,97,.2);min-width:140px;display:flex;flex-direction:column;background:#a9a97f0d}.time-header{padding:15px;border-bottom:1px solid rgba(120,120,97,.2);text-align:center;font-weight:500;color:#454733;background:#a9a97f1a}.time-selectors{display:flex;flex-direction:column;padding:15px;gap:20px;flex:1}.time-group{display:flex;align-items:center;gap:10px}.time-column{flex:1;display:flex;flex-direction:column;align-items:center}.time-label{font-size:.9rem;color:#787861;margin-bottom:10px;font-weight:500}.time-scroll{max-height:150px;overflow-y:auto;border:1px solid rgba(120,120,97,.2);border-radius:3px;width:50px;background:#a9a97f}.time-option{padding:8px 12px;text-align:center;cursor:pointer;color:#454733;font-size:1rem;transition:all .2s}.time-option:hover{background-color:#a9a97f1a}.time-option.selected{background-color:#a9a97f;color:#e3e3d1;font-weight:500}.time-separator-vertical{font-size:1.5rem;color:#787861;font-weight:700;align-self:flex-end;margin-bottom:10px}.time-scroll::-webkit-scrollbar{width:4px}.time-scroll::-webkit-scrollbar-track{background:#7878611a}.time-scroll::-webkit-scrollbar-thumb{background:#787861;border-radius:2px}.time-scroll::-webkit-scrollbar-thumb:hover{background:#a9a97f}.action-buttons{display:flex;justify-content:space-between;padding:15px;border-top:1px solid rgba(120,120,97,.2);gap:10px}.action-btn{padding:10px 20px;border:none;border-radius:3px;cursor:pointer;font-size:1rem;transition:all .2s}.action-btn.secondary{background:transparent;color:#787861;border:1px solid #787861}.action-btn.secondary:hover{background:#7878611a;color:#454733}.action-btn.primary{background:#a9a97f;color:#e3e3d1;border:1px solid #a9a97f}.action-btn.primary:hover{background:#969669;border-color:#969669}@media (max-width: 768px){.dropdown{min-width:320px}.datetime-content{flex-direction:column}.time-section{border-left:none;border-top:1px solid rgba(120,120,97,.2)}.time-selectors{flex-direction:row;justify-content:center;padding:15px}.time-group{gap:15px}.datetime-header{padding:12px 15px}.calendar-nav{padding:12px}.calendar-day{padding:10px 3px;font-size:.9rem}.action-buttons{padding:12px}}@media (max-width: 480px){.dropdown{min-width:280px}.time-section{min-width:auto}.time-scroll{width:45px}.time-selectors{padding:10px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DateTimeFilter, decorators: [{
             type: Component,
@@ -1245,7 +1243,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                             useExisting: forwardRef(() => DateTimeFilter),
                             multi: true,
                         },
-                    ], template: "<div class=\"filter-chips\">\r\n  @for (item of filters(); track item.value) {\r\n  <div class=\"chip-input-wrapper\" [class.has-value]=\"selectedDate() || inputTextValue()\"\r\n    [class.active]=\"activeFilterType() === item.value\">\r\n    <!-- Etiqueta flotante -->\r\n    <label class=\"floating-label\">{{ item.placeholder || item.label || 'dd/mm/aaaa' }}</label>\r\n\r\n    <!-- M\u00E1scara de gu\u00EDa de fecha din\u00E1mica (__/__/____) -->\r\n    <div class=\"chip-input-mask\">\r\n      @for (part of inputMask(); track $index) {\r\n      <span class=\"mask-char\" [class.mask-char-filled]=\"part.filled\" [class.mask-char-placeholder]=\"!part.filled\">\r\n        {{ part.char }}\r\n      </span>\r\n      }\r\n    </div>\r\n\r\n    <input type=\"text\" [value]=\"inputTextValue()\" (input)=\"onInputChange($event, item.value)\"\r\n      (focus)=\"onInputFocus(item.value)\" [placeholder]=\"item.placeholder || 'Seleccionar Fecha'\" class=\"chip-input\"\r\n      [disabled]=\"isDisabled()\" />\r\n\r\n    <button type=\"button\" class=\"calendar-icon-button\" (click)=\"toggle(item.value)\" title=\"Abrir calendario\">\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n        class=\"icon icon-tabler icons-tabler-outline icon-tabler-calendar-event\">\r\n        <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n        <path d=\"M4 5m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z\" />\r\n        <path d=\"M16 3l0 4\" />\r\n        <path d=\"M8 3l0 4\" />\r\n        <path d=\"M4 11l16 0\" />\r\n        <path d=\"M8 15h2v2h-2z\" />\r\n      </svg>\r\n    </button>\r\n\r\n    @if (isOpen() && activeFilterType() === item.value) {\r\n    <div class=\"dropdown\">\r\n      <div class=\"datetime-content\">\r\n        <!-- Secci\u00F3n del calendario -->\r\n        <div class=\"calendar-section\">\r\n          <!-- Navegaci\u00F3n -->\r\n          <div class=\"calendar-nav\">\r\n            <div class=\"nav-section\">\r\n              <button type=\"button\" class=\"nav-btn\" (click)=\"previousYear()\" title=\"A\u00F1o anterior\">\r\n                \u2039\u2039\r\n              </button>\r\n              <button type=\"button\" class=\"nav-btn\" (click)=\"previousMonth()\" title=\"Mes anterior\">\r\n                \u2039\r\n              </button>\r\n            </div>\r\n\r\n            <div class=\"current-date\">\r\n              {{ monthName() }} {{ currentYear() }}\r\n            </div>\r\n\r\n            <div class=\"nav-section\">\r\n              <button type=\"button\" class=\"nav-btn\" (click)=\"nextMonth()\" title=\"Siguiente mes\">\r\n                \u203A\r\n              </button>\r\n              <button type=\"button\" class=\"nav-btn\" (click)=\"nextYear()\" title=\"Siguiente a\u00F1o\">\r\n                \u203A\u203A\r\n              </button>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- D\u00EDas de la semana -->\r\n          <div class=\"weekdays\">\r\n            <div class=\"weekday\">Dom</div>\r\n            <div class=\"weekday\">Lun</div>\r\n            <div class=\"weekday\">Mar</div>\r\n            <div class=\"weekday\">Mi\u00E9</div>\r\n            <div class=\"weekday\">Jue</div>\r\n            <div class=\"weekday\">Vie</div>\r\n            <div class=\"weekday\">S\u00E1b</div>\r\n          </div>\r\n\r\n          <!-- D\u00EDas -->\r\n          <div class=\"calendar-grid\">\r\n            @for (day of calendarDays(); track $index) {\r\n            <div class=\"calendar-day\" [class.selected]=\"isDaySelected(day)\" [class.today]=\"isToday(day)\"\r\n              [class.disabled]=\"isDayDisabled(day)\" [class.empty]=\"!day\" (click)=\"selectDay(day)\">\r\n              {{ day || \"\" }}\r\n            </div>\r\n            }\r\n          </div>\r\n\r\n          <!-- TIME PICKER -->\r\n          @if (mode() === 'datetime') {\r\n          <div class=\"time-section\">\r\n            <div class=\"time-header\">Horario</div>\r\n\r\n            <div class=\"time-selectors\">\r\n              <div class=\"time-group\">\r\n                <div class=\"time-column\">\r\n                  <div class=\"time-label\">Hora</div>\r\n                  <div class=\"time-scroll\">\r\n                    @for (hour of hours12(); track hour.value) {\r\n                    <div class=\"time-option\" [class.selected]=\"hour.value === selectedHour12()\"\r\n                      (click)=\"setHour12(hour.value)\">\r\n                      {{ hour.display }}\r\n                    </div>\r\n                    }\r\n                  </div>\r\n                </div>\r\n\r\n                <div class=\"time-separator-vertical\">:</div>\r\n\r\n                <div class=\"time-column\">\r\n                  <div class=\"time-label\">Min</div>\r\n                  <div class=\"time-scroll\">\r\n                    @for (minute of minutes(); track minute) {\r\n                    <div class=\"time-option\" [class.selected]=\"minute === selectedMinute()\" (click)=\"setMinute(minute)\">\r\n                      {{ minute.toString().padStart(2, \"0\") }}\r\n                    </div>\r\n                    }\r\n                  </div>\r\n                </div>\r\n\r\n                <div class=\"time-column\">\r\n                  <div class=\"time-label\">AM/PM</div>\r\n                  <div class=\"time-scroll ampm\">\r\n                    <div class=\"time-option\" [class.selected]=\"selectedAmPm() === 'AM'\" (click)=\"setAmPm('AM')\">\r\n                      AM\r\n                    </div>\r\n                    <div class=\"time-option\" [class.selected]=\"selectedAmPm() === 'PM'\" (click)=\"setAmPm('PM')\">\r\n                      PM\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          }\r\n        </div>\r\n      </div>\r\n\r\n      <!-- botones -->\r\n      <div class=\"action-buttons\">\r\n        <button type=\"button\" class=\"action-btn secondary\" (click)=\"today()\">\r\n          Hoy\r\n        </button>\r\n\r\n        @if (mode() === 'datetime') {\r\n        <button type=\"button\" class=\"action-btn primary\" (click)=\"close()\">\r\n          Aceptar\r\n        </button>\r\n        }\r\n      </div>\r\n    </div>\r\n    }\r\n  </div>\r\n  }\r\n</div>", styles: [".datetime-container{position:relative;width:100%}.filter-chips{display:flex;gap:10px;border-radius:12px;position:relative}.chip-input-wrapper{position:relative;display:flex;align-items:center;border-radius:8px;border-style:solid;border-color:var(--schemes-outline-variant, #c0c7cd);border-width:1px;min-width:80px;max-width:180px;height:32px;flex-shrink:0;transition:.2s ease;background-color:transparent}.chip-input-wrapper:hover{background-color:#ececcf}.chip-input-wrapper:focus-within,.chip-input-wrapper.active{color:var(--on-surface, #171c1f);border-color:#b6b69b}.floating-label{position:absolute;left:12px;top:-8px;color:var(--schemes-on-surface-variant, #454733);font-family:var( --theme-label-large-font-family, \"Roboto-Medium\", sans-serif );font-size:1.1rem;line-height:12px;letter-spacing:var(--theme-label-large-letter-spacing, .1px);font-weight:var(--theme-label-large-font-weight, 500);opacity:0;pointer-events:none;transition:all .2s ease;z-index:2;background-color:#ebeccf;padding:0 4px;border-radius:2px;text-transform:capitalize}.chip-input-wrapper:focus-within .floating-label{opacity:.6;top:-8px}.chip-input-wrapper.has-value .floating-label{opacity:.9}.chip-input{border:none;outline:none;background:transparent;padding:6px 40px 6px 8px;height:100%;width:100%;color:transparent;caret-color:var(--schemes-on-surface-variant, #454733);font-family:var( --theme-label-large-font-family, \"Roboto-Medium\", sans-serif );font-size:var(--theme-label-large-font-size, 1.4rem);line-height:var(--theme-label-large-line-height, 20px);letter-spacing:var(--theme-label-large-letter-spacing, .1px);font-weight:var(--theme-label-large-font-weight, 500);border-radius:8px;position:relative;z-index:2}.chip-input::placeholder{color:var(--schemes-on-surface-variant, #454733);opacity:.6;text-transform:capitalize}.chip-input:disabled{cursor:not-allowed;opacity:.6}.chip-input-mask{position:absolute;left:8px;right:40px;top:50%;transform:translateY(-50%);pointer-events:none;font-family:var( --theme-label-large-font-family, \"Roboto-Medium\", sans-serif );font-size:var(--theme-label-large-font-size, 14px);font-weight:var(--theme-label-large-font-weight, 500);z-index:1;display:flex;opacity:0;transition:opacity .2s ease}.chip-input-wrapper:focus-within .chip-input-mask,.chip-input-wrapper.has-value .chip-input-mask{opacity:1}.chip-input-wrapper:focus-within .chip-input::placeholder{opacity:0}.mask-char-placeholder{color:var(--schemes-on-surface-variant, #454733);opacity:.4}.mask-char-filled{color:var(--schemes-on-surface, #171c1f);opacity:1}.calendar-icon-button{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;color:var(--schemes-on-surface-variant, #454733);border-radius:4px;transition:all .2s;z-index:3}.calendar-icon-button svg{width:18px;height:18px}.icon.icon-tabler-calendar-event{width:18px;height:18px;color:var(--on-surface-variant, #40484c)}.date-picker-container{margin-top:12px;width:100%;display:flex;justify-content:flex-start}.datetime-header{width:100%;border:1px solid #787861;border-radius:5px;padding:15px;background-color:transparent;cursor:pointer;display:flex;justify-content:space-between;align-items:center;min-height:auto;transition:border-color .2s}.datetime-header:hover,.datetime-header:focus{outline:none;border-color:#a9a97f}.datetime-header.active{border-color:#a9a97f;outline:none}.datetime-header.disabled{cursor:not-allowed;opacity:.6}.selected-text{color:#454733;font-size:1.3rem;flex:1}.selected-text.placeholder{color:#787861}.header-icons{display:flex;align-items:center;gap:8px}.clear-icon{width:20px;height:20px;display:flex;align-items:center;justify-content:center;color:#787861;font-size:1.5rem;cursor:pointer;border-radius:50%;transition:all .2s}.clear-icon:hover{background-color:#7878611a;color:#454733}.arrow{width:15px;height:15px;background-image:url(\"data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e\");background-repeat:no-repeat;background-size:15px;background-position:center;color:#787861;flex-shrink:0;transition:transform .2s}.arrow.open{transform:rotate(180deg)}.dropdown{position:absolute;top:100%;left:0;right:0;background:#e3e3d1;border:1px solid #787861;border-top:none;border-radius:0 0 5px 5px;z-index:1000;box-shadow:0 4px 12px #00000026;min-width:400px}.datetime-content{display:flex}.calendar-section{flex:1;min-width:280px}.calendar-nav{display:flex;justify-content:space-between;align-items:center;padding:15px;border-bottom:1px solid rgba(120,120,97,.2)}.nav-section{display:flex;gap:5px}.nav-btn{background:none;border:none;color:#787861;cursor:pointer;font-size:1.2rem;padding:5px 10px;border-radius:3px;transition:all .2s}.nav-btn:hover{background-color:#a9a97f1a;color:#454733}.current-date{font-weight:500;color:#454733;font-size:1.1rem}.weekdays{display:grid;grid-template-columns:repeat(7,1fr);background:#7878611a}.weekday{padding:10px 5px;text-align:center;font-size:.9rem;font-weight:500;color:#787861}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr)}.calendar-day{padding:12px 5px;text-align:center;cursor:pointer;color:#454733;font-size:1rem;border-right:1px solid rgba(120,120,97,.1);border-bottom:1px solid rgba(120,120,97,.1);transition:all .2s}.calendar-day:hover:not(.disabled):not(.empty){background-color:#a9a97f33}.calendar-day.selected{background-color:#a9a97f;color:#e3e3d1;font-weight:500}.calendar-day.today:not(.selected){background-color:#a9a97f4d;font-weight:500}.calendar-day.disabled{color:#78786166;cursor:not-allowed}.calendar-day.empty{cursor:default}.calendar-day:nth-child(7n){border-right:none}.time-section{border-left:1px solid rgba(120,120,97,.2);min-width:140px;display:flex;flex-direction:column;background:#a9a97f0d}.time-header{padding:15px;border-bottom:1px solid rgba(120,120,97,.2);text-align:center;font-weight:500;color:#454733;background:#a9a97f1a}.time-selectors{display:flex;flex-direction:column;padding:15px;gap:20px;flex:1}.time-group{display:flex;align-items:center;gap:10px}.time-column{flex:1;display:flex;flex-direction:column;align-items:center}.time-label{font-size:.9rem;color:#787861;margin-bottom:10px;font-weight:500}.time-scroll{max-height:150px;overflow-y:auto;border:1px solid rgba(120,120,97,.2);border-radius:3px;width:50px;background:#a9a97f}.time-option{padding:8px 12px;text-align:center;cursor:pointer;color:#454733;font-size:1rem;transition:all .2s}.time-option:hover{background-color:#a9a97f1a}.time-option.selected{background-color:#a9a97f;color:#e3e3d1;font-weight:500}.time-separator-vertical{font-size:1.5rem;color:#787861;font-weight:700;align-self:flex-end;margin-bottom:10px}.time-scroll::-webkit-scrollbar{width:4px}.time-scroll::-webkit-scrollbar-track{background:#7878611a}.time-scroll::-webkit-scrollbar-thumb{background:#787861;border-radius:2px}.time-scroll::-webkit-scrollbar-thumb:hover{background:#a9a97f}.action-buttons{display:flex;justify-content:space-between;padding:15px;border-top:1px solid rgba(120,120,97,.2);gap:10px}.action-btn{padding:10px 20px;border:none;border-radius:3px;cursor:pointer;font-size:1rem;transition:all .2s}.action-btn.secondary{background:transparent;color:#787861;border:1px solid #787861}.action-btn.secondary:hover{background:#7878611a;color:#454733}.action-btn.primary{background:#a9a97f;color:#e3e3d1;border:1px solid #a9a97f}.action-btn.primary:hover{background:#969669;border-color:#969669}@media (max-width: 768px){.dropdown{min-width:320px}.datetime-content{flex-direction:column}.time-section{border-left:none;border-top:1px solid rgba(120,120,97,.2)}.time-selectors{flex-direction:row;justify-content:center;padding:15px}.time-group{gap:15px}.datetime-header{padding:12px 15px}.calendar-nav{padding:12px}.calendar-day{padding:10px 3px;font-size:.9rem}.action-buttons{padding:12px}}@media (max-width: 480px){.dropdown{min-width:280px}.time-section{min-width:auto}.time-scroll{width:45px}.time-selectors{padding:10px}}\n"] }]
+                    ], template: "<div class=\"filter-chips\">\r\n  @for (item of filters(); track item.value) {\r\n  <div class=\"chip-input-wrapper\" [class.has-value]=\"selectedDate() || inputTextValue()\"\r\n    [class.active]=\"activeFilterType() === item.value\">\r\n    <!-- Etiqueta flotante -->\r\n    <label class=\"floating-label\">{{ item.placeholder || item.label || 'dd/mm/aaaa' }}</label>\r\n\r\n    <!-- M\u00E1scara de gu\u00EDa de fecha din\u00E1mica (__/__/____) -->\r\n    <div class=\"chip-input-mask\">\r\n      @for (part of inputMask(); track $index) {\r\n      <span class=\"mask-char\" [class.mask-char-filled]=\"part.filled\" [class.mask-char-placeholder]=\"!part.filled\">\r\n        {{ part.char }}\r\n      </span>\r\n      }\r\n    </div>\r\n\r\n    <input type=\"text\" [value]=\"inputTextValue()\" (input)=\"onInputChange($event, item.value)\"\r\n      (focus)=\"onInputFocus(item.value)\" [placeholder]=\"item.placeholder || 'Seleccionar Fecha'\" class=\"chip-input\"\r\n      [disabled]=\"isDisabled()\" />\r\n\r\n    <button type=\"button\" class=\"calendar-icon-button\" (click)=\"toggle(item.value)\" title=\"Abrir calendario\">\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n        class=\"icon icon-tabler icons-tabler-outline icon-tabler-calendar-event\">\r\n        <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n        <path d=\"M4 5m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z\" />\r\n        <path d=\"M16 3l0 4\" />\r\n        <path d=\"M8 3l0 4\" />\r\n        <path d=\"M4 11l16 0\" />\r\n        <path d=\"M8 15h2v2h-2z\" />\r\n      </svg>\r\n    </button>\r\n\r\n    @if (isOpen() && activeFilterType() === item.value) {\r\n    <div class=\"dropdown\">\r\n      <div class=\"datetime-content\">\r\n        <!-- Secci\u00F3n del calendario -->\r\n        <div class=\"calendar-section\">\r\n          <!-- Navegaci\u00F3n -->\r\n          <div class=\"calendar-nav\">\r\n            <div class=\"nav-section\">\r\n              <button type=\"button\" class=\"nav-btn\" (click)=\"previousYear()\" title=\"A\u00F1o anterior\">\r\n                \u2039\u2039\r\n              </button>\r\n              <button type=\"button\" class=\"nav-btn\" (click)=\"previousMonth()\" title=\"Mes anterior\">\r\n                \u2039\r\n              </button>\r\n            </div>\r\n\r\n            <div class=\"current-date\">\r\n              {{ monthName() }} {{ currentYear() }}\r\n            </div>\r\n\r\n            <div class=\"nav-section\">\r\n              <button type=\"button\" class=\"nav-btn\" (click)=\"nextMonth()\" title=\"Siguiente mes\">\r\n                \u203A\r\n              </button>\r\n              <button type=\"button\" class=\"nav-btn\" (click)=\"nextYear()\" title=\"Siguiente a\u00F1o\">\r\n                \u203A\u203A\r\n              </button>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- D\u00EDas de la semana -->\r\n          <div class=\"weekdays\">\r\n            <div class=\"weekday\">Dom</div>\r\n            <div class=\"weekday\">Lun</div>\r\n            <div class=\"weekday\">Mar</div>\r\n            <div class=\"weekday\">Mi\u00E9</div>\r\n            <div class=\"weekday\">Jue</div>\r\n            <div class=\"weekday\">Vie</div>\r\n            <div class=\"weekday\">S\u00E1b</div>\r\n          </div>\r\n\r\n          <!-- D\u00EDas -->\r\n          <div class=\"calendar-grid\">\r\n            @for (day of calendarDays(); track $index) {\r\n            <div class=\"calendar-day\" [class.selected]=\"isDaySelected(day)\" [class.today]=\"isToday(day)\"\r\n              [class.disabled]=\"isDayDisabled(day)\" [class.empty]=\"!day\" (click)=\"selectDay(day)\">\r\n              {{ day || \"\" }}\r\n            </div>\r\n            }\r\n          </div>\r\n\r\n          <!-- TIME PICKER -->\r\n          @if (mode() === 'datetime') {\r\n          <div class=\"time-section\">\r\n            <div class=\"time-header\">Horario</div>\r\n\r\n            <div class=\"time-selectors\">\r\n              <div class=\"time-group\">\r\n                <div class=\"time-column\">\r\n                  <div class=\"time-label\">Hora</div>\r\n                  <div class=\"time-scroll\">\r\n                    @for (hour of hours12(); track hour.value) {\r\n                    <div class=\"time-option\" [class.selected]=\"hour.value === selectedHour12()\"\r\n                      (click)=\"setHour12(hour.value)\">\r\n                      {{ hour.display }}\r\n                    </div>\r\n                    }\r\n                  </div>\r\n                </div>\r\n\r\n                <div class=\"time-separator-vertical\">:</div>\r\n\r\n                <div class=\"time-column\">\r\n                  <div class=\"time-label\">Min</div>\r\n                  <div class=\"time-scroll\">\r\n                    @for (minute of minutes(); track minute) {\r\n                    <div class=\"time-option\" [class.selected]=\"minute === selectedMinute()\" (click)=\"setMinute(minute)\">\r\n                      {{ minute.toString().padStart(2, \"0\") }}\r\n                    </div>\r\n                    }\r\n                  </div>\r\n                </div>\r\n\r\n                <div class=\"time-column\">\r\n                  <div class=\"time-label\">AM/PM</div>\r\n                  <div class=\"time-scroll ampm\">\r\n                    <div class=\"time-option\" [class.selected]=\"selectedAmPm() === 'AM'\" (click)=\"setAmPm('AM')\">\r\n                      AM\r\n                    </div>\r\n                    <div class=\"time-option\" [class.selected]=\"selectedAmPm() === 'PM'\" (click)=\"setAmPm('PM')\">\r\n                      PM\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          }\r\n        </div>\r\n      </div>\r\n\r\n      <!-- botones -->\r\n      <div class=\"action-buttons\">\r\n        <button type=\"button\" class=\"action-btn secondary\" (click)=\"today()\">\r\n          Hoy\r\n        </button>\r\n\r\n        @if (mode() === 'datetime') {\r\n        <button type=\"button\" class=\"action-btn primary\" (click)=\"close()\">\r\n          Aceptar\r\n        </button>\r\n        }\r\n      </div>\r\n    </div>\r\n    }\r\n  </div>\r\n  }\r\n</div>", styles: [".datetime-container{position:relative;width:100%}.filter-chips{display:flex;gap:10px;border-radius:12px;position:relative}.chip-input-wrapper{position:relative;display:flex;align-items:center;border-radius:8px;border-style:solid;border-color:var(--schemes-outline-variant, #c0c7cd);border-width:1px;min-width:80px;max-width:180px;height:32px;flex-shrink:0;transition:.2s ease;background-color:transparent}.chip-input-wrapper:hover{background-color:#ececcf}.chip-input-wrapper:focus-within,.chip-input-wrapper.active{color:var(--on-surface, #171c1f);border-color:#b6b69b}.floating-label{position:absolute;left:12px;top:-8px;color:var(--schemes-on-surface-variant, #454733);font-family:var( --theme-label-large-font-family, \"Roboto-Medium\", sans-serif );font-size:1.1rem;line-height:12px;letter-spacing:var(--theme-label-large-letter-spacing, .1px);font-weight:var(--theme-label-large-font-weight, 500);opacity:0;pointer-events:none;transition:all .2s ease;z-index:2;background-color:#e3e3d1;padding:0 4px;border-radius:2px;text-transform:capitalize}.chip-input-wrapper:focus-within .floating-label{opacity:.6;top:-8px}.chip-input-wrapper.has-value .floating-label{opacity:.9}.chip-input{border:none;outline:none;background:transparent;padding:6px 40px 6px 8px;height:100%;width:100%;color:transparent;caret-color:var(--schemes-on-surface-variant, #454733);font-family:var( --theme-label-large-font-family, \"Roboto-Medium\", sans-serif );font-size:var(--theme-label-large-font-size, 1.4rem);line-height:var(--theme-label-large-line-height, 20px);letter-spacing:var(--theme-label-large-letter-spacing, .1px);font-weight:var(--theme-label-large-font-weight, 500);border-radius:8px;position:relative;z-index:2}.chip-input::placeholder{color:var(--schemes-on-surface-variant, #454733);opacity:.6;text-transform:capitalize}.chip-input:disabled{cursor:not-allowed;opacity:.6}.chip-input-mask{position:absolute;left:8px;right:40px;top:50%;transform:translateY(-50%);pointer-events:none;font-family:var( --theme-label-large-font-family, \"Roboto-Medium\", sans-serif );font-size:var(--theme-label-large-font-size, 14px);font-weight:var(--theme-label-large-font-weight, 500);z-index:1;display:flex;opacity:0;transition:opacity .2s ease}.chip-input-wrapper:focus-within .chip-input-mask,.chip-input-wrapper.has-value .chip-input-mask{opacity:1}.chip-input-wrapper:focus-within .chip-input::placeholder{opacity:0}.mask-char-placeholder{color:var(--schemes-on-surface-variant, #454733);opacity:.4}.mask-char-filled{color:var(--schemes-on-surface, #171c1f);opacity:1}.calendar-icon-button{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;color:var(--schemes-on-surface-variant, #454733);border-radius:4px;transition:all .2s;z-index:3}.calendar-icon-button svg{width:18px;height:18px}.icon.icon-tabler-calendar-event{width:18px;height:18px;color:var(--on-surface-variant, #40484c)}.date-picker-container{margin-top:12px;width:100%;display:flex;justify-content:flex-start}.datetime-header{width:100%;border:1px solid #787861;border-radius:5px;padding:15px;background-color:transparent;cursor:pointer;display:flex;justify-content:space-between;align-items:center;min-height:auto;transition:border-color .2s}.datetime-header:hover,.datetime-header:focus{outline:none;border-color:#a9a97f}.datetime-header.active{border-color:#a9a97f;outline:none}.datetime-header.disabled{cursor:not-allowed;opacity:.6}.selected-text{color:#454733;font-size:1.3rem;flex:1}.selected-text.placeholder{color:#787861}.header-icons{display:flex;align-items:center;gap:8px}.clear-icon{width:20px;height:20px;display:flex;align-items:center;justify-content:center;color:#787861;font-size:1.5rem;cursor:pointer;border-radius:50%;transition:all .2s}.clear-icon:hover{background-color:#7878611a;color:#454733}.arrow{width:15px;height:15px;background-image:url(\"data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e\");background-repeat:no-repeat;background-size:15px;background-position:center;color:#787861;flex-shrink:0;transition:transform .2s}.arrow.open{transform:rotate(180deg)}.dropdown{position:absolute;top:100%;left:0;right:0;background:#e3e3d1;border:1px solid #787861;border-top:none;border-radius:0 0 5px 5px;z-index:1000;box-shadow:0 4px 12px #00000026;min-width:400px}.datetime-content{display:flex}.calendar-section{flex:1;min-width:280px}.calendar-nav{display:flex;justify-content:space-between;align-items:center;padding:15px;border-bottom:1px solid rgba(120,120,97,.2)}.nav-section{display:flex;gap:5px}.nav-btn{background:none;border:none;color:#787861;cursor:pointer;font-size:1.2rem;padding:5px 10px;border-radius:3px;transition:all .2s}.nav-btn:hover{background-color:#a9a97f1a;color:#454733}.current-date{font-weight:500;color:#454733;font-size:1.1rem}.weekdays{display:grid;grid-template-columns:repeat(7,1fr);background:#7878611a}.weekday{padding:10px 5px;text-align:center;font-size:.9rem;font-weight:500;color:#787861}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr)}.calendar-day{padding:12px 5px;text-align:center;cursor:pointer;color:#454733;font-size:1rem;border-right:1px solid rgba(120,120,97,.1);border-bottom:1px solid rgba(120,120,97,.1);transition:all .2s}.calendar-day:hover:not(.disabled):not(.empty){background-color:#a9a97f33}.calendar-day.selected{background-color:#a9a97f;color:#e3e3d1;font-weight:500}.calendar-day.today:not(.selected){background-color:#a9a97f4d;font-weight:500}.calendar-day.disabled{color:#78786166;cursor:not-allowed}.calendar-day.empty{cursor:default}.calendar-day:nth-child(7n){border-right:none}.time-section{border-left:1px solid rgba(120,120,97,.2);min-width:140px;display:flex;flex-direction:column;background:#a9a97f0d}.time-header{padding:15px;border-bottom:1px solid rgba(120,120,97,.2);text-align:center;font-weight:500;color:#454733;background:#a9a97f1a}.time-selectors{display:flex;flex-direction:column;padding:15px;gap:20px;flex:1}.time-group{display:flex;align-items:center;gap:10px}.time-column{flex:1;display:flex;flex-direction:column;align-items:center}.time-label{font-size:.9rem;color:#787861;margin-bottom:10px;font-weight:500}.time-scroll{max-height:150px;overflow-y:auto;border:1px solid rgba(120,120,97,.2);border-radius:3px;width:50px;background:#a9a97f}.time-option{padding:8px 12px;text-align:center;cursor:pointer;color:#454733;font-size:1rem;transition:all .2s}.time-option:hover{background-color:#a9a97f1a}.time-option.selected{background-color:#a9a97f;color:#e3e3d1;font-weight:500}.time-separator-vertical{font-size:1.5rem;color:#787861;font-weight:700;align-self:flex-end;margin-bottom:10px}.time-scroll::-webkit-scrollbar{width:4px}.time-scroll::-webkit-scrollbar-track{background:#7878611a}.time-scroll::-webkit-scrollbar-thumb{background:#787861;border-radius:2px}.time-scroll::-webkit-scrollbar-thumb:hover{background:#a9a97f}.action-buttons{display:flex;justify-content:space-between;padding:15px;border-top:1px solid rgba(120,120,97,.2);gap:10px}.action-btn{padding:10px 20px;border:none;border-radius:3px;cursor:pointer;font-size:1rem;transition:all .2s}.action-btn.secondary{background:transparent;color:#787861;border:1px solid #787861}.action-btn.secondary:hover{background:#7878611a;color:#454733}.action-btn.primary{background:#a9a97f;color:#e3e3d1;border:1px solid #a9a97f}.action-btn.primary:hover{background:#969669;border-color:#969669}@media (max-width: 768px){.dropdown{min-width:320px}.datetime-content{flex-direction:column}.time-section{border-left:none;border-top:1px solid rgba(120,120,97,.2)}.time-selectors{flex-direction:row;justify-content:center;padding:15px}.time-group{gap:15px}.datetime-header{padding:12px 15px}.calendar-nav{padding:12px}.calendar-day{padding:10px 3px;font-size:.9rem}.action-buttons{padding:12px}}@media (max-width: 480px){.dropdown{min-width:280px}.time-section{min-width:auto}.time-scroll{width:45px}.time-selectors{padding:10px}}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: false }] }], dateSelected: [{ type: i0.Output, args: ["dateSelected"] }], dateChange: [{ type: i0.Output, args: ["dateChange"] }], clearTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearTrigger", required: false }] }] } });
 
 class InputNumberFilter {
@@ -1341,7 +1339,7 @@ class InputNumberFilter {
                 useExisting: forwardRef(() => InputNumberFilter),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div class=\"filter-chips\">\r\n  @for (item of filters(); track item.value) {\r\n  <div class=\"chip-input-wrapper\" [class.has-value]=\"filterValues()[item.value]\">\r\n    <label class=\"floating-label\">{{ item.placeholder || item.label || 'Escribir N\u00FAmero' }}</label>\r\n    <input type=\"number\" [value]=\"filterValues()[item.value] || ''\" (input)=\"onInputChange($event, item.value)\"\r\n      [placeholder]=\"filterValues()[item.value] ? '' : (item.placeholder || item.label || 'Escribir N\u00FAmero')\"\r\n      class=\"chip-input\" [disabled]=\"isDisabled()\" />\r\n    @if (filterValues()[item.value]) {\r\n    <button type=\"button\" class=\"clear-button\" (click)=\"clearFilter(item.value)\" title=\"Limpiar\">\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n        <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n        <path d=\"M18 6l-12 12\" />\r\n        <path d=\"M6 6l12 12\" />\r\n      </svg>\r\n    </button>\r\n    }\r\n  </div>\r\n  }\r\n</div>", styles: [".filter-chips{display:flex;gap:10px;border-radius:12px;position:relative}.chip-input-wrapper{position:relative;display:flex;align-items:center;border-radius:8px;border-style:solid;border-color:var(--schemes-outline-variant, #c0c7cd);border-width:1px;min-width:80px;max-width:180px;height:32px;flex-shrink:0;transition:.2s ease;background-color:transparent}.chip-input-wrapper:hover{background-color:#ececcf}.chip-input-wrapper:focus-within{color:var(--on-surface, #171c1f);border-color:#b6b69b}.floating-label{position:absolute;left:12px;top:-8px;color:var(--schemes-on-surface-variant, #454733);font-family:var( --theme-label-large-font-family, \"Roboto-Medium\", sans-serif );font-size:1.1rem;line-height:12px;letter-spacing:var(--theme-label-large-letter-spacing, .1px);font-weight:var(--theme-label-large-font-weight, 500);opacity:0;pointer-events:none;transition:all .2s ease;z-index:2;background-color:#ebeccf;padding:0 4px;border-radius:2px;text-transform:capitalize}.chip-input-wrapper:focus-within .floating-label{opacity:.6;top:-8px}.chip-input-wrapper.has-value .floating-label{opacity:.9}.chip-input{border:none;outline:none;background:transparent;padding:6px 30px 6px 8px;height:100%;width:100%;color:var(--schemes-on-surface-variant, #454733);font-family:var( --theme-label-large-font-family, \"Roboto-Medium\", sans-serif );font-size:var(--theme-label-large-font-size, 1.4rem);line-height:var(--theme-label-large-line-height, 20px);letter-spacing:var(--theme-label-large-letter-spacing, .1px);font-weight:var(--theme-label-large-font-weight, 500);border-radius:8px;-moz-appearance:textfield;appearance:textfield}.chip-input::placeholder{color:var(--schemes-on-surface-variant, #454733);opacity:.6;text-transform:capitalize}.chip-input:disabled{cursor:not-allowed;opacity:.6}.chip-input::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0;background:transparent}.chip-input::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0;background:transparent}.icon.icon-tabler-abc{width:18px;height:18px;color:var(--on-surface-variant, #40484c)}.clear-button{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;color:var(--schemes-on-surface-variant, #454733);border-radius:4px;transition:all .2s;z-index:1}.clear-button:hover{background-color:#7878611a;color:var(--schemes-on-surface-variant, #454733)}.clear-button:active{background-color:#78786133}.clear-button svg{width:16px;height:16px}.action-buttons{display:flex;justify-content:flex-end;gap:10px}.action-btn{padding:8px 16px;border:none;border-radius:3px;cursor:pointer;font-size:.9rem;transition:all .2s}.action-btn.secondary{background:transparent;color:#787861;border:1px solid #787861}.action-btn.secondary:hover{background:#7878611a;color:#454733}.action-btn.primary{background:#a9a97f;color:#e3e3d1;border:1px solid #a9a97f}.action-btn.primary:hover{background:#969669;border-color:#969669}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormsModule }] });
+        ], ngImport: i0, template: "<div class=\"filter-chips\">\r\n  @for (item of filters(); track item.value) {\r\n  <div class=\"chip-input-wrapper\" [class.has-value]=\"filterValues()[item.value]\">\r\n    <label class=\"floating-label\">{{ item.placeholder || item.label || 'Escribir N\u00FAmero' }}</label>\r\n    <input type=\"number\" [value]=\"filterValues()[item.value] || ''\" (input)=\"onInputChange($event, item.value)\"\r\n      [placeholder]=\"filterValues()[item.value] ? '' : (item.placeholder || item.label || 'Escribir N\u00FAmero')\"\r\n      class=\"chip-input\" [disabled]=\"isDisabled()\" />\r\n    @if (filterValues()[item.value]) {\r\n    <button type=\"button\" class=\"clear-button\" (click)=\"clearFilter(item.value)\" title=\"Limpiar\">\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n        <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n        <path d=\"M18 6l-12 12\" />\r\n        <path d=\"M6 6l12 12\" />\r\n      </svg>\r\n    </button>\r\n    }\r\n  </div>\r\n  }\r\n</div>", styles: [".filter-chips{display:flex;gap:10px;border-radius:12px;position:relative}.chip-input-wrapper{position:relative;display:flex;align-items:center;border-radius:8px;border-style:solid;border-color:var(--schemes-outline-variant, #c0c7cd);border-width:1px;min-width:80px;max-width:180px;height:32px;flex-shrink:0;transition:.2s ease;background-color:transparent}.chip-input-wrapper:hover{background-color:#ececcf}.chip-input-wrapper:focus-within{color:var(--on-surface, #171c1f);border-color:#b6b69b}.floating-label{position:absolute;left:12px;top:-8px;color:var(--schemes-on-surface-variant, #454733);font-family:var( --theme-label-large-font-family, \"Roboto-Medium\", sans-serif );font-size:1.1rem;line-height:12px;letter-spacing:var(--theme-label-large-letter-spacing, .1px);font-weight:var(--theme-label-large-font-weight, 500);opacity:0;pointer-events:none;transition:all .2s ease;z-index:2;background-color:#e3e3d1;padding:0 4px;border-radius:2px;text-transform:capitalize}.chip-input-wrapper:focus-within .floating-label{opacity:.6;top:-8px}.chip-input-wrapper.has-value .floating-label{opacity:.9}.chip-input{border:none;outline:none;background:transparent;padding:6px 30px 6px 8px;height:100%;width:100%;color:var(--schemes-on-surface-variant, #454733);font-family:var( --theme-label-large-font-family, \"Roboto-Medium\", sans-serif );font-size:var(--theme-label-large-font-size, 1.4rem);line-height:var(--theme-label-large-line-height, 20px);letter-spacing:var(--theme-label-large-letter-spacing, .1px);font-weight:var(--theme-label-large-font-weight, 500);border-radius:8px;-moz-appearance:textfield;appearance:textfield}.chip-input::placeholder{color:var(--schemes-on-surface-variant, #454733);opacity:.6;text-transform:capitalize}.chip-input:disabled{cursor:not-allowed;opacity:.6}.chip-input::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0;background:transparent}.chip-input::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0;background:transparent}.icon.icon-tabler-abc{width:18px;height:18px;color:var(--on-surface-variant, #40484c)}.clear-button{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;color:var(--schemes-on-surface-variant, #454733);border-radius:4px;transition:all .2s;z-index:1}.clear-button:hover{background-color:#7878611a;color:var(--schemes-on-surface-variant, #454733)}.clear-button:active{background-color:#78786133}.clear-button svg{width:16px;height:16px}.action-buttons{display:flex;justify-content:flex-end;gap:10px}.action-btn{padding:8px 16px;border:none;border-radius:3px;cursor:pointer;font-size:.9rem;transition:all .2s}.action-btn.secondary{background:transparent;color:#787861;border:1px solid #787861}.action-btn.secondary:hover{background:#7878611a;color:#454733}.action-btn.primary{background:#a9a97f;color:#e3e3d1;border:1px solid #a9a97f}.action-btn.primary:hover{background:#969669;border-color:#969669}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormsModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: InputNumberFilter, decorators: [{
             type: Component,
@@ -1351,7 +1349,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                             useExisting: forwardRef(() => InputNumberFilter),
                             multi: true,
                         },
-                    ], template: "<div class=\"filter-chips\">\r\n  @for (item of filters(); track item.value) {\r\n  <div class=\"chip-input-wrapper\" [class.has-value]=\"filterValues()[item.value]\">\r\n    <label class=\"floating-label\">{{ item.placeholder || item.label || 'Escribir N\u00FAmero' }}</label>\r\n    <input type=\"number\" [value]=\"filterValues()[item.value] || ''\" (input)=\"onInputChange($event, item.value)\"\r\n      [placeholder]=\"filterValues()[item.value] ? '' : (item.placeholder || item.label || 'Escribir N\u00FAmero')\"\r\n      class=\"chip-input\" [disabled]=\"isDisabled()\" />\r\n    @if (filterValues()[item.value]) {\r\n    <button type=\"button\" class=\"clear-button\" (click)=\"clearFilter(item.value)\" title=\"Limpiar\">\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n        <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n        <path d=\"M18 6l-12 12\" />\r\n        <path d=\"M6 6l12 12\" />\r\n      </svg>\r\n    </button>\r\n    }\r\n  </div>\r\n  }\r\n</div>", styles: [".filter-chips{display:flex;gap:10px;border-radius:12px;position:relative}.chip-input-wrapper{position:relative;display:flex;align-items:center;border-radius:8px;border-style:solid;border-color:var(--schemes-outline-variant, #c0c7cd);border-width:1px;min-width:80px;max-width:180px;height:32px;flex-shrink:0;transition:.2s ease;background-color:transparent}.chip-input-wrapper:hover{background-color:#ececcf}.chip-input-wrapper:focus-within{color:var(--on-surface, #171c1f);border-color:#b6b69b}.floating-label{position:absolute;left:12px;top:-8px;color:var(--schemes-on-surface-variant, #454733);font-family:var( --theme-label-large-font-family, \"Roboto-Medium\", sans-serif );font-size:1.1rem;line-height:12px;letter-spacing:var(--theme-label-large-letter-spacing, .1px);font-weight:var(--theme-label-large-font-weight, 500);opacity:0;pointer-events:none;transition:all .2s ease;z-index:2;background-color:#ebeccf;padding:0 4px;border-radius:2px;text-transform:capitalize}.chip-input-wrapper:focus-within .floating-label{opacity:.6;top:-8px}.chip-input-wrapper.has-value .floating-label{opacity:.9}.chip-input{border:none;outline:none;background:transparent;padding:6px 30px 6px 8px;height:100%;width:100%;color:var(--schemes-on-surface-variant, #454733);font-family:var( --theme-label-large-font-family, \"Roboto-Medium\", sans-serif );font-size:var(--theme-label-large-font-size, 1.4rem);line-height:var(--theme-label-large-line-height, 20px);letter-spacing:var(--theme-label-large-letter-spacing, .1px);font-weight:var(--theme-label-large-font-weight, 500);border-radius:8px;-moz-appearance:textfield;appearance:textfield}.chip-input::placeholder{color:var(--schemes-on-surface-variant, #454733);opacity:.6;text-transform:capitalize}.chip-input:disabled{cursor:not-allowed;opacity:.6}.chip-input::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0;background:transparent}.chip-input::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0;background:transparent}.icon.icon-tabler-abc{width:18px;height:18px;color:var(--on-surface-variant, #40484c)}.clear-button{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;color:var(--schemes-on-surface-variant, #454733);border-radius:4px;transition:all .2s;z-index:1}.clear-button:hover{background-color:#7878611a;color:var(--schemes-on-surface-variant, #454733)}.clear-button:active{background-color:#78786133}.clear-button svg{width:16px;height:16px}.action-buttons{display:flex;justify-content:flex-end;gap:10px}.action-btn{padding:8px 16px;border:none;border-radius:3px;cursor:pointer;font-size:.9rem;transition:all .2s}.action-btn.secondary{background:transparent;color:#787861;border:1px solid #787861}.action-btn.secondary:hover{background:#7878611a;color:#454733}.action-btn.primary{background:#a9a97f;color:#e3e3d1;border:1px solid #a9a97f}.action-btn.primary:hover{background:#969669;border-color:#969669}\n"] }]
+                    ], template: "<div class=\"filter-chips\">\r\n  @for (item of filters(); track item.value) {\r\n  <div class=\"chip-input-wrapper\" [class.has-value]=\"filterValues()[item.value]\">\r\n    <label class=\"floating-label\">{{ item.placeholder || item.label || 'Escribir N\u00FAmero' }}</label>\r\n    <input type=\"number\" [value]=\"filterValues()[item.value] || ''\" (input)=\"onInputChange($event, item.value)\"\r\n      [placeholder]=\"filterValues()[item.value] ? '' : (item.placeholder || item.label || 'Escribir N\u00FAmero')\"\r\n      class=\"chip-input\" [disabled]=\"isDisabled()\" />\r\n    @if (filterValues()[item.value]) {\r\n    <button type=\"button\" class=\"clear-button\" (click)=\"clearFilter(item.value)\" title=\"Limpiar\">\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n        <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n        <path d=\"M18 6l-12 12\" />\r\n        <path d=\"M6 6l12 12\" />\r\n      </svg>\r\n    </button>\r\n    }\r\n  </div>\r\n  }\r\n</div>", styles: [".filter-chips{display:flex;gap:10px;border-radius:12px;position:relative}.chip-input-wrapper{position:relative;display:flex;align-items:center;border-radius:8px;border-style:solid;border-color:var(--schemes-outline-variant, #c0c7cd);border-width:1px;min-width:80px;max-width:180px;height:32px;flex-shrink:0;transition:.2s ease;background-color:transparent}.chip-input-wrapper:hover{background-color:#ececcf}.chip-input-wrapper:focus-within{color:var(--on-surface, #171c1f);border-color:#b6b69b}.floating-label{position:absolute;left:12px;top:-8px;color:var(--schemes-on-surface-variant, #454733);font-family:var( --theme-label-large-font-family, \"Roboto-Medium\", sans-serif );font-size:1.1rem;line-height:12px;letter-spacing:var(--theme-label-large-letter-spacing, .1px);font-weight:var(--theme-label-large-font-weight, 500);opacity:0;pointer-events:none;transition:all .2s ease;z-index:2;background-color:#e3e3d1;padding:0 4px;border-radius:2px;text-transform:capitalize}.chip-input-wrapper:focus-within .floating-label{opacity:.6;top:-8px}.chip-input-wrapper.has-value .floating-label{opacity:.9}.chip-input{border:none;outline:none;background:transparent;padding:6px 30px 6px 8px;height:100%;width:100%;color:var(--schemes-on-surface-variant, #454733);font-family:var( --theme-label-large-font-family, \"Roboto-Medium\", sans-serif );font-size:var(--theme-label-large-font-size, 1.4rem);line-height:var(--theme-label-large-line-height, 20px);letter-spacing:var(--theme-label-large-letter-spacing, .1px);font-weight:var(--theme-label-large-font-weight, 500);border-radius:8px;-moz-appearance:textfield;appearance:textfield}.chip-input::placeholder{color:var(--schemes-on-surface-variant, #454733);opacity:.6;text-transform:capitalize}.chip-input:disabled{cursor:not-allowed;opacity:.6}.chip-input::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0;background:transparent}.chip-input::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0;background:transparent}.icon.icon-tabler-abc{width:18px;height:18px;color:var(--on-surface-variant, #40484c)}.clear-button{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;color:var(--schemes-on-surface-variant, #454733);border-radius:4px;transition:all .2s;z-index:1}.clear-button:hover{background-color:#7878611a;color:var(--schemes-on-surface-variant, #454733)}.clear-button:active{background-color:#78786133}.clear-button svg{width:16px;height:16px}.action-buttons{display:flex;justify-content:flex-end;gap:10px}.action-btn{padding:8px 16px;border:none;border-radius:3px;cursor:pointer;font-size:.9rem;transition:all .2s}.action-btn.secondary{background:transparent;color:#787861;border:1px solid #787861}.action-btn.secondary:hover{background:#7878611a;color:#454733}.action-btn.primary{background:#a9a97f;color:#e3e3d1;border:1px solid #a9a97f}.action-btn.primary:hover{background:#969669;border-color:#969669}\n"] }]
         }], ctorParameters: () => [], propDecorators: { filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: false }] }], clearTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearTrigger", required: false }] }], filterSelected: [{ type: i0.Output, args: ["filterSelected"] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
 
 class InputSelectFilter {
@@ -1555,7 +1553,7 @@ class InputSelectFilter {
                 useExisting: forwardRef(() => InputSelectFilter),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div class=\"filter-chips\">\r\n  @for (item of filters(); track item.value) {\r\n  <div class=\"chip\" [class.active]=\"activeFilterType() === item.value\" [class.has-value]=\"filterValues()[item.value]\">\r\n    <label class=\"floating-label\">{{ item.placeholder || item.label || 'Seleccionar' }}</label>\r\n    <div class=\"content-chip\">\r\n      <input type=\"text\" class=\"chip-input\" [value]=\"filterValues()[item.value] || ''\"\r\n        (input)=\"onInputChange($event, item.value)\" (focus)=\"onFocusFilter(item.value)\"\r\n        (click)=\"$event.stopPropagation()\" (keydown)=\"onKeyDown($event)\"\r\n        [placeholder]=\"filterValues()[item.value] ? '' : (item.placeholder || item.label || 'Seleccionar')\"\r\n        [disabled]=\"isDisabled()\" />\r\n\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n        class=\"icon icon-tabler icons-tabler-outline icon-tabler-list\" (click)=\"onFocusFilter(item.value)\">\r\n        <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n        <path d=\"M9 6l11 0\" />\r\n        <path d=\"M9 12l11 0\" />\r\n        <path d=\"M9 18l11 0\" />\r\n        <path d=\"M5 6l0 .01\" />\r\n        <path d=\"M5 12l0 .01\" />\r\n        <path d=\"M5 18l0 .01\" />\r\n      </svg>\r\n    </div>\r\n\r\n    @if (isOpen() && activeFilterType() === item.value) {\r\n    <div class=\"dropdown\">\r\n      <div class=\"options-list\">\r\n        @for (option of filteredOptions(); track option.value) {\r\n        <div class=\"option-item\" (click)=\"selectOption(option)\">\r\n          {{ option.label }}\r\n        </div>\r\n        }\r\n        @if (filteredOptions().length === 0) {\r\n        <div class=\"no-options\">No hay opciones</div>\r\n        }\r\n      </div>\r\n    </div>\r\n    }\r\n  </div>\r\n  }\r\n</div>", styles: [".filter-chips{display:flex;gap:10px;border-radius:12px;position:relative}.chip{border-radius:8px;border-style:solid;border-color:var(--schemes-outline-variant, #c0c7cd);border-width:1px;display:flex;flex-direction:row;align-items:center;justify-content:center;flex-shrink:0;min-width:80px;max-width:180px;height:32px;cursor:pointer;transition:.2s ease;position:relative}.chip:hover{background-color:#ececcf}.chip.active{color:var(--on-surface, #171c1f);border-color:#b6b69b}.floating-label{position:absolute;left:12px;top:-8px;color:var(--schemes-on-surface-variant, #454733);font-family:var( --theme-label-large-font-family, \"Roboto-Medium\", sans-serif );font-size:1.1rem;line-height:12px;letter-spacing:var(--theme-label-large-letter-spacing, .1px);font-weight:var(--theme-label-large-font-weight, 500);opacity:0;pointer-events:none;transition:all .2s ease;z-index:2;background-color:#ebeccf;padding:0 4px;border-radius:2px;text-transform:capitalize}.chip-input-wrapper:focus-within .floating-label{opacity:.6;top:-8px}.chip.has-value .floating-label{opacity:.9}.content-chip{padding:0 8px;display:flex;flex-direction:row;gap:8px;align-items:center;justify-items:center;height:32px}.label-text{display:none}.chip-input{border:none;outline:none;background:transparent;height:100%;width:100%;color:var(--schemes-on-surface-variant, #454733);font-family:var( --theme-label-large-font-family, \"Roboto-Medium\", sans-serif );font-size:var(--theme-label-large-font-size, 1.4rem);line-height:var(--theme-label-large-line-height, 20px);letter-spacing:var(--theme-label-large-letter-spacing, .1px);font-weight:var(--theme-label-large-font-weight, 500);text-transform:capitalize}.chip-input::placeholder{color:var(--schemes-on-surface-variant, #454733);opacity:.6;text-transform:capitalize}.chip-input:disabled{cursor:not-allowed;opacity:.6}.icon{width:18px;height:18px;color:var(--on-surface-variant, #40484c)}.dropdown{position:absolute;top:100%;left:0;right:0;background:#e3e3d1;border:1px solid #787861;border-top:none;border-radius:0 0 5px 5px;z-index:1000;box-shadow:0 4px 12px #00000026;min-width:200px;padding:0;overflow:hidden}.options-list{display:flex;flex-direction:column;max-height:200px;overflow-y:auto}.option-item{padding:10px 15px;cursor:pointer;color:#454733;font-size:.9rem;text-transform:capitalize;transition:background-color .2s}.option-item:hover{background-color:#7878611a}.no-options{padding:10px 15px;color:#787861;font-size:.9rem;font-style:italic}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormsModule }] });
+        ], ngImport: i0, template: "<div class=\"filter-chips\">\r\n  @for (item of filters(); track item.value) {\r\n  <div class=\"chip\" [class.active]=\"activeFilterType() === item.value\" [class.has-value]=\"filterValues()[item.value]\">\r\n    <label class=\"floating-label\">{{ item.placeholder || item.label || 'Seleccionar' }}</label>\r\n    <div class=\"content-chip\">\r\n      <input type=\"text\" class=\"chip-input\" [value]=\"filterValues()[item.value] || ''\"\r\n        (input)=\"onInputChange($event, item.value)\" (focus)=\"onFocusFilter(item.value)\"\r\n        (click)=\"$event.stopPropagation()\" (keydown)=\"onKeyDown($event)\"\r\n        [placeholder]=\"filterValues()[item.value] ? '' : (item.placeholder || item.label || 'Seleccionar')\"\r\n        [disabled]=\"isDisabled()\" />\r\n\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n        class=\"icon icon-tabler icons-tabler-outline icon-tabler-list\" (click)=\"onFocusFilter(item.value)\">\r\n        <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n        <path d=\"M9 6l11 0\" />\r\n        <path d=\"M9 12l11 0\" />\r\n        <path d=\"M9 18l11 0\" />\r\n        <path d=\"M5 6l0 .01\" />\r\n        <path d=\"M5 12l0 .01\" />\r\n        <path d=\"M5 18l0 .01\" />\r\n      </svg>\r\n    </div>\r\n\r\n    @if (isOpen() && activeFilterType() === item.value) {\r\n    <div class=\"dropdown\">\r\n      <div class=\"options-list\">\r\n        @for (option of filteredOptions(); track option.value) {\r\n        <div class=\"option-item\" (click)=\"selectOption(option)\">\r\n          {{ option.label }}\r\n        </div>\r\n        }\r\n        @if (filteredOptions().length === 0) {\r\n        <div class=\"no-options\">No hay opciones</div>\r\n        }\r\n      </div>\r\n    </div>\r\n    }\r\n  </div>\r\n  }\r\n</div>", styles: [".filter-chips{display:flex;gap:10px;border-radius:12px;position:relative}.chip{border-radius:8px;border-style:solid;border-color:var(--schemes-outline-variant, #c0c7cd);border-width:1px;display:flex;flex-direction:row;align-items:center;justify-content:center;flex-shrink:0;min-width:80px;max-width:180px;height:32px;cursor:pointer;transition:.2s ease;position:relative}.chip:hover{background-color:#ececcf}.chip.active{color:var(--on-surface, #171c1f);border-color:#b6b69b}.floating-label{position:absolute;left:12px;top:-8px;color:var(--schemes-on-surface-variant, #454733);font-family:var( --theme-label-large-font-family, \"Roboto-Medium\", sans-serif );font-size:1.1rem;line-height:12px;letter-spacing:var(--theme-label-large-letter-spacing, .1px);font-weight:var(--theme-label-large-font-weight, 500);opacity:0;pointer-events:none;transition:all .2s ease;z-index:2;background-color:#e3e3d1;padding:0 4px;border-radius:2px;text-transform:capitalize}.chip-input-wrapper:focus-within .floating-label{opacity:.6;top:-8px}.chip.has-value .floating-label{opacity:.9}.content-chip{padding:0 8px;display:flex;flex-direction:row;gap:8px;align-items:center;justify-items:center;height:32px}.label-text{display:none}.chip-input{border:none;outline:none;background:transparent;height:100%;width:100%;color:var(--schemes-on-surface-variant, #454733);font-family:var( --theme-label-large-font-family, \"Roboto-Medium\", sans-serif );font-size:var(--theme-label-large-font-size, 1.4rem);line-height:var(--theme-label-large-line-height, 20px);letter-spacing:var(--theme-label-large-letter-spacing, .1px);font-weight:var(--theme-label-large-font-weight, 500);text-transform:capitalize}.chip-input::placeholder{color:var(--schemes-on-surface-variant, #454733);opacity:.6;text-transform:capitalize}.chip-input:disabled{cursor:not-allowed;opacity:.6}.icon{width:18px;height:18px;color:var(--on-surface-variant, #40484c)}.dropdown{position:absolute;top:100%;left:0;right:0;background:#e3e3d1;border:1px solid #787861;border-top:none;border-radius:0 0 5px 5px;z-index:1000;box-shadow:0 4px 12px #00000026;min-width:200px;padding:0;overflow:hidden}.options-list{display:flex;flex-direction:column;max-height:200px;overflow-y:auto}.option-item{padding:10px 15px;cursor:pointer;color:#454733;font-size:.9rem;text-transform:capitalize;transition:background-color .2s}.option-item:hover{background-color:#7878611a}.no-options{padding:10px 15px;color:#787861;font-size:.9rem;font-style:italic}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormsModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: InputSelectFilter, decorators: [{
             type: Component,
@@ -1565,7 +1563,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                             useExisting: forwardRef(() => InputSelectFilter),
                             multi: true,
                         },
-                    ], template: "<div class=\"filter-chips\">\r\n  @for (item of filters(); track item.value) {\r\n  <div class=\"chip\" [class.active]=\"activeFilterType() === item.value\" [class.has-value]=\"filterValues()[item.value]\">\r\n    <label class=\"floating-label\">{{ item.placeholder || item.label || 'Seleccionar' }}</label>\r\n    <div class=\"content-chip\">\r\n      <input type=\"text\" class=\"chip-input\" [value]=\"filterValues()[item.value] || ''\"\r\n        (input)=\"onInputChange($event, item.value)\" (focus)=\"onFocusFilter(item.value)\"\r\n        (click)=\"$event.stopPropagation()\" (keydown)=\"onKeyDown($event)\"\r\n        [placeholder]=\"filterValues()[item.value] ? '' : (item.placeholder || item.label || 'Seleccionar')\"\r\n        [disabled]=\"isDisabled()\" />\r\n\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n        class=\"icon icon-tabler icons-tabler-outline icon-tabler-list\" (click)=\"onFocusFilter(item.value)\">\r\n        <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n        <path d=\"M9 6l11 0\" />\r\n        <path d=\"M9 12l11 0\" />\r\n        <path d=\"M9 18l11 0\" />\r\n        <path d=\"M5 6l0 .01\" />\r\n        <path d=\"M5 12l0 .01\" />\r\n        <path d=\"M5 18l0 .01\" />\r\n      </svg>\r\n    </div>\r\n\r\n    @if (isOpen() && activeFilterType() === item.value) {\r\n    <div class=\"dropdown\">\r\n      <div class=\"options-list\">\r\n        @for (option of filteredOptions(); track option.value) {\r\n        <div class=\"option-item\" (click)=\"selectOption(option)\">\r\n          {{ option.label }}\r\n        </div>\r\n        }\r\n        @if (filteredOptions().length === 0) {\r\n        <div class=\"no-options\">No hay opciones</div>\r\n        }\r\n      </div>\r\n    </div>\r\n    }\r\n  </div>\r\n  }\r\n</div>", styles: [".filter-chips{display:flex;gap:10px;border-radius:12px;position:relative}.chip{border-radius:8px;border-style:solid;border-color:var(--schemes-outline-variant, #c0c7cd);border-width:1px;display:flex;flex-direction:row;align-items:center;justify-content:center;flex-shrink:0;min-width:80px;max-width:180px;height:32px;cursor:pointer;transition:.2s ease;position:relative}.chip:hover{background-color:#ececcf}.chip.active{color:var(--on-surface, #171c1f);border-color:#b6b69b}.floating-label{position:absolute;left:12px;top:-8px;color:var(--schemes-on-surface-variant, #454733);font-family:var( --theme-label-large-font-family, \"Roboto-Medium\", sans-serif );font-size:1.1rem;line-height:12px;letter-spacing:var(--theme-label-large-letter-spacing, .1px);font-weight:var(--theme-label-large-font-weight, 500);opacity:0;pointer-events:none;transition:all .2s ease;z-index:2;background-color:#ebeccf;padding:0 4px;border-radius:2px;text-transform:capitalize}.chip-input-wrapper:focus-within .floating-label{opacity:.6;top:-8px}.chip.has-value .floating-label{opacity:.9}.content-chip{padding:0 8px;display:flex;flex-direction:row;gap:8px;align-items:center;justify-items:center;height:32px}.label-text{display:none}.chip-input{border:none;outline:none;background:transparent;height:100%;width:100%;color:var(--schemes-on-surface-variant, #454733);font-family:var( --theme-label-large-font-family, \"Roboto-Medium\", sans-serif );font-size:var(--theme-label-large-font-size, 1.4rem);line-height:var(--theme-label-large-line-height, 20px);letter-spacing:var(--theme-label-large-letter-spacing, .1px);font-weight:var(--theme-label-large-font-weight, 500);text-transform:capitalize}.chip-input::placeholder{color:var(--schemes-on-surface-variant, #454733);opacity:.6;text-transform:capitalize}.chip-input:disabled{cursor:not-allowed;opacity:.6}.icon{width:18px;height:18px;color:var(--on-surface-variant, #40484c)}.dropdown{position:absolute;top:100%;left:0;right:0;background:#e3e3d1;border:1px solid #787861;border-top:none;border-radius:0 0 5px 5px;z-index:1000;box-shadow:0 4px 12px #00000026;min-width:200px;padding:0;overflow:hidden}.options-list{display:flex;flex-direction:column;max-height:200px;overflow-y:auto}.option-item{padding:10px 15px;cursor:pointer;color:#454733;font-size:.9rem;text-transform:capitalize;transition:background-color .2s}.option-item:hover{background-color:#7878611a}.no-options{padding:10px 15px;color:#787861;font-size:.9rem;font-style:italic}\n"] }]
+                    ], template: "<div class=\"filter-chips\">\r\n  @for (item of filters(); track item.value) {\r\n  <div class=\"chip\" [class.active]=\"activeFilterType() === item.value\" [class.has-value]=\"filterValues()[item.value]\">\r\n    <label class=\"floating-label\">{{ item.placeholder || item.label || 'Seleccionar' }}</label>\r\n    <div class=\"content-chip\">\r\n      <input type=\"text\" class=\"chip-input\" [value]=\"filterValues()[item.value] || ''\"\r\n        (input)=\"onInputChange($event, item.value)\" (focus)=\"onFocusFilter(item.value)\"\r\n        (click)=\"$event.stopPropagation()\" (keydown)=\"onKeyDown($event)\"\r\n        [placeholder]=\"filterValues()[item.value] ? '' : (item.placeholder || item.label || 'Seleccionar')\"\r\n        [disabled]=\"isDisabled()\" />\r\n\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n        class=\"icon icon-tabler icons-tabler-outline icon-tabler-list\" (click)=\"onFocusFilter(item.value)\">\r\n        <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n        <path d=\"M9 6l11 0\" />\r\n        <path d=\"M9 12l11 0\" />\r\n        <path d=\"M9 18l11 0\" />\r\n        <path d=\"M5 6l0 .01\" />\r\n        <path d=\"M5 12l0 .01\" />\r\n        <path d=\"M5 18l0 .01\" />\r\n      </svg>\r\n    </div>\r\n\r\n    @if (isOpen() && activeFilterType() === item.value) {\r\n    <div class=\"dropdown\">\r\n      <div class=\"options-list\">\r\n        @for (option of filteredOptions(); track option.value) {\r\n        <div class=\"option-item\" (click)=\"selectOption(option)\">\r\n          {{ option.label }}\r\n        </div>\r\n        }\r\n        @if (filteredOptions().length === 0) {\r\n        <div class=\"no-options\">No hay opciones</div>\r\n        }\r\n      </div>\r\n    </div>\r\n    }\r\n  </div>\r\n  }\r\n</div>", styles: [".filter-chips{display:flex;gap:10px;border-radius:12px;position:relative}.chip{border-radius:8px;border-style:solid;border-color:var(--schemes-outline-variant, #c0c7cd);border-width:1px;display:flex;flex-direction:row;align-items:center;justify-content:center;flex-shrink:0;min-width:80px;max-width:180px;height:32px;cursor:pointer;transition:.2s ease;position:relative}.chip:hover{background-color:#ececcf}.chip.active{color:var(--on-surface, #171c1f);border-color:#b6b69b}.floating-label{position:absolute;left:12px;top:-8px;color:var(--schemes-on-surface-variant, #454733);font-family:var( --theme-label-large-font-family, \"Roboto-Medium\", sans-serif );font-size:1.1rem;line-height:12px;letter-spacing:var(--theme-label-large-letter-spacing, .1px);font-weight:var(--theme-label-large-font-weight, 500);opacity:0;pointer-events:none;transition:all .2s ease;z-index:2;background-color:#e3e3d1;padding:0 4px;border-radius:2px;text-transform:capitalize}.chip-input-wrapper:focus-within .floating-label{opacity:.6;top:-8px}.chip.has-value .floating-label{opacity:.9}.content-chip{padding:0 8px;display:flex;flex-direction:row;gap:8px;align-items:center;justify-items:center;height:32px}.label-text{display:none}.chip-input{border:none;outline:none;background:transparent;height:100%;width:100%;color:var(--schemes-on-surface-variant, #454733);font-family:var( --theme-label-large-font-family, \"Roboto-Medium\", sans-serif );font-size:var(--theme-label-large-font-size, 1.4rem);line-height:var(--theme-label-large-line-height, 20px);letter-spacing:var(--theme-label-large-letter-spacing, .1px);font-weight:var(--theme-label-large-font-weight, 500);text-transform:capitalize}.chip-input::placeholder{color:var(--schemes-on-surface-variant, #454733);opacity:.6;text-transform:capitalize}.chip-input:disabled{cursor:not-allowed;opacity:.6}.icon{width:18px;height:18px;color:var(--on-surface-variant, #40484c)}.dropdown{position:absolute;top:100%;left:0;right:0;background:#e3e3d1;border:1px solid #787861;border-top:none;border-radius:0 0 5px 5px;z-index:1000;box-shadow:0 4px 12px #00000026;min-width:200px;padding:0;overflow:hidden}.options-list{display:flex;flex-direction:column;max-height:200px;overflow-y:auto}.option-item{padding:10px 15px;cursor:pointer;color:#454733;font-size:.9rem;text-transform:capitalize;transition:background-color .2s}.option-item:hover{background-color:#7878611a}.no-options{padding:10px 15px;color:#787861;font-size:.9rem;font-style:italic}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: false }] }], clearTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearTrigger", required: false }] }], filterSelected: [{ type: i0.Output, args: ["filterSelected"] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
 
 class InputTextFilter {
@@ -1661,7 +1659,7 @@ class InputTextFilter {
                 useExisting: forwardRef(() => InputTextFilter),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div class=\"filter-chips\">\r\n  @for (item of filters(); track item.value) {\r\n  <div class=\"chip-input-wrapper\" [class.has-value]=\"filterValues()[item.value]\">\r\n    <label class=\"floating-label\">{{ item.placeholder || item.label || 'Escribir' }}</label>\r\n    <input type=\"text\" [value]=\"filterValues()[item.value] || ''\" (input)=\"onInputChange($event, item.value)\"\r\n      [placeholder]=\"filterValues()[item.value] ? '' : (item.placeholder || item.label || 'Escribir')\"\r\n      class=\"chip-input\" [disabled]=\"isDisabled()\" />\r\n    @if (filterValues()[item.value]) {\r\n    <button type=\"button\" class=\"clear-button\" (click)=\"clearFilter(item.value)\" title=\"Limpiar\">\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n        <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n        <path d=\"M18 6l-12 12\" />\r\n        <path d=\"M6 6l12 12\" />\r\n      </svg>\r\n    </button>\r\n    }\r\n  </div>\r\n  }\r\n</div>", styles: [".filter-chips{display:flex;gap:10px;border-radius:12px;position:relative}.chip-input-wrapper{position:relative;display:flex;align-items:center;border-radius:8px;border-style:solid;border-color:var(--schemes-outline-variant, #c0c7cd);border-width:1px;min-width:80px;height:32px;flex-shrink:0;transition:.2s ease;background-color:transparent;flex:1 1 auto;max-width:180px}.chip-input-wrapper:hover{background-color:#ececcf}.chip-input-wrapper:focus-within{color:var(--on-surface, #171c1f);border-color:#b6b69b}.floating-label{position:absolute;left:12px;top:-8px;color:var(--schemes-on-surface-variant, #454733);font-family:var( --theme-label-large-font-family, \"Roboto-Medium\", sans-serif );font-size:1.1rem;line-height:12px;letter-spacing:var(--theme-label-large-letter-spacing, .1px);font-weight:var(--theme-label-large-font-weight, 500);opacity:0;pointer-events:none;transition:all .2s ease;z-index:2;background-color:#ebeccf;padding:0 4px;border-radius:2px;text-transform:capitalize}.chip-input-wrapper:focus-within .floating-label{opacity:.6;top:-8px}.chip-input-wrapper.has-value .floating-label{opacity:.9}.chip-input{border:none;outline:none;background:transparent;padding:6px 35px 6px 8px;height:100%;width:100%;color:var(--schemes-on-surface-variant, #454733);font-family:var( --theme-label-large-font-family, \"Roboto-Medium\", sans-serif );font-size:var(--theme-label-large-font-size, 1.4rem);line-height:var(--theme-label-large-line-height, 20px);letter-spacing:var(--theme-label-large-letter-spacing, .1px);font-weight:var(--theme-label-large-font-weight, 500);border-radius:8px}.chip-input::placeholder{color:var(--schemes-on-surface-variant, #454733);opacity:.6;text-transform:capitalize}.chip-input:disabled{cursor:not-allowed;opacity:.6}.icon.icon-tabler-abc{width:18px;height:18px;color:var(--on-surface-variant, #40484c)}.clear-button{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;color:var(--schemes-on-surface-variant, #454733);border-radius:4px;transition:all .2s;z-index:1}.clear-button:hover{background-color:#7878611a;color:var(--schemes-on-surface-variant, #454733)}.clear-button:active{background-color:#78786133}.clear-button svg{width:16px;height:16px}.action-buttons{display:flex;justify-content:flex-end;gap:10px}.action-btn{padding:8px 16px;border:none;border-radius:3px;cursor:pointer;font-size:.9rem;transition:all .2s}.action-btn.secondary{background:transparent;color:#787861;border:1px solid #787861}.action-btn.secondary:hover{background:#7878611a;color:#454733}.action-btn.primary{background:#a9a97f;color:#e3e3d1;border:1px solid #a9a97f}.action-btn.primary:hover{background:#969669;border-color:#969669}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormsModule }] });
+        ], ngImport: i0, template: "<div class=\"filter-chips\">\r\n  @for (item of filters(); track item.value) {\r\n  <div class=\"chip-input-wrapper\" [class.has-value]=\"filterValues()[item.value]\">\r\n    <label class=\"floating-label\">{{ item.placeholder || item.label || 'Escribir' }}</label>\r\n    <input type=\"text\" [value]=\"filterValues()[item.value] || ''\" (input)=\"onInputChange($event, item.value)\"\r\n      [placeholder]=\"filterValues()[item.value] ? '' : (item.placeholder || item.label || 'Escribir')\"\r\n      class=\"chip-input\" [disabled]=\"isDisabled()\" />\r\n    @if (filterValues()[item.value]) {\r\n    <button type=\"button\" class=\"clear-button\" (click)=\"clearFilter(item.value)\" title=\"Limpiar\">\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n        <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n        <path d=\"M18 6l-12 12\" />\r\n        <path d=\"M6 6l12 12\" />\r\n      </svg>\r\n    </button>\r\n    }\r\n  </div>\r\n  }\r\n</div>", styles: [".filter-chips{display:flex;gap:10px;border-radius:12px;position:relative}.chip-input-wrapper{position:relative;display:flex;align-items:center;border-radius:8px;border-style:solid;border-color:var(--schemes-outline-variant, #c0c7cd);border-width:1px;min-width:80px;height:32px;flex-shrink:0;transition:.2s ease;background-color:transparent;flex:1 1 auto;max-width:180px}.chip-input-wrapper:hover{background-color:#ececcf}.chip-input-wrapper:focus-within{color:var(--on-surface, #171c1f);border-color:#b6b69b}.floating-label{position:absolute;left:12px;top:-8px;color:var(--schemes-on-surface-variant, #454733);font-family:var( --theme-label-large-font-family, \"Roboto-Medium\", sans-serif );font-size:1.1rem;line-height:12px;letter-spacing:var(--theme-label-large-letter-spacing, .1px);font-weight:var(--theme-label-large-font-weight, 500);opacity:0;pointer-events:none;transition:all .2s ease;z-index:2;background-color:#e3e3d1;padding:0 4px;border-radius:2px;text-transform:capitalize}.chip-input-wrapper:focus-within .floating-label{opacity:.6;top:-8px}.chip-input-wrapper.has-value .floating-label{opacity:.9}.chip-input{border:none;outline:none;background:transparent;padding:6px 35px 6px 8px;height:100%;width:100%;color:var(--schemes-on-surface-variant, #454733);font-family:var( --theme-label-large-font-family, \"Roboto-Medium\", sans-serif );font-size:var(--theme-label-large-font-size, 1.4rem);line-height:var(--theme-label-large-line-height, 20px);letter-spacing:var(--theme-label-large-letter-spacing, .1px);font-weight:var(--theme-label-large-font-weight, 500);border-radius:8px}.chip-input::placeholder{color:var(--schemes-on-surface-variant, #454733);opacity:.6;text-transform:capitalize}.chip-input:disabled{cursor:not-allowed;opacity:.6}.icon.icon-tabler-abc{width:18px;height:18px;color:var(--on-surface-variant, #40484c)}.clear-button{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;color:var(--schemes-on-surface-variant, #454733);border-radius:4px;transition:all .2s;z-index:1}.clear-button:hover{background-color:#7878611a;color:var(--schemes-on-surface-variant, #454733)}.clear-button:active{background-color:#78786133}.clear-button svg{width:16px;height:16px}.action-buttons{display:flex;justify-content:flex-end;gap:10px}.action-btn{padding:8px 16px;border:none;border-radius:3px;cursor:pointer;font-size:.9rem;transition:all .2s}.action-btn.secondary{background:transparent;color:#787861;border:1px solid #787861}.action-btn.secondary:hover{background:#7878611a;color:#454733}.action-btn.primary{background:#a9a97f;color:#e3e3d1;border:1px solid #a9a97f}.action-btn.primary:hover{background:#969669;border-color:#969669}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormsModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: InputTextFilter, decorators: [{
             type: Component,
@@ -1671,7 +1669,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                             useExisting: forwardRef(() => InputTextFilter),
                             multi: true,
                         },
-                    ], template: "<div class=\"filter-chips\">\r\n  @for (item of filters(); track item.value) {\r\n  <div class=\"chip-input-wrapper\" [class.has-value]=\"filterValues()[item.value]\">\r\n    <label class=\"floating-label\">{{ item.placeholder || item.label || 'Escribir' }}</label>\r\n    <input type=\"text\" [value]=\"filterValues()[item.value] || ''\" (input)=\"onInputChange($event, item.value)\"\r\n      [placeholder]=\"filterValues()[item.value] ? '' : (item.placeholder || item.label || 'Escribir')\"\r\n      class=\"chip-input\" [disabled]=\"isDisabled()\" />\r\n    @if (filterValues()[item.value]) {\r\n    <button type=\"button\" class=\"clear-button\" (click)=\"clearFilter(item.value)\" title=\"Limpiar\">\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n        <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n        <path d=\"M18 6l-12 12\" />\r\n        <path d=\"M6 6l12 12\" />\r\n      </svg>\r\n    </button>\r\n    }\r\n  </div>\r\n  }\r\n</div>", styles: [".filter-chips{display:flex;gap:10px;border-radius:12px;position:relative}.chip-input-wrapper{position:relative;display:flex;align-items:center;border-radius:8px;border-style:solid;border-color:var(--schemes-outline-variant, #c0c7cd);border-width:1px;min-width:80px;height:32px;flex-shrink:0;transition:.2s ease;background-color:transparent;flex:1 1 auto;max-width:180px}.chip-input-wrapper:hover{background-color:#ececcf}.chip-input-wrapper:focus-within{color:var(--on-surface, #171c1f);border-color:#b6b69b}.floating-label{position:absolute;left:12px;top:-8px;color:var(--schemes-on-surface-variant, #454733);font-family:var( --theme-label-large-font-family, \"Roboto-Medium\", sans-serif );font-size:1.1rem;line-height:12px;letter-spacing:var(--theme-label-large-letter-spacing, .1px);font-weight:var(--theme-label-large-font-weight, 500);opacity:0;pointer-events:none;transition:all .2s ease;z-index:2;background-color:#ebeccf;padding:0 4px;border-radius:2px;text-transform:capitalize}.chip-input-wrapper:focus-within .floating-label{opacity:.6;top:-8px}.chip-input-wrapper.has-value .floating-label{opacity:.9}.chip-input{border:none;outline:none;background:transparent;padding:6px 35px 6px 8px;height:100%;width:100%;color:var(--schemes-on-surface-variant, #454733);font-family:var( --theme-label-large-font-family, \"Roboto-Medium\", sans-serif );font-size:var(--theme-label-large-font-size, 1.4rem);line-height:var(--theme-label-large-line-height, 20px);letter-spacing:var(--theme-label-large-letter-spacing, .1px);font-weight:var(--theme-label-large-font-weight, 500);border-radius:8px}.chip-input::placeholder{color:var(--schemes-on-surface-variant, #454733);opacity:.6;text-transform:capitalize}.chip-input:disabled{cursor:not-allowed;opacity:.6}.icon.icon-tabler-abc{width:18px;height:18px;color:var(--on-surface-variant, #40484c)}.clear-button{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;color:var(--schemes-on-surface-variant, #454733);border-radius:4px;transition:all .2s;z-index:1}.clear-button:hover{background-color:#7878611a;color:var(--schemes-on-surface-variant, #454733)}.clear-button:active{background-color:#78786133}.clear-button svg{width:16px;height:16px}.action-buttons{display:flex;justify-content:flex-end;gap:10px}.action-btn{padding:8px 16px;border:none;border-radius:3px;cursor:pointer;font-size:.9rem;transition:all .2s}.action-btn.secondary{background:transparent;color:#787861;border:1px solid #787861}.action-btn.secondary:hover{background:#7878611a;color:#454733}.action-btn.primary{background:#a9a97f;color:#e3e3d1;border:1px solid #a9a97f}.action-btn.primary:hover{background:#969669;border-color:#969669}\n"] }]
+                    ], template: "<div class=\"filter-chips\">\r\n  @for (item of filters(); track item.value) {\r\n  <div class=\"chip-input-wrapper\" [class.has-value]=\"filterValues()[item.value]\">\r\n    <label class=\"floating-label\">{{ item.placeholder || item.label || 'Escribir' }}</label>\r\n    <input type=\"text\" [value]=\"filterValues()[item.value] || ''\" (input)=\"onInputChange($event, item.value)\"\r\n      [placeholder]=\"filterValues()[item.value] ? '' : (item.placeholder || item.label || 'Escribir')\"\r\n      class=\"chip-input\" [disabled]=\"isDisabled()\" />\r\n    @if (filterValues()[item.value]) {\r\n    <button type=\"button\" class=\"clear-button\" (click)=\"clearFilter(item.value)\" title=\"Limpiar\">\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n        <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n        <path d=\"M18 6l-12 12\" />\r\n        <path d=\"M6 6l12 12\" />\r\n      </svg>\r\n    </button>\r\n    }\r\n  </div>\r\n  }\r\n</div>", styles: [".filter-chips{display:flex;gap:10px;border-radius:12px;position:relative}.chip-input-wrapper{position:relative;display:flex;align-items:center;border-radius:8px;border-style:solid;border-color:var(--schemes-outline-variant, #c0c7cd);border-width:1px;min-width:80px;height:32px;flex-shrink:0;transition:.2s ease;background-color:transparent;flex:1 1 auto;max-width:180px}.chip-input-wrapper:hover{background-color:#ececcf}.chip-input-wrapper:focus-within{color:var(--on-surface, #171c1f);border-color:#b6b69b}.floating-label{position:absolute;left:12px;top:-8px;color:var(--schemes-on-surface-variant, #454733);font-family:var( --theme-label-large-font-family, \"Roboto-Medium\", sans-serif );font-size:1.1rem;line-height:12px;letter-spacing:var(--theme-label-large-letter-spacing, .1px);font-weight:var(--theme-label-large-font-weight, 500);opacity:0;pointer-events:none;transition:all .2s ease;z-index:2;background-color:#e3e3d1;padding:0 4px;border-radius:2px;text-transform:capitalize}.chip-input-wrapper:focus-within .floating-label{opacity:.6;top:-8px}.chip-input-wrapper.has-value .floating-label{opacity:.9}.chip-input{border:none;outline:none;background:transparent;padding:6px 35px 6px 8px;height:100%;width:100%;color:var(--schemes-on-surface-variant, #454733);font-family:var( --theme-label-large-font-family, \"Roboto-Medium\", sans-serif );font-size:var(--theme-label-large-font-size, 1.4rem);line-height:var(--theme-label-large-line-height, 20px);letter-spacing:var(--theme-label-large-letter-spacing, .1px);font-weight:var(--theme-label-large-font-weight, 500);border-radius:8px}.chip-input::placeholder{color:var(--schemes-on-surface-variant, #454733);opacity:.6;text-transform:capitalize}.chip-input:disabled{cursor:not-allowed;opacity:.6}.icon.icon-tabler-abc{width:18px;height:18px;color:var(--on-surface-variant, #40484c)}.clear-button{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;color:var(--schemes-on-surface-variant, #454733);border-radius:4px;transition:all .2s;z-index:1}.clear-button:hover{background-color:#7878611a;color:var(--schemes-on-surface-variant, #454733)}.clear-button:active{background-color:#78786133}.clear-button svg{width:16px;height:16px}.action-buttons{display:flex;justify-content:flex-end;gap:10px}.action-btn{padding:8px 16px;border:none;border-radius:3px;cursor:pointer;font-size:.9rem;transition:all .2s}.action-btn.secondary{background:transparent;color:#787861;border:1px solid #787861}.action-btn.secondary:hover{background:#7878611a;color:#454733}.action-btn.primary{background:#a9a97f;color:#e3e3d1;border:1px solid #a9a97f}.action-btn.primary:hover{background:#969669;border-color:#969669}\n"] }]
         }], ctorParameters: () => [], propDecorators: { filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: false }] }], clearTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearTrigger", required: false }] }], filterSelected: [{ type: i0.Output, args: ["filterSelected"] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
 
 class Input {
@@ -1946,20 +1944,51 @@ class DynamicFormFields {
     }
     onCancel() {
     }
+    onEnter(event) {
+        if (event.key !== 'Enter')
+            return;
+        const target = event.target;
+        // Permitir salto de línea en textarea con Shift+Enter
+        if (target.tagName === 'TEXTAREA' && event.shiftKey)
+            return;
+        event.preventDefault();
+        this.focusNextElement(target);
+    }
     onUppercaseInput(event, fieldType, key) {
         if (['email', 'password'].includes(fieldType))
             return;
-        const input = event.target;
-        const value = input.value.toUpperCase();
-        input.value = value;
-        this.form().get(key)?.setValue(value, { emitEvent: false });
+        const control = this.form().get(key);
+        if (!control)
+            return;
+        const value = control.value;
+        if (typeof value !== 'string')
+            return;
+        const upperValue = value.toUpperCase();
+        if (value !== upperValue) {
+            control.setValue(upperValue);
+        }
+    }
+    focusNextElement(current) {
+        const form = current.closest('form');
+        if (!form)
+            return;
+        const focusable = Array.from(form.querySelectorAll('input:not([disabled]):not([readonly]), textarea:not([disabled]):not([readonly]), select:not([disabled]), button:not([disabled])'));
+        const index = focusable.indexOf(current);
+        // Si hay siguiente input → foco
+        if (index >= 0 && index < focusable.length - 1) {
+            focusable[index + 1].focus();
+            return;
+        }
+        // Si es el último → submit
+        const submitBtn = form.querySelector('button[type="submit"]');
+        submitBtn?.click();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DynamicFormFields, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DynamicFormFields, isStandalone: true, selector: "lib-dynamic-form-fields", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, sections: { classPropertyName: "sections", publicName: "sections", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (form()) {\r\n<form class=\"form\" [formGroup]=\"form()\" [class.form--compact]=\"compact()\">\r\n  @for (sec of sections(); track $index) {\r\n  <section class=\"section\">\r\n    @if (sec.title) {\r\n    <h3 class=\"section-title\">{{ sec.title }}</h3>\r\n    } @if (sec.description) {\r\n    <p class=\"section-desc\">{{ sec.description }}</p>\r\n    }\r\n\r\n    <div class=\"grid\">\r\n      @for (f of sec.fields; track f.key) {\r\n      <div class=\"col\" [style.--col-span]=\"f.col || 6\">\r\n        @if(f.label) {\r\n        <label\r\n          [class.label-radio]=\"f.type === 'radio'\"\r\n          [class.label-checkbox]=\"f.type === 'checkbox'\"\r\n          [class.label-disabled]=\"f.readonly || f.disabled\"\r\n          class=\"label\"\r\n        >\r\n          {{ f.label }} </label\r\n        >} @if (['text','number','email', 'password', 'time'].includes(f.type))\r\n        {\r\n        <input\r\n          class=\"input\"\r\n          [type]=\"f.type\"\r\n          [placeholder]=\"f.placeholder\"\r\n          [formControlName]=\"f.key\"\r\n          [disabled]=\"f.disabled || false\"\r\n          [readonly]=\"f.readonly || false\"\r\n          (input)=\"onUppercaseInput($event, f.type, f.key)\"\r\n        />\r\n        } @if (['date', 'datetime-local'].includes(f.type)) {\r\n        <lib-date-time-picker\r\n          [mode]=\"getDatePickerMode(f.type)\"\r\n          [placeholder]=\"\r\n            f.placeholder ||\r\n            (f.type === 'date'\r\n              ? 'Seleccionar fecha'\r\n              : 'Seleccionar fecha y hora')\r\n          \"\r\n          [formControlName]=\"f.key\"\r\n          [minDate]=\"f.minDate || null\"\r\n          [maxDate]=\"f.maxDate || null\"\r\n          [readonly]=\"f.readonly || false\"\r\n          [disabled]=\"f.disabled || false\"\r\n        />\r\n        } @if (f.type === 'textarea') {\r\n        <textarea\r\n          class=\"input textarea\"\r\n          [placeholder]=\"f.placeholder\"\r\n          [formControlName]=\"f.key\"\r\n          rows=\"6\"\r\n          [readonly]=\"f.readonly || false\"\r\n          [disabled]=\"f.disabled || false\"\r\n        ></textarea>\r\n        }@if (f.type === 'select') {\r\n\r\n        <lib-select-custom-search\r\n          [options]=\"f.options ?? []\"\r\n          [placeholder]=\"f.placeholder || 'Seleccionar...'\"\r\n          [formControlName]=\"f.key\"\r\n          [readonly]=\"f.readonly || false\"\r\n          [disabled]=\"f.disabled || false\"\r\n        />\r\n        } @if (f.type === 'radio') {\r\n        <div class=\"radio-group\">\r\n          @for (o of f.options ?? []; track o.value) {\r\n          <label class=\"radio\">\r\n            {{ o.label }}\r\n            <input type=\"radio\" [value]=\"o.value\" [formControlName]=\"f.key\" [readonly]=\"f.readonly || false\"\r\n            [disabled]=\"f.disabled || false\" />\r\n          </label>\r\n          }\r\n        </div>\r\n        } @if (f.type === 'checkbox') {\r\n        <div class=\"checkbox-group\">\r\n          @for (o of f.options ?? []; track o.value; let i = $index) {\r\n          <label class=\"checkbox\">\r\n            {{ o.label }}\r\n            <input\r\n              type=\"checkbox\"\r\n              [checked]=\"getCheckboxArray(f.key).at(i).value\"\r\n              (change)=\"onCheckboxChange($event, f.key, i)\"\r\n            />\r\n          </label>\r\n          }\r\n        </div>\r\n        } @if (f.type === 'disabled') {\r\n        <label class=\"label\">{{ f.label }}</label>\r\n        <input\r\n          class=\"input input--disabled\"\r\n          [placeholder]=\"f.placeholder || 'Autom\u00E1tico'\"\r\n          disabled\r\n        />\r\n        } @if (ctrl(f.key)?.touched && ctrl(f.key)?.invalid) {\r\n        <div class=\"error\">\r\n          @if (ctrl(f.key)?.errors?.['required']) {\r\n          <span>Campo requerido</span>\r\n          } @if (ctrl(f.key)?.errors?.['email']) {\r\n          <span>Correo inv\u00E1lido</span>\r\n          } @if (ctrl(f.key)?.errors?.['pattern']) {\r\n          <span>\r\n            @switch (f.patternType) { @case ('numbers') { Solo se permiten\r\n            n\u00FAmeros } @case ('phone') { Formato de tel\u00E9fono inv\u00E1lido } @case\r\n            ('text') { Solo se permiten letras y espacios } @case ('username') {\r\n            Solo se permiten letras, n\u00FAmeros, puntos y guiones bajos (no al\r\n            inicio ni al final) } @case ('alphanumeric') { Solo se permiten\r\n            letras y n\u00FAmeros } @default { Formato inv\u00E1lido } }\r\n          </span>\r\n          } @if (ctrl(f.key)?.errors?.['notMatching']) {\r\n          <span>Las contrase\u00F1as no coinciden</span>\r\n          }\r\n        </div>\r\n        }\r\n      </div>\r\n      }\r\n    </div>\r\n  </section>\r\n  }\r\n</form>\r\n}\r\n", styles: [".form{width:100%}.form{display:grid}.section{padding:20px 0 0}.section-title{font-size:1.6rem;font-weight:700;margin-bottom:30px}.section-desc{margin:0 0 .75rem;color:#666}.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}.col{grid-column:span var(--col-span, 6);min-width:0;width:100%;position:relative;padding-bottom:20px}.label{position:absolute;top:-8px;left:12px;font-size:1.2rem;color:#454733;background-color:var(--surface-container-high, #ebe8d6);padding:0 4px;font-weight:500;z-index:1;text-transform:capitalize}.input{width:100%;border:1px solid #787861;border-radius:5px;padding:15px;background-color:transparent}input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=date]::-webkit-calendar-picker-indicator{position:absolute;inset:0;width:auto;height:auto;color:transparent;background:transparent}.input:focus{outline:none;border-color:#a9a97f}.input--disabled{color:#888}.label-radio{font-size:1.4rem;position:static;padding-left:0}.radio-group{display:flex;gap:1rem;padding:.5rem 0}.radio{font-size:1.4rem;display:flex;align-items:center;gap:10px;color:#1c1c12;margin-top:20px}.error{position:absolute;bottom:0;left:0;font-size:1.2rem;color:#b00020;width:100%;height:15px;display:none}.col:has(.error) .error{display:block}.textarea{resize:vertical;min-height:100px;max-height:300px;line-height:1.5}select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url(\"data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e\");background-repeat:no-repeat;background-size:15px;background-position:right 15px center;cursor:pointer}select:invalid{color:#787861}select.placeholder-selected{color:#787861}select:not(.placeholder-selected){color:#000}select option{color:#454733;cursor:pointer}input[type=date]{color:#787861!important}input[type=date]:valid{color:#454733!important}.label-disabled{color:#1c1c1266}.input:disabled,.input--disabled,.input.disabled,.input[readonly]{border:1px solid #a9a97f;color:#a9a97f;cursor:not-allowed;pointer-events:none}@media (max-width: 768px){.grid{grid-template-columns:1fr}.col{grid-column:span 1!important}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.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.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: SelectCustomSearch, selector: "lib-select-custom-search", inputs: ["options", "placeholder", "readonly"], outputs: ["selectionChange"] }, { kind: "component", type: DateTimePicker, selector: "lib-date-time-picker", inputs: ["mode", "placeholder", "minDate", "maxDate", "readonly"], outputs: ["dateChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DynamicFormFields, isStandalone: true, selector: "lib-dynamic-form-fields", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, sections: { classPropertyName: "sections", publicName: "sections", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (form()) {\r\n<form class=\"form\" [formGroup]=\"form()\" [class.form--compact]=\"compact()\" (keydown)=\"onEnter($event)\">\r\n  @for (sec of sections(); track $index) {\r\n  <section class=\"section\">\r\n    @if (sec.title) {\r\n    <h3 class=\"section-title\">{{ sec.title }}</h3>\r\n    } @if (sec.description) {\r\n    <p class=\"section-desc\">{{ sec.description }}</p>\r\n    }\r\n\r\n    <div class=\"grid\">\r\n      @for (f of sec.fields; track f.key) {\r\n      <div class=\"col\" [style.--col-span]=\"f.col || 6\">\r\n        @if(f.label) {\r\n        <label\r\n          [class.label-radio]=\"f.type === 'radio'\"\r\n          [class.label-checkbox]=\"f.type === 'checkbox'\"\r\n          [class.label-disabled]=\"f.readonly || f.disabled\"\r\n          class=\"label\"\r\n        >\r\n          {{ f.label }} </label\r\n        >} @if (['text','number','email', 'password', 'time'].includes(f.type))\r\n        {\r\n        <input\r\n          class=\"input\"\r\n          [type]=\"f.type\"\r\n          [placeholder]=\"f.placeholder\"\r\n          [formControlName]=\"f.key\"\r\n          [readonly]=\"f.readonly || false\"\r\n          (input)=\"onUppercaseInput($event, f.type, f.key)\"\r\n        />\r\n        } @if (['date', 'datetime-local'].includes(f.type)) {\r\n        <lib-date-time-picker\r\n          [mode]=\"getDatePickerMode(f.type)\"\r\n          [placeholder]=\"\r\n            f.placeholder ||\r\n            (f.type === 'date'\r\n              ? 'Seleccionar fecha'\r\n              : 'Seleccionar fecha y hora')\r\n          \"\r\n          [formControlName]=\"f.key\"\r\n          [minDate]=\"f.minDate || null\"\r\n          [maxDate]=\"f.maxDate || null\"\r\n          [readonly]=\"f.readonly || false\"\r\n        />\r\n        } @if (f.type === 'textarea') {\r\n        <textarea\r\n          class=\"input textarea\"\r\n          [placeholder]=\"f.placeholder\"\r\n          [formControlName]=\"f.key\"\r\n          rows=\"6\"\r\n          [readonly]=\"f.readonly || false\"\r\n        ></textarea>\r\n        }@if (f.type === 'select') {\r\n\r\n        <lib-select-custom-search\r\n          [options]=\"f.options ?? []\"\r\n          [placeholder]=\"f.placeholder || 'Seleccionar...'\"\r\n          [formControlName]=\"f.key\"\r\n          [readonly]=\"f.readonly || false\"\r\n        />\r\n        } @if (f.type === 'radio') {\r\n        <div class=\"radio-group\">\r\n          @for (o of f.options ?? []; track o.value) {\r\n          <label class=\"radio\">\r\n            {{ o.label }}\r\n            <input type=\"radio\" [value]=\"o.value\" [formControlName]=\"f.key\" [readonly]=\"f.readonly || false\" />\r\n          </label>\r\n          }\r\n        </div>\r\n        } @if (f.type === 'checkbox') {\r\n        <div class=\"checkbox-group\">\r\n          @for (o of f.options ?? []; track o.value; let i = $index) {\r\n          <label class=\"checkbox\">\r\n            {{ o.label }}\r\n            <input\r\n              type=\"checkbox\"\r\n              [checked]=\"getCheckboxArray(f.key).at(i).value\"\r\n              (change)=\"onCheckboxChange($event, f.key, i)\"\r\n            />\r\n          </label>\r\n          }\r\n        </div>\r\n        } @if (f.type === 'disabled') {\r\n        <label class=\"label\">{{ f.label }}</label>\r\n        <input\r\n          class=\"input input--disabled\"\r\n          [placeholder]=\"f.placeholder || 'Autom\u00E1tico'\"\r\n          disabled\r\n        />\r\n        } @if (ctrl(f.key)?.touched && ctrl(f.key)?.invalid) {\r\n        <div class=\"error\">\r\n          @if (ctrl(f.key)?.errors?.['required']) {\r\n          <span>Campo requerido</span>\r\n          } @if (ctrl(f.key)?.errors?.['email']) {\r\n          <span>Correo inv\u00E1lido</span>\r\n          } @if (ctrl(f.key)?.errors?.['pattern']) {\r\n          <span>\r\n            @switch (f.patternType) { @case ('numbers') { Solo se permiten\r\n            n\u00FAmeros } @case ('phone') { Formato de tel\u00E9fono inv\u00E1lido } @case\r\n            ('text') { Solo se permiten letras y espacios } @case ('username') {\r\n            Solo se permiten letras, n\u00FAmeros, puntos y guiones bajos (no al\r\n            inicio ni al final) } @case ('alphanumeric') { Solo se permiten\r\n            letras y n\u00FAmeros } @default { Formato inv\u00E1lido } }\r\n          </span>\r\n          } @if (ctrl(f.key)?.errors?.['notMatching']) {\r\n          <span>Las contrase\u00F1as no coinciden</span>\r\n          }\r\n        </div>\r\n        }\r\n      </div>\r\n      }\r\n    </div>\r\n  </section>\r\n  }\r\n</form>\r\n}\r\n", styles: [".form{width:100%}.form{display:grid}.section{padding:20px 0 0}.section-title{font-size:1.6rem;font-weight:700;margin-bottom:30px}.section-desc{margin:0 0 .75rem;color:#666}.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}.col{grid-column:span var(--col-span, 6);min-width:0;width:100%;position:relative;padding-bottom:20px}.label{position:absolute;top:-8px;left:12px;font-size:1.2rem;color:#454733;background-color:#e3e3d1;padding:0 4px;font-weight:500;z-index:1;text-transform:capitalize}.input{width:100%;border:1px solid #787861;border-radius:5px;padding:15px;background-color:transparent}input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=date]::-webkit-calendar-picker-indicator{position:absolute;inset:0;width:auto;height:auto;color:transparent;background:transparent}.input:focus{outline:none;border-color:#a9a97f}.input--disabled{color:#888}.input:-webkit-autofill,.input:-webkit-autofill:hover,.input:-webkit-autofill:focus,.input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1000px #E3E3D1 inset;box-shadow:0 0 0 1000px #e3e3d1 inset;-webkit-text-fill-color:#454733;caret-color:#454733;transition:background-color 9999s ease-in-out 0s}.input:-moz-autofill,.textarea:-moz-autofill{box-shadow:0 0 0 1000px #e3e3d1 inset}.input[readonly]:-webkit-autofill,.input:disabled:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #E3E3D1 inset;-webkit-text-fill-color:#a9a97f}.label-radio{font-size:1.4rem;position:static;padding-left:0}.radio-group{display:flex;gap:1rem;padding:.5rem 0}.radio{font-size:1.4rem;display:flex;align-items:center;gap:10px;color:#1c1c12;margin-top:20px}.error{position:absolute;bottom:0;left:0;font-size:1.2rem;color:#b00020;width:100%;height:15px;display:none}.col:has(.error) .error{display:block}.textarea{resize:vertical;min-height:100px;max-height:300px;line-height:1.5}.textarea:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #E3E3D1 inset;-webkit-text-fill-color:#454733}select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url(\"data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e\");background-repeat:no-repeat;background-size:15px;background-position:right 15px center;cursor:pointer}select:invalid{color:#787861}select.placeholder-selected{color:#787861}select:not(.placeholder-selected){color:#000}select option{color:#454733;cursor:pointer}input[type=date]{color:#787861!important}input[type=date]:valid{color:#454733!important}.label-disabled{color:#1c1c1266}.input:disabled,.input--disabled,.input.disabled,.input[readonly]{border:1px solid #a9a97f;color:#a9a97f;cursor:not-allowed;pointer-events:none}@media (max-width: 768px){.grid{grid-template-columns:1fr}.col{grid-column:span 1!important}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.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.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: SelectCustomSearch, selector: "lib-select-custom-search", inputs: ["options", "placeholder", "readonly"], outputs: ["selectionChange"] }, { kind: "component", type: DateTimePicker, selector: "lib-date-time-picker", inputs: ["mode", "placeholder", "minDate", "maxDate", "readonly"], outputs: ["dateChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DynamicFormFields, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-dynamic-form-fields', standalone: true, imports: [ReactiveFormsModule, SelectCustomSearch, DateTimePicker], template: "@if (form()) {\r\n<form class=\"form\" [formGroup]=\"form()\" [class.form--compact]=\"compact()\">\r\n  @for (sec of sections(); track $index) {\r\n  <section class=\"section\">\r\n    @if (sec.title) {\r\n    <h3 class=\"section-title\">{{ sec.title }}</h3>\r\n    } @if (sec.description) {\r\n    <p class=\"section-desc\">{{ sec.description }}</p>\r\n    }\r\n\r\n    <div class=\"grid\">\r\n      @for (f of sec.fields; track f.key) {\r\n      <div class=\"col\" [style.--col-span]=\"f.col || 6\">\r\n        @if(f.label) {\r\n        <label\r\n          [class.label-radio]=\"f.type === 'radio'\"\r\n          [class.label-checkbox]=\"f.type === 'checkbox'\"\r\n          [class.label-disabled]=\"f.readonly || f.disabled\"\r\n          class=\"label\"\r\n        >\r\n          {{ f.label }} </label\r\n        >} @if (['text','number','email', 'password', 'time'].includes(f.type))\r\n        {\r\n        <input\r\n          class=\"input\"\r\n          [type]=\"f.type\"\r\n          [placeholder]=\"f.placeholder\"\r\n          [formControlName]=\"f.key\"\r\n          [disabled]=\"f.disabled || false\"\r\n          [readonly]=\"f.readonly || false\"\r\n          (input)=\"onUppercaseInput($event, f.type, f.key)\"\r\n        />\r\n        } @if (['date', 'datetime-local'].includes(f.type)) {\r\n        <lib-date-time-picker\r\n          [mode]=\"getDatePickerMode(f.type)\"\r\n          [placeholder]=\"\r\n            f.placeholder ||\r\n            (f.type === 'date'\r\n              ? 'Seleccionar fecha'\r\n              : 'Seleccionar fecha y hora')\r\n          \"\r\n          [formControlName]=\"f.key\"\r\n          [minDate]=\"f.minDate || null\"\r\n          [maxDate]=\"f.maxDate || null\"\r\n          [readonly]=\"f.readonly || false\"\r\n          [disabled]=\"f.disabled || false\"\r\n        />\r\n        } @if (f.type === 'textarea') {\r\n        <textarea\r\n          class=\"input textarea\"\r\n          [placeholder]=\"f.placeholder\"\r\n          [formControlName]=\"f.key\"\r\n          rows=\"6\"\r\n          [readonly]=\"f.readonly || false\"\r\n          [disabled]=\"f.disabled || false\"\r\n        ></textarea>\r\n        }@if (f.type === 'select') {\r\n\r\n        <lib-select-custom-search\r\n          [options]=\"f.options ?? []\"\r\n          [placeholder]=\"f.placeholder || 'Seleccionar...'\"\r\n          [formControlName]=\"f.key\"\r\n          [readonly]=\"f.readonly || false\"\r\n          [disabled]=\"f.disabled || false\"\r\n        />\r\n        } @if (f.type === 'radio') {\r\n        <div class=\"radio-group\">\r\n          @for (o of f.options ?? []; track o.value) {\r\n          <label class=\"radio\">\r\n            {{ o.label }}\r\n            <input type=\"radio\" [value]=\"o.value\" [formControlName]=\"f.key\" [readonly]=\"f.readonly || false\"\r\n            [disabled]=\"f.disabled || false\" />\r\n          </label>\r\n          }\r\n        </div>\r\n        } @if (f.type === 'checkbox') {\r\n        <div class=\"checkbox-group\">\r\n          @for (o of f.options ?? []; track o.value; let i = $index) {\r\n          <label class=\"checkbox\">\r\n            {{ o.label }}\r\n            <input\r\n              type=\"checkbox\"\r\n              [checked]=\"getCheckboxArray(f.key).at(i).value\"\r\n              (change)=\"onCheckboxChange($event, f.key, i)\"\r\n            />\r\n          </label>\r\n          }\r\n        </div>\r\n        } @if (f.type === 'disabled') {\r\n        <label class=\"label\">{{ f.label }}</label>\r\n        <input\r\n          class=\"input input--disabled\"\r\n          [placeholder]=\"f.placeholder || 'Autom\u00E1tico'\"\r\n          disabled\r\n        />\r\n        } @if (ctrl(f.key)?.touched && ctrl(f.key)?.invalid) {\r\n        <div class=\"error\">\r\n          @if (ctrl(f.key)?.errors?.['required']) {\r\n          <span>Campo requerido</span>\r\n          } @if (ctrl(f.key)?.errors?.['email']) {\r\n          <span>Correo inv\u00E1lido</span>\r\n          } @if (ctrl(f.key)?.errors?.['pattern']) {\r\n          <span>\r\n            @switch (f.patternType) { @case ('numbers') { Solo se permiten\r\n            n\u00FAmeros } @case ('phone') { Formato de tel\u00E9fono inv\u00E1lido } @case\r\n            ('text') { Solo se permiten letras y espacios } @case ('username') {\r\n            Solo se permiten letras, n\u00FAmeros, puntos y guiones bajos (no al\r\n            inicio ni al final) } @case ('alphanumeric') { Solo se permiten\r\n            letras y n\u00FAmeros } @default { Formato inv\u00E1lido } }\r\n          </span>\r\n          } @if (ctrl(f.key)?.errors?.['notMatching']) {\r\n          <span>Las contrase\u00F1as no coinciden</span>\r\n          }\r\n        </div>\r\n        }\r\n      </div>\r\n      }\r\n    </div>\r\n  </section>\r\n  }\r\n</form>\r\n}\r\n", styles: [".form{width:100%}.form{display:grid}.section{padding:20px 0 0}.section-title{font-size:1.6rem;font-weight:700;margin-bottom:30px}.section-desc{margin:0 0 .75rem;color:#666}.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}.col{grid-column:span var(--col-span, 6);min-width:0;width:100%;position:relative;padding-bottom:20px}.label{position:absolute;top:-8px;left:12px;font-size:1.2rem;color:#454733;background-color:var(--surface-container-high, #ebe8d6);padding:0 4px;font-weight:500;z-index:1;text-transform:capitalize}.input{width:100%;border:1px solid #787861;border-radius:5px;padding:15px;background-color:transparent}input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=date]::-webkit-calendar-picker-indicator{position:absolute;inset:0;width:auto;height:auto;color:transparent;background:transparent}.input:focus{outline:none;border-color:#a9a97f}.input--disabled{color:#888}.label-radio{font-size:1.4rem;position:static;padding-left:0}.radio-group{display:flex;gap:1rem;padding:.5rem 0}.radio{font-size:1.4rem;display:flex;align-items:center;gap:10px;color:#1c1c12;margin-top:20px}.error{position:absolute;bottom:0;left:0;font-size:1.2rem;color:#b00020;width:100%;height:15px;display:none}.col:has(.error) .error{display:block}.textarea{resize:vertical;min-height:100px;max-height:300px;line-height:1.5}select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url(\"data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e\");background-repeat:no-repeat;background-size:15px;background-position:right 15px center;cursor:pointer}select:invalid{color:#787861}select.placeholder-selected{color:#787861}select:not(.placeholder-selected){color:#000}select option{color:#454733;cursor:pointer}input[type=date]{color:#787861!important}input[type=date]:valid{color:#454733!important}.label-disabled{color:#1c1c1266}.input:disabled,.input--disabled,.input.disabled,.input[readonly]{border:1px solid #a9a97f;color:#a9a97f;cursor:not-allowed;pointer-events:none}@media (max-width: 768px){.grid{grid-template-columns:1fr}.col{grid-column:span 1!important}}\n"] }]
+            args: [{ selector: 'lib-dynamic-form-fields', standalone: true, imports: [ReactiveFormsModule, SelectCustomSearch, DateTimePicker], template: "@if (form()) {\r\n<form class=\"form\" [formGroup]=\"form()\" [class.form--compact]=\"compact()\" (keydown)=\"onEnter($event)\">\r\n  @for (sec of sections(); track $index) {\r\n  <section class=\"section\">\r\n    @if (sec.title) {\r\n    <h3 class=\"section-title\">{{ sec.title }}</h3>\r\n    } @if (sec.description) {\r\n    <p class=\"section-desc\">{{ sec.description }}</p>\r\n    }\r\n\r\n    <div class=\"grid\">\r\n      @for (f of sec.fields; track f.key) {\r\n      <div class=\"col\" [style.--col-span]=\"f.col || 6\">\r\n        @if(f.label) {\r\n        <label\r\n          [class.label-radio]=\"f.type === 'radio'\"\r\n          [class.label-checkbox]=\"f.type === 'checkbox'\"\r\n          [class.label-disabled]=\"f.readonly || f.disabled\"\r\n          class=\"label\"\r\n        >\r\n          {{ f.label }} </label\r\n        >} @if (['text','number','email', 'password', 'time'].includes(f.type))\r\n        {\r\n        <input\r\n          class=\"input\"\r\n          [type]=\"f.type\"\r\n          [placeholder]=\"f.placeholder\"\r\n          [formControlName]=\"f.key\"\r\n          [readonly]=\"f.readonly || false\"\r\n          (input)=\"onUppercaseInput($event, f.type, f.key)\"\r\n        />\r\n        } @if (['date', 'datetime-local'].includes(f.type)) {\r\n        <lib-date-time-picker\r\n          [mode]=\"getDatePickerMode(f.type)\"\r\n          [placeholder]=\"\r\n            f.placeholder ||\r\n            (f.type === 'date'\r\n              ? 'Seleccionar fecha'\r\n              : 'Seleccionar fecha y hora')\r\n          \"\r\n          [formControlName]=\"f.key\"\r\n          [minDate]=\"f.minDate || null\"\r\n          [maxDate]=\"f.maxDate || null\"\r\n          [readonly]=\"f.readonly || false\"\r\n        />\r\n        } @if (f.type === 'textarea') {\r\n        <textarea\r\n          class=\"input textarea\"\r\n          [placeholder]=\"f.placeholder\"\r\n          [formControlName]=\"f.key\"\r\n          rows=\"6\"\r\n          [readonly]=\"f.readonly || false\"\r\n        ></textarea>\r\n        }@if (f.type === 'select') {\r\n\r\n        <lib-select-custom-search\r\n          [options]=\"f.options ?? []\"\r\n          [placeholder]=\"f.placeholder || 'Seleccionar...'\"\r\n          [formControlName]=\"f.key\"\r\n          [readonly]=\"f.readonly || false\"\r\n        />\r\n        } @if (f.type === 'radio') {\r\n        <div class=\"radio-group\">\r\n          @for (o of f.options ?? []; track o.value) {\r\n          <label class=\"radio\">\r\n            {{ o.label }}\r\n            <input type=\"radio\" [value]=\"o.value\" [formControlName]=\"f.key\" [readonly]=\"f.readonly || false\" />\r\n          </label>\r\n          }\r\n        </div>\r\n        } @if (f.type === 'checkbox') {\r\n        <div class=\"checkbox-group\">\r\n          @for (o of f.options ?? []; track o.value; let i = $index) {\r\n          <label class=\"checkbox\">\r\n            {{ o.label }}\r\n            <input\r\n              type=\"checkbox\"\r\n              [checked]=\"getCheckboxArray(f.key).at(i).value\"\r\n              (change)=\"onCheckboxChange($event, f.key, i)\"\r\n            />\r\n          </label>\r\n          }\r\n        </div>\r\n        } @if (f.type === 'disabled') {\r\n        <label class=\"label\">{{ f.label }}</label>\r\n        <input\r\n          class=\"input input--disabled\"\r\n          [placeholder]=\"f.placeholder || 'Autom\u00E1tico'\"\r\n          disabled\r\n        />\r\n        } @if (ctrl(f.key)?.touched && ctrl(f.key)?.invalid) {\r\n        <div class=\"error\">\r\n          @if (ctrl(f.key)?.errors?.['required']) {\r\n          <span>Campo requerido</span>\r\n          } @if (ctrl(f.key)?.errors?.['email']) {\r\n          <span>Correo inv\u00E1lido</span>\r\n          } @if (ctrl(f.key)?.errors?.['pattern']) {\r\n          <span>\r\n            @switch (f.patternType) { @case ('numbers') { Solo se permiten\r\n            n\u00FAmeros } @case ('phone') { Formato de tel\u00E9fono inv\u00E1lido } @case\r\n            ('text') { Solo se permiten letras y espacios } @case ('username') {\r\n            Solo se permiten letras, n\u00FAmeros, puntos y guiones bajos (no al\r\n            inicio ni al final) } @case ('alphanumeric') { Solo se permiten\r\n            letras y n\u00FAmeros } @default { Formato inv\u00E1lido } }\r\n          </span>\r\n          } @if (ctrl(f.key)?.errors?.['notMatching']) {\r\n          <span>Las contrase\u00F1as no coinciden</span>\r\n          }\r\n        </div>\r\n        }\r\n      </div>\r\n      }\r\n    </div>\r\n  </section>\r\n  }\r\n</form>\r\n}\r\n", styles: [".form{width:100%}.form{display:grid}.section{padding:20px 0 0}.section-title{font-size:1.6rem;font-weight:700;margin-bottom:30px}.section-desc{margin:0 0 .75rem;color:#666}.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}.col{grid-column:span var(--col-span, 6);min-width:0;width:100%;position:relative;padding-bottom:20px}.label{position:absolute;top:-8px;left:12px;font-size:1.2rem;color:#454733;background-color:#e3e3d1;padding:0 4px;font-weight:500;z-index:1;text-transform:capitalize}.input{width:100%;border:1px solid #787861;border-radius:5px;padding:15px;background-color:transparent}input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=date]::-webkit-calendar-picker-indicator{position:absolute;inset:0;width:auto;height:auto;color:transparent;background:transparent}.input:focus{outline:none;border-color:#a9a97f}.input--disabled{color:#888}.input:-webkit-autofill,.input:-webkit-autofill:hover,.input:-webkit-autofill:focus,.input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1000px #E3E3D1 inset;box-shadow:0 0 0 1000px #e3e3d1 inset;-webkit-text-fill-color:#454733;caret-color:#454733;transition:background-color 9999s ease-in-out 0s}.input:-moz-autofill,.textarea:-moz-autofill{box-shadow:0 0 0 1000px #e3e3d1 inset}.input[readonly]:-webkit-autofill,.input:disabled:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #E3E3D1 inset;-webkit-text-fill-color:#a9a97f}.label-radio{font-size:1.4rem;position:static;padding-left:0}.radio-group{display:flex;gap:1rem;padding:.5rem 0}.radio{font-size:1.4rem;display:flex;align-items:center;gap:10px;color:#1c1c12;margin-top:20px}.error{position:absolute;bottom:0;left:0;font-size:1.2rem;color:#b00020;width:100%;height:15px;display:none}.col:has(.error) .error{display:block}.textarea{resize:vertical;min-height:100px;max-height:300px;line-height:1.5}.textarea:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #E3E3D1 inset;-webkit-text-fill-color:#454733}select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url(\"data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e\");background-repeat:no-repeat;background-size:15px;background-position:right 15px center;cursor:pointer}select:invalid{color:#787861}select.placeholder-selected{color:#787861}select:not(.placeholder-selected){color:#000}select option{color:#454733;cursor:pointer}input[type=date]{color:#787861!important}input[type=date]:valid{color:#454733!important}.label-disabled{color:#1c1c1266}.input:disabled,.input--disabled,.input.disabled,.input[readonly]{border:1px solid #a9a97f;color:#a9a97f;cursor:not-allowed;pointer-events:none}@media (max-width: 768px){.grid{grid-template-columns:1fr}.col{grid-column:span 1!important}}\n"] }]
         }], propDecorators: { form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: true }] }], sections: [{ type: i0.Input, args: [{ isSignal: true, alias: "sections", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }] } });
 
 class WizardForm {
@@ -2238,7 +2267,6 @@ class DialogConfirmation {
         this.expandedIndex = this.expandedIndex === index ? null : index;
     }
     onConfirm() {
-        console.log('confirmado');
         this.close.emit(true);
     }
     onCancel() {
@@ -2507,11 +2535,11 @@ class SideCard {
                 height <= 420;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SideCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: SideCard, isStandalone: true, selector: "lib-side-card", inputs: { isFloating: "isFloating", modeSideCard: "modeSideCard", showTypeSelector: "showTypeSelector", placeholder: "placeholder", value: "value", statusValue: "statusValue", sections: "sections", min: "min", max: "max", showBtnPrimary: "showBtnPrimary", primaryButtonLabel: "primaryButtonLabel", showBtnSecondary: "showBtnSecondary", secondaryButtonLabel: "secondaryButtonLabel" }, outputs: { btnClickIcon: "btnClickIcon", valueChange: "valueChange", typeChange: "typeChange", statusChange: "statusChange", sectionButtonClick: "sectionButtonClick", sliderChange: "sliderChange", buttonClick: "buttonClick" }, viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["SideCard"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div #SideCard class=\"side-card-wrapper\">\r\n  <div class=\"side-card\" [class.floating]=\"isFloating\" [class.compact]=\"isCompact\">\r\n    <div class=\"element-header\">\r\n      @if (modeSideCard === 'create' && showTypeSelector) {\r\n      <div class=\"button-group\">\r\n        <button class=\"btn-type\" [class.active]=\"selectedType === 'radial'\" (click)=\"selectType('radial')\">\r\n          Radial\r\n        </button>\r\n        <button class=\"btn-type\" [class.active]=\"selectedType === 'poligonal'\" (click)=\"selectType('poligonal')\">\r\n          Poligonal\r\n        </button>\r\n      </div>\r\n      }\r\n\r\n      <div class=\"text-container\">\r\n        <input #inputRef type=\"text\" class=\"input-field\" [placeholder]=\"placeholder\" [value]=\"value\"\r\n          (input)=\"onInput($event)\" />\r\n        @if(modeSideCard === 'create' || modeSideCard === 'edit'){\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n          stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n          class=\"icon icon-tabler icons-tabler-outline icon-tabler-edit\" (click)=\"focusInput(inputRef)\">\r\n          <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n          <path d=\"M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1\" />\r\n          <path d=\"M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415\" />\r\n          <path d=\"M16 5l3 3\" />\r\n        </svg>\r\n        } @else {\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n          stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n          class=\"icon icon-tabler icons-tabler-outline icon-tabler-settings\" (click)=\"buttonClickIcon()\">\r\n          <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n          <path\r\n            d=\"M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065\" />\r\n          <path d=\"M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0\" />\r\n        </svg>\r\n        }\r\n      </div>\r\n\r\n      @if(modeSideCard === 'edit' || modeSideCard === 'info'){\r\n      <span #statusChip class=\"status-chip\" [ngClass]=\"statusClass\" (click)=\"changeStatusLabel()\">\r\n        {{ statusLabel }}\r\n      </span>\r\n      }\r\n    </div>\r\n    @for (section of sections; track section.title) {\r\n    <div class=\"element-section\">\r\n      <h3>{{ section.title }}</h3>\r\n\r\n      <div class=\"element-content\">\r\n        @if (section.items?.length) { @for (item of section.items; track\r\n        item.label) {\r\n        <div class=\"element-item\">\r\n          <span class=\"label\">{{ item.label }}</span>\r\n          <span class=\"value\">{{ item.value }}</span>\r\n        </div>\r\n        } } @if (section.showSlider) {\r\n        <div class=\"element-item\">\r\n          <span class=\"label\">{{ sliderLabel }}</span>\r\n          <span class=\"value\">{{ sliderValue }} {{ sliderUnit }}</span>\r\n        </div>\r\n        @if (modeSideCard !== 'info') {\r\n        <input type=\"range\" class=\"slider\" [min]=\"min\" [max]=\"max\" [value]=\"sliderValue\"\r\n          [style.--slider-value]=\"sliderPercentage\" (input)=\"onSliderChange($event)\" />\r\n        }} @if (section.buttonSectionLabel && modeSideCard !== 'info') {\r\n        <button class=\"btn-assign\" (click)=\"onButtonSectionClick(section)\">{{ section.buttonSectionLabel }}</button>\r\n        }\r\n      </div>\r\n    </div>\r\n    }\r\n\r\n    <div class=\"side-card-actions\">\r\n      @if (showBtnPrimary) {\r\n      <button class=\"btn-primary\" (click)=\"onButtonClick('primary')\">{{ primaryButtonLabel }}</button>\r\n      }\r\n      @if (showBtnSecondary) {\r\n      <button class=\"btn-secondary\" (click)=\"onButtonClick('secondary')\">{{ secondaryButtonLabel }}</button>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>", styles: [".side-card-wrapper{position:relative;width:100%;height:100%}.side-card{width:300px;max-width:340px;min-width:240px;height:auto;max-height:90vh;background:#ebe8d6b0;border-radius:8px;padding:16px;font-size:16px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 4px 12px #00000026;z-index:10;overflow-y:auto;display:flex;flex-direction:column;gap:16px;box-sizing:border-box}.side-card.floating{position:absolute;top:16px;right:16px}.button-group{display:flex;gap:8px;justify-content:center;margin-bottom:12px}.btn-type{flex:1;padding:10px 12px;background-color:transparent;color:#61661f;border:2px solid #61661f;border-radius:6px;font-size:13px;font-weight:500;cursor:pointer;text-transform:capitalize}.btn-type:hover{background-color:#dee58f;color:#61661f;border:none}.btn-type:active{background-color:#61661f;color:#fff;border-color:none}.active{background-color:#596300;color:#fff;border-color:none}.input-field{width:100%;padding:10px 0;border:none;border-radius:6px;font-size:22px;background-color:transparent;transition:border-color .3s ease;box-sizing:border-box;text-transform:uppercase}.input-field:focus{outline:none}.input-field::placeholder{color:#1c1c12;transition:opacity .3s ease}.input-field:focus::placeholder{opacity:.3}.text-container{display:flex;gap:8px;align-items:center}.icon{color:#1c1c12;cursor:pointer}.status-chip{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.375rem .75rem;border-radius:6px;font-size:1.2rem;font-weight:600;white-space:nowrap;text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box;cursor:pointer;margin-bottom:12px}.status-chip-active{background-color:#78db5c;color:#0f5e00}.status-chip-active:hover{background-color:#9be786}.status-chip-inactive{background-color:#a60321;color:#fafae8}.status-chip-inactive:hover{background-color:#c06576}.icon:hover{color:#61661f}.element-section{display:flex;flex-direction:column;gap:8px}.element-section h3{margin:0;font-size:22px;font-weight:500;color:#1c1c12;text-transform:uppercase}.element-content{display:flex;flex-direction:column;gap:10px;padding:10px 0;background-color:transparent}.element-item{display:flex;justify-content:space-between}.element-item .label{font-size:14px;color:#454733;font-weight:500;text-transform:uppercase}.element-item .value{font-size:14px;color:#454733;font-weight:500}.slider-section{display:flex;flex-direction:column;gap:8px}.slider{width:100%;height:6px;border-radius:3px;outline:none;-webkit-appearance:none;appearance:none;cursor:pointer;padding:8px 0;background:transparent}.slider::-webkit-slider-runnable-track{width:100%;height:6px;background:linear-gradient(to right,#596300 0%,#596300 var(--slider-value, 0%),#59630023 var(--slider-value, 0%),#59630023 100%);border-radius:3px}.slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background-color:#596300;cursor:pointer;box-shadow:0 2px 4px #0000004d;margin-top:-5px}.slider::-moz-range-track{background:transparent;border:none}.slider::-moz-range-progress{background-color:#596300;height:6px;border-radius:3px}.slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background-color:#596300;cursor:pointer;border:none;box-shadow:0 2px 4px #0003}.btn-assign,.btn-primary,.btn-secondary{padding:14px 24px;background-color:#596300;color:#fff;border:none;border-radius:36px;font-size:14px;font-weight:500;cursor:pointer;width:100%;text-transform:uppercase}.btn-assign{color:#596300;background-color:#dee58f}.btn-assign:hover,.btn-primary:hover{color:#fff;background-color:#7cb342}.btn-assign:active,.btn-primary:active{color:#fff;background-color:#61661f}.side-card-actions{display:flex;flex-direction:column;gap:12px;margin-top:auto}.btn-secondary{background-color:transparent;border:1px solid #61661f;color:#61661f}.btn-secondary:hover{color:#fff;background-color:#7cb342;border-color:#7cb342}.btn-secondary:active{color:#fff;background-color:#61661f;border-color:#61661f}.side-card.compact{font-size:13px;padding:12px;gap:10px}.side-card.compact *{margin-bottom:0}.side-card.compact{gap:10px}.side-card.compact .element-section,.side-card.compact .element-content,.side-card.compact .slider-section{gap:6px}.side-card.compact .title{font-size:1.4rem;line-height:1.2}.side-card.compact .subtitle{font-size:1.1rem}.side-card.compact .icon{width:22px;height:22px}.side-card.compact svg.icon{width:22px;height:22px}.side-card.compact h3{font-size:1.2rem}.side-card.compact .label,.side-card.compact .value{font-size:1.1rem}.side-card.compact .status-chip{font-size:.9rem;padding:.25rem .5rem;margin-bottom:6px}.side-card.compact .btn-primary,.side-card.compact .btn-secondary,.side-card.compact .btn-assign{padding:8px 14px;font-size:12px;border-radius:20px}.side-card.compact .slider{height:3px;padding:4px 0}.side-card.compact .slider::-webkit-slider-thumb{width:12px;height:12px}.side-card.compact .element-header{gap:8px}.side-card.compact .right-icons{gap:4px}.side-card.compact{max-width:280px;max-height:420px;overflow-y:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: SideCard, isStandalone: true, selector: "lib-side-card", inputs: { isFloating: "isFloating", modeSideCard: "modeSideCard", showTypeSelector: "showTypeSelector", placeholder: "placeholder", value: "value", statusValue: "statusValue", sections: "sections", min: "min", max: "max", showBtnPrimary: "showBtnPrimary", primaryButtonLabel: "primaryButtonLabel", showBtnSecondary: "showBtnSecondary", secondaryButtonLabel: "secondaryButtonLabel" }, outputs: { btnClickIcon: "btnClickIcon", valueChange: "valueChange", typeChange: "typeChange", statusChange: "statusChange", sectionButtonClick: "sectionButtonClick", sliderChange: "sliderChange", buttonClick: "buttonClick" }, viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["SideCard"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div #SideCard class=\"side-card-wrapper\">\r\n  <div class=\"side-card\" [class.floating]=\"isFloating\" [class.compact]=\"isCompact\">\r\n    <div class=\"element-header\">\r\n      @if (modeSideCard === 'create' && showTypeSelector) {\r\n      <div class=\"button-group\">\r\n        <button class=\"btn-type\" [class.active]=\"selectedType === 'radial'\" (click)=\"selectType('radial')\">\r\n          Radial\r\n        </button>\r\n        <button class=\"btn-type\" [class.active]=\"selectedType === 'poligonal'\" (click)=\"selectType('poligonal')\">\r\n          Poligonal\r\n        </button>\r\n      </div>\r\n      }\r\n      <div class=\"text-container\">\r\n        <input #inputRef type=\"text\" class=\"input-field\" [placeholder]=\"placeholder\" [value]=\"value\"\r\n          (input)=\"onInput($event)\" [disabled]=\"modeSideCard === 'info'\" />\r\n        @if(modeSideCard === 'create' || modeSideCard === 'edit'){\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n          stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n          class=\"icon icon-tabler icons-tabler-outline icon-tabler-edit\" (click)=\"focusInput(inputRef)\">\r\n          <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n          <path d=\"M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1\" />\r\n          <path d=\"M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415\" />\r\n          <path d=\"M16 5l3 3\" />\r\n        </svg>\r\n        } @else {\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n          stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n          class=\"icon icon-tabler icons-tabler-outline icon-tabler-settings\" (click)=\"buttonClickIcon()\">\r\n          <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n          <path\r\n            d=\"M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065\" />\r\n          <path d=\"M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0\" />\r\n        </svg>\r\n        }\r\n      </div>\r\n\r\n      @if(modeSideCard === 'edit' || modeSideCard === 'info'){\r\n      <span #statusChip class=\"status-chip\" [class.status-chip--disabled]=\"modeSideCard === 'info'\" [ngClass]=\"statusClass\" (click)=\"changeStatusLabel()\">\r\n        {{ statusLabel }}\r\n      </span>\r\n      }\r\n    </div>\r\n    @for (section of sections; track section.title) {\r\n    <div class=\"element-section\">\r\n      <h3>{{ section.title }}</h3>\r\n\r\n      <div class=\"element-content\">\r\n        @if (section.items?.length) { @for (item of section.items; track\r\n        item.label) {\r\n        <div class=\"element-item\">\r\n          <span class=\"label\">{{ item.label }}</span>\r\n          <span class=\"value\">{{ item.value }}</span>\r\n        </div>\r\n        } } @if (section.showSlider) {\r\n        <div class=\"element-item\">\r\n          <span class=\"label\">{{ sliderLabel }}</span>\r\n          <span class=\"value\">{{ sliderValue }} {{ sliderUnit }}</span>\r\n        </div>\r\n        @if (modeSideCard !== 'info') {\r\n        <input type=\"range\" class=\"slider\" [min]=\"min\" [max]=\"max\" [value]=\"sliderValue\"\r\n          [style.--slider-value]=\"sliderPercentage\" (input)=\"onSliderChange($event)\" />\r\n        }} @if (section.buttonSectionLabel && modeSideCard !== 'info') {\r\n        <button class=\"btn-assign\" (click)=\"onButtonSectionClick(section)\">{{ section.buttonSectionLabel }}</button>\r\n        }\r\n      </div>\r\n    </div>\r\n    }\r\n\r\n    <div class=\"side-card-actions\">\r\n      @if (showBtnPrimary) {\r\n      <button class=\"btn-primary\" (click)=\"onButtonClick('primary')\">{{ primaryButtonLabel }}</button>\r\n      }\r\n      @if (showBtnSecondary) {\r\n      <button class=\"btn-secondary\" (click)=\"onButtonClick('secondary')\">{{ secondaryButtonLabel }}</button>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>", styles: [".side-card-wrapper{position:relative;width:100%;height:100%}.side-card{width:300px;max-width:340px;min-width:240px;height:auto;max-height:90vh;background:#ebe8d6b0;border-radius:8px;padding:16px;font-size:16px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 4px 12px #00000026;z-index:10;overflow-y:auto;display:flex;flex-direction:column;gap:16px;box-sizing:border-box}.side-card.floating{position:absolute;top:16px;right:16px}.button-group{display:flex;gap:8px;justify-content:center;margin-bottom:12px}.btn-type{flex:1;padding:10px 12px;background-color:transparent;color:#61661f;border:2px solid #61661f;border-radius:6px;font-size:13px;font-weight:500;cursor:pointer;text-transform:capitalize}.btn-type:hover{background-color:#dee58f;color:#61661f;border-color:#dee58f}.btn-type:active{background-color:#61661f;color:#fff;border-color:#61661f}.active{background-color:#596300;color:#fff;border-color:none}.input-field{width:100%;padding:10px 0;border:none;border-radius:6px;font-size:22px;background-color:transparent;transition:border-color .3s ease;box-sizing:border-box;text-transform:uppercase}.input-field:focus{outline:none}.input-field::placeholder{color:#1c1c12;transition:opacity .3s ease}.input-field:focus::placeholder{opacity:.3}.text-container{display:flex;gap:8px;align-items:center}.icon{color:#1c1c12;cursor:pointer}.status-chip{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.375rem .75rem;border-radius:6px;font-size:1.2rem;font-weight:600;white-space:nowrap;text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box;cursor:pointer;margin-bottom:12px}.status-chip--disabled{pointer-events:none;cursor:default}.status-chip-active{background-color:#78db5c;color:#0f5e00}.status-chip-active:hover{background-color:#9be786}.status-chip-inactive{background-color:#a60321;color:#fafae8}.status-chip-inactive:hover{background-color:#c06576}.icon:hover{color:#61661f}.element-section{display:flex;flex-direction:column;gap:8px}.element-section h3{margin:0;font-size:22px;font-weight:500;color:#1c1c12;text-transform:uppercase}.element-content{display:flex;flex-direction:column;gap:10px;padding:10px 0;background-color:transparent}.element-item{display:flex;justify-content:space-between}.element-item .label{font-size:14px;color:#454733;font-weight:500;text-transform:uppercase}.element-item .value{font-size:14px;color:#454733;font-weight:500}.slider-section{display:flex;flex-direction:column;gap:8px}.slider{width:100%;height:6px;border-radius:3px;outline:none;-webkit-appearance:none;appearance:none;cursor:pointer;padding:8px 0;background:transparent}.slider::-webkit-slider-runnable-track{width:100%;height:6px;background:linear-gradient(to right,#596300 0%,#596300 var(--slider-value, 0%),#59630023 var(--slider-value, 0%),#59630023 100%);border-radius:3px}.slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background-color:#596300;cursor:pointer;box-shadow:0 2px 4px #0000004d;margin-top:-5px}.slider::-moz-range-track{background:transparent;border:none}.slider::-moz-range-progress{background-color:#596300;height:6px;border-radius:3px}.slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background-color:#596300;cursor:pointer;border:none;box-shadow:0 2px 4px #0003}.btn-assign,.btn-primary,.btn-secondary{padding:14px 24px;background-color:#596300;color:#fff;border:none;border-radius:36px;font-size:14px;font-weight:500;cursor:pointer;width:100%;text-transform:uppercase}.btn-assign{color:#596300;background-color:#dee58f}.btn-assign:hover,.btn-primary:hover{color:#fff;background-color:#7cb342}.btn-assign:active,.btn-primary:active{color:#fff;background-color:#61661f}.side-card-actions{display:flex;flex-direction:column;gap:12px;margin-top:auto}.btn-secondary{background-color:transparent;border:1px solid #61661f;color:#61661f}.btn-secondary:hover{color:#fff;background-color:#7cb342;border-color:#7cb342}.btn-secondary:active{color:#fff;background-color:#61661f;border-color:#61661f}.side-card.compact{font-size:13px;padding:12px;gap:10px}.side-card.compact *{margin-bottom:0}.side-card.compact{gap:10px}.side-card.compact .element-section,.side-card.compact .element-content,.side-card.compact .slider-section{gap:6px}.side-card.compact .title{font-size:1.4rem;line-height:1.2}.side-card.compact .subtitle{font-size:1.1rem}.side-card.compact .icon{width:22px;height:22px}.side-card.compact svg.icon{width:22px;height:22px}.side-card.compact h3{font-size:1.2rem}.side-card.compact .label,.side-card.compact .value{font-size:1.1rem}.side-card.compact .status-chip{font-size:.9rem;padding:.25rem .5rem;margin-bottom:6px}.side-card.compact .btn-primary,.side-card.compact .btn-secondary,.side-card.compact .btn-assign{padding:8px 14px;font-size:12px;border-radius:20px}.side-card.compact .slider{height:3px;padding:4px 0}.side-card.compact .slider::-webkit-slider-thumb{width:12px;height:12px}.side-card.compact .element-header{gap:8px}.side-card.compact .right-icons{gap:4px}.side-card.compact{max-width:280px;max-height:420px;overflow-y:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SideCard, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-side-card', imports: [CommonModule], template: "<div #SideCard class=\"side-card-wrapper\">\r\n  <div class=\"side-card\" [class.floating]=\"isFloating\" [class.compact]=\"isCompact\">\r\n    <div class=\"element-header\">\r\n      @if (modeSideCard === 'create' && showTypeSelector) {\r\n      <div class=\"button-group\">\r\n        <button class=\"btn-type\" [class.active]=\"selectedType === 'radial'\" (click)=\"selectType('radial')\">\r\n          Radial\r\n        </button>\r\n        <button class=\"btn-type\" [class.active]=\"selectedType === 'poligonal'\" (click)=\"selectType('poligonal')\">\r\n          Poligonal\r\n        </button>\r\n      </div>\r\n      }\r\n\r\n      <div class=\"text-container\">\r\n        <input #inputRef type=\"text\" class=\"input-field\" [placeholder]=\"placeholder\" [value]=\"value\"\r\n          (input)=\"onInput($event)\" />\r\n        @if(modeSideCard === 'create' || modeSideCard === 'edit'){\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n          stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n          class=\"icon icon-tabler icons-tabler-outline icon-tabler-edit\" (click)=\"focusInput(inputRef)\">\r\n          <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n          <path d=\"M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1\" />\r\n          <path d=\"M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415\" />\r\n          <path d=\"M16 5l3 3\" />\r\n        </svg>\r\n        } @else {\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n          stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n          class=\"icon icon-tabler icons-tabler-outline icon-tabler-settings\" (click)=\"buttonClickIcon()\">\r\n          <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n          <path\r\n            d=\"M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065\" />\r\n          <path d=\"M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0\" />\r\n        </svg>\r\n        }\r\n      </div>\r\n\r\n      @if(modeSideCard === 'edit' || modeSideCard === 'info'){\r\n      <span #statusChip class=\"status-chip\" [ngClass]=\"statusClass\" (click)=\"changeStatusLabel()\">\r\n        {{ statusLabel }}\r\n      </span>\r\n      }\r\n    </div>\r\n    @for (section of sections; track section.title) {\r\n    <div class=\"element-section\">\r\n      <h3>{{ section.title }}</h3>\r\n\r\n      <div class=\"element-content\">\r\n        @if (section.items?.length) { @for (item of section.items; track\r\n        item.label) {\r\n        <div class=\"element-item\">\r\n          <span class=\"label\">{{ item.label }}</span>\r\n          <span class=\"value\">{{ item.value }}</span>\r\n        </div>\r\n        } } @if (section.showSlider) {\r\n        <div class=\"element-item\">\r\n          <span class=\"label\">{{ sliderLabel }}</span>\r\n          <span class=\"value\">{{ sliderValue }} {{ sliderUnit }}</span>\r\n        </div>\r\n        @if (modeSideCard !== 'info') {\r\n        <input type=\"range\" class=\"slider\" [min]=\"min\" [max]=\"max\" [value]=\"sliderValue\"\r\n          [style.--slider-value]=\"sliderPercentage\" (input)=\"onSliderChange($event)\" />\r\n        }} @if (section.buttonSectionLabel && modeSideCard !== 'info') {\r\n        <button class=\"btn-assign\" (click)=\"onButtonSectionClick(section)\">{{ section.buttonSectionLabel }}</button>\r\n        }\r\n      </div>\r\n    </div>\r\n    }\r\n\r\n    <div class=\"side-card-actions\">\r\n      @if (showBtnPrimary) {\r\n      <button class=\"btn-primary\" (click)=\"onButtonClick('primary')\">{{ primaryButtonLabel }}</button>\r\n      }\r\n      @if (showBtnSecondary) {\r\n      <button class=\"btn-secondary\" (click)=\"onButtonClick('secondary')\">{{ secondaryButtonLabel }}</button>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>", styles: [".side-card-wrapper{position:relative;width:100%;height:100%}.side-card{width:300px;max-width:340px;min-width:240px;height:auto;max-height:90vh;background:#ebe8d6b0;border-radius:8px;padding:16px;font-size:16px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 4px 12px #00000026;z-index:10;overflow-y:auto;display:flex;flex-direction:column;gap:16px;box-sizing:border-box}.side-card.floating{position:absolute;top:16px;right:16px}.button-group{display:flex;gap:8px;justify-content:center;margin-bottom:12px}.btn-type{flex:1;padding:10px 12px;background-color:transparent;color:#61661f;border:2px solid #61661f;border-radius:6px;font-size:13px;font-weight:500;cursor:pointer;text-transform:capitalize}.btn-type:hover{background-color:#dee58f;color:#61661f;border:none}.btn-type:active{background-color:#61661f;color:#fff;border-color:none}.active{background-color:#596300;color:#fff;border-color:none}.input-field{width:100%;padding:10px 0;border:none;border-radius:6px;font-size:22px;background-color:transparent;transition:border-color .3s ease;box-sizing:border-box;text-transform:uppercase}.input-field:focus{outline:none}.input-field::placeholder{color:#1c1c12;transition:opacity .3s ease}.input-field:focus::placeholder{opacity:.3}.text-container{display:flex;gap:8px;align-items:center}.icon{color:#1c1c12;cursor:pointer}.status-chip{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.375rem .75rem;border-radius:6px;font-size:1.2rem;font-weight:600;white-space:nowrap;text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box;cursor:pointer;margin-bottom:12px}.status-chip-active{background-color:#78db5c;color:#0f5e00}.status-chip-active:hover{background-color:#9be786}.status-chip-inactive{background-color:#a60321;color:#fafae8}.status-chip-inactive:hover{background-color:#c06576}.icon:hover{color:#61661f}.element-section{display:flex;flex-direction:column;gap:8px}.element-section h3{margin:0;font-size:22px;font-weight:500;color:#1c1c12;text-transform:uppercase}.element-content{display:flex;flex-direction:column;gap:10px;padding:10px 0;background-color:transparent}.element-item{display:flex;justify-content:space-between}.element-item .label{font-size:14px;color:#454733;font-weight:500;text-transform:uppercase}.element-item .value{font-size:14px;color:#454733;font-weight:500}.slider-section{display:flex;flex-direction:column;gap:8px}.slider{width:100%;height:6px;border-radius:3px;outline:none;-webkit-appearance:none;appearance:none;cursor:pointer;padding:8px 0;background:transparent}.slider::-webkit-slider-runnable-track{width:100%;height:6px;background:linear-gradient(to right,#596300 0%,#596300 var(--slider-value, 0%),#59630023 var(--slider-value, 0%),#59630023 100%);border-radius:3px}.slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background-color:#596300;cursor:pointer;box-shadow:0 2px 4px #0000004d;margin-top:-5px}.slider::-moz-range-track{background:transparent;border:none}.slider::-moz-range-progress{background-color:#596300;height:6px;border-radius:3px}.slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background-color:#596300;cursor:pointer;border:none;box-shadow:0 2px 4px #0003}.btn-assign,.btn-primary,.btn-secondary{padding:14px 24px;background-color:#596300;color:#fff;border:none;border-radius:36px;font-size:14px;font-weight:500;cursor:pointer;width:100%;text-transform:uppercase}.btn-assign{color:#596300;background-color:#dee58f}.btn-assign:hover,.btn-primary:hover{color:#fff;background-color:#7cb342}.btn-assign:active,.btn-primary:active{color:#fff;background-color:#61661f}.side-card-actions{display:flex;flex-direction:column;gap:12px;margin-top:auto}.btn-secondary{background-color:transparent;border:1px solid #61661f;color:#61661f}.btn-secondary:hover{color:#fff;background-color:#7cb342;border-color:#7cb342}.btn-secondary:active{color:#fff;background-color:#61661f;border-color:#61661f}.side-card.compact{font-size:13px;padding:12px;gap:10px}.side-card.compact *{margin-bottom:0}.side-card.compact{gap:10px}.side-card.compact .element-section,.side-card.compact .element-content,.side-card.compact .slider-section{gap:6px}.side-card.compact .title{font-size:1.4rem;line-height:1.2}.side-card.compact .subtitle{font-size:1.1rem}.side-card.compact .icon{width:22px;height:22px}.side-card.compact svg.icon{width:22px;height:22px}.side-card.compact h3{font-size:1.2rem}.side-card.compact .label,.side-card.compact .value{font-size:1.1rem}.side-card.compact .status-chip{font-size:.9rem;padding:.25rem .5rem;margin-bottom:6px}.side-card.compact .btn-primary,.side-card.compact .btn-secondary,.side-card.compact .btn-assign{padding:8px 14px;font-size:12px;border-radius:20px}.side-card.compact .slider{height:3px;padding:4px 0}.side-card.compact .slider::-webkit-slider-thumb{width:12px;height:12px}.side-card.compact .element-header{gap:8px}.side-card.compact .right-icons{gap:4px}.side-card.compact{max-width:280px;max-height:420px;overflow-y:auto}\n"] }]
+            args: [{ selector: 'lib-side-card', imports: [CommonModule], template: "<div #SideCard class=\"side-card-wrapper\">\r\n  <div class=\"side-card\" [class.floating]=\"isFloating\" [class.compact]=\"isCompact\">\r\n    <div class=\"element-header\">\r\n      @if (modeSideCard === 'create' && showTypeSelector) {\r\n      <div class=\"button-group\">\r\n        <button class=\"btn-type\" [class.active]=\"selectedType === 'radial'\" (click)=\"selectType('radial')\">\r\n          Radial\r\n        </button>\r\n        <button class=\"btn-type\" [class.active]=\"selectedType === 'poligonal'\" (click)=\"selectType('poligonal')\">\r\n          Poligonal\r\n        </button>\r\n      </div>\r\n      }\r\n      <div class=\"text-container\">\r\n        <input #inputRef type=\"text\" class=\"input-field\" [placeholder]=\"placeholder\" [value]=\"value\"\r\n          (input)=\"onInput($event)\" [disabled]=\"modeSideCard === 'info'\" />\r\n        @if(modeSideCard === 'create' || modeSideCard === 'edit'){\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n          stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n          class=\"icon icon-tabler icons-tabler-outline icon-tabler-edit\" (click)=\"focusInput(inputRef)\">\r\n          <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n          <path d=\"M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1\" />\r\n          <path d=\"M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415\" />\r\n          <path d=\"M16 5l3 3\" />\r\n        </svg>\r\n        } @else {\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n          stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n          class=\"icon icon-tabler icons-tabler-outline icon-tabler-settings\" (click)=\"buttonClickIcon()\">\r\n          <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n          <path\r\n            d=\"M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065\" />\r\n          <path d=\"M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0\" />\r\n        </svg>\r\n        }\r\n      </div>\r\n\r\n      @if(modeSideCard === 'edit' || modeSideCard === 'info'){\r\n      <span #statusChip class=\"status-chip\" [class.status-chip--disabled]=\"modeSideCard === 'info'\" [ngClass]=\"statusClass\" (click)=\"changeStatusLabel()\">\r\n        {{ statusLabel }}\r\n      </span>\r\n      }\r\n    </div>\r\n    @for (section of sections; track section.title) {\r\n    <div class=\"element-section\">\r\n      <h3>{{ section.title }}</h3>\r\n\r\n      <div class=\"element-content\">\r\n        @if (section.items?.length) { @for (item of section.items; track\r\n        item.label) {\r\n        <div class=\"element-item\">\r\n          <span class=\"label\">{{ item.label }}</span>\r\n          <span class=\"value\">{{ item.value }}</span>\r\n        </div>\r\n        } } @if (section.showSlider) {\r\n        <div class=\"element-item\">\r\n          <span class=\"label\">{{ sliderLabel }}</span>\r\n          <span class=\"value\">{{ sliderValue }} {{ sliderUnit }}</span>\r\n        </div>\r\n        @if (modeSideCard !== 'info') {\r\n        <input type=\"range\" class=\"slider\" [min]=\"min\" [max]=\"max\" [value]=\"sliderValue\"\r\n          [style.--slider-value]=\"sliderPercentage\" (input)=\"onSliderChange($event)\" />\r\n        }} @if (section.buttonSectionLabel && modeSideCard !== 'info') {\r\n        <button class=\"btn-assign\" (click)=\"onButtonSectionClick(section)\">{{ section.buttonSectionLabel }}</button>\r\n        }\r\n      </div>\r\n    </div>\r\n    }\r\n\r\n    <div class=\"side-card-actions\">\r\n      @if (showBtnPrimary) {\r\n      <button class=\"btn-primary\" (click)=\"onButtonClick('primary')\">{{ primaryButtonLabel }}</button>\r\n      }\r\n      @if (showBtnSecondary) {\r\n      <button class=\"btn-secondary\" (click)=\"onButtonClick('secondary')\">{{ secondaryButtonLabel }}</button>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>", styles: [".side-card-wrapper{position:relative;width:100%;height:100%}.side-card{width:300px;max-width:340px;min-width:240px;height:auto;max-height:90vh;background:#ebe8d6b0;border-radius:8px;padding:16px;font-size:16px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 4px 12px #00000026;z-index:10;overflow-y:auto;display:flex;flex-direction:column;gap:16px;box-sizing:border-box}.side-card.floating{position:absolute;top:16px;right:16px}.button-group{display:flex;gap:8px;justify-content:center;margin-bottom:12px}.btn-type{flex:1;padding:10px 12px;background-color:transparent;color:#61661f;border:2px solid #61661f;border-radius:6px;font-size:13px;font-weight:500;cursor:pointer;text-transform:capitalize}.btn-type:hover{background-color:#dee58f;color:#61661f;border-color:#dee58f}.btn-type:active{background-color:#61661f;color:#fff;border-color:#61661f}.active{background-color:#596300;color:#fff;border-color:none}.input-field{width:100%;padding:10px 0;border:none;border-radius:6px;font-size:22px;background-color:transparent;transition:border-color .3s ease;box-sizing:border-box;text-transform:uppercase}.input-field:focus{outline:none}.input-field::placeholder{color:#1c1c12;transition:opacity .3s ease}.input-field:focus::placeholder{opacity:.3}.text-container{display:flex;gap:8px;align-items:center}.icon{color:#1c1c12;cursor:pointer}.status-chip{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.375rem .75rem;border-radius:6px;font-size:1.2rem;font-weight:600;white-space:nowrap;text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box;cursor:pointer;margin-bottom:12px}.status-chip--disabled{pointer-events:none;cursor:default}.status-chip-active{background-color:#78db5c;color:#0f5e00}.status-chip-active:hover{background-color:#9be786}.status-chip-inactive{background-color:#a60321;color:#fafae8}.status-chip-inactive:hover{background-color:#c06576}.icon:hover{color:#61661f}.element-section{display:flex;flex-direction:column;gap:8px}.element-section h3{margin:0;font-size:22px;font-weight:500;color:#1c1c12;text-transform:uppercase}.element-content{display:flex;flex-direction:column;gap:10px;padding:10px 0;background-color:transparent}.element-item{display:flex;justify-content:space-between}.element-item .label{font-size:14px;color:#454733;font-weight:500;text-transform:uppercase}.element-item .value{font-size:14px;color:#454733;font-weight:500}.slider-section{display:flex;flex-direction:column;gap:8px}.slider{width:100%;height:6px;border-radius:3px;outline:none;-webkit-appearance:none;appearance:none;cursor:pointer;padding:8px 0;background:transparent}.slider::-webkit-slider-runnable-track{width:100%;height:6px;background:linear-gradient(to right,#596300 0%,#596300 var(--slider-value, 0%),#59630023 var(--slider-value, 0%),#59630023 100%);border-radius:3px}.slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background-color:#596300;cursor:pointer;box-shadow:0 2px 4px #0000004d;margin-top:-5px}.slider::-moz-range-track{background:transparent;border:none}.slider::-moz-range-progress{background-color:#596300;height:6px;border-radius:3px}.slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background-color:#596300;cursor:pointer;border:none;box-shadow:0 2px 4px #0003}.btn-assign,.btn-primary,.btn-secondary{padding:14px 24px;background-color:#596300;color:#fff;border:none;border-radius:36px;font-size:14px;font-weight:500;cursor:pointer;width:100%;text-transform:uppercase}.btn-assign{color:#596300;background-color:#dee58f}.btn-assign:hover,.btn-primary:hover{color:#fff;background-color:#7cb342}.btn-assign:active,.btn-primary:active{color:#fff;background-color:#61661f}.side-card-actions{display:flex;flex-direction:column;gap:12px;margin-top:auto}.btn-secondary{background-color:transparent;border:1px solid #61661f;color:#61661f}.btn-secondary:hover{color:#fff;background-color:#7cb342;border-color:#7cb342}.btn-secondary:active{color:#fff;background-color:#61661f;border-color:#61661f}.side-card.compact{font-size:13px;padding:12px;gap:10px}.side-card.compact *{margin-bottom:0}.side-card.compact{gap:10px}.side-card.compact .element-section,.side-card.compact .element-content,.side-card.compact .slider-section{gap:6px}.side-card.compact .title{font-size:1.4rem;line-height:1.2}.side-card.compact .subtitle{font-size:1.1rem}.side-card.compact .icon{width:22px;height:22px}.side-card.compact svg.icon{width:22px;height:22px}.side-card.compact h3{font-size:1.2rem}.side-card.compact .label,.side-card.compact .value{font-size:1.1rem}.side-card.compact .status-chip{font-size:.9rem;padding:.25rem .5rem;margin-bottom:6px}.side-card.compact .btn-primary,.side-card.compact .btn-secondary,.side-card.compact .btn-assign{padding:8px 14px;font-size:12px;border-radius:20px}.side-card.compact .slider{height:3px;padding:4px 0}.side-card.compact .slider::-webkit-slider-thumb{width:12px;height:12px}.side-card.compact .element-header{gap:8px}.side-card.compact .right-icons{gap:4px}.side-card.compact{max-width:280px;max-height:420px;overflow-y:auto}\n"] }]
         }], propDecorators: { wrapper: [{
                 type: ViewChild,
                 args: ['SideCard', { static: true }]
@@ -2557,12 +2585,63 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Output
             }] } });
 
+class NotificationModal {
+    messageInput;
+    mode = 'list';
+    titulo = 'Notificar a este Agente';
+    buttonClick = new EventEmitter();
+    itemLabel = '¡URGENTE!';
+    btnLabel = 'Personalizado';
+    defaultMessages = [
+        '¡URGENTE!',
+        '¡ALERTA!',
+        '¡EMERGENCIA!'
+    ];
+    messageValue = '';
+    selectDefaultMessage(message) {
+        this.messageValue = message;
+        this.mode = 'edit';
+        setTimeout(() => {
+            this.messageInput?.nativeElement.focus();
+            this.messageInput?.nativeElement.setSelectionRange(this.messageValue.length, this.messageValue.length);
+        });
+    }
+    customMessage() {
+        this.messageValue = '';
+        this.mode = 'edit';
+        setTimeout(() => {
+            this.messageInput?.nativeElement.focus();
+        });
+    }
+    btnClick() {
+        this.buttonClick.emit();
+    }
+    backToList() {
+        this.mode = 'list';
+        this.messageValue = '';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: NotificationModal, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: NotificationModal, isStandalone: true, selector: "lib-notification-modal", inputs: { titulo: "titulo" }, outputs: { buttonClick: "buttonClick" }, viewQueries: [{ propertyName: "messageInput", first: true, predicate: ["messageInput"], descendants: true }], ngImport: i0, template: "<div class=\"notification-modal-container\">\r\n    <div class=\"notification-modal-header\">\r\n        <h3>{{ titulo }}</h3>\r\n    </div>\r\n    <div class=\"notification-modal-body\">\r\n        <!-- LISTA DE MENSAJES -->\r\n        @if (mode === 'list') {\r\n        <div class=\"default-message-list\">\r\n            @for (msg of defaultMessages; track msg) {\r\n            <div class=\"default-message-item\" (click)=\"selectDefaultMessage(msg)\">\r\n                <span>{{ msg }}</span>\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\" stroke=\"currentColor\"\r\n                    stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\r\n                    class=\"icon icon-tabler icons-tabler-outline icon-tabler-send-2\" viewBox=\"0 0 24 24\">\r\n                    <path fill=\"none\" stroke=\"none\" d=\"M0 0h24v24H0z\" />\r\n                    <path\r\n                        d=\"M4.698 4.034 21 12 4.698 19.966a.5.5 0 0 1-.546-.124.56.56 0 0 1-.12-.568L6.5 12 4.032 4.726a.56.56 0 0 1 .12-.568.5.5 0 0 1 .546-.124M6.5 12H21\" />\r\n                </svg>\r\n            </div>\r\n            }\r\n        </div>\r\n        }\r\n\r\n        <!-- EDICI\u00D3N -->\r\n        @if (mode === 'edit') {\r\n        <div class=\"text-area-wrapper\">\r\n            <textarea #messageInput class=\"message-textarea\" rows=\"5\" placeholder=\"Mensaje...\">{{messageValue}}</textarea>\r\n        </div>\r\n        }\r\n\r\n    </div>\r\n\r\n    <div class=\"notification-modal-actions\">\r\n        @if (mode === 'edit') {\r\n        <button class=\"btn-back\" (click)=\"backToList()\">\r\n            Volver\r\n        </button>\r\n        <button class=\"btn-custom\" (click)=\"btnClick()\">\r\n            Notificar\r\n        </button>\r\n        } @else {\r\n        <button class=\"btn-custom\" (click)=\"customMessage()\">\r\n            Personalizado\r\n        </button>\r\n        }\r\n    </div>\r\n</div>", styles: [".notification-modal-container{width:100%;min-width:300px;max-width:320px;display:flex;flex-direction:column;border-radius:12px;background-color:#f0f0db}.notification-modal-header{padding:16px}.notification-modal-header h3{font-size:1.6rem;font-weight:700;color:#454733;text-transform:uppercase}.notification-modal-body{display:flex;flex-direction:column;gap:12px;overflow:hidden;padding:0 6px}.notification-modal-actions{width:100%;display:flex;justify-content:flex-end;align-items:center;gap:16px;padding:16px}.default-message-item{display:flex;justify-content:space-between;align-items:center;padding:6px 10px;cursor:pointer;border-radius:6px}.default-message-item:hover{background:#dee58f}.default-message-item .span{font-size:1.4rem;color:#454733}.text-area-wrapper{position:relative;width:100%;padding:0 10px}.message-textarea{width:100%;resize:none;border-radius:6px;border:1px solid #787861;background:transparent;padding:6px 12px}button{border:none;background-color:transparent}.btn-custom,.btn-back{color:#596300;font-weight:500;font-size:1.4rem;padding:6px 12px;cursor:pointer;border-radius:50px}.btn-custom:hover{background-color:#596300;color:#f0f0db}.btn-back:hover{background-color:#dee58f;color:#596300}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: NotificationModal, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-notification-modal', imports: [CommonModule], template: "<div class=\"notification-modal-container\">\r\n    <div class=\"notification-modal-header\">\r\n        <h3>{{ titulo }}</h3>\r\n    </div>\r\n    <div class=\"notification-modal-body\">\r\n        <!-- LISTA DE MENSAJES -->\r\n        @if (mode === 'list') {\r\n        <div class=\"default-message-list\">\r\n            @for (msg of defaultMessages; track msg) {\r\n            <div class=\"default-message-item\" (click)=\"selectDefaultMessage(msg)\">\r\n                <span>{{ msg }}</span>\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\" stroke=\"currentColor\"\r\n                    stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\r\n                    class=\"icon icon-tabler icons-tabler-outline icon-tabler-send-2\" viewBox=\"0 0 24 24\">\r\n                    <path fill=\"none\" stroke=\"none\" d=\"M0 0h24v24H0z\" />\r\n                    <path\r\n                        d=\"M4.698 4.034 21 12 4.698 19.966a.5.5 0 0 1-.546-.124.56.56 0 0 1-.12-.568L6.5 12 4.032 4.726a.56.56 0 0 1 .12-.568.5.5 0 0 1 .546-.124M6.5 12H21\" />\r\n                </svg>\r\n            </div>\r\n            }\r\n        </div>\r\n        }\r\n\r\n        <!-- EDICI\u00D3N -->\r\n        @if (mode === 'edit') {\r\n        <div class=\"text-area-wrapper\">\r\n            <textarea #messageInput class=\"message-textarea\" rows=\"5\" placeholder=\"Mensaje...\">{{messageValue}}</textarea>\r\n        </div>\r\n        }\r\n\r\n    </div>\r\n\r\n    <div class=\"notification-modal-actions\">\r\n        @if (mode === 'edit') {\r\n        <button class=\"btn-back\" (click)=\"backToList()\">\r\n            Volver\r\n        </button>\r\n        <button class=\"btn-custom\" (click)=\"btnClick()\">\r\n            Notificar\r\n        </button>\r\n        } @else {\r\n        <button class=\"btn-custom\" (click)=\"customMessage()\">\r\n            Personalizado\r\n        </button>\r\n        }\r\n    </div>\r\n</div>", styles: [".notification-modal-container{width:100%;min-width:300px;max-width:320px;display:flex;flex-direction:column;border-radius:12px;background-color:#f0f0db}.notification-modal-header{padding:16px}.notification-modal-header h3{font-size:1.6rem;font-weight:700;color:#454733;text-transform:uppercase}.notification-modal-body{display:flex;flex-direction:column;gap:12px;overflow:hidden;padding:0 6px}.notification-modal-actions{width:100%;display:flex;justify-content:flex-end;align-items:center;gap:16px;padding:16px}.default-message-item{display:flex;justify-content:space-between;align-items:center;padding:6px 10px;cursor:pointer;border-radius:6px}.default-message-item:hover{background:#dee58f}.default-message-item .span{font-size:1.4rem;color:#454733}.text-area-wrapper{position:relative;width:100%;padding:0 10px}.message-textarea{width:100%;resize:none;border-radius:6px;border:1px solid #787861;background:transparent;padding:6px 12px}button{border:none;background-color:transparent}.btn-custom,.btn-back{color:#596300;font-weight:500;font-size:1.4rem;padding:6px 12px;cursor:pointer;border-radius:50px}.btn-custom:hover{background-color:#596300;color:#f0f0db}.btn-back:hover{background-color:#dee58f;color:#596300}\n"] }]
+        }], propDecorators: { messageInput: [{
+                type: ViewChild,
+                args: ['messageInput']
+            }], titulo: [{
+                type: Input$1
+            }], buttonClick: [{
+                type: Output
+            }] } });
+
 class SideCardDetail {
     wrapper;
     isFloating = true;
     isCompact = false;
     nowLabel = 'Ahora mismo';
     agoLabel = 'Hace';
+    showMessageModal = false;
     // Header
     title = 'Titulo';
     subtitle = 'Subtitulo';
@@ -2596,6 +2675,10 @@ class SideCardDetail {
             : 'status-chip-inactive';
     }
     buttonClickIcon(type) {
+        if (type === 'message') {
+            this.showMessageModal = !this.showMessageModal;
+            return;
+        }
         this.btnClickIcon.emit(type);
     }
     setTab(tab) {
@@ -2646,11 +2729,11 @@ class SideCardDetail {
                 height <= 460;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SideCardDetail, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: SideCardDetail, isStandalone: true, selector: "lib-side-card-detail", inputs: { isFloating: "isFloating", title: "title", subtitle: "subtitle", statusValue: "statusValue", sections: "sections" }, outputs: { btnClickIcon: "btnClickIcon", statusChange: "statusChange", tabChange: "tabChange" }, viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["SideCard"], descendants: true, static: true }], ngImport: i0, template: "<div #SideCard class=\"side-card-wrapper\">\r\n<div class=\"side-card\" [class.floating]=\"isFloating\" [class.compact]=\"isCompact\">\r\n  <div class=\"element-header\">\r\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n      stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n      class=\"icon icon-tabler icons-tabler-outline icon-tabler-arrow-left\" (click)=\"buttonClickIcon('back')\">\r\n      <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n      <path d=\"M5 12l12 0\" />\r\n      <path d=\"M5 12l4 5\" />\r\n      <path d=\"M5 12l4 -5\" />\r\n    </svg>\r\n\r\n    <div class=\"text-container\">\r\n      <span class=\"title\"> {{ title }} </span>\r\n      <span class=\"subtitle\"> {{ subtitle }} </span>\r\n      <div class=\"container-chip\">\r\n        <span #statusChip class=\"status-chip\" [ngClass]=\"statusClass\">\r\n          {{ statusLabel }}\r\n        </span>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"right-icons\">\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"currentColor\"\r\n        class=\"icon icon-tabler icons-tabler-filled icon-tabler-current-location\" (click)=\"buttonClickIcon('location')\">\r\n        <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n        <path\r\n          d=\"M12 1a1 1 0 0 1 1 1v1.055a9.004 9.004 0 0 1 7.946 7.945h1.054a1 1 0 0 1 0 2h-1.055a9.004 9.004 0 0 1 -7.944 7.945l-.001 1.055a1 1 0 0 1 -2 0v-1.055a9.004 9.004 0 0 1 -7.945 -7.944l-1.055 -.001a1 1 0 0 1 0 -2h1.055a9.004 9.004 0 0 1 7.945 -7.945v-1.055a1 1 0 0 1 1 -1m0 4a7 7 0 1 0 0 14a7 7 0 0 0 0 -14m0 3a4 4 0 1 1 -4 4l.005 -.2a4 4 0 0 1 3.995 -3.8\" />\r\n      </svg>\r\n\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n        class=\"icon icon-tabler icons-tabler-outline icon-tabler-message-circle\" (click)=\"buttonClickIcon('message')\">\r\n        <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n        <path\r\n          d=\"M3 20l1.3 -3.9c-2.324 -3.437 -1.426 -7.872 2.1 -10.374c3.526 -2.501 8.59 -2.296 11.845 .48c3.255 2.777 3.695 7.266 1.029 10.501c-2.666 3.235 -7.615 4.215 -11.574 2.293l-4.7 1\" />\r\n      </svg>\r\n    </div>\r\n  </div>\r\n  <div class=\"side-tabs\">\r\n    <div class=\"tab\" [class.active]=\"activeTab === 'principal'\" (click)=\"setTab('principal')\">\r\n      Principal\r\n    </div>\r\n\r\n    <div class=\"tab\" [class.active]=\"activeTab === 'historial'\" (click)=\"setTab('historial')\">\r\n      Historial\r\n    </div>\r\n\r\n    <div class=\"tab-indicator\" [style.left]=\"getIndicatorLeft()\"></div>\r\n  </div>\r\n\r\n  @for (section of sections; track section.title) {\r\n  <div class=\"element-section\">\r\n    <h3>{{ section.title }}</h3>\r\n\r\n    <div class=\"element-content\">\r\n      @if (section.items?.length) { @for (item of section.items; track\r\n      item.label) {\r\n      <div class=\"element-item\">\r\n        <span class=\"label\">{{ item.label }}</span>\r\n        <span class=\"value\">{{ isDateValue(item.value) ? getRelativeTime(item.value) : item.value }}</span>\r\n      </div>\r\n      } }\r\n    </div>\r\n  </div>\r\n  }\r\n</div>\r\n</div>", styles: [".side-card-wrapper{position:relative;width:100%;height:100%}.side-card{width:354px;max-width:368px;min-width:240px;height:auto;max-height:90vh;background:#ebe8d6b0;border-radius:8px;padding:16px;font-size:16px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 4px 12px #00000026;z-index:10;overflow-y:auto;display:flex;flex-direction:column;gap:16px;box-sizing:border-box}.side-card.floating{position:absolute;top:16px;right:16px}.button-group{display:flex;gap:8px;justify-content:center;margin-bottom:12px}.btn-type{flex:1;padding:10px 12px;background-color:transparent;color:#61661f;border:2px solid #61661f;border-radius:6px;font-size:13px;font-weight:500;cursor:pointer}.btn-type:hover{background-color:#dee58f;color:#61661f;border:none}.btn-type:active{background-color:#61661f;color:#fff;border-color:none}.active{background-color:#596300;color:#fff;border-color:none}.element-header{width:100%;display:flex;gap:12px}.text-container{flex:1;display:flex;flex-direction:column;gap:8px}.title{font-size:2rem;font-weight:700;text-transform:capitalize;max-lines:2}.subtitle{font-size:1.5rem;font-weight:300;color:#454733;text-transform:capitalize}.right-icons{display:flex;flex-direction:column;gap:8px}.icon{color:#1c1c1c;cursor:pointer}.icon.icon-tabler-current-location{color:#d3d936}.icon.icon-tabler-current-location:hover{color:#d3d93666}.status-chip{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.375rem .75rem;border-radius:6px;font-size:1.2rem;font-weight:600;white-space:nowrap;text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box;margin-bottom:12px}.status-chip-active{background-color:#78db5c;color:#0f5e00}.status-chip-inactive{background-color:#a60321;color:#fafae8}.icon:hover{color:#1c1c1c66}.side-tabs{position:relative;display:flex;width:100%;border-bottom:2px solid #C7C7AD;margin-bottom:8px}.tab{flex:1;text-align:center;padding:12px 0;font-size:1.4rem;font-weight:500;cursor:pointer;color:#454733;transition:color .3s ease;text-transform:uppercase}.tab.active{background-color:transparent;color:#596300;font-weight:600}.tab:hover{color:#6a7500}.tab-indicator{position:absolute;bottom:-2px;left:0;width:50%;height:4px;background-color:#596300;border-radius:4px 4px 0 0;transition:left .3s ease}.element-section{display:flex;flex-direction:column;gap:8px}.element-section h3{margin:0;font-size:1.6rem;font-weight:500;color:#1c1c12;text-transform:uppercase}.element-content{display:flex;flex-direction:column;gap:10px;padding:10px 0;background-color:transparent}.element-item{display:flex;justify-content:space-between}.element-item .label,.element-item .value{font-size:1.5rem;color:#454733;font-weight:300;text-transform:uppercase}.side-card.compact{font-size:13px;padding:12px;gap:10px}.side-card.compact *{margin-bottom:0}.side-card.compact{gap:10px}.side-card.compact .element-section,.side-card.compact .element-content{gap:6px}.side-card.compact .title{font-size:1.6rem;line-height:1.2}.side-card.compact .subtitle{font-size:1.3rem}.side-card.compact .icon{width:22px;height:22px}.side-card.compact svg.icon{width:22px;height:22px}.side-card.compact h3{font-size:1.2rem}.side-card.compact .label,.side-card.compact .value{font-size:1.1rem}.side-card.compact .status-chip{font-size:.9rem;padding:.5rem .8rem;margin-bottom:6px}.side-card.compact .tab{padding:8px 0;font-size:1.1rem}.side-card.compact .tab-indicator{height:3px}.side-card.compact .element-header{gap:8px}.side-card.compact .right-icons{gap:4px}.side-card.compact{max-width:312px;max-height:460px;overflow-y:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: SideCardDetail, isStandalone: true, selector: "lib-side-card-detail", inputs: { isFloating: "isFloating", title: "title", subtitle: "subtitle", statusValue: "statusValue", sections: "sections" }, outputs: { btnClickIcon: "btnClickIcon", statusChange: "statusChange", tabChange: "tabChange" }, viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["SideCard"], descendants: true, static: true }], ngImport: i0, template: "<div #SideCard class=\"side-card-wrapper\">\r\n  <div class=\"side-card\" [class.floating]=\"isFloating\" [class.compact]=\"isCompact\">\r\n    <div class=\"element-header\">\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n        class=\"icon icon-tabler icons-tabler-outline icon-tabler-arrow-left\" (click)=\"buttonClickIcon('back')\">\r\n        <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n        <path d=\"M5 12l12 0\" />\r\n        <path d=\"M5 12l4 5\" />\r\n        <path d=\"M5 12l4 -5\" />\r\n      </svg>\r\n\r\n      <div class=\"text-container\">\r\n        <span class=\"title\"> {{ title }} </span>\r\n        <span class=\"subtitle\"> {{ subtitle }} </span>\r\n        <div class=\"container-chip\">\r\n          <span #statusChip class=\"status-chip\" [ngClass]=\"statusClass\">\r\n            {{ statusLabel }}\r\n          </span>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"right-icons\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"currentColor\"\r\n          class=\"icon icon-tabler icons-tabler-filled icon-tabler-current-location\"\r\n          (click)=\"buttonClickIcon('location')\">\r\n          <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n          <path\r\n            d=\"M12 1a1 1 0 0 1 1 1v1.055a9.004 9.004 0 0 1 7.946 7.945h1.054a1 1 0 0 1 0 2h-1.055a9.004 9.004 0 0 1 -7.944 7.945l-.001 1.055a1 1 0 0 1 -2 0v-1.055a9.004 9.004 0 0 1 -7.945 -7.944l-1.055 -.001a1 1 0 0 1 0 -2h1.055a9.004 9.004 0 0 1 7.945 -7.945v-1.055a1 1 0 0 1 1 -1m0 4a7 7 0 1 0 0 14a7 7 0 0 0 0 -14m0 3a4 4 0 1 1 -4 4l.005 -.2a4 4 0 0 1 3.995 -3.8\" />\r\n        </svg>\r\n\r\n        <!-- message + modal -->\r\n        <div class=\"message-icon-wrapper\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n            stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n            class=\"icon icon-tabler icons-tabler-outline icon-tabler-message-circle\"\r\n            (click)=\"buttonClickIcon('message')\">\r\n            <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n            <path\r\n              d=\"M3 20l1.3 -3.9c-2.324 -3.437 -1.426 -7.872 2.1 -10.374c3.526 -2.501 8.59 -2.296 11.845 .48c3.255 2.777 3.695 7.266 1.029 10.501c-2.666 3.235 -7.615 4.215 -11.574 2.293l-4.7 1\" />\r\n          </svg>\r\n\r\n          @if (showMessageModal) {\r\n          <div class=\"message-modal-anchor\">\r\n            <lib-notification-modal />\r\n          </div>\r\n          }\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"side-tabs\">\r\n      <div class=\"tab\" [class.active]=\"activeTab === 'principal'\" (click)=\"setTab('principal')\">\r\n        Principal\r\n      </div>\r\n\r\n      <div class=\"tab\" [class.active]=\"activeTab === 'historial'\" (click)=\"setTab('historial')\">\r\n        Historial\r\n      </div>\r\n\r\n      <div class=\"tab-indicator\" [style.left]=\"getIndicatorLeft()\"></div>\r\n    </div>\r\n\r\n    @for (section of sections; track section.title) {\r\n    <div class=\"element-section\">\r\n      <h3>{{ section.title }}</h3>\r\n\r\n      <div class=\"element-content\">\r\n        @if (section.items?.length) { @for (item of section.items; track\r\n        item.label) {\r\n        <div class=\"element-item\">\r\n          <span class=\"label\">{{ item.label }}</span>\r\n          <span class=\"value\">{{ isDateValue(item.value) ? getRelativeTime(item.value) : item.value }}</span>\r\n        </div>\r\n        } }\r\n      </div>\r\n    </div>\r\n    }\r\n  </div>\r\n</div>", styles: [".side-card-wrapper{position:relative;width:100%;height:100%}.side-card{width:354px;max-width:368px;min-width:240px;height:auto;max-height:90vh;background:#ebe8d6b0;border-radius:8px;padding:16px;font-size:16px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 4px 12px #00000026;z-index:10;overflow-y:auto;display:flex;flex-direction:column;gap:16px;box-sizing:border-box}.side-card.floating{position:absolute;top:16px;right:16px}.button-group{display:flex;gap:8px;justify-content:center;margin-bottom:12px}.btn-type{flex:1;padding:10px 12px;background-color:transparent;color:#61661f;border:2px solid #61661f;border-radius:6px;font-size:13px;font-weight:500;cursor:pointer}.btn-type:hover{background-color:#dee58f;color:#61661f;border:none}.btn-type:active{background-color:#61661f;color:#fff;border-color:none}.active{background-color:#596300;color:#fff;border-color:none}.element-header{width:100%;display:flex;gap:12px}.text-container{flex:1;display:flex;flex-direction:column;gap:8px}.title{font-size:2rem;font-weight:700;text-transform:capitalize;max-lines:2}.subtitle{font-size:1.5rem;font-weight:300;color:#454733;text-transform:capitalize}.right-icons{display:flex;flex-direction:column;gap:8px}.icon{color:#1c1c1c;cursor:pointer}.icon.icon-tabler-current-location{color:#d3d936}.icon.icon-tabler-current-location:hover{color:#d3d93666}.status-chip{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.375rem .75rem;border-radius:6px;font-size:1.2rem;font-weight:600;white-space:nowrap;text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box;margin-bottom:12px}.status-chip-active{background-color:#78db5c;color:#0f5e00}.status-chip-inactive{background-color:#a60321;color:#fafae8}.icon:hover{color:#1c1c1c66}.side-tabs{position:relative;display:flex;width:100%;border-bottom:2px solid #C7C7AD;margin-bottom:8px}.tab{flex:1;text-align:center;padding:12px 0;font-size:1.4rem;font-weight:500;cursor:pointer;color:#454733;transition:color .3s ease;text-transform:uppercase}.tab.active{background-color:transparent;color:#596300;font-weight:600}.tab:hover{color:#6a7500}.tab-indicator{position:absolute;bottom:-2px;left:0;width:50%;height:4px;background-color:#596300;border-radius:4px 4px 0 0;transition:left .3s ease}.element-section{display:flex;flex-direction:column;gap:8px}.element-section h3{margin:0;font-size:1.6rem;font-weight:500;color:#1c1c12;text-transform:uppercase}.element-content{display:flex;flex-direction:column;gap:10px;padding:10px 0;background-color:transparent}.element-item{display:flex;justify-content:space-between}.element-item .label,.element-item .value{font-size:1.5rem;color:#454733;font-weight:300;text-transform:uppercase}.side-card.compact{font-size:13px;padding:12px;gap:10px}.side-card.compact *{margin-bottom:0}.side-card.compact{gap:10px}.side-card.compact .element-section,.side-card.compact .element-content{gap:6px}.side-card.compact .title{font-size:1.6rem;line-height:1.2}.side-card.compact .subtitle{font-size:1.3rem}.side-card.compact .icon{width:22px;height:22px}.side-card.compact svg.icon{width:22px;height:22px}.side-card.compact h3{font-size:1.2rem}.side-card.compact .label,.side-card.compact .value{font-size:1.1rem}.side-card.compact .status-chip{font-size:.9rem;padding:.5rem .8rem;margin-bottom:6px}.side-card.compact .tab{padding:8px 0;font-size:1.1rem}.side-card.compact .tab-indicator{height:3px}.side-card.compact .element-header{gap:8px}.side-card.compact .right-icons{gap:4px}.side-card.compact{max-width:312px;max-height:460px;overflow-y:auto}.side-card.floating.compact{top:9px;right:9px}.message-icon-wrapper{position:relative;display:inline-flex}.message-modal-anchor{position:absolute;top:36px;right:0;z-index:20}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: NotificationModal, selector: "lib-notification-modal", inputs: ["titulo"], outputs: ["buttonClick"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SideCardDetail, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-side-card-detail', imports: [CommonModule], template: "<div #SideCard class=\"side-card-wrapper\">\r\n<div class=\"side-card\" [class.floating]=\"isFloating\" [class.compact]=\"isCompact\">\r\n  <div class=\"element-header\">\r\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n      stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n      class=\"icon icon-tabler icons-tabler-outline icon-tabler-arrow-left\" (click)=\"buttonClickIcon('back')\">\r\n      <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n      <path d=\"M5 12l12 0\" />\r\n      <path d=\"M5 12l4 5\" />\r\n      <path d=\"M5 12l4 -5\" />\r\n    </svg>\r\n\r\n    <div class=\"text-container\">\r\n      <span class=\"title\"> {{ title }} </span>\r\n      <span class=\"subtitle\"> {{ subtitle }} </span>\r\n      <div class=\"container-chip\">\r\n        <span #statusChip class=\"status-chip\" [ngClass]=\"statusClass\">\r\n          {{ statusLabel }}\r\n        </span>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"right-icons\">\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"currentColor\"\r\n        class=\"icon icon-tabler icons-tabler-filled icon-tabler-current-location\" (click)=\"buttonClickIcon('location')\">\r\n        <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n        <path\r\n          d=\"M12 1a1 1 0 0 1 1 1v1.055a9.004 9.004 0 0 1 7.946 7.945h1.054a1 1 0 0 1 0 2h-1.055a9.004 9.004 0 0 1 -7.944 7.945l-.001 1.055a1 1 0 0 1 -2 0v-1.055a9.004 9.004 0 0 1 -7.945 -7.944l-1.055 -.001a1 1 0 0 1 0 -2h1.055a9.004 9.004 0 0 1 7.945 -7.945v-1.055a1 1 0 0 1 1 -1m0 4a7 7 0 1 0 0 14a7 7 0 0 0 0 -14m0 3a4 4 0 1 1 -4 4l.005 -.2a4 4 0 0 1 3.995 -3.8\" />\r\n      </svg>\r\n\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n        class=\"icon icon-tabler icons-tabler-outline icon-tabler-message-circle\" (click)=\"buttonClickIcon('message')\">\r\n        <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n        <path\r\n          d=\"M3 20l1.3 -3.9c-2.324 -3.437 -1.426 -7.872 2.1 -10.374c3.526 -2.501 8.59 -2.296 11.845 .48c3.255 2.777 3.695 7.266 1.029 10.501c-2.666 3.235 -7.615 4.215 -11.574 2.293l-4.7 1\" />\r\n      </svg>\r\n    </div>\r\n  </div>\r\n  <div class=\"side-tabs\">\r\n    <div class=\"tab\" [class.active]=\"activeTab === 'principal'\" (click)=\"setTab('principal')\">\r\n      Principal\r\n    </div>\r\n\r\n    <div class=\"tab\" [class.active]=\"activeTab === 'historial'\" (click)=\"setTab('historial')\">\r\n      Historial\r\n    </div>\r\n\r\n    <div class=\"tab-indicator\" [style.left]=\"getIndicatorLeft()\"></div>\r\n  </div>\r\n\r\n  @for (section of sections; track section.title) {\r\n  <div class=\"element-section\">\r\n    <h3>{{ section.title }}</h3>\r\n\r\n    <div class=\"element-content\">\r\n      @if (section.items?.length) { @for (item of section.items; track\r\n      item.label) {\r\n      <div class=\"element-item\">\r\n        <span class=\"label\">{{ item.label }}</span>\r\n        <span class=\"value\">{{ isDateValue(item.value) ? getRelativeTime(item.value) : item.value }}</span>\r\n      </div>\r\n      } }\r\n    </div>\r\n  </div>\r\n  }\r\n</div>\r\n</div>", styles: [".side-card-wrapper{position:relative;width:100%;height:100%}.side-card{width:354px;max-width:368px;min-width:240px;height:auto;max-height:90vh;background:#ebe8d6b0;border-radius:8px;padding:16px;font-size:16px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 4px 12px #00000026;z-index:10;overflow-y:auto;display:flex;flex-direction:column;gap:16px;box-sizing:border-box}.side-card.floating{position:absolute;top:16px;right:16px}.button-group{display:flex;gap:8px;justify-content:center;margin-bottom:12px}.btn-type{flex:1;padding:10px 12px;background-color:transparent;color:#61661f;border:2px solid #61661f;border-radius:6px;font-size:13px;font-weight:500;cursor:pointer}.btn-type:hover{background-color:#dee58f;color:#61661f;border:none}.btn-type:active{background-color:#61661f;color:#fff;border-color:none}.active{background-color:#596300;color:#fff;border-color:none}.element-header{width:100%;display:flex;gap:12px}.text-container{flex:1;display:flex;flex-direction:column;gap:8px}.title{font-size:2rem;font-weight:700;text-transform:capitalize;max-lines:2}.subtitle{font-size:1.5rem;font-weight:300;color:#454733;text-transform:capitalize}.right-icons{display:flex;flex-direction:column;gap:8px}.icon{color:#1c1c1c;cursor:pointer}.icon.icon-tabler-current-location{color:#d3d936}.icon.icon-tabler-current-location:hover{color:#d3d93666}.status-chip{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.375rem .75rem;border-radius:6px;font-size:1.2rem;font-weight:600;white-space:nowrap;text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box;margin-bottom:12px}.status-chip-active{background-color:#78db5c;color:#0f5e00}.status-chip-inactive{background-color:#a60321;color:#fafae8}.icon:hover{color:#1c1c1c66}.side-tabs{position:relative;display:flex;width:100%;border-bottom:2px solid #C7C7AD;margin-bottom:8px}.tab{flex:1;text-align:center;padding:12px 0;font-size:1.4rem;font-weight:500;cursor:pointer;color:#454733;transition:color .3s ease;text-transform:uppercase}.tab.active{background-color:transparent;color:#596300;font-weight:600}.tab:hover{color:#6a7500}.tab-indicator{position:absolute;bottom:-2px;left:0;width:50%;height:4px;background-color:#596300;border-radius:4px 4px 0 0;transition:left .3s ease}.element-section{display:flex;flex-direction:column;gap:8px}.element-section h3{margin:0;font-size:1.6rem;font-weight:500;color:#1c1c12;text-transform:uppercase}.element-content{display:flex;flex-direction:column;gap:10px;padding:10px 0;background-color:transparent}.element-item{display:flex;justify-content:space-between}.element-item .label,.element-item .value{font-size:1.5rem;color:#454733;font-weight:300;text-transform:uppercase}.side-card.compact{font-size:13px;padding:12px;gap:10px}.side-card.compact *{margin-bottom:0}.side-card.compact{gap:10px}.side-card.compact .element-section,.side-card.compact .element-content{gap:6px}.side-card.compact .title{font-size:1.6rem;line-height:1.2}.side-card.compact .subtitle{font-size:1.3rem}.side-card.compact .icon{width:22px;height:22px}.side-card.compact svg.icon{width:22px;height:22px}.side-card.compact h3{font-size:1.2rem}.side-card.compact .label,.side-card.compact .value{font-size:1.1rem}.side-card.compact .status-chip{font-size:.9rem;padding:.5rem .8rem;margin-bottom:6px}.side-card.compact .tab{padding:8px 0;font-size:1.1rem}.side-card.compact .tab-indicator{height:3px}.side-card.compact .element-header{gap:8px}.side-card.compact .right-icons{gap:4px}.side-card.compact{max-width:312px;max-height:460px;overflow-y:auto}\n"] }]
+            args: [{ selector: 'lib-side-card-detail', imports: [CommonModule, NotificationModal], template: "<div #SideCard class=\"side-card-wrapper\">\r\n  <div class=\"side-card\" [class.floating]=\"isFloating\" [class.compact]=\"isCompact\">\r\n    <div class=\"element-header\">\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n        stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n        class=\"icon icon-tabler icons-tabler-outline icon-tabler-arrow-left\" (click)=\"buttonClickIcon('back')\">\r\n        <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n        <path d=\"M5 12l12 0\" />\r\n        <path d=\"M5 12l4 5\" />\r\n        <path d=\"M5 12l4 -5\" />\r\n      </svg>\r\n\r\n      <div class=\"text-container\">\r\n        <span class=\"title\"> {{ title }} </span>\r\n        <span class=\"subtitle\"> {{ subtitle }} </span>\r\n        <div class=\"container-chip\">\r\n          <span #statusChip class=\"status-chip\" [ngClass]=\"statusClass\">\r\n            {{ statusLabel }}\r\n          </span>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"right-icons\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"currentColor\"\r\n          class=\"icon icon-tabler icons-tabler-filled icon-tabler-current-location\"\r\n          (click)=\"buttonClickIcon('location')\">\r\n          <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n          <path\r\n            d=\"M12 1a1 1 0 0 1 1 1v1.055a9.004 9.004 0 0 1 7.946 7.945h1.054a1 1 0 0 1 0 2h-1.055a9.004 9.004 0 0 1 -7.944 7.945l-.001 1.055a1 1 0 0 1 -2 0v-1.055a9.004 9.004 0 0 1 -7.945 -7.944l-1.055 -.001a1 1 0 0 1 0 -2h1.055a9.004 9.004 0 0 1 7.945 -7.945v-1.055a1 1 0 0 1 1 -1m0 4a7 7 0 1 0 0 14a7 7 0 0 0 0 -14m0 3a4 4 0 1 1 -4 4l.005 -.2a4 4 0 0 1 3.995 -3.8\" />\r\n        </svg>\r\n\r\n        <!-- message + modal -->\r\n        <div class=\"message-icon-wrapper\">\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n            stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n            class=\"icon icon-tabler icons-tabler-outline icon-tabler-message-circle\"\r\n            (click)=\"buttonClickIcon('message')\">\r\n            <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n            <path\r\n              d=\"M3 20l1.3 -3.9c-2.324 -3.437 -1.426 -7.872 2.1 -10.374c3.526 -2.501 8.59 -2.296 11.845 .48c3.255 2.777 3.695 7.266 1.029 10.501c-2.666 3.235 -7.615 4.215 -11.574 2.293l-4.7 1\" />\r\n          </svg>\r\n\r\n          @if (showMessageModal) {\r\n          <div class=\"message-modal-anchor\">\r\n            <lib-notification-modal />\r\n          </div>\r\n          }\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"side-tabs\">\r\n      <div class=\"tab\" [class.active]=\"activeTab === 'principal'\" (click)=\"setTab('principal')\">\r\n        Principal\r\n      </div>\r\n\r\n      <div class=\"tab\" [class.active]=\"activeTab === 'historial'\" (click)=\"setTab('historial')\">\r\n        Historial\r\n      </div>\r\n\r\n      <div class=\"tab-indicator\" [style.left]=\"getIndicatorLeft()\"></div>\r\n    </div>\r\n\r\n    @for (section of sections; track section.title) {\r\n    <div class=\"element-section\">\r\n      <h3>{{ section.title }}</h3>\r\n\r\n      <div class=\"element-content\">\r\n        @if (section.items?.length) { @for (item of section.items; track\r\n        item.label) {\r\n        <div class=\"element-item\">\r\n          <span class=\"label\">{{ item.label }}</span>\r\n          <span class=\"value\">{{ isDateValue(item.value) ? getRelativeTime(item.value) : item.value }}</span>\r\n        </div>\r\n        } }\r\n      </div>\r\n    </div>\r\n    }\r\n  </div>\r\n</div>", styles: [".side-card-wrapper{position:relative;width:100%;height:100%}.side-card{width:354px;max-width:368px;min-width:240px;height:auto;max-height:90vh;background:#ebe8d6b0;border-radius:8px;padding:16px;font-size:16px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 4px 12px #00000026;z-index:10;overflow-y:auto;display:flex;flex-direction:column;gap:16px;box-sizing:border-box}.side-card.floating{position:absolute;top:16px;right:16px}.button-group{display:flex;gap:8px;justify-content:center;margin-bottom:12px}.btn-type{flex:1;padding:10px 12px;background-color:transparent;color:#61661f;border:2px solid #61661f;border-radius:6px;font-size:13px;font-weight:500;cursor:pointer}.btn-type:hover{background-color:#dee58f;color:#61661f;border:none}.btn-type:active{background-color:#61661f;color:#fff;border-color:none}.active{background-color:#596300;color:#fff;border-color:none}.element-header{width:100%;display:flex;gap:12px}.text-container{flex:1;display:flex;flex-direction:column;gap:8px}.title{font-size:2rem;font-weight:700;text-transform:capitalize;max-lines:2}.subtitle{font-size:1.5rem;font-weight:300;color:#454733;text-transform:capitalize}.right-icons{display:flex;flex-direction:column;gap:8px}.icon{color:#1c1c1c;cursor:pointer}.icon.icon-tabler-current-location{color:#d3d936}.icon.icon-tabler-current-location:hover{color:#d3d93666}.status-chip{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.375rem .75rem;border-radius:6px;font-size:1.2rem;font-weight:600;white-space:nowrap;text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box;margin-bottom:12px}.status-chip-active{background-color:#78db5c;color:#0f5e00}.status-chip-inactive{background-color:#a60321;color:#fafae8}.icon:hover{color:#1c1c1c66}.side-tabs{position:relative;display:flex;width:100%;border-bottom:2px solid #C7C7AD;margin-bottom:8px}.tab{flex:1;text-align:center;padding:12px 0;font-size:1.4rem;font-weight:500;cursor:pointer;color:#454733;transition:color .3s ease;text-transform:uppercase}.tab.active{background-color:transparent;color:#596300;font-weight:600}.tab:hover{color:#6a7500}.tab-indicator{position:absolute;bottom:-2px;left:0;width:50%;height:4px;background-color:#596300;border-radius:4px 4px 0 0;transition:left .3s ease}.element-section{display:flex;flex-direction:column;gap:8px}.element-section h3{margin:0;font-size:1.6rem;font-weight:500;color:#1c1c12;text-transform:uppercase}.element-content{display:flex;flex-direction:column;gap:10px;padding:10px 0;background-color:transparent}.element-item{display:flex;justify-content:space-between}.element-item .label,.element-item .value{font-size:1.5rem;color:#454733;font-weight:300;text-transform:uppercase}.side-card.compact{font-size:13px;padding:12px;gap:10px}.side-card.compact *{margin-bottom:0}.side-card.compact{gap:10px}.side-card.compact .element-section,.side-card.compact .element-content{gap:6px}.side-card.compact .title{font-size:1.6rem;line-height:1.2}.side-card.compact .subtitle{font-size:1.3rem}.side-card.compact .icon{width:22px;height:22px}.side-card.compact svg.icon{width:22px;height:22px}.side-card.compact h3{font-size:1.2rem}.side-card.compact .label,.side-card.compact .value{font-size:1.1rem}.side-card.compact .status-chip{font-size:.9rem;padding:.5rem .8rem;margin-bottom:6px}.side-card.compact .tab{padding:8px 0;font-size:1.1rem}.side-card.compact .tab-indicator{height:3px}.side-card.compact .element-header{gap:8px}.side-card.compact .right-icons{gap:4px}.side-card.compact{max-width:312px;max-height:460px;overflow-y:auto}.side-card.floating.compact{top:9px;right:9px}.message-icon-wrapper{position:relative;display:inline-flex}.message-modal-anchor{position:absolute;top:36px;right:0;z-index:20}\n"] }]
         }], propDecorators: { wrapper: [{
                 type: ViewChild,
                 args: ['SideCard', { static: true }]
@@ -2760,11 +2843,11 @@ class DevicesCarousel {
         this.btnClickIcon.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DevicesCarousel, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DevicesCarousel, isStandalone: true, selector: "lib-devices-carousel", inputs: { devices: "devices" }, outputs: { btnClickIcon: "btnClickIcon" }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "listRef", first: true, predicate: ["list"], descendants: true }], ngImport: i0, template: "<div class=\"carousel-container\">\r\n    <div class=\"carousel-wrapper\">\r\n\r\n        @if (canScrollLeft) {\r\n        <button class=\"nav left\" (click)=\"scroll(list,'left')\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\" stroke=\"currentColor\"\r\n                stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\r\n                class=\"icon icon-tabler icons-tabler-outline icon-tabler-chevron-left\" viewBox=\"0 0 24 24\">\r\n                <path fill=\"none\" stroke=\"none\" d=\"M0 0h24v24H0z\" />\r\n                <path d=\"m15 6-6 6 6 6\" />\r\n            </svg>\r\n        </button>\r\n        }\r\n\r\n        <div class=\"carousel-mask\">\r\n            <div class=\"carousel-list\" #list (scroll)=\"onScroll(list)\">\r\n                @for (d of devices; track d.code) {\r\n                <div class=\"device-card\">\r\n                    <div class=\"card-header\">\r\n                        <span class=\"code\">{{ d.code }} - {{ d.name }}</span>\r\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"currentColor\"\r\n                            class=\"target icon icon-tabler icons-tabler-filled icon-tabler-current-location\"\r\n                            (click)=\"buttonClickIcon()\" viewBox=\"0 0 24 24\">\r\n                            <path fill=\"none\" d=\"M0 0h24v24H0z\" />\r\n                            <path\r\n                                d=\"M12 1a1 1 0 0 1 1 1v1.055A9.004 9.004 0 0 1 20.946 11H22a1 1 0 0 1 0 2h-1.055a9.004 9.004 0 0 1-7.944 7.945L13 22a1 1 0 0 1-2 0v-1.055a9.004 9.004 0 0 1-7.945-7.944L2 13a1 1 0 0 1 0-2h1.055A9.004 9.004 0 0 1 11 3.055V2a1 1 0 0 1 1-1m0 4a7 7 0 1 0 0 14 7 7 0 0 0 0-14m0 3a4 4 0 1 1-4 4l.005-.2A4 4 0 0 1 12 8\" />\r\n                        </svg>\r\n                    </div>\r\n\r\n                    <span class=\"geofence\">{{ d.geofenceName }}</span>\r\n\r\n                    <div class=\"device-info\">\r\n                        <span>{{ d.deviceInfo }}</span>\r\n                        <div class=\"icons\">\r\n                            @if (d.status.wifi) {\r\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\"\r\n                                viewBox=\"0 0 20 20\">\r\n                                <title>En L\u00EDnea</title>\r\n                                <path fill=\"#454733\"\r\n                                    d=\"M.833 7.314 2.5 8.98c4.142-4.141 10.858-4.141 15 0l1.667-1.666C14.108 2.255 5.9 2.255.833 7.314M7.5 13.98l2.5 2.5 2.5-2.5a3.53 3.53 0 0 0-5 0m-3.333-3.333 1.666 1.667c2.3-2.3 6.034-2.3 8.334 0l1.666-1.667c-3.216-3.217-8.441-3.217-11.666 0\" />\r\n                            </svg>\r\n                            } @else {\r\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\"\r\n                                viewBox=\"0 0 20 20\">\r\n                                <title>Fuera de L\u00EDnea</title>\r\n                                <path fill=\"#454733\"\r\n                                    d=\"m17.5 10.142 1.667-1.667C16.058 5.367 11.775 4.183 7.75 4.883l2.15 2.15a10.62 10.62 0 0 1 7.6 3.109m-1.667 1.666a8.25 8.25 0 0 0-3.1-1.941l2.517 2.516zM7.5 15.142l2.5 2.5 2.5-2.5a3.53 3.53 0 0 0-5 0m-4.658-12.8L1.667 3.517l2.541 2.541A13.1 13.1 0 0 0 .833 8.475L2.5 10.142a10.5 10.5 0 0 1 3.475-2.317l1.867 1.867a8.2 8.2 0 0 0-3.675 2.116l1.666 1.667a5.83 5.83 0 0 1 4.075-1.717l5.9 5.9 1.175-1.175z\" />\r\n                            </svg>\r\n                            } @if (getBatteryLevel(d.status.batteryPercentage) >= 4) {\r\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"19\" height=\"19\" fill=\"#454733\"\r\n                                viewBox=\"0 0 32 32\">\r\n                                <g id=\"SVGRepo_iconCarrier\">\r\n                                    <title>76-100%</title>\r\n                                    <path\r\n                                        d=\"M12.563 1c-.937 0-1.25.211-1.25 1.25v.937H8.5c-1.847 0-2.187.341-2.187 2.187v23.438c0 1.847.341 2.187 2.187 2.187h15c1.847 0 2.187-.341 2.187-2.187V5.374c0-1.847-.341-2.187-2.187-2.187h-2.813V2.25c0-1.038-.312-1.25-1.25-1.25zM8.5 7.563c0-2.5-.312-2.187 2.187-2.187h10.625c2.5 0 2.187-.312 2.187 2.187v19.063c0 2.5.312 2.187-2.187 2.187H10.687c-2.5 0-2.187.312-2.187-2.187zm1.562-1.25h11.875c.345 0 .625.28.625.625v3.438c0 .345-.28.625-.625.625H10.062a.625.625 0 0 1-.625-.625V6.938c0-.345.28-.625.625-.625m0 5.625h11.875c.345 0 .625.28.625.625v3.438c0 .345-.28.625-.625.625H10.062a.625.625 0 0 1-.625-.625v-3.438c0-.345.28-.625.625-.625m0 5.625h11.875c.345 0 .625.28.625.625v3.438c0 .345-.28.625-.625.625H10.062a.625.625 0 0 1-.625-.625v-3.438c0-.345.28-.625.625-.625m0 5.625h11.875c.345 0 .625.28.625.625v3.438c0 .345-.28.625-.625.625H10.062a.625.625 0 0 1-.625-.625v-3.438c0-.345.28-.625.625-.625\" />\r\n                                </g>\r\n                            </svg>\r\n                            } @else if (getBatteryLevel(d.status.batteryPercentage) == 3) {\r\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"19\" height=\"19\" fill=\"#454733\"\r\n                                viewBox=\"0 0 32 32\">\r\n                                <g id=\"SVGRepo_iconCarrier\">\r\n                                    <title>51-75%</title>\r\n                                    <path\r\n                                        d=\"M12.563 1c-.937 0-1.25.211-1.25 1.25v.937H8.5c-1.847 0-2.187.341-2.187 2.187v23.438c0 1.847.341 2.187 2.187 2.187h15c1.847 0 2.187-.341 2.187-2.187V5.374c0-1.847-.341-2.187-2.187-2.187h-2.813V2.25c0-1.038-.312-1.25-1.25-1.25zM8.5 7.563c0-2.5-.312-2.187 2.187-2.187h10.625c2.5 0 2.187-.312 2.187 2.187v19.063c0 2.5.312 2.187-2.187 2.187H10.687c-2.5 0-2.187.312-2.187-2.187zm1.562 4.375h11.875c.345 0 .625.28.625.625v3.438c0 .345-.28.625-.625.625H10.062a.625.625 0 0 1-.625-.625v-3.438c0-.345.28-.625.625-.625m0 5.625h11.875c.345 0 .625.28.625.625v3.438c0 .345-.28.625-.625.625H10.062a.625.625 0 0 1-.625-.625v-3.438c0-.345.28-.625.625-.625m0 5.625h11.875c.345 0 .625.28.625.625v3.438c0 .345-.28.625-.625.625H10.062a.625.625 0 0 1-.625-.625v-3.438c0-.345.28-.625.625-.625\" />\r\n                                </g>\r\n                            </svg>\r\n                            } @else if (getBatteryLevel(d.status.batteryPercentage) == 2) {\r\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"19\" height=\"19\" fill=\"#454733\"\r\n                                viewBox=\"0 0 32 32\">\r\n                                <g id=\"SVGRepo_iconCarrier\">\r\n                                    <title>21-50%</title>\r\n                                    <path\r\n                                        d=\"M12.563 1c-.937 0-1.25.211-1.25 1.25v.937H8.5c-1.847 0-2.187.341-2.187 2.187v23.438c0 1.847.341 2.187 2.187 2.187h15c1.847 0 2.187-.341 2.187-2.187V5.374c0-1.847-.341-2.187-2.187-2.187h-2.813V2.25c0-1.038-.312-1.25-1.25-1.25zM8.5 7.563c0-2.5-.312-2.187 2.187-2.187h10.625c2.5 0 2.187-.312 2.187 2.187v19.063c0 2.5.312 2.187-2.187 2.187H10.687c-2.5 0-2.187.312-2.187-2.187zm1.562 10h11.875c.345 0 .625.28.625.625v3.438c0 .345-.28.625-.625.625H10.062a.625.625 0 0 1-.625-.625v-3.438c0-.345.28-.625.625-.625m0 5.625h11.875c.345 0 .625.28.625.625v3.438c0 .345-.28.625-.625.625H10.062a.625.625 0 0 1-.625-.625v-3.438c0-.345.28-.625.625-.625\" />\r\n                                </g>\r\n                            </svg>\r\n                            } @else if (getBatteryLevel(d.status.batteryPercentage) == 1) {\r\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"19\" height=\"19\" fill=\"#454733\"\r\n                                viewBox=\"0 0 32 32\">\r\n                                <g id=\"SVGRepo_iconCarrier\">\r\n                                    <title>1-20%</title>\r\n                                    <path\r\n                                        d=\"M12.563 1c-.937 0-1.25.211-1.25 1.25v.937H8.5c-1.847 0-2.187.341-2.187 2.187v23.438c0 1.847.341 2.187 2.187 2.187h15c1.847 0 2.187-.341 2.187-2.187V5.374c0-1.847-.341-2.187-2.187-2.187h-2.813V2.25c0-1.038-.312-1.25-1.25-1.25zM8.5 7.563c0-2.5-.312-2.187 2.187-2.187h10.625c2.5 0 2.187-.312 2.187 2.187v19.063c0 2.5.312 2.187-2.187 2.187H10.687c-2.5 0-2.187.312-2.187-2.187zm1.562 15.625h11.875c.345 0 .625.28.625.625v3.438c0 .345-.28.625-.625.625H10.062a.625.625 0 0 1-.625-.625v-3.438c0-.345.28-.625.625-.625\" />\r\n                                </g>\r\n                            </svg>\r\n                            } @else {\r\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"19\" height=\"19\" fill=\"#454733\"\r\n                                viewBox=\"0 0 32 32\">\r\n                                <g id=\"SVGRepo_iconCarrier\">\r\n                                    <title>0%</title>\r\n                                    <path\r\n                                        d=\"M12.563 1c-.937 0-1.25.211-1.25 1.25v.937H8.5c-1.847 0-2.187.341-2.187 2.187v23.438c0 1.847.341 2.187 2.187 2.187h15c1.847 0 2.187-.341 2.187-2.187V5.374c0-1.847-.341-2.187-2.187-2.187h-2.813V2.25c0-1.038-.312-1.25-1.25-1.25zM8.5 7.563c0-2.5-.312-2.187 2.187-2.187h10.625c2.5 0 2.187-.312 2.187 2.187v19.063c0 2.5.312 2.187-2.187 2.187H10.687c-2.5 0-2.187.312-2.187-2.187z\" />\r\n                                </g>\r\n                            </svg>\r\n                            }\r\n                            @if (d.status.signalStatus! >= 4) {\r\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\"\r\n                                viewBox=\"0 0 20 20\">\r\n                                <title>Exelente</title>\r\n                                <path fill=\"#454733\" d=\"M1.667 18.333h16.666V1.667z\" />\r\n                            </svg>\r\n                            } @else if (d.status.signalStatus! == 3) { <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                                width=\"20\" height=\"20\" fill=\"#000\" viewBox=\"0 0 512 512\">\r\n                                <g id=\"SVGRepo_iconCarrier\">\r\n                                    <title>Buena</title>\r\n                                    <g id=\"Page-1\" fill=\"none\" fill-rule=\"evenodd\" stroke=\"none\" stroke-width=\"1\">\r\n                                        <g id=\"drop\" fill=\"#454733\" transform=\"translate(42.667 85.333)\">\r\n                                            <path id=\"Combined-Shape\"\r\n                                                d=\"M426.667 0v341.333H0zM384 88.747l-85.334 68.266v141.653H384z\" />\r\n                                        </g>\r\n                                    </g>\r\n                                </g>\r\n                            </svg>\r\n                            } @else if (d.status.signalStatus! == 2) { <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                                width=\"20\" height=\"20\" fill=\"#000\" viewBox=\"0 0 512 512\">\r\n                                <g id=\"SVGRepo_iconCarrier\">\r\n                                    <title>Regular</title>\r\n                                    <g id=\"Page-1\" fill=\"none\" fill-rule=\"evenodd\" stroke=\"none\" stroke-width=\"1\">\r\n                                        <g id=\"drop\" fill=\"#454733\" transform=\"translate(42.667 85.333)\">\r\n                                            <path id=\"Combined-Shape\"\r\n                                                d=\"M426.667 0v341.333H0zM384 88.747 213.333 225.28v73.386H384z\" />\r\n                                        </g>\r\n                                    </g>\r\n                                </g>\r\n                            </svg>\r\n                            } @else if (d.status.signalStatus! == 1) { <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                                width=\"20\" height=\"20\" fill=\"#000\" viewBox=\"0 0 512 512\">\r\n                                <g id=\"SVGRepo_iconCarrier\">\r\n                                    <title>Mala</title>\r\n                                    <g id=\"Page-1\" fill=\"none\" fill-rule=\"evenodd\" stroke=\"none\" stroke-width=\"1\">\r\n                                        <g id=\"drop\" fill=\"#454733\" transform=\"translate(42.667 85.333)\">\r\n                                            <path id=\"Combined-Shape\"\r\n                                                d=\"M426.667 0v341.333H0zM384 88.747 170.666 259.413v39.253H384z\" />\r\n                                        </g>\r\n                                    </g>\r\n                                </g>\r\n                            </svg>\r\n                            } @else { <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\"\r\n                                viewBox=\"0 0 20 20\">\r\n                                <title>Sin Se\u00F1al</title>\r\n                                <path fill=\"#454733\" d=\"M1.667 18.333h16.666V1.667zm15-1.666H5.692L16.667 5.692z\" />\r\n                            </svg>\r\n                            }\r\n                            @if (d.status.bluetooth) {\r\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\"\r\n                                viewBox=\"0 0 20 20\">\r\n                                <title>Conectado</title>\r\n                                <path fill=\"#454733\"\r\n                                    d=\"m15.296 6.425-4.758-4.758h-.834v6.325L5.88 4.167 4.704 5.342 9.363 10l-4.659 4.658 1.175 1.175 3.825-3.825v6.325h.834l4.758-4.758L11.713 10zM11.37 4.858l1.567 1.567-1.567 1.567zm1.567 8.717-1.567 1.567v-3.134z\" />\r\n                            </svg>\r\n                            } @else {\r\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\"\r\n                                viewBox=\"0 0 20 20\">\r\n                                <title>Desconectado</title>\r\n                                <path fill=\"#454733\"\r\n                                    d=\"M10.833 4.858 12.4 6.425l-1.333 1.333 1.175 1.175 2.516-2.516L10 1.667h-.833v4.191l1.666 1.667zM4.508 3.333 3.333 4.508 8.825 10l-4.658 4.658 1.175 1.175 3.825-3.825v6.325H10l3.575-3.575 1.917 1.909 1.175-1.175zm6.325 11.809v-3.134l1.567 1.567z\" />\r\n                            </svg>\r\n                            }\r\n                            @if (d.status.gps) {\r\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\"\r\n                                viewBox=\"0 0 20 20\">\r\n                                <g clip-path=\"url(#clip0_3_9268)\">\r\n                                    <title>Localizado</title>\r\n                                    <path fill=\"#454733\"\r\n                                        d=\"M10 6.667a3.332 3.332 0 1 0 0 6.666 3.332 3.332 0 1 0 0-6.666m7.45 2.5a7.495 7.495 0 0 0-6.617-6.617V.833H9.167V2.55A7.495 7.495 0 0 0 2.55 9.167H.833v1.666H2.55a7.495 7.495 0 0 0 6.617 6.617v1.717h1.666V17.45a7.495 7.495 0 0 0 6.617-6.617h1.717V9.167zM10 15.833A5.83 5.83 0 0 1 4.167 10 5.83 5.83 0 0 1 10 4.167 5.83 5.83 0 0 1 15.833 10 5.83 5.83 0 0 1 10 15.833\" />\r\n                                </g>\r\n                                <defs>\r\n                                    <clipPath id=\"clip0_3_9268\">\r\n                                        <path fill=\"#fff\" d=\"M0 0h20v20H0z\" />\r\n                                    </clipPath>\r\n                                </defs>\r\n                            </svg>\r\n                            } @else {\r\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\"\r\n                                viewBox=\"0 0 20 20\">\r\n                                <g clip-path=\"url(#clip0_3_9268)\">\r\n                                    <title>No Localizado</title>\r\n                                    <path fill=\"#454733\"\r\n                                        d=\"M17.45 9.167a7.495 7.495 0 0 0-6.617-6.617V.833H9.167V2.55a7.4 7.4 0 0 0-2.309.65l1.275 1.275a5.83 5.83 0 0 1 7.392 7.392l1.275 1.275a7.4 7.4 0 0 0 .65-2.309h1.717V9.167zM2.5 3.558l1.7 1.7a7.5 7.5 0 0 0-1.65 3.909H.833v1.666H2.55a7.495 7.495 0 0 0 6.617 6.617v1.717h1.666V17.45a7.5 7.5 0 0 0 3.909-1.65l1.7 1.7 1.175-1.175L3.675 2.383zm11.058 11.059a5.829 5.829 0 0 1-8.175-8.175z\" />\r\n                                </g>\r\n                                <defs>\r\n                                    <clipPath id=\"clip0_3_9268\">\r\n                                        <path fill=\"#fff\" d=\"M0 0h20v20H0z\" />\r\n                                    </clipPath>\r\n                                </defs>\r\n                            </svg>\r\n                            }\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"card-footer\">\r\n                        <span class=\"badge\" [ngClass]=\"getGeofenceClass(d.status.geofence)\">\r\n                            {{ d.status.geofence === 'inside' ? 'DENTRO DE GEOCERCA' : 'FUERA DE GEOCERCA' }}\r\n                        </span>\r\n\r\n                        <span class=\"badge update\">{{ getRelativeTime(d.lastUpdate) }}</span>\r\n                    </div>\r\n\r\n                </div>\r\n                }\r\n            </div>\r\n        </div>\r\n\r\n        @if (canScrollRight) {\r\n        <button class=\"nav right\" (click)=\"scroll(list,'right')\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\" stroke=\"currentColor\"\r\n                stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\r\n                class=\"icon icon-tabler icons-tabler-outline icon-tabler-chevron-right\" viewBox=\"0 0 24 24\">\r\n                <path fill=\"none\" stroke=\"none\" d=\"M0 0h24v24H0z\" />\r\n                <path d=\"m9 6 6 6-6 6\" />\r\n            </svg>\r\n        </button>\r\n        }\r\n    </div>\r\n\r\n</div>", styles: [".carousel-container{width:100%}.carousel-title{font-weight:600;color:#6f6f6f}.carousel-wrapper{position:relative;width:100%;display:flex;gap:16px;align-items:center}.carousel-mask{overflow:hidden;flex:1;border-radius:20px}.carousel-list{width:100%;display:flex;gap:16px;overflow-x:auto;scroll-behavior:smooth;padding:8px 0;border-radius:20px}.carousel-list::-webkit-scrollbar{display:none}.device-card{width:100%;min-width:220px;max-width:340px;height:auto;background:#f5f5e0;border-radius:20px;padding:16px;box-shadow:0 2px 6px #00000026;display:flex;flex-direction:column;gap:8px;flex-shrink:0}.card-header{width:100%;display:flex;font-weight:600;gap:16px;align-items:center}.code{flex:1;font-size:1.6rem;font-weight:700;color:#1c1c12;text-transform:uppercase;max-lines:1;text-overflow:ellipsis}.geofence{font-size:1.4rem;color:#1c1c12;max-lines:1;text-overflow:ellipsis;text-transform:uppercase}.device-info{display:flex;align-items:center;gap:12px;font-size:1.3rem;color:#454733;text-transform:uppercase}.icons span{margin-right:6px}.icon-active{color:#3cb371}.icon-inactive{color:#aaa}.card-footer{display:flex;gap:12px;align-items:center}.badge{font-size:1.1rem;padding:6px 12px;border-radius:8px}.badge-inside{background:#78db5c;color:#0f5e00}.badge-outside{background:#a60321;color:#fafae8}.badge.update{font-size:11px;color:#454733;background:#00c0e8}.nav{position:relative;background:transparent;border:none;font-size:24px;cursor:pointer;z-index:10}.nav.left{left:6px}.nav.right{right:6px}.icon{color:#1c1c1c;cursor:pointer}.icon.icon-tabler-current-location{color:#d3d936}.icon.icon-tabler-current-location:hover{color:#61661f}.icon-active path{fill:#454733}.signal-1 path{fill-opacity:.25}.signal-2 path{fill-opacity:.5}.signal-3 path{fill-opacity:.75}.signal-4 path{fill-opacity:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DevicesCarousel, isStandalone: true, selector: "lib-devices-carousel", inputs: { devices: "devices" }, outputs: { btnClickIcon: "btnClickIcon" }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "listRef", first: true, predicate: ["list"], descendants: true }], ngImport: i0, template: "<div class=\"carousel-container\">\r\n    <div class=\"carousel-wrapper\">\r\n\r\n        @if (canScrollLeft) {\r\n        <button class=\"nav left\" (click)=\"scroll(list,'left')\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\" stroke=\"currentColor\"\r\n                stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\r\n                class=\"icon icon-tabler icons-tabler-outline icon-tabler-chevron-left\" viewBox=\"0 0 24 24\">\r\n                <path fill=\"none\" stroke=\"none\" d=\"M0 0h24v24H0z\" />\r\n                <path d=\"m15 6-6 6 6 6\" />\r\n            </svg>\r\n        </button>\r\n        }\r\n\r\n        <div class=\"carousel-mask\">\r\n            <div class=\"carousel-list\" #list (scroll)=\"onScroll(list)\">\r\n                @for (d of devices; track d.code) {\r\n                <div class=\"device-card\">\r\n                    <div class=\"card-header\">\r\n                        <span class=\"code\">{{ d.code }} - {{ d.name }}</span>\r\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"currentColor\"\r\n                            class=\"target icon icon-tabler icons-tabler-filled icon-tabler-current-location\"\r\n                            (click)=\"buttonClickIcon()\" viewBox=\"0 0 24 24\">\r\n                            <path fill=\"none\" d=\"M0 0h24v24H0z\" />\r\n                            <path\r\n                                d=\"M12 1a1 1 0 0 1 1 1v1.055A9.004 9.004 0 0 1 20.946 11H22a1 1 0 0 1 0 2h-1.055a9.004 9.004 0 0 1-7.944 7.945L13 22a1 1 0 0 1-2 0v-1.055a9.004 9.004 0 0 1-7.945-7.944L2 13a1 1 0 0 1 0-2h1.055A9.004 9.004 0 0 1 11 3.055V2a1 1 0 0 1 1-1m0 4a7 7 0 1 0 0 14 7 7 0 0 0 0-14m0 3a4 4 0 1 1-4 4l.005-.2A4 4 0 0 1 12 8\" />\r\n                        </svg>\r\n                    </div>\r\n\r\n                    <span class=\"geofence\">{{ d.geofenceName }}</span>\r\n\r\n                    <div class=\"device-info\">\r\n                        <span>{{ d.deviceInfo }}</span>\r\n                        <div class=\"icons\">\r\n                            @if (d.status.wifi) {\r\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\"\r\n                                viewBox=\"0 0 20 20\">\r\n                                <g>\r\n                                    <title>En L\u00EDnea</title>\r\n                                </g>\r\n                                \r\n                                <path fill=\"#454733\"\r\n                                    d=\"M.833 7.314 2.5 8.98c4.142-4.141 10.858-4.141 15 0l1.667-1.666C14.108 2.255 5.9 2.255.833 7.314M7.5 13.98l2.5 2.5 2.5-2.5a3.53 3.53 0 0 0-5 0m-3.333-3.333 1.666 1.667c2.3-2.3 6.034-2.3 8.334 0l1.666-1.667c-3.216-3.217-8.441-3.217-11.666 0\" />\r\n                            </svg>\r\n                            } @else {\r\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\"\r\n                                viewBox=\"0 0 20 20\">\r\n                                <title>Fuera de L\u00EDnea</title>\r\n                                <path fill=\"#454733\"\r\n                                    d=\"m17.5 10.142 1.667-1.667C16.058 5.367 11.775 4.183 7.75 4.883l2.15 2.15a10.62 10.62 0 0 1 7.6 3.109m-1.667 1.666a8.25 8.25 0 0 0-3.1-1.941l2.517 2.516zM7.5 15.142l2.5 2.5 2.5-2.5a3.53 3.53 0 0 0-5 0m-4.658-12.8L1.667 3.517l2.541 2.541A13.1 13.1 0 0 0 .833 8.475L2.5 10.142a10.5 10.5 0 0 1 3.475-2.317l1.867 1.867a8.2 8.2 0 0 0-3.675 2.116l1.666 1.667a5.83 5.83 0 0 1 4.075-1.717l5.9 5.9 1.175-1.175z\" />\r\n                            </svg>\r\n                            } @if (getBatteryLevel(d.status.batteryPercentage) >= 4) {\r\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"19\" height=\"19\" fill=\"#454733\"\r\n                                viewBox=\"0 0 32 32\">\r\n                                <g id=\"SVGRepo_iconCarrier\">\r\n                                    <title>76-100%</title>\r\n                                    <path\r\n                                        d=\"M12.563 1c-.937 0-1.25.211-1.25 1.25v.937H8.5c-1.847 0-2.187.341-2.187 2.187v23.438c0 1.847.341 2.187 2.187 2.187h15c1.847 0 2.187-.341 2.187-2.187V5.374c0-1.847-.341-2.187-2.187-2.187h-2.813V2.25c0-1.038-.312-1.25-1.25-1.25zM8.5 7.563c0-2.5-.312-2.187 2.187-2.187h10.625c2.5 0 2.187-.312 2.187 2.187v19.063c0 2.5.312 2.187-2.187 2.187H10.687c-2.5 0-2.187.312-2.187-2.187zm1.562-1.25h11.875c.345 0 .625.28.625.625v3.438c0 .345-.28.625-.625.625H10.062a.625.625 0 0 1-.625-.625V6.938c0-.345.28-.625.625-.625m0 5.625h11.875c.345 0 .625.28.625.625v3.438c0 .345-.28.625-.625.625H10.062a.625.625 0 0 1-.625-.625v-3.438c0-.345.28-.625.625-.625m0 5.625h11.875c.345 0 .625.28.625.625v3.438c0 .345-.28.625-.625.625H10.062a.625.625 0 0 1-.625-.625v-3.438c0-.345.28-.625.625-.625m0 5.625h11.875c.345 0 .625.28.625.625v3.438c0 .345-.28.625-.625.625H10.062a.625.625 0 0 1-.625-.625v-3.438c0-.345.28-.625.625-.625\" />\r\n                                </g>\r\n                            </svg>\r\n                            } @else if (getBatteryLevel(d.status.batteryPercentage) == 3) {\r\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"19\" height=\"19\" fill=\"#454733\"\r\n                                viewBox=\"0 0 32 32\">\r\n                                <g id=\"SVGRepo_iconCarrier\">\r\n                                    <title>51-75%</title>\r\n                                    <path\r\n                                        d=\"M12.563 1c-.937 0-1.25.211-1.25 1.25v.937H8.5c-1.847 0-2.187.341-2.187 2.187v23.438c0 1.847.341 2.187 2.187 2.187h15c1.847 0 2.187-.341 2.187-2.187V5.374c0-1.847-.341-2.187-2.187-2.187h-2.813V2.25c0-1.038-.312-1.25-1.25-1.25zM8.5 7.563c0-2.5-.312-2.187 2.187-2.187h10.625c2.5 0 2.187-.312 2.187 2.187v19.063c0 2.5.312 2.187-2.187 2.187H10.687c-2.5 0-2.187.312-2.187-2.187zm1.562 4.375h11.875c.345 0 .625.28.625.625v3.438c0 .345-.28.625-.625.625H10.062a.625.625 0 0 1-.625-.625v-3.438c0-.345.28-.625.625-.625m0 5.625h11.875c.345 0 .625.28.625.625v3.438c0 .345-.28.625-.625.625H10.062a.625.625 0 0 1-.625-.625v-3.438c0-.345.28-.625.625-.625m0 5.625h11.875c.345 0 .625.28.625.625v3.438c0 .345-.28.625-.625.625H10.062a.625.625 0 0 1-.625-.625v-3.438c0-.345.28-.625.625-.625\" />\r\n                                </g>\r\n                            </svg>\r\n                            } @else if (getBatteryLevel(d.status.batteryPercentage) == 2) {\r\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"19\" height=\"19\" fill=\"#454733\"\r\n                                viewBox=\"0 0 32 32\">\r\n                                <g id=\"SVGRepo_iconCarrier\">\r\n                                    <title>21-50%</title>\r\n                                    <path\r\n                                        d=\"M12.563 1c-.937 0-1.25.211-1.25 1.25v.937H8.5c-1.847 0-2.187.341-2.187 2.187v23.438c0 1.847.341 2.187 2.187 2.187h15c1.847 0 2.187-.341 2.187-2.187V5.374c0-1.847-.341-2.187-2.187-2.187h-2.813V2.25c0-1.038-.312-1.25-1.25-1.25zM8.5 7.563c0-2.5-.312-2.187 2.187-2.187h10.625c2.5 0 2.187-.312 2.187 2.187v19.063c0 2.5.312 2.187-2.187 2.187H10.687c-2.5 0-2.187.312-2.187-2.187zm1.562 10h11.875c.345 0 .625.28.625.625v3.438c0 .345-.28.625-.625.625H10.062a.625.625 0 0 1-.625-.625v-3.438c0-.345.28-.625.625-.625m0 5.625h11.875c.345 0 .625.28.625.625v3.438c0 .345-.28.625-.625.625H10.062a.625.625 0 0 1-.625-.625v-3.438c0-.345.28-.625.625-.625\" />\r\n                                </g>\r\n                            </svg>\r\n                            } @else if (getBatteryLevel(d.status.batteryPercentage) == 1) {\r\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"19\" height=\"19\" fill=\"#454733\"\r\n                                viewBox=\"0 0 32 32\">\r\n                                <g id=\"SVGRepo_iconCarrier\">\r\n                                    <title>1-20%</title>\r\n                                    <path\r\n                                        d=\"M12.563 1c-.937 0-1.25.211-1.25 1.25v.937H8.5c-1.847 0-2.187.341-2.187 2.187v23.438c0 1.847.341 2.187 2.187 2.187h15c1.847 0 2.187-.341 2.187-2.187V5.374c0-1.847-.341-2.187-2.187-2.187h-2.813V2.25c0-1.038-.312-1.25-1.25-1.25zM8.5 7.563c0-2.5-.312-2.187 2.187-2.187h10.625c2.5 0 2.187-.312 2.187 2.187v19.063c0 2.5.312 2.187-2.187 2.187H10.687c-2.5 0-2.187.312-2.187-2.187zm1.562 15.625h11.875c.345 0 .625.28.625.625v3.438c0 .345-.28.625-.625.625H10.062a.625.625 0 0 1-.625-.625v-3.438c0-.345.28-.625.625-.625\" />\r\n                                </g>\r\n                            </svg>\r\n                            } @else {\r\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"19\" height=\"19\" fill=\"#454733\"\r\n                                viewBox=\"0 0 32 32\">\r\n                                <g id=\"SVGRepo_iconCarrier\">\r\n                                    <title>0%</title>\r\n                                    <path\r\n                                        d=\"M12.563 1c-.937 0-1.25.211-1.25 1.25v.937H8.5c-1.847 0-2.187.341-2.187 2.187v23.438c0 1.847.341 2.187 2.187 2.187h15c1.847 0 2.187-.341 2.187-2.187V5.374c0-1.847-.341-2.187-2.187-2.187h-2.813V2.25c0-1.038-.312-1.25-1.25-1.25zM8.5 7.563c0-2.5-.312-2.187 2.187-2.187h10.625c2.5 0 2.187-.312 2.187 2.187v19.063c0 2.5.312 2.187-2.187 2.187H10.687c-2.5 0-2.187.312-2.187-2.187z\" />\r\n                                </g>\r\n                            </svg>\r\n                            }\r\n                            @if (d.status.signalStatus! >= 4) {\r\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\"\r\n                                viewBox=\"0 0 20 20\">\r\n                                <title>Excelente</title>\r\n                                <path fill=\"#454733\" d=\"M1.667 18.333h16.666V1.667z\" />\r\n                            </svg>\r\n                            } @else if (d.status.signalStatus! == 3) { <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                                width=\"20\" height=\"20\" fill=\"#000\" viewBox=\"0 0 512 512\">\r\n                                <g id=\"SVGRepo_iconCarrier\">\r\n                                    <title>Buena</title>\r\n                                    <g id=\"Page-1\" fill=\"none\" fill-rule=\"evenodd\" stroke=\"none\" stroke-width=\"1\">\r\n                                        <g id=\"drop\" fill=\"#454733\" transform=\"translate(42.667 85.333)\">\r\n                                            <path id=\"Combined-Shape\"\r\n                                                d=\"M426.667 0v341.333H0zM384 88.747l-85.334 68.266v141.653H384z\" />\r\n                                        </g>\r\n                                    </g>\r\n                                </g>\r\n                            </svg>\r\n                            } @else if (d.status.signalStatus! == 2) { <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                                width=\"20\" height=\"20\" fill=\"#000\" viewBox=\"0 0 512 512\">\r\n                                <g id=\"SVGRepo_iconCarrier\">\r\n                                    <title>Regular</title>\r\n                                    <g id=\"Page-1\" fill=\"none\" fill-rule=\"evenodd\" stroke=\"none\" stroke-width=\"1\">\r\n                                        <g id=\"drop\" fill=\"#454733\" transform=\"translate(42.667 85.333)\">\r\n                                            <path id=\"Combined-Shape\"\r\n                                                d=\"M426.667 0v341.333H0zM384 88.747 213.333 225.28v73.386H384z\" />\r\n                                        </g>\r\n                                    </g>\r\n                                </g>\r\n                            </svg>\r\n                            } @else if (d.status.signalStatus! == 1) { <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                                width=\"20\" height=\"20\" fill=\"#000\" viewBox=\"0 0 512 512\">\r\n                                <g id=\"SVGRepo_iconCarrier\">\r\n                                    <title>Mala</title>\r\n                                    <g id=\"Page-1\" fill=\"none\" fill-rule=\"evenodd\" stroke=\"none\" stroke-width=\"1\">\r\n                                        <g id=\"drop\" fill=\"#454733\" transform=\"translate(42.667 85.333)\">\r\n                                            <path id=\"Combined-Shape\"\r\n                                                d=\"M426.667 0v341.333H0zM384 88.747 170.666 259.413v39.253H384z\" />\r\n                                        </g>\r\n                                    </g>\r\n                                </g>\r\n                            </svg>\r\n                            } @else { <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\"\r\n                                viewBox=\"0 0 20 20\">\r\n                                <title>Sin Se\u00F1al</title>\r\n                                <path fill=\"#454733\" d=\"M1.667 18.333h16.666V1.667zm15-1.666H5.692L16.667 5.692z\" />\r\n                            </svg>\r\n                            }\r\n                            @if (d.status.bluetooth) {\r\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\"\r\n                                viewBox=\"0 0 20 20\">\r\n                                <title>Conectado</title>\r\n                                <path fill=\"#454733\"\r\n                                    d=\"m15.296 6.425-4.758-4.758h-.834v6.325L5.88 4.167 4.704 5.342 9.363 10l-4.659 4.658 1.175 1.175 3.825-3.825v6.325h.834l4.758-4.758L11.713 10zM11.37 4.858l1.567 1.567-1.567 1.567zm1.567 8.717-1.567 1.567v-3.134z\" />\r\n                            </svg>\r\n                            } @else {\r\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\"\r\n                                viewBox=\"0 0 20 20\">\r\n                                <title>Desconectado</title>\r\n                                <path fill=\"#454733\"\r\n                                    d=\"M10.833 4.858 12.4 6.425l-1.333 1.333 1.175 1.175 2.516-2.516L10 1.667h-.833v4.191l1.666 1.667zM4.508 3.333 3.333 4.508 8.825 10l-4.658 4.658 1.175 1.175 3.825-3.825v6.325H10l3.575-3.575 1.917 1.909 1.175-1.175zm6.325 11.809v-3.134l1.567 1.567z\" />\r\n                            </svg>\r\n                            }\r\n                            @if (d.status.gps) {\r\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\"\r\n                                viewBox=\"0 0 20 20\">\r\n                                <g clip-path=\"url(#clip0_3_9268)\">\r\n                                    <title>Localizado</title>\r\n                                    <path fill=\"#454733\"\r\n                                        d=\"M10 6.667a3.332 3.332 0 1 0 0 6.666 3.332 3.332 0 1 0 0-6.666m7.45 2.5a7.495 7.495 0 0 0-6.617-6.617V.833H9.167V2.55A7.495 7.495 0 0 0 2.55 9.167H.833v1.666H2.55a7.495 7.495 0 0 0 6.617 6.617v1.717h1.666V17.45a7.495 7.495 0 0 0 6.617-6.617h1.717V9.167zM10 15.833A5.83 5.83 0 0 1 4.167 10 5.83 5.83 0 0 1 10 4.167 5.83 5.83 0 0 1 15.833 10 5.83 5.83 0 0 1 10 15.833\" />\r\n                                </g>\r\n                                <defs>\r\n                                    <clipPath id=\"clip0_3_9268\">\r\n                                        <path fill=\"#fff\" d=\"M0 0h20v20H0z\" />\r\n                                    </clipPath>\r\n                                </defs>\r\n                            </svg>\r\n                            } @else {\r\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\"\r\n                                viewBox=\"0 0 20 20\">\r\n                                <g clip-path=\"url(#clip0_3_9268)\">\r\n                                    <title>No Localizado</title>\r\n                                    <path fill=\"#454733\"\r\n                                        d=\"M17.45 9.167a7.495 7.495 0 0 0-6.617-6.617V.833H9.167V2.55a7.4 7.4 0 0 0-2.309.65l1.275 1.275a5.83 5.83 0 0 1 7.392 7.392l1.275 1.275a7.4 7.4 0 0 0 .65-2.309h1.717V9.167zM2.5 3.558l1.7 1.7a7.5 7.5 0 0 0-1.65 3.909H.833v1.666H2.55a7.495 7.495 0 0 0 6.617 6.617v1.717h1.666V17.45a7.5 7.5 0 0 0 3.909-1.65l1.7 1.7 1.175-1.175L3.675 2.383zm11.058 11.059a5.829 5.829 0 0 1-8.175-8.175z\" />\r\n                                </g>\r\n                                <defs>\r\n                                    <clipPath id=\"clip0_3_9268\">\r\n                                        <path fill=\"#fff\" d=\"M0 0h20v20H0z\" />\r\n                                    </clipPath>\r\n                                </defs>\r\n                            </svg>\r\n                            }\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"card-footer\">\r\n                        <span class=\"badge\" [ngClass]=\"getGeofenceClass(d.status.geofence)\">\r\n                            {{ d.status.geofence === 'inside' ? 'DENTRO DE GEOCERCA' : 'FUERA DE GEOCERCA' }}\r\n                        </span>\r\n\r\n                        <span class=\"badge update\">{{ getRelativeTime(d.lastUpdate) }}</span>\r\n                    </div>\r\n\r\n                </div>\r\n                }\r\n            </div>\r\n        </div>\r\n\r\n        @if (canScrollRight) {\r\n        <button class=\"nav right\" (click)=\"scroll(list,'right')\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\" stroke=\"currentColor\"\r\n                stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\r\n                class=\"icon icon-tabler icons-tabler-outline icon-tabler-chevron-right\" viewBox=\"0 0 24 24\">\r\n                <path fill=\"none\" stroke=\"none\" d=\"M0 0h24v24H0z\" />\r\n                <path d=\"m9 6 6 6-6 6\" />\r\n            </svg>\r\n        </button>\r\n        }\r\n    </div>\r\n\r\n</div>", styles: [".carousel-container{width:100%}.carousel-title{font-weight:600;color:#6f6f6f}.carousel-wrapper{position:relative;width:100%;display:flex;gap:16px;align-items:center}.carousel-mask{overflow:hidden;flex:1;border-radius:20px}.carousel-list{width:100%;display:flex;gap:16px;overflow-x:auto;scroll-behavior:smooth;padding:8px 0;border-radius:20px}.carousel-list::-webkit-scrollbar{display:none}.device-card{width:100%;min-width:220px;max-width:340px;height:auto;background:#f5f5e0;border-radius:20px;padding:16px;box-shadow:0 2px 6px #00000026;display:flex;flex-direction:column;gap:8px;flex-shrink:0}.card-header{width:100%;display:flex;font-weight:600;gap:16px;align-items:center}.code{flex:1;font-size:1.6rem;font-weight:700;color:#1c1c12;text-transform:uppercase;max-lines:1;text-overflow:ellipsis}.geofence{font-size:1.4rem;color:#1c1c12;max-lines:1;text-overflow:ellipsis;text-transform:uppercase}.device-info{display:flex;align-items:center;gap:12px;font-size:1.3rem;color:#454733;text-transform:uppercase}.icons span{margin-right:6px}.icon-active{color:#3cb371}.icon-inactive{color:#aaa}.card-footer{display:flex;gap:12px;align-items:center}.badge{font-size:1.1rem;padding:6px 12px;border-radius:8px}.badge-inside{background:#78db5c;color:#0f5e00}.badge-outside{background:#a60321;color:#fafae8}.badge.update{font-size:11px;color:#454733;background:#00c0e8}.nav{position:relative;background:transparent;border:none;font-size:24px;cursor:pointer;z-index:10}.nav.left{left:6px}.nav.right{right:6px}.icon{color:#1c1c1c;cursor:pointer}.icon.icon-tabler-current-location{color:#d3d936}.icon.icon-tabler-current-location:hover{color:#61661f}.icon-active path{fill:#454733}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DevicesCarousel, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-devices-carousel', imports: [CommonModule], template: "<div class=\"carousel-container\">\r\n    <div class=\"carousel-wrapper\">\r\n\r\n        @if (canScrollLeft) {\r\n        <button class=\"nav left\" (click)=\"scroll(list,'left')\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\" stroke=\"currentColor\"\r\n                stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\r\n                class=\"icon icon-tabler icons-tabler-outline icon-tabler-chevron-left\" viewBox=\"0 0 24 24\">\r\n                <path fill=\"none\" stroke=\"none\" d=\"M0 0h24v24H0z\" />\r\n                <path d=\"m15 6-6 6 6 6\" />\r\n            </svg>\r\n        </button>\r\n        }\r\n\r\n        <div class=\"carousel-mask\">\r\n            <div class=\"carousel-list\" #list (scroll)=\"onScroll(list)\">\r\n                @for (d of devices; track d.code) {\r\n                <div class=\"device-card\">\r\n                    <div class=\"card-header\">\r\n                        <span class=\"code\">{{ d.code }} - {{ d.name }}</span>\r\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"currentColor\"\r\n                            class=\"target icon icon-tabler icons-tabler-filled icon-tabler-current-location\"\r\n                            (click)=\"buttonClickIcon()\" viewBox=\"0 0 24 24\">\r\n                            <path fill=\"none\" d=\"M0 0h24v24H0z\" />\r\n                            <path\r\n                                d=\"M12 1a1 1 0 0 1 1 1v1.055A9.004 9.004 0 0 1 20.946 11H22a1 1 0 0 1 0 2h-1.055a9.004 9.004 0 0 1-7.944 7.945L13 22a1 1 0 0 1-2 0v-1.055a9.004 9.004 0 0 1-7.945-7.944L2 13a1 1 0 0 1 0-2h1.055A9.004 9.004 0 0 1 11 3.055V2a1 1 0 0 1 1-1m0 4a7 7 0 1 0 0 14 7 7 0 0 0 0-14m0 3a4 4 0 1 1-4 4l.005-.2A4 4 0 0 1 12 8\" />\r\n                        </svg>\r\n                    </div>\r\n\r\n                    <span class=\"geofence\">{{ d.geofenceName }}</span>\r\n\r\n                    <div class=\"device-info\">\r\n                        <span>{{ d.deviceInfo }}</span>\r\n                        <div class=\"icons\">\r\n                            @if (d.status.wifi) {\r\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\"\r\n                                viewBox=\"0 0 20 20\">\r\n                                <title>En L\u00EDnea</title>\r\n                                <path fill=\"#454733\"\r\n                                    d=\"M.833 7.314 2.5 8.98c4.142-4.141 10.858-4.141 15 0l1.667-1.666C14.108 2.255 5.9 2.255.833 7.314M7.5 13.98l2.5 2.5 2.5-2.5a3.53 3.53 0 0 0-5 0m-3.333-3.333 1.666 1.667c2.3-2.3 6.034-2.3 8.334 0l1.666-1.667c-3.216-3.217-8.441-3.217-11.666 0\" />\r\n                            </svg>\r\n                            } @else {\r\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\"\r\n                                viewBox=\"0 0 20 20\">\r\n                                <title>Fuera de L\u00EDnea</title>\r\n                                <path fill=\"#454733\"\r\n                                    d=\"m17.5 10.142 1.667-1.667C16.058 5.367 11.775 4.183 7.75 4.883l2.15 2.15a10.62 10.62 0 0 1 7.6 3.109m-1.667 1.666a8.25 8.25 0 0 0-3.1-1.941l2.517 2.516zM7.5 15.142l2.5 2.5 2.5-2.5a3.53 3.53 0 0 0-5 0m-4.658-12.8L1.667 3.517l2.541 2.541A13.1 13.1 0 0 0 .833 8.475L2.5 10.142a10.5 10.5 0 0 1 3.475-2.317l1.867 1.867a8.2 8.2 0 0 0-3.675 2.116l1.666 1.667a5.83 5.83 0 0 1 4.075-1.717l5.9 5.9 1.175-1.175z\" />\r\n                            </svg>\r\n                            } @if (getBatteryLevel(d.status.batteryPercentage) >= 4) {\r\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"19\" height=\"19\" fill=\"#454733\"\r\n                                viewBox=\"0 0 32 32\">\r\n                                <g id=\"SVGRepo_iconCarrier\">\r\n                                    <title>76-100%</title>\r\n                                    <path\r\n                                        d=\"M12.563 1c-.937 0-1.25.211-1.25 1.25v.937H8.5c-1.847 0-2.187.341-2.187 2.187v23.438c0 1.847.341 2.187 2.187 2.187h15c1.847 0 2.187-.341 2.187-2.187V5.374c0-1.847-.341-2.187-2.187-2.187h-2.813V2.25c0-1.038-.312-1.25-1.25-1.25zM8.5 7.563c0-2.5-.312-2.187 2.187-2.187h10.625c2.5 0 2.187-.312 2.187 2.187v19.063c0 2.5.312 2.187-2.187 2.187H10.687c-2.5 0-2.187.312-2.187-2.187zm1.562-1.25h11.875c.345 0 .625.28.625.625v3.438c0 .345-.28.625-.625.625H10.062a.625.625 0 0 1-.625-.625V6.938c0-.345.28-.625.625-.625m0 5.625h11.875c.345 0 .625.28.625.625v3.438c0 .345-.28.625-.625.625H10.062a.625.625 0 0 1-.625-.625v-3.438c0-.345.28-.625.625-.625m0 5.625h11.875c.345 0 .625.28.625.625v3.438c0 .345-.28.625-.625.625H10.062a.625.625 0 0 1-.625-.625v-3.438c0-.345.28-.625.625-.625m0 5.625h11.875c.345 0 .625.28.625.625v3.438c0 .345-.28.625-.625.625H10.062a.625.625 0 0 1-.625-.625v-3.438c0-.345.28-.625.625-.625\" />\r\n                                </g>\r\n                            </svg>\r\n                            } @else if (getBatteryLevel(d.status.batteryPercentage) == 3) {\r\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"19\" height=\"19\" fill=\"#454733\"\r\n                                viewBox=\"0 0 32 32\">\r\n                                <g id=\"SVGRepo_iconCarrier\">\r\n                                    <title>51-75%</title>\r\n                                    <path\r\n                                        d=\"M12.563 1c-.937 0-1.25.211-1.25 1.25v.937H8.5c-1.847 0-2.187.341-2.187 2.187v23.438c0 1.847.341 2.187 2.187 2.187h15c1.847 0 2.187-.341 2.187-2.187V5.374c0-1.847-.341-2.187-2.187-2.187h-2.813V2.25c0-1.038-.312-1.25-1.25-1.25zM8.5 7.563c0-2.5-.312-2.187 2.187-2.187h10.625c2.5 0 2.187-.312 2.187 2.187v19.063c0 2.5.312 2.187-2.187 2.187H10.687c-2.5 0-2.187.312-2.187-2.187zm1.562 4.375h11.875c.345 0 .625.28.625.625v3.438c0 .345-.28.625-.625.625H10.062a.625.625 0 0 1-.625-.625v-3.438c0-.345.28-.625.625-.625m0 5.625h11.875c.345 0 .625.28.625.625v3.438c0 .345-.28.625-.625.625H10.062a.625.625 0 0 1-.625-.625v-3.438c0-.345.28-.625.625-.625m0 5.625h11.875c.345 0 .625.28.625.625v3.438c0 .345-.28.625-.625.625H10.062a.625.625 0 0 1-.625-.625v-3.438c0-.345.28-.625.625-.625\" />\r\n                                </g>\r\n                            </svg>\r\n                            } @else if (getBatteryLevel(d.status.batteryPercentage) == 2) {\r\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"19\" height=\"19\" fill=\"#454733\"\r\n                                viewBox=\"0 0 32 32\">\r\n                                <g id=\"SVGRepo_iconCarrier\">\r\n                                    <title>21-50%</title>\r\n                                    <path\r\n                                        d=\"M12.563 1c-.937 0-1.25.211-1.25 1.25v.937H8.5c-1.847 0-2.187.341-2.187 2.187v23.438c0 1.847.341 2.187 2.187 2.187h15c1.847 0 2.187-.341 2.187-2.187V5.374c0-1.847-.341-2.187-2.187-2.187h-2.813V2.25c0-1.038-.312-1.25-1.25-1.25zM8.5 7.563c0-2.5-.312-2.187 2.187-2.187h10.625c2.5 0 2.187-.312 2.187 2.187v19.063c0 2.5.312 2.187-2.187 2.187H10.687c-2.5 0-2.187.312-2.187-2.187zm1.562 10h11.875c.345 0 .625.28.625.625v3.438c0 .345-.28.625-.625.625H10.062a.625.625 0 0 1-.625-.625v-3.438c0-.345.28-.625.625-.625m0 5.625h11.875c.345 0 .625.28.625.625v3.438c0 .345-.28.625-.625.625H10.062a.625.625 0 0 1-.625-.625v-3.438c0-.345.28-.625.625-.625\" />\r\n                                </g>\r\n                            </svg>\r\n                            } @else if (getBatteryLevel(d.status.batteryPercentage) == 1) {\r\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"19\" height=\"19\" fill=\"#454733\"\r\n                                viewBox=\"0 0 32 32\">\r\n                                <g id=\"SVGRepo_iconCarrier\">\r\n                                    <title>1-20%</title>\r\n                                    <path\r\n                                        d=\"M12.563 1c-.937 0-1.25.211-1.25 1.25v.937H8.5c-1.847 0-2.187.341-2.187 2.187v23.438c0 1.847.341 2.187 2.187 2.187h15c1.847 0 2.187-.341 2.187-2.187V5.374c0-1.847-.341-2.187-2.187-2.187h-2.813V2.25c0-1.038-.312-1.25-1.25-1.25zM8.5 7.563c0-2.5-.312-2.187 2.187-2.187h10.625c2.5 0 2.187-.312 2.187 2.187v19.063c0 2.5.312 2.187-2.187 2.187H10.687c-2.5 0-2.187.312-2.187-2.187zm1.562 15.625h11.875c.345 0 .625.28.625.625v3.438c0 .345-.28.625-.625.625H10.062a.625.625 0 0 1-.625-.625v-3.438c0-.345.28-.625.625-.625\" />\r\n                                </g>\r\n                            </svg>\r\n                            } @else {\r\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"19\" height=\"19\" fill=\"#454733\"\r\n                                viewBox=\"0 0 32 32\">\r\n                                <g id=\"SVGRepo_iconCarrier\">\r\n                                    <title>0%</title>\r\n                                    <path\r\n                                        d=\"M12.563 1c-.937 0-1.25.211-1.25 1.25v.937H8.5c-1.847 0-2.187.341-2.187 2.187v23.438c0 1.847.341 2.187 2.187 2.187h15c1.847 0 2.187-.341 2.187-2.187V5.374c0-1.847-.341-2.187-2.187-2.187h-2.813V2.25c0-1.038-.312-1.25-1.25-1.25zM8.5 7.563c0-2.5-.312-2.187 2.187-2.187h10.625c2.5 0 2.187-.312 2.187 2.187v19.063c0 2.5.312 2.187-2.187 2.187H10.687c-2.5 0-2.187.312-2.187-2.187z\" />\r\n                                </g>\r\n                            </svg>\r\n                            }\r\n                            @if (d.status.signalStatus! >= 4) {\r\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\"\r\n                                viewBox=\"0 0 20 20\">\r\n                                <title>Exelente</title>\r\n                                <path fill=\"#454733\" d=\"M1.667 18.333h16.666V1.667z\" />\r\n                            </svg>\r\n                            } @else if (d.status.signalStatus! == 3) { <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                                width=\"20\" height=\"20\" fill=\"#000\" viewBox=\"0 0 512 512\">\r\n                                <g id=\"SVGRepo_iconCarrier\">\r\n                                    <title>Buena</title>\r\n                                    <g id=\"Page-1\" fill=\"none\" fill-rule=\"evenodd\" stroke=\"none\" stroke-width=\"1\">\r\n                                        <g id=\"drop\" fill=\"#454733\" transform=\"translate(42.667 85.333)\">\r\n                                            <path id=\"Combined-Shape\"\r\n                                                d=\"M426.667 0v341.333H0zM384 88.747l-85.334 68.266v141.653H384z\" />\r\n                                        </g>\r\n                                    </g>\r\n                                </g>\r\n                            </svg>\r\n                            } @else if (d.status.signalStatus! == 2) { <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                                width=\"20\" height=\"20\" fill=\"#000\" viewBox=\"0 0 512 512\">\r\n                                <g id=\"SVGRepo_iconCarrier\">\r\n                                    <title>Regular</title>\r\n                                    <g id=\"Page-1\" fill=\"none\" fill-rule=\"evenodd\" stroke=\"none\" stroke-width=\"1\">\r\n                                        <g id=\"drop\" fill=\"#454733\" transform=\"translate(42.667 85.333)\">\r\n                                            <path id=\"Combined-Shape\"\r\n                                                d=\"M426.667 0v341.333H0zM384 88.747 213.333 225.28v73.386H384z\" />\r\n                                        </g>\r\n                                    </g>\r\n                                </g>\r\n                            </svg>\r\n                            } @else if (d.status.signalStatus! == 1) { <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                                width=\"20\" height=\"20\" fill=\"#000\" viewBox=\"0 0 512 512\">\r\n                                <g id=\"SVGRepo_iconCarrier\">\r\n                                    <title>Mala</title>\r\n                                    <g id=\"Page-1\" fill=\"none\" fill-rule=\"evenodd\" stroke=\"none\" stroke-width=\"1\">\r\n                                        <g id=\"drop\" fill=\"#454733\" transform=\"translate(42.667 85.333)\">\r\n                                            <path id=\"Combined-Shape\"\r\n                                                d=\"M426.667 0v341.333H0zM384 88.747 170.666 259.413v39.253H384z\" />\r\n                                        </g>\r\n                                    </g>\r\n                                </g>\r\n                            </svg>\r\n                            } @else { <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\"\r\n                                viewBox=\"0 0 20 20\">\r\n                                <title>Sin Se\u00F1al</title>\r\n                                <path fill=\"#454733\" d=\"M1.667 18.333h16.666V1.667zm15-1.666H5.692L16.667 5.692z\" />\r\n                            </svg>\r\n                            }\r\n                            @if (d.status.bluetooth) {\r\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\"\r\n                                viewBox=\"0 0 20 20\">\r\n                                <title>Conectado</title>\r\n                                <path fill=\"#454733\"\r\n                                    d=\"m15.296 6.425-4.758-4.758h-.834v6.325L5.88 4.167 4.704 5.342 9.363 10l-4.659 4.658 1.175 1.175 3.825-3.825v6.325h.834l4.758-4.758L11.713 10zM11.37 4.858l1.567 1.567-1.567 1.567zm1.567 8.717-1.567 1.567v-3.134z\" />\r\n                            </svg>\r\n                            } @else {\r\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\"\r\n                                viewBox=\"0 0 20 20\">\r\n                                <title>Desconectado</title>\r\n                                <path fill=\"#454733\"\r\n                                    d=\"M10.833 4.858 12.4 6.425l-1.333 1.333 1.175 1.175 2.516-2.516L10 1.667h-.833v4.191l1.666 1.667zM4.508 3.333 3.333 4.508 8.825 10l-4.658 4.658 1.175 1.175 3.825-3.825v6.325H10l3.575-3.575 1.917 1.909 1.175-1.175zm6.325 11.809v-3.134l1.567 1.567z\" />\r\n                            </svg>\r\n                            }\r\n                            @if (d.status.gps) {\r\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\"\r\n                                viewBox=\"0 0 20 20\">\r\n                                <g clip-path=\"url(#clip0_3_9268)\">\r\n                                    <title>Localizado</title>\r\n                                    <path fill=\"#454733\"\r\n                                        d=\"M10 6.667a3.332 3.332 0 1 0 0 6.666 3.332 3.332 0 1 0 0-6.666m7.45 2.5a7.495 7.495 0 0 0-6.617-6.617V.833H9.167V2.55A7.495 7.495 0 0 0 2.55 9.167H.833v1.666H2.55a7.495 7.495 0 0 0 6.617 6.617v1.717h1.666V17.45a7.495 7.495 0 0 0 6.617-6.617h1.717V9.167zM10 15.833A5.83 5.83 0 0 1 4.167 10 5.83 5.83 0 0 1 10 4.167 5.83 5.83 0 0 1 15.833 10 5.83 5.83 0 0 1 10 15.833\" />\r\n                                </g>\r\n                                <defs>\r\n                                    <clipPath id=\"clip0_3_9268\">\r\n                                        <path fill=\"#fff\" d=\"M0 0h20v20H0z\" />\r\n                                    </clipPath>\r\n                                </defs>\r\n                            </svg>\r\n                            } @else {\r\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\"\r\n                                viewBox=\"0 0 20 20\">\r\n                                <g clip-path=\"url(#clip0_3_9268)\">\r\n                                    <title>No Localizado</title>\r\n                                    <path fill=\"#454733\"\r\n                                        d=\"M17.45 9.167a7.495 7.495 0 0 0-6.617-6.617V.833H9.167V2.55a7.4 7.4 0 0 0-2.309.65l1.275 1.275a5.83 5.83 0 0 1 7.392 7.392l1.275 1.275a7.4 7.4 0 0 0 .65-2.309h1.717V9.167zM2.5 3.558l1.7 1.7a7.5 7.5 0 0 0-1.65 3.909H.833v1.666H2.55a7.495 7.495 0 0 0 6.617 6.617v1.717h1.666V17.45a7.5 7.5 0 0 0 3.909-1.65l1.7 1.7 1.175-1.175L3.675 2.383zm11.058 11.059a5.829 5.829 0 0 1-8.175-8.175z\" />\r\n                                </g>\r\n                                <defs>\r\n                                    <clipPath id=\"clip0_3_9268\">\r\n                                        <path fill=\"#fff\" d=\"M0 0h20v20H0z\" />\r\n                                    </clipPath>\r\n                                </defs>\r\n                            </svg>\r\n                            }\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"card-footer\">\r\n                        <span class=\"badge\" [ngClass]=\"getGeofenceClass(d.status.geofence)\">\r\n                            {{ d.status.geofence === 'inside' ? 'DENTRO DE GEOCERCA' : 'FUERA DE GEOCERCA' }}\r\n                        </span>\r\n\r\n                        <span class=\"badge update\">{{ getRelativeTime(d.lastUpdate) }}</span>\r\n                    </div>\r\n\r\n                </div>\r\n                }\r\n            </div>\r\n        </div>\r\n\r\n        @if (canScrollRight) {\r\n        <button class=\"nav right\" (click)=\"scroll(list,'right')\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\" stroke=\"currentColor\"\r\n                stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\r\n                class=\"icon icon-tabler icons-tabler-outline icon-tabler-chevron-right\" viewBox=\"0 0 24 24\">\r\n                <path fill=\"none\" stroke=\"none\" d=\"M0 0h24v24H0z\" />\r\n                <path d=\"m9 6 6 6-6 6\" />\r\n            </svg>\r\n        </button>\r\n        }\r\n    </div>\r\n\r\n</div>", styles: [".carousel-container{width:100%}.carousel-title{font-weight:600;color:#6f6f6f}.carousel-wrapper{position:relative;width:100%;display:flex;gap:16px;align-items:center}.carousel-mask{overflow:hidden;flex:1;border-radius:20px}.carousel-list{width:100%;display:flex;gap:16px;overflow-x:auto;scroll-behavior:smooth;padding:8px 0;border-radius:20px}.carousel-list::-webkit-scrollbar{display:none}.device-card{width:100%;min-width:220px;max-width:340px;height:auto;background:#f5f5e0;border-radius:20px;padding:16px;box-shadow:0 2px 6px #00000026;display:flex;flex-direction:column;gap:8px;flex-shrink:0}.card-header{width:100%;display:flex;font-weight:600;gap:16px;align-items:center}.code{flex:1;font-size:1.6rem;font-weight:700;color:#1c1c12;text-transform:uppercase;max-lines:1;text-overflow:ellipsis}.geofence{font-size:1.4rem;color:#1c1c12;max-lines:1;text-overflow:ellipsis;text-transform:uppercase}.device-info{display:flex;align-items:center;gap:12px;font-size:1.3rem;color:#454733;text-transform:uppercase}.icons span{margin-right:6px}.icon-active{color:#3cb371}.icon-inactive{color:#aaa}.card-footer{display:flex;gap:12px;align-items:center}.badge{font-size:1.1rem;padding:6px 12px;border-radius:8px}.badge-inside{background:#78db5c;color:#0f5e00}.badge-outside{background:#a60321;color:#fafae8}.badge.update{font-size:11px;color:#454733;background:#00c0e8}.nav{position:relative;background:transparent;border:none;font-size:24px;cursor:pointer;z-index:10}.nav.left{left:6px}.nav.right{right:6px}.icon{color:#1c1c1c;cursor:pointer}.icon.icon-tabler-current-location{color:#d3d936}.icon.icon-tabler-current-location:hover{color:#61661f}.icon-active path{fill:#454733}.signal-1 path{fill-opacity:.25}.signal-2 path{fill-opacity:.5}.signal-3 path{fill-opacity:.75}.signal-4 path{fill-opacity:1}\n"] }]
+            args: [{ selector: 'lib-devices-carousel', imports: [CommonModule], template: "<div class=\"carousel-container\">\r\n    <div class=\"carousel-wrapper\">\r\n\r\n        @if (canScrollLeft) {\r\n        <button class=\"nav left\" (click)=\"scroll(list,'left')\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\" stroke=\"currentColor\"\r\n                stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\r\n                class=\"icon icon-tabler icons-tabler-outline icon-tabler-chevron-left\" viewBox=\"0 0 24 24\">\r\n                <path fill=\"none\" stroke=\"none\" d=\"M0 0h24v24H0z\" />\r\n                <path d=\"m15 6-6 6 6 6\" />\r\n            </svg>\r\n        </button>\r\n        }\r\n\r\n        <div class=\"carousel-mask\">\r\n            <div class=\"carousel-list\" #list (scroll)=\"onScroll(list)\">\r\n                @for (d of devices; track d.code) {\r\n                <div class=\"device-card\">\r\n                    <div class=\"card-header\">\r\n                        <span class=\"code\">{{ d.code }} - {{ d.name }}</span>\r\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"currentColor\"\r\n                            class=\"target icon icon-tabler icons-tabler-filled icon-tabler-current-location\"\r\n                            (click)=\"buttonClickIcon()\" viewBox=\"0 0 24 24\">\r\n                            <path fill=\"none\" d=\"M0 0h24v24H0z\" />\r\n                            <path\r\n                                d=\"M12 1a1 1 0 0 1 1 1v1.055A9.004 9.004 0 0 1 20.946 11H22a1 1 0 0 1 0 2h-1.055a9.004 9.004 0 0 1-7.944 7.945L13 22a1 1 0 0 1-2 0v-1.055a9.004 9.004 0 0 1-7.945-7.944L2 13a1 1 0 0 1 0-2h1.055A9.004 9.004 0 0 1 11 3.055V2a1 1 0 0 1 1-1m0 4a7 7 0 1 0 0 14 7 7 0 0 0 0-14m0 3a4 4 0 1 1-4 4l.005-.2A4 4 0 0 1 12 8\" />\r\n                        </svg>\r\n                    </div>\r\n\r\n                    <span class=\"geofence\">{{ d.geofenceName }}</span>\r\n\r\n                    <div class=\"device-info\">\r\n                        <span>{{ d.deviceInfo }}</span>\r\n                        <div class=\"icons\">\r\n                            @if (d.status.wifi) {\r\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\"\r\n                                viewBox=\"0 0 20 20\">\r\n                                <g>\r\n                                    <title>En L\u00EDnea</title>\r\n                                </g>\r\n                                \r\n                                <path fill=\"#454733\"\r\n                                    d=\"M.833 7.314 2.5 8.98c4.142-4.141 10.858-4.141 15 0l1.667-1.666C14.108 2.255 5.9 2.255.833 7.314M7.5 13.98l2.5 2.5 2.5-2.5a3.53 3.53 0 0 0-5 0m-3.333-3.333 1.666 1.667c2.3-2.3 6.034-2.3 8.334 0l1.666-1.667c-3.216-3.217-8.441-3.217-11.666 0\" />\r\n                            </svg>\r\n                            } @else {\r\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\"\r\n                                viewBox=\"0 0 20 20\">\r\n                                <title>Fuera de L\u00EDnea</title>\r\n                                <path fill=\"#454733\"\r\n                                    d=\"m17.5 10.142 1.667-1.667C16.058 5.367 11.775 4.183 7.75 4.883l2.15 2.15a10.62 10.62 0 0 1 7.6 3.109m-1.667 1.666a8.25 8.25 0 0 0-3.1-1.941l2.517 2.516zM7.5 15.142l2.5 2.5 2.5-2.5a3.53 3.53 0 0 0-5 0m-4.658-12.8L1.667 3.517l2.541 2.541A13.1 13.1 0 0 0 .833 8.475L2.5 10.142a10.5 10.5 0 0 1 3.475-2.317l1.867 1.867a8.2 8.2 0 0 0-3.675 2.116l1.666 1.667a5.83 5.83 0 0 1 4.075-1.717l5.9 5.9 1.175-1.175z\" />\r\n                            </svg>\r\n                            } @if (getBatteryLevel(d.status.batteryPercentage) >= 4) {\r\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"19\" height=\"19\" fill=\"#454733\"\r\n                                viewBox=\"0 0 32 32\">\r\n                                <g id=\"SVGRepo_iconCarrier\">\r\n                                    <title>76-100%</title>\r\n                                    <path\r\n                                        d=\"M12.563 1c-.937 0-1.25.211-1.25 1.25v.937H8.5c-1.847 0-2.187.341-2.187 2.187v23.438c0 1.847.341 2.187 2.187 2.187h15c1.847 0 2.187-.341 2.187-2.187V5.374c0-1.847-.341-2.187-2.187-2.187h-2.813V2.25c0-1.038-.312-1.25-1.25-1.25zM8.5 7.563c0-2.5-.312-2.187 2.187-2.187h10.625c2.5 0 2.187-.312 2.187 2.187v19.063c0 2.5.312 2.187-2.187 2.187H10.687c-2.5 0-2.187.312-2.187-2.187zm1.562-1.25h11.875c.345 0 .625.28.625.625v3.438c0 .345-.28.625-.625.625H10.062a.625.625 0 0 1-.625-.625V6.938c0-.345.28-.625.625-.625m0 5.625h11.875c.345 0 .625.28.625.625v3.438c0 .345-.28.625-.625.625H10.062a.625.625 0 0 1-.625-.625v-3.438c0-.345.28-.625.625-.625m0 5.625h11.875c.345 0 .625.28.625.625v3.438c0 .345-.28.625-.625.625H10.062a.625.625 0 0 1-.625-.625v-3.438c0-.345.28-.625.625-.625m0 5.625h11.875c.345 0 .625.28.625.625v3.438c0 .345-.28.625-.625.625H10.062a.625.625 0 0 1-.625-.625v-3.438c0-.345.28-.625.625-.625\" />\r\n                                </g>\r\n                            </svg>\r\n                            } @else if (getBatteryLevel(d.status.batteryPercentage) == 3) {\r\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"19\" height=\"19\" fill=\"#454733\"\r\n                                viewBox=\"0 0 32 32\">\r\n                                <g id=\"SVGRepo_iconCarrier\">\r\n                                    <title>51-75%</title>\r\n                                    <path\r\n                                        d=\"M12.563 1c-.937 0-1.25.211-1.25 1.25v.937H8.5c-1.847 0-2.187.341-2.187 2.187v23.438c0 1.847.341 2.187 2.187 2.187h15c1.847 0 2.187-.341 2.187-2.187V5.374c0-1.847-.341-2.187-2.187-2.187h-2.813V2.25c0-1.038-.312-1.25-1.25-1.25zM8.5 7.563c0-2.5-.312-2.187 2.187-2.187h10.625c2.5 0 2.187-.312 2.187 2.187v19.063c0 2.5.312 2.187-2.187 2.187H10.687c-2.5 0-2.187.312-2.187-2.187zm1.562 4.375h11.875c.345 0 .625.28.625.625v3.438c0 .345-.28.625-.625.625H10.062a.625.625 0 0 1-.625-.625v-3.438c0-.345.28-.625.625-.625m0 5.625h11.875c.345 0 .625.28.625.625v3.438c0 .345-.28.625-.625.625H10.062a.625.625 0 0 1-.625-.625v-3.438c0-.345.28-.625.625-.625m0 5.625h11.875c.345 0 .625.28.625.625v3.438c0 .345-.28.625-.625.625H10.062a.625.625 0 0 1-.625-.625v-3.438c0-.345.28-.625.625-.625\" />\r\n                                </g>\r\n                            </svg>\r\n                            } @else if (getBatteryLevel(d.status.batteryPercentage) == 2) {\r\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"19\" height=\"19\" fill=\"#454733\"\r\n                                viewBox=\"0 0 32 32\">\r\n                                <g id=\"SVGRepo_iconCarrier\">\r\n                                    <title>21-50%</title>\r\n                                    <path\r\n                                        d=\"M12.563 1c-.937 0-1.25.211-1.25 1.25v.937H8.5c-1.847 0-2.187.341-2.187 2.187v23.438c0 1.847.341 2.187 2.187 2.187h15c1.847 0 2.187-.341 2.187-2.187V5.374c0-1.847-.341-2.187-2.187-2.187h-2.813V2.25c0-1.038-.312-1.25-1.25-1.25zM8.5 7.563c0-2.5-.312-2.187 2.187-2.187h10.625c2.5 0 2.187-.312 2.187 2.187v19.063c0 2.5.312 2.187-2.187 2.187H10.687c-2.5 0-2.187.312-2.187-2.187zm1.562 10h11.875c.345 0 .625.28.625.625v3.438c0 .345-.28.625-.625.625H10.062a.625.625 0 0 1-.625-.625v-3.438c0-.345.28-.625.625-.625m0 5.625h11.875c.345 0 .625.28.625.625v3.438c0 .345-.28.625-.625.625H10.062a.625.625 0 0 1-.625-.625v-3.438c0-.345.28-.625.625-.625\" />\r\n                                </g>\r\n                            </svg>\r\n                            } @else if (getBatteryLevel(d.status.batteryPercentage) == 1) {\r\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"19\" height=\"19\" fill=\"#454733\"\r\n                                viewBox=\"0 0 32 32\">\r\n                                <g id=\"SVGRepo_iconCarrier\">\r\n                                    <title>1-20%</title>\r\n                                    <path\r\n                                        d=\"M12.563 1c-.937 0-1.25.211-1.25 1.25v.937H8.5c-1.847 0-2.187.341-2.187 2.187v23.438c0 1.847.341 2.187 2.187 2.187h15c1.847 0 2.187-.341 2.187-2.187V5.374c0-1.847-.341-2.187-2.187-2.187h-2.813V2.25c0-1.038-.312-1.25-1.25-1.25zM8.5 7.563c0-2.5-.312-2.187 2.187-2.187h10.625c2.5 0 2.187-.312 2.187 2.187v19.063c0 2.5.312 2.187-2.187 2.187H10.687c-2.5 0-2.187.312-2.187-2.187zm1.562 15.625h11.875c.345 0 .625.28.625.625v3.438c0 .345-.28.625-.625.625H10.062a.625.625 0 0 1-.625-.625v-3.438c0-.345.28-.625.625-.625\" />\r\n                                </g>\r\n                            </svg>\r\n                            } @else {\r\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"19\" height=\"19\" fill=\"#454733\"\r\n                                viewBox=\"0 0 32 32\">\r\n                                <g id=\"SVGRepo_iconCarrier\">\r\n                                    <title>0%</title>\r\n                                    <path\r\n                                        d=\"M12.563 1c-.937 0-1.25.211-1.25 1.25v.937H8.5c-1.847 0-2.187.341-2.187 2.187v23.438c0 1.847.341 2.187 2.187 2.187h15c1.847 0 2.187-.341 2.187-2.187V5.374c0-1.847-.341-2.187-2.187-2.187h-2.813V2.25c0-1.038-.312-1.25-1.25-1.25zM8.5 7.563c0-2.5-.312-2.187 2.187-2.187h10.625c2.5 0 2.187-.312 2.187 2.187v19.063c0 2.5.312 2.187-2.187 2.187H10.687c-2.5 0-2.187.312-2.187-2.187z\" />\r\n                                </g>\r\n                            </svg>\r\n                            }\r\n                            @if (d.status.signalStatus! >= 4) {\r\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\"\r\n                                viewBox=\"0 0 20 20\">\r\n                                <title>Excelente</title>\r\n                                <path fill=\"#454733\" d=\"M1.667 18.333h16.666V1.667z\" />\r\n                            </svg>\r\n                            } @else if (d.status.signalStatus! == 3) { <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                                width=\"20\" height=\"20\" fill=\"#000\" viewBox=\"0 0 512 512\">\r\n                                <g id=\"SVGRepo_iconCarrier\">\r\n                                    <title>Buena</title>\r\n                                    <g id=\"Page-1\" fill=\"none\" fill-rule=\"evenodd\" stroke=\"none\" stroke-width=\"1\">\r\n                                        <g id=\"drop\" fill=\"#454733\" transform=\"translate(42.667 85.333)\">\r\n                                            <path id=\"Combined-Shape\"\r\n                                                d=\"M426.667 0v341.333H0zM384 88.747l-85.334 68.266v141.653H384z\" />\r\n                                        </g>\r\n                                    </g>\r\n                                </g>\r\n                            </svg>\r\n                            } @else if (d.status.signalStatus! == 2) { <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                                width=\"20\" height=\"20\" fill=\"#000\" viewBox=\"0 0 512 512\">\r\n                                <g id=\"SVGRepo_iconCarrier\">\r\n                                    <title>Regular</title>\r\n                                    <g id=\"Page-1\" fill=\"none\" fill-rule=\"evenodd\" stroke=\"none\" stroke-width=\"1\">\r\n                                        <g id=\"drop\" fill=\"#454733\" transform=\"translate(42.667 85.333)\">\r\n                                            <path id=\"Combined-Shape\"\r\n                                                d=\"M426.667 0v341.333H0zM384 88.747 213.333 225.28v73.386H384z\" />\r\n                                        </g>\r\n                                    </g>\r\n                                </g>\r\n                            </svg>\r\n                            } @else if (d.status.signalStatus! == 1) { <svg xmlns=\"http://www.w3.org/2000/svg\"\r\n                                width=\"20\" height=\"20\" fill=\"#000\" viewBox=\"0 0 512 512\">\r\n                                <g id=\"SVGRepo_iconCarrier\">\r\n                                    <title>Mala</title>\r\n                                    <g id=\"Page-1\" fill=\"none\" fill-rule=\"evenodd\" stroke=\"none\" stroke-width=\"1\">\r\n                                        <g id=\"drop\" fill=\"#454733\" transform=\"translate(42.667 85.333)\">\r\n                                            <path id=\"Combined-Shape\"\r\n                                                d=\"M426.667 0v341.333H0zM384 88.747 170.666 259.413v39.253H384z\" />\r\n                                        </g>\r\n                                    </g>\r\n                                </g>\r\n                            </svg>\r\n                            } @else { <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\"\r\n                                viewBox=\"0 0 20 20\">\r\n                                <title>Sin Se\u00F1al</title>\r\n                                <path fill=\"#454733\" d=\"M1.667 18.333h16.666V1.667zm15-1.666H5.692L16.667 5.692z\" />\r\n                            </svg>\r\n                            }\r\n                            @if (d.status.bluetooth) {\r\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\"\r\n                                viewBox=\"0 0 20 20\">\r\n                                <title>Conectado</title>\r\n                                <path fill=\"#454733\"\r\n                                    d=\"m15.296 6.425-4.758-4.758h-.834v6.325L5.88 4.167 4.704 5.342 9.363 10l-4.659 4.658 1.175 1.175 3.825-3.825v6.325h.834l4.758-4.758L11.713 10zM11.37 4.858l1.567 1.567-1.567 1.567zm1.567 8.717-1.567 1.567v-3.134z\" />\r\n                            </svg>\r\n                            } @else {\r\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\"\r\n                                viewBox=\"0 0 20 20\">\r\n                                <title>Desconectado</title>\r\n                                <path fill=\"#454733\"\r\n                                    d=\"M10.833 4.858 12.4 6.425l-1.333 1.333 1.175 1.175 2.516-2.516L10 1.667h-.833v4.191l1.666 1.667zM4.508 3.333 3.333 4.508 8.825 10l-4.658 4.658 1.175 1.175 3.825-3.825v6.325H10l3.575-3.575 1.917 1.909 1.175-1.175zm6.325 11.809v-3.134l1.567 1.567z\" />\r\n                            </svg>\r\n                            }\r\n                            @if (d.status.gps) {\r\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\"\r\n                                viewBox=\"0 0 20 20\">\r\n                                <g clip-path=\"url(#clip0_3_9268)\">\r\n                                    <title>Localizado</title>\r\n                                    <path fill=\"#454733\"\r\n                                        d=\"M10 6.667a3.332 3.332 0 1 0 0 6.666 3.332 3.332 0 1 0 0-6.666m7.45 2.5a7.495 7.495 0 0 0-6.617-6.617V.833H9.167V2.55A7.495 7.495 0 0 0 2.55 9.167H.833v1.666H2.55a7.495 7.495 0 0 0 6.617 6.617v1.717h1.666V17.45a7.495 7.495 0 0 0 6.617-6.617h1.717V9.167zM10 15.833A5.83 5.83 0 0 1 4.167 10 5.83 5.83 0 0 1 10 4.167 5.83 5.83 0 0 1 15.833 10 5.83 5.83 0 0 1 10 15.833\" />\r\n                                </g>\r\n                                <defs>\r\n                                    <clipPath id=\"clip0_3_9268\">\r\n                                        <path fill=\"#fff\" d=\"M0 0h20v20H0z\" />\r\n                                    </clipPath>\r\n                                </defs>\r\n                            </svg>\r\n                            } @else {\r\n                            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\"\r\n                                viewBox=\"0 0 20 20\">\r\n                                <g clip-path=\"url(#clip0_3_9268)\">\r\n                                    <title>No Localizado</title>\r\n                                    <path fill=\"#454733\"\r\n                                        d=\"M17.45 9.167a7.495 7.495 0 0 0-6.617-6.617V.833H9.167V2.55a7.4 7.4 0 0 0-2.309.65l1.275 1.275a5.83 5.83 0 0 1 7.392 7.392l1.275 1.275a7.4 7.4 0 0 0 .65-2.309h1.717V9.167zM2.5 3.558l1.7 1.7a7.5 7.5 0 0 0-1.65 3.909H.833v1.666H2.55a7.495 7.495 0 0 0 6.617 6.617v1.717h1.666V17.45a7.5 7.5 0 0 0 3.909-1.65l1.7 1.7 1.175-1.175L3.675 2.383zm11.058 11.059a5.829 5.829 0 0 1-8.175-8.175z\" />\r\n                                </g>\r\n                                <defs>\r\n                                    <clipPath id=\"clip0_3_9268\">\r\n                                        <path fill=\"#fff\" d=\"M0 0h20v20H0z\" />\r\n                                    </clipPath>\r\n                                </defs>\r\n                            </svg>\r\n                            }\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"card-footer\">\r\n                        <span class=\"badge\" [ngClass]=\"getGeofenceClass(d.status.geofence)\">\r\n                            {{ d.status.geofence === 'inside' ? 'DENTRO DE GEOCERCA' : 'FUERA DE GEOCERCA' }}\r\n                        </span>\r\n\r\n                        <span class=\"badge update\">{{ getRelativeTime(d.lastUpdate) }}</span>\r\n                    </div>\r\n\r\n                </div>\r\n                }\r\n            </div>\r\n        </div>\r\n\r\n        @if (canScrollRight) {\r\n        <button class=\"nav right\" (click)=\"scroll(list,'right')\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\" stroke=\"currentColor\"\r\n                stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\r\n                class=\"icon icon-tabler icons-tabler-outline icon-tabler-chevron-right\" viewBox=\"0 0 24 24\">\r\n                <path fill=\"none\" stroke=\"none\" d=\"M0 0h24v24H0z\" />\r\n                <path d=\"m9 6 6 6-6 6\" />\r\n            </svg>\r\n        </button>\r\n        }\r\n    </div>\r\n\r\n</div>", styles: [".carousel-container{width:100%}.carousel-title{font-weight:600;color:#6f6f6f}.carousel-wrapper{position:relative;width:100%;display:flex;gap:16px;align-items:center}.carousel-mask{overflow:hidden;flex:1;border-radius:20px}.carousel-list{width:100%;display:flex;gap:16px;overflow-x:auto;scroll-behavior:smooth;padding:8px 0;border-radius:20px}.carousel-list::-webkit-scrollbar{display:none}.device-card{width:100%;min-width:220px;max-width:340px;height:auto;background:#f5f5e0;border-radius:20px;padding:16px;box-shadow:0 2px 6px #00000026;display:flex;flex-direction:column;gap:8px;flex-shrink:0}.card-header{width:100%;display:flex;font-weight:600;gap:16px;align-items:center}.code{flex:1;font-size:1.6rem;font-weight:700;color:#1c1c12;text-transform:uppercase;max-lines:1;text-overflow:ellipsis}.geofence{font-size:1.4rem;color:#1c1c12;max-lines:1;text-overflow:ellipsis;text-transform:uppercase}.device-info{display:flex;align-items:center;gap:12px;font-size:1.3rem;color:#454733;text-transform:uppercase}.icons span{margin-right:6px}.icon-active{color:#3cb371}.icon-inactive{color:#aaa}.card-footer{display:flex;gap:12px;align-items:center}.badge{font-size:1.1rem;padding:6px 12px;border-radius:8px}.badge-inside{background:#78db5c;color:#0f5e00}.badge-outside{background:#a60321;color:#fafae8}.badge.update{font-size:11px;color:#454733;background:#00c0e8}.nav{position:relative;background:transparent;border:none;font-size:24px;cursor:pointer;z-index:10}.nav.left{left:6px}.nav.right{right:6px}.icon{color:#1c1c1c;cursor:pointer}.icon.icon-tabler-current-location{color:#d3d936}.icon.icon-tabler-current-location:hover{color:#61661f}.icon-active path{fill:#454733}\n"] }]
         }], propDecorators: { devices: [{
                 type: Input$1
             }], btnClickIcon: [{
@@ -2788,6 +2871,34 @@ class TitleFilters {
     selectedTextFilters = signal({}, ...(ngDevMode ? [{ debugName: "selectedTextFilters" }] : []));
     buttonMode = input('toggle', ...(ngDevMode ? [{ debugName: "buttonMode" }] : []));
     filterButtonClicked = output();
+    emitAllFilters(textFilters, dateFilters) {
+        this.filtersChange.emit({
+            ...textFilters,
+            ...dateFilters,
+        });
+    }
+    normalizeSelectOptions(options) {
+        return options.map(opt => ({
+            label: String(opt.label ?? opt.name ?? opt.text),
+            value: String(opt.value ?? opt.code ?? opt.id),
+        }));
+    }
+    normalizeFilters(filters) {
+        return filters.map(filter => {
+            if (!filter.options)
+                return filter;
+            return {
+                ...filter,
+                options: this.normalizeSelectOptions(filter.options),
+            };
+        });
+    }
+    normalizedFiltersConfig = computed(() => {
+        return this.filtersConfig().map(group => ({
+            ...group,
+            filters: this.normalizeFilters(group.filters),
+        }));
+    }, ...(ngDevMode ? [{ debugName: "normalizedFiltersConfig" }] : []));
     onFilterButtonClick() {
         if (this.buttonMode() === 'toggle') {
             this.toggleFilters();
@@ -2803,28 +2914,37 @@ class TitleFilters {
         this.selectedDates.set({});
         this.selectedTextFilters.set({});
         this.clearFilterTrigger.update(v => v + 1);
+        this.filtersChange.emit({});
     }
     onApplyFilters() {
         this.applyFilters.emit();
     }
     onDateSelected(event) {
-        this.selectedDates.update((current) => ({
-            ...current,
-            [event.filter]: event.value,
-        }));
+        this.selectedDates.update((current) => {
+            const updated = {
+                ...current,
+                [event.filter]: event.value,
+            };
+            this.emitAllFilters(this.selectedTextFilters(), updated);
+            return updated;
+        });
     }
     onFilterSelected(event) {
-        this.selectedTextFilters.update((current) => ({
-            ...current,
-            [event.filter]: event.value,
-        }));
+        this.selectedTextFilters.update((current) => {
+            const updated = {
+                ...current,
+                [event.filter]: event.value,
+            };
+            this.emitAllFilters(updated, this.selectedDates());
+            return updated;
+        });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TitleFilters, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: TitleFilters, isStandalone: true, selector: "lib-title-filters", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, filtersConfig: { classPropertyName: "filtersConfig", publicName: "filtersConfig", isSignal: true, isRequired: false, transformFunction: null }, buttonMode: { classPropertyName: "buttonMode", publicName: "buttonMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filtersChange: "filtersChange", applyFilters: "applyFilters", filterButtonClicked: "filterButtonClicked" }, ngImport: i0, template: "<div class=\"header-container-table\">\r\n    <div class=\"filters-dashboard-table\">\r\n        <div class=\"title-table\">{{ title() }}</div>\r\n\r\n        @if (buttonMode() === 'toggle') {\r\n        <div class=\"button-small-primary\" (click)=\"toggleFilters()\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n                stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n                class=\"icon icon-tabler icons-tabler-outline icon-tabler-filter\">\r\n                <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n                <path\r\n                    d=\"M4 4h16v2.172a2 2 0 0 1 -.586 1.414l-4.414 4.414v7l-6 2v-8.5l-4.48 -4.928a2 2 0 0 1 -.52 -1.345v-2.227z\" />\r\n            </svg>\r\n            <div class=\"label\">Filtros</div>\r\n        </div>\r\n        }\r\n        @if (buttonMode() === 'action') {\r\n        <div class=\"button-small-primary\" (click)=\"onFilterButtonClick()\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\" viewBox=\"0 0 20 20\">\r\n                <path fill=\"#fff\"\r\n                    d=\"M10.85 16.608v1.684a8.3 8.3 0 0 0 4.433-1.842L14.1 15.258a6.6 6.6 0 0 1-3.25 1.35M3.358 10c0-3.375 2.525-6.175 5.792-6.608V1.708C4.958 2.15 1.692 5.7 1.692 10s3.266 7.85 7.458 8.292v-1.684C5.883 16.175 3.358 13.375 3.358 10m13.267-.833h1.683a8.3 8.3 0 0 0-1.841-4.434l-1.192 1.192a6.56 6.56 0 0 1 1.35 3.242M15.283 3.55a8.3 8.3 0 0 0-4.433-1.842v1.684a6.6 6.6 0 0 1 3.25 1.35zm-.008 10.533 1.192 1.184a8.3 8.3 0 0 0 1.841-4.434h-1.683a6.6 6.6 0 0 1-1.35 3.25\" />\r\n                <path fill=\"#fff\"\r\n                    d=\"M13.333 9.25c0-2.075-1.583-3.417-3.333-3.417S6.667 7.175 6.667 9.25c0 1.383 1.108 3.025 3.333 4.917 2.225-1.892 3.333-3.534 3.333-4.917M10 10a.893.893 0 0 1 0-1.783A.893.893 0 0 1 10 10\" />\r\n            </svg>\r\n            <div class=\"label\">Ir al Mapa</div>\r\n        </div>\r\n        }\r\n    </div>\r\n\r\n    @if (showFilters()) {\r\n    <div class=\"filters-container\">\r\n        <div class=\"date-picker-wrapper\">\r\n\r\n            @for (config of filtersConfig(); track $index) {\r\n            @switch (config.type) {\r\n            @case ('text') {\r\n            <lib-input-text-filter [filters]=\"config.filters\" [clearTrigger]=\"clearFilterTrigger()\"\r\n                (filterSelected)=\"onFilterSelected($event)\" />\r\n            }\r\n            @case ('number') {\r\n            <lib-input-number-filter [filters]=\"config.filters\" [clearTrigger]=\"clearFilterTrigger()\"\r\n                (filterSelected)=\"onFilterSelected($event)\" />\r\n            }\r\n            @case ('select') {\r\n            <lib-input-select-filter [filters]=\"config.filters\" [clearTrigger]=\"clearFilterTrigger()\"\r\n                (filterSelected)=\"onFilterSelected($event)\" />\r\n            }\r\n            @case ('date') {\r\n            <lib-date-time-filter [filters]=\"config.filters\" [clearTrigger]=\"clearFilterTrigger()\"\r\n                (dateSelected)=\"onDateSelected($event)\" />\r\n            }\r\n            }\r\n            }\r\n\r\n            <div class=\"actions\">\r\n                <div class=\"button-small-primary\" (click)=\"onApplyFilters()\">\r\n                    <div class=\"label\">Aplicar Filtros</div>\r\n                </div>\r\n\r\n                <div class=\"button-text\" (click)=\"clearAllFilters()\">\r\n                    Borrar Filtros\r\n                </div>\r\n            </div>\r\n\r\n        </div>\r\n    </div>\r\n    }\r\n</div>", styles: [".header-container-table{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;flex:1;width:100%;position:relative}.filters-dashboard-table{display:flex;flex-direction:row;gap:24px;align-items:center;justify-content:flex-start;flex-shrink:0;width:100%;position:relative}.title-table{color:var(--schemes-on-surface, #171c1f);font-family:var(--headline-large-font, \"Roboto-SemiBold\", sans-serif);font-size:32px;line-height:40px;font-weight:600;position:relative}.filters-container{display:flex;flex-direction:row;gap:24px;margin-top:12px;position:relative;flex-wrap:wrap}.date-picker-wrapper{display:flex;position:relative;align-items:center;margin-top:4px;z-index:1000;flex-wrap:wrap;gap:10px}.actions{display:flex;gap:10px}.button-text{display:flex;background-color:transparent;color:#61661f;padding:0 12px;font-size:1.3rem;font-weight:500;border:1px solid #61661F;border-radius:20px;cursor:pointer;justify-content:center;align-items:center;position:relative;flex-shrink:0}.button-text:hover{background-color:#d8eb2ca7;border:1px solid #d8eb2ca7}.button-small-primary{background-color:var(--primary, #596300);padding:10px 16px;display:flex;flex-direction:row;gap:8px;align-items:center;justify-content:center;flex-shrink:0;position:relative;border:none;border-radius:99px;cursor:pointer}.button-small-primary:hover{background-color:var(--on-secondary-container, #61661F)}.button-small-primary:active{background-color:#737928}.icon{color:var(--surface, #fafae8);flex-shrink:0;width:20px;height:20px;position:relative;overflow:visible}.button-small-primary .label{color:var(--schemes-on-primary, #ffffff);text-align:left;font-family:var( --theme-label-large-font-family, \"Roboto-Medium\", sans-serif );font-size:var(--theme-label-large-font-size, 1.4rem);line-height:var(--theme-label-large-line-height, 20px);letter-spacing:var(--theme-label-large-letter-spacing, .1px);font-weight:var(--theme-label-large-font-weight, 500);position:relative;display:flex;align-items:center;justify-content:flex-start}\n"], dependencies: [{ kind: "component", type: InputNumberFilter, selector: "lib-input-number-filter", inputs: ["filters", "clearTrigger"], outputs: ["filterSelected", "valueChange"] }, { kind: "component", type: InputTextFilter, selector: "lib-input-text-filter", inputs: ["filters", "clearTrigger"], outputs: ["filterSelected", "valueChange"] }, { kind: "component", type: InputSelectFilter, selector: "lib-input-select-filter", inputs: ["filters", "clearTrigger"], outputs: ["filterSelected", "valueChange"] }, { kind: "component", type: DateTimeFilter, selector: "lib-date-time-filter", inputs: ["filters", "clearTrigger"], outputs: ["dateSelected", "dateChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: TitleFilters, isStandalone: true, selector: "lib-title-filters", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, filtersConfig: { classPropertyName: "filtersConfig", publicName: "filtersConfig", isSignal: true, isRequired: false, transformFunction: null }, buttonMode: { classPropertyName: "buttonMode", publicName: "buttonMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filtersChange: "filtersChange", applyFilters: "applyFilters", filterButtonClicked: "filterButtonClicked" }, ngImport: i0, template: "<div class=\"header-container-table\">\r\n    <div class=\"filters-dashboard-table\">\r\n        <div class=\"title-table\">{{ title() }}</div>\r\n\r\n        @if (buttonMode() === 'toggle') {\r\n        <div class=\"button-small-primary\" (click)=\"toggleFilters()\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n                stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n                class=\"icon icon-tabler icons-tabler-outline icon-tabler-filter\">\r\n                <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n                <path\r\n                    d=\"M4 4h16v2.172a2 2 0 0 1 -.586 1.414l-4.414 4.414v7l-6 2v-8.5l-4.48 -4.928a2 2 0 0 1 -.52 -1.345v-2.227z\" />\r\n            </svg>\r\n            <div class=\"label\">Filtros</div>\r\n        </div>\r\n        }\r\n        @if (buttonMode() === 'action') {\r\n        <div class=\"button-small-primary\" (click)=\"onFilterButtonClick()\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\" viewBox=\"0 0 20 20\">\r\n                <path fill=\"#fff\"\r\n                    d=\"M10.85 16.608v1.684a8.3 8.3 0 0 0 4.433-1.842L14.1 15.258a6.6 6.6 0 0 1-3.25 1.35M3.358 10c0-3.375 2.525-6.175 5.792-6.608V1.708C4.958 2.15 1.692 5.7 1.692 10s3.266 7.85 7.458 8.292v-1.684C5.883 16.175 3.358 13.375 3.358 10m13.267-.833h1.683a8.3 8.3 0 0 0-1.841-4.434l-1.192 1.192a6.56 6.56 0 0 1 1.35 3.242M15.283 3.55a8.3 8.3 0 0 0-4.433-1.842v1.684a6.6 6.6 0 0 1 3.25 1.35zm-.008 10.533 1.192 1.184a8.3 8.3 0 0 0 1.841-4.434h-1.683a6.6 6.6 0 0 1-1.35 3.25\" />\r\n                <path fill=\"#fff\"\r\n                    d=\"M13.333 9.25c0-2.075-1.583-3.417-3.333-3.417S6.667 7.175 6.667 9.25c0 1.383 1.108 3.025 3.333 4.917 2.225-1.892 3.333-3.534 3.333-4.917M10 10a.893.893 0 0 1 0-1.783A.893.893 0 0 1 10 10\" />\r\n            </svg>\r\n            <div class=\"label\">Ir al Mapa</div>\r\n        </div>\r\n        }\r\n    </div>\r\n\r\n    @if (showFilters()) {\r\n    <div class=\"filters-container\">\r\n        <div class=\"date-picker-wrapper\">\r\n\r\n            @for (config of normalizedFiltersConfig(); track $index) {\r\n            @switch (config.type) {\r\n            @case ('text') {\r\n            <lib-input-text-filter [filters]=\"config.filters\" [clearTrigger]=\"clearFilterTrigger()\"\r\n                (filterSelected)=\"onFilterSelected($event)\" />\r\n            }\r\n            @case ('number') {\r\n            <lib-input-number-filter [filters]=\"config.filters\" [clearTrigger]=\"clearFilterTrigger()\"\r\n                (filterSelected)=\"onFilterSelected($event)\" />\r\n            }\r\n            @case ('select') {\r\n            <lib-input-select-filter [filters]=\"config.filters\" [clearTrigger]=\"clearFilterTrigger()\"\r\n                (filterSelected)=\"onFilterSelected($event)\" />\r\n            }\r\n            @case ('date') {\r\n            <lib-date-time-filter [filters]=\"config.filters\" [clearTrigger]=\"clearFilterTrigger()\"\r\n                (dateSelected)=\"onDateSelected($event)\" />\r\n            }\r\n            }\r\n            }\r\n\r\n            <div class=\"actions\">\r\n                <div class=\"button-small-primary\" (click)=\"onApplyFilters()\">\r\n                    <div class=\"label\">Aplicar Filtros</div>\r\n                </div>\r\n\r\n                <div class=\"button-text\" (click)=\"clearAllFilters()\">\r\n                    Borrar Filtros\r\n                </div>\r\n            </div>\r\n\r\n        </div>\r\n    </div>\r\n    }\r\n</div>", styles: [".header-container-table{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;flex:1;width:100%;position:relative}.filters-dashboard-table{display:flex;flex-direction:row;gap:24px;align-items:center;justify-content:flex-start;flex-shrink:0;width:100%;position:relative}.title-table{color:var(--schemes-on-surface, #171c1f);font-family:var(--headline-large-font, \"Roboto-SemiBold\", sans-serif);font-size:32px;line-height:40px;font-weight:600;position:relative}.filters-container{display:flex;flex-direction:row;gap:24px;margin-top:12px;position:relative;flex-wrap:wrap}.date-picker-wrapper{display:flex;position:relative;align-items:center;margin-top:4px;z-index:1000;flex-wrap:wrap;gap:10px}.actions{display:flex;gap:10px}.button-text{display:flex;background-color:transparent;color:#61661f;padding:0 12px;font-size:1.3rem;font-weight:500;border:1px solid #61661F;border-radius:20px;cursor:pointer;justify-content:center;align-items:center;position:relative;flex-shrink:0}.button-text:hover{background-color:#d8eb2ca7;border:1px solid #d8eb2ca7}.button-small-primary{background-color:var(--primary, #596300);padding:10px 16px;display:flex;flex-direction:row;gap:8px;align-items:center;justify-content:center;flex-shrink:0;position:relative;border:none;border-radius:99px;cursor:pointer}.button-small-primary:hover{background-color:var(--on-secondary-container, #61661F)}.button-small-primary:active{background-color:#737928}.icon{color:var(--surface, #fafae8);flex-shrink:0;width:20px;height:20px;position:relative;overflow:visible}.button-small-primary .label{color:var(--schemes-on-primary, #ffffff);text-align:left;font-family:var( --theme-label-large-font-family, \"Roboto-Medium\", sans-serif );font-size:var(--theme-label-large-font-size, 1.4rem);line-height:var(--theme-label-large-line-height, 20px);letter-spacing:var(--theme-label-large-letter-spacing, .1px);font-weight:var(--theme-label-large-font-weight, 500);position:relative;display:flex;align-items:center;justify-content:flex-start}\n"], dependencies: [{ kind: "component", type: InputNumberFilter, selector: "lib-input-number-filter", inputs: ["filters", "clearTrigger"], outputs: ["filterSelected", "valueChange"] }, { kind: "component", type: InputTextFilter, selector: "lib-input-text-filter", inputs: ["filters", "clearTrigger"], outputs: ["filterSelected", "valueChange"] }, { kind: "component", type: InputSelectFilter, selector: "lib-input-select-filter", inputs: ["filters", "clearTrigger"], outputs: ["filterSelected", "valueChange"] }, { kind: "component", type: DateTimeFilter, selector: "lib-date-time-filter", inputs: ["filters", "clearTrigger"], outputs: ["dateSelected", "dateChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TitleFilters, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-title-filters', imports: [InputNumberFilter, InputTextFilter, InputSelectFilter, DateTimeFilter], template: "<div class=\"header-container-table\">\r\n    <div class=\"filters-dashboard-table\">\r\n        <div class=\"title-table\">{{ title() }}</div>\r\n\r\n        @if (buttonMode() === 'toggle') {\r\n        <div class=\"button-small-primary\" (click)=\"toggleFilters()\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n                stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n                class=\"icon icon-tabler icons-tabler-outline icon-tabler-filter\">\r\n                <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n                <path\r\n                    d=\"M4 4h16v2.172a2 2 0 0 1 -.586 1.414l-4.414 4.414v7l-6 2v-8.5l-4.48 -4.928a2 2 0 0 1 -.52 -1.345v-2.227z\" />\r\n            </svg>\r\n            <div class=\"label\">Filtros</div>\r\n        </div>\r\n        }\r\n        @if (buttonMode() === 'action') {\r\n        <div class=\"button-small-primary\" (click)=\"onFilterButtonClick()\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\" viewBox=\"0 0 20 20\">\r\n                <path fill=\"#fff\"\r\n                    d=\"M10.85 16.608v1.684a8.3 8.3 0 0 0 4.433-1.842L14.1 15.258a6.6 6.6 0 0 1-3.25 1.35M3.358 10c0-3.375 2.525-6.175 5.792-6.608V1.708C4.958 2.15 1.692 5.7 1.692 10s3.266 7.85 7.458 8.292v-1.684C5.883 16.175 3.358 13.375 3.358 10m13.267-.833h1.683a8.3 8.3 0 0 0-1.841-4.434l-1.192 1.192a6.56 6.56 0 0 1 1.35 3.242M15.283 3.55a8.3 8.3 0 0 0-4.433-1.842v1.684a6.6 6.6 0 0 1 3.25 1.35zm-.008 10.533 1.192 1.184a8.3 8.3 0 0 0 1.841-4.434h-1.683a6.6 6.6 0 0 1-1.35 3.25\" />\r\n                <path fill=\"#fff\"\r\n                    d=\"M13.333 9.25c0-2.075-1.583-3.417-3.333-3.417S6.667 7.175 6.667 9.25c0 1.383 1.108 3.025 3.333 4.917 2.225-1.892 3.333-3.534 3.333-4.917M10 10a.893.893 0 0 1 0-1.783A.893.893 0 0 1 10 10\" />\r\n            </svg>\r\n            <div class=\"label\">Ir al Mapa</div>\r\n        </div>\r\n        }\r\n    </div>\r\n\r\n    @if (showFilters()) {\r\n    <div class=\"filters-container\">\r\n        <div class=\"date-picker-wrapper\">\r\n\r\n            @for (config of filtersConfig(); track $index) {\r\n            @switch (config.type) {\r\n            @case ('text') {\r\n            <lib-input-text-filter [filters]=\"config.filters\" [clearTrigger]=\"clearFilterTrigger()\"\r\n                (filterSelected)=\"onFilterSelected($event)\" />\r\n            }\r\n            @case ('number') {\r\n            <lib-input-number-filter [filters]=\"config.filters\" [clearTrigger]=\"clearFilterTrigger()\"\r\n                (filterSelected)=\"onFilterSelected($event)\" />\r\n            }\r\n            @case ('select') {\r\n            <lib-input-select-filter [filters]=\"config.filters\" [clearTrigger]=\"clearFilterTrigger()\"\r\n                (filterSelected)=\"onFilterSelected($event)\" />\r\n            }\r\n            @case ('date') {\r\n            <lib-date-time-filter [filters]=\"config.filters\" [clearTrigger]=\"clearFilterTrigger()\"\r\n                (dateSelected)=\"onDateSelected($event)\" />\r\n            }\r\n            }\r\n            }\r\n\r\n            <div class=\"actions\">\r\n                <div class=\"button-small-primary\" (click)=\"onApplyFilters()\">\r\n                    <div class=\"label\">Aplicar Filtros</div>\r\n                </div>\r\n\r\n                <div class=\"button-text\" (click)=\"clearAllFilters()\">\r\n                    Borrar Filtros\r\n                </div>\r\n            </div>\r\n\r\n        </div>\r\n    </div>\r\n    }\r\n</div>", styles: [".header-container-table{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;flex:1;width:100%;position:relative}.filters-dashboard-table{display:flex;flex-direction:row;gap:24px;align-items:center;justify-content:flex-start;flex-shrink:0;width:100%;position:relative}.title-table{color:var(--schemes-on-surface, #171c1f);font-family:var(--headline-large-font, \"Roboto-SemiBold\", sans-serif);font-size:32px;line-height:40px;font-weight:600;position:relative}.filters-container{display:flex;flex-direction:row;gap:24px;margin-top:12px;position:relative;flex-wrap:wrap}.date-picker-wrapper{display:flex;position:relative;align-items:center;margin-top:4px;z-index:1000;flex-wrap:wrap;gap:10px}.actions{display:flex;gap:10px}.button-text{display:flex;background-color:transparent;color:#61661f;padding:0 12px;font-size:1.3rem;font-weight:500;border:1px solid #61661F;border-radius:20px;cursor:pointer;justify-content:center;align-items:center;position:relative;flex-shrink:0}.button-text:hover{background-color:#d8eb2ca7;border:1px solid #d8eb2ca7}.button-small-primary{background-color:var(--primary, #596300);padding:10px 16px;display:flex;flex-direction:row;gap:8px;align-items:center;justify-content:center;flex-shrink:0;position:relative;border:none;border-radius:99px;cursor:pointer}.button-small-primary:hover{background-color:var(--on-secondary-container, #61661F)}.button-small-primary:active{background-color:#737928}.icon{color:var(--surface, #fafae8);flex-shrink:0;width:20px;height:20px;position:relative;overflow:visible}.button-small-primary .label{color:var(--schemes-on-primary, #ffffff);text-align:left;font-family:var( --theme-label-large-font-family, \"Roboto-Medium\", sans-serif );font-size:var(--theme-label-large-font-size, 1.4rem);line-height:var(--theme-label-large-line-height, 20px);letter-spacing:var(--theme-label-large-letter-spacing, .1px);font-weight:var(--theme-label-large-font-weight, 500);position:relative;display:flex;align-items:center;justify-content:flex-start}\n"] }]
+            args: [{ selector: 'lib-title-filters', imports: [InputNumberFilter, InputTextFilter, InputSelectFilter, DateTimeFilter], template: "<div class=\"header-container-table\">\r\n    <div class=\"filters-dashboard-table\">\r\n        <div class=\"title-table\">{{ title() }}</div>\r\n\r\n        @if (buttonMode() === 'toggle') {\r\n        <div class=\"button-small-primary\" (click)=\"toggleFilters()\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n                stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n                class=\"icon icon-tabler icons-tabler-outline icon-tabler-filter\">\r\n                <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n                <path\r\n                    d=\"M4 4h16v2.172a2 2 0 0 1 -.586 1.414l-4.414 4.414v7l-6 2v-8.5l-4.48 -4.928a2 2 0 0 1 -.52 -1.345v-2.227z\" />\r\n            </svg>\r\n            <div class=\"label\">Filtros</div>\r\n        </div>\r\n        }\r\n        @if (buttonMode() === 'action') {\r\n        <div class=\"button-small-primary\" (click)=\"onFilterButtonClick()\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\" viewBox=\"0 0 20 20\">\r\n                <path fill=\"#fff\"\r\n                    d=\"M10.85 16.608v1.684a8.3 8.3 0 0 0 4.433-1.842L14.1 15.258a6.6 6.6 0 0 1-3.25 1.35M3.358 10c0-3.375 2.525-6.175 5.792-6.608V1.708C4.958 2.15 1.692 5.7 1.692 10s3.266 7.85 7.458 8.292v-1.684C5.883 16.175 3.358 13.375 3.358 10m13.267-.833h1.683a8.3 8.3 0 0 0-1.841-4.434l-1.192 1.192a6.56 6.56 0 0 1 1.35 3.242M15.283 3.55a8.3 8.3 0 0 0-4.433-1.842v1.684a6.6 6.6 0 0 1 3.25 1.35zm-.008 10.533 1.192 1.184a8.3 8.3 0 0 0 1.841-4.434h-1.683a6.6 6.6 0 0 1-1.35 3.25\" />\r\n                <path fill=\"#fff\"\r\n                    d=\"M13.333 9.25c0-2.075-1.583-3.417-3.333-3.417S6.667 7.175 6.667 9.25c0 1.383 1.108 3.025 3.333 4.917 2.225-1.892 3.333-3.534 3.333-4.917M10 10a.893.893 0 0 1 0-1.783A.893.893 0 0 1 10 10\" />\r\n            </svg>\r\n            <div class=\"label\">Ir al Mapa</div>\r\n        </div>\r\n        }\r\n    </div>\r\n\r\n    @if (showFilters()) {\r\n    <div class=\"filters-container\">\r\n        <div class=\"date-picker-wrapper\">\r\n\r\n            @for (config of normalizedFiltersConfig(); track $index) {\r\n            @switch (config.type) {\r\n            @case ('text') {\r\n            <lib-input-text-filter [filters]=\"config.filters\" [clearTrigger]=\"clearFilterTrigger()\"\r\n                (filterSelected)=\"onFilterSelected($event)\" />\r\n            }\r\n            @case ('number') {\r\n            <lib-input-number-filter [filters]=\"config.filters\" [clearTrigger]=\"clearFilterTrigger()\"\r\n                (filterSelected)=\"onFilterSelected($event)\" />\r\n            }\r\n            @case ('select') {\r\n            <lib-input-select-filter [filters]=\"config.filters\" [clearTrigger]=\"clearFilterTrigger()\"\r\n                (filterSelected)=\"onFilterSelected($event)\" />\r\n            }\r\n            @case ('date') {\r\n            <lib-date-time-filter [filters]=\"config.filters\" [clearTrigger]=\"clearFilterTrigger()\"\r\n                (dateSelected)=\"onDateSelected($event)\" />\r\n            }\r\n            }\r\n            }\r\n\r\n            <div class=\"actions\">\r\n                <div class=\"button-small-primary\" (click)=\"onApplyFilters()\">\r\n                    <div class=\"label\">Aplicar Filtros</div>\r\n                </div>\r\n\r\n                <div class=\"button-text\" (click)=\"clearAllFilters()\">\r\n                    Borrar Filtros\r\n                </div>\r\n            </div>\r\n\r\n        </div>\r\n    </div>\r\n    }\r\n</div>", styles: [".header-container-table{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;flex:1;width:100%;position:relative}.filters-dashboard-table{display:flex;flex-direction:row;gap:24px;align-items:center;justify-content:flex-start;flex-shrink:0;width:100%;position:relative}.title-table{color:var(--schemes-on-surface, #171c1f);font-family:var(--headline-large-font, \"Roboto-SemiBold\", sans-serif);font-size:32px;line-height:40px;font-weight:600;position:relative}.filters-container{display:flex;flex-direction:row;gap:24px;margin-top:12px;position:relative;flex-wrap:wrap}.date-picker-wrapper{display:flex;position:relative;align-items:center;margin-top:4px;z-index:1000;flex-wrap:wrap;gap:10px}.actions{display:flex;gap:10px}.button-text{display:flex;background-color:transparent;color:#61661f;padding:0 12px;font-size:1.3rem;font-weight:500;border:1px solid #61661F;border-radius:20px;cursor:pointer;justify-content:center;align-items:center;position:relative;flex-shrink:0}.button-text:hover{background-color:#d8eb2ca7;border:1px solid #d8eb2ca7}.button-small-primary{background-color:var(--primary, #596300);padding:10px 16px;display:flex;flex-direction:row;gap:8px;align-items:center;justify-content:center;flex-shrink:0;position:relative;border:none;border-radius:99px;cursor:pointer}.button-small-primary:hover{background-color:var(--on-secondary-container, #61661F)}.button-small-primary:active{background-color:#737928}.icon{color:var(--surface, #fafae8);flex-shrink:0;width:20px;height:20px;position:relative;overflow:visible}.button-small-primary .label{color:var(--schemes-on-primary, #ffffff);text-align:left;font-family:var( --theme-label-large-font-family, \"Roboto-Medium\", sans-serif );font-size:var(--theme-label-large-font-size, 1.4rem);line-height:var(--theme-label-large-line-height, 20px);letter-spacing:var(--theme-label-large-letter-spacing, .1px);font-weight:var(--theme-label-large-font-weight, 500);position:relative;display:flex;align-items:center;justify-content:flex-start}\n"] }]
         }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], filtersConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "filtersConfig", required: false }] }], filtersChange: [{ type: i0.Output, args: ["filtersChange"] }], applyFilters: [{ type: i0.Output, args: ["applyFilters"] }], buttonMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonMode", required: false }] }], filterButtonClicked: [{ type: i0.Output, args: ["filterButtonClicked"] }] } });
 
 // src/app/components/public-api.ts
@@ -2834,5 +2954,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { DateTimeFilter, DateTimePicker, DevicesCarousel, DialogAlertComponent, DialogConfirmation, DynamicFormFields, FeatureCard, InfoGroup, Input, InputNumberFilter, InputSelectFilter, InputTextFilter, Loader, ModalForm, NotFoundModal, PaginationComponent, ProcessingOverlay, ProgressBar, ProgressFormService, SelectCustomSearch, SideCard, SideCardDetail, TOAST_EVENTS, Table, TitleFilters, ToastHelper, WizardForm };
+export { DateTimeFilter, DateTimePicker, DevicesCarousel, DialogAlertComponent, DialogConfirmation, DynamicFormFields, FeatureCard, InfoGroup, Input, InputNumberFilter, InputSelectFilter, InputTextFilter, Loader, ModalForm, NotFoundModal, NotificationModal, PaginationComponent, ProcessingOverlay, ProgressBar, ProgressFormService, SelectCustomSearch, SideCard, SideCardDetail, TOAST_EVENTS, Table, TitleFilters, ToastHelper, WizardForm };
 //# sourceMappingURL=sapenlinea-components.mjs.map