@xosue-utils/inputs 0.1.0 → 0.1.2

package/fesm2022/xosue-utils-inputs.mjs

@@ -1,14 +1,15 @@
 import * as i0 from '@angular/core';
 import { InjectionToken, input, booleanAttribute, computed, Component, PLATFORM_ID, Inject, Injectable, inject, Input, ChangeDetectorRef, ElementRef, forwardRef, HostBinding, ChangeDetectionStrategy, HostListener, ViewChild, EventEmitter, Output, ViewChildren, Directive, Pipe } from '@angular/core';
+import { LucideDynamicIcon } from '@lucide/angular';
 import * as i1 from '@angular/common';
 import { isPlatformBrowser, CommonModule } from '@angular/common';
 import * as i2$1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
-import { LucideDynamicIcon } from '@lucide/angular';
 import { Subject, BehaviorSubject, debounceTime, distinctUntilChanged, switchMap, of, catchError } from 'rxjs';
 import * as i1$1 from '@angular/common/http';
 import { HttpClient, HttpHeaders } from '@angular/common/http';
 import * as i2 from '@angular/router';
+import { RouterModule } from '@angular/router';
 import { DateTime } from 'luxon';
 import { DecoratorNode, createEditor, SELECTION_CHANGE_COMMAND, COMMAND_PRIORITY_LOW, CAN_UNDO_COMMAND, CAN_REDO_COMMAND, FORMAT_ELEMENT_COMMAND, $getSelection, $isRangeSelection, FORMAT_TEXT_COMMAND, REDO_COMMAND, UNDO_COMMAND, $getNodeByKey, $getRoot, $createParagraphNode, $createTextNode } from 'lexical';
 import { $generateNodesFromDOM, $generateHtmlFromNodes } from '@lexical/html';
@@ -11104,6 +11105,951 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
                 args: ['sortableContainer', { static: false }]
             }] } });
 
+class OnlySelectModalServiceComponent {
+    onlySelectModal;
+    cdr;
+    vm$;
+    sub;
+    constructor(onlySelectModal, cdr) {
+        this.onlySelectModal = onlySelectModal;
+        this.cdr = cdr;
+        this.vm$ = this.onlySelectModal.state$;
+    }
+    ngOnInit() {
+        this.sub = this.onlySelectModal.state$.subscribe(() => this.cdr.markForCheck());
+    }
+    ngOnDestroy() {
+        this.sub?.unsubscribe();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: OnlySelectModalServiceComponent, deps: [{ token: OnlySelectModalService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: OnlySelectModalServiceComponent, isStandalone: true, selector: "only-select-modal-service", ngImport: i0, template: "<ng-container *ngIf=\"vm$ | async as session\">\r\n  <div class=\"Backdrop\" (click)=\"session.handlers.onBackdropClick($event)\">\r\n    <div class=\"Picker\" (click)=\"$event.stopPropagation()\">\r\n      <ng-container *ngIf=\"session.view.shouldShowSearch\">\r\n        <div class=\"SearchContainer\">\r\n          <input\r\n            type=\"text\"\r\n            class=\"SearchInput NativeInput\"\r\n            [value]=\"session.view.searchQuery\"\r\n            (input)=\"session.handlers.onSearchInput($event)\"\r\n            placeholder=\"Buscar\"\r\n            (click)=\"$event.stopPropagation()\"\r\n          />\r\n        </div>\r\n      </ng-container>\r\n\r\n      <div class=\"OptionsList\">\r\n        <div *ngIf=\"session.view.isLoading && !session.view.isSearching\" class=\"LoadingState\">\r\n          <lucide-icon name=\"loader-circle\" [spin]=\"true\"></lucide-icon>\r\n          <span>Cargando...</span>\r\n        </div>\r\n\r\n        <div *ngIf=\"session.view.isSearching && !session.view.isLoading\" class=\"LoadingState\">\r\n          <lucide-icon name=\"loader-circle\" [spin]=\"true\"></lucide-icon>\r\n          <span>Buscando...</span>\r\n        </div>\r\n\r\n        <div\r\n          *ngIf=\"!session.view.isLoading && !session.view.isSearching && session.view.filteredOptions.length === 0\"\r\n          class=\"EmptyOptionsMessage\"\r\n          role=\"status\"\r\n        >\r\n          {{ session.view.noOptionsMessage }}\r\n        </div>\r\n\r\n        <div\r\n          *ngFor=\"let option of session.view.filteredOptions\"\r\n          class=\"Option\"\r\n          (click)=\"session.handlers.onOptionSelect(option)\"\r\n        >\r\n          <label>\r\n            <div class=\"Details\">\r\n              <div\r\n                class=\"Color\"\r\n                *ngIf=\"option.color\"\r\n                [style.backgroundColor]=\"option.color\"\r\n              ></div>\r\n              <div class=\"Image\" *ngIf=\"option.image\">\r\n                <img [src]=\"option.image\" alt=\"\" />\r\n              </div>\r\n              <div class=\"Info\">\r\n                <span class=\"Name\">{{ option.name }}</span>\r\n                <span class=\"Description\" *ngIf=\"option.description\">{{\r\n                  option.description\r\n                }}</span>\r\n              </div>\r\n            </div>\r\n            <lucide-icon\r\n              class=\"CheckIcon\"\r\n              [class.Selected]=\"session.view.selectedOption?.value === option.value\"\r\n              [name]=\"session.view.selectedOption?.value === option.value ? 'check' : 'x'\"\r\n            ></lucide-icon>\r\n          </label>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n", styles: [":host{display:contents}.Backdrop{position:fixed;top:0;left:0;z-index:10050;display:flex;justify-content:center;align-items:center;width:100%;height:100%;padding:12px;background:var(--overlay-scrim);overflow:hidden}@media (width <= 768px){.Backdrop{align-items:flex-start}}.Backdrop .Picker{display:flex;flex-direction:column;gap:5px;width:100%;max-width:600px;max-height:100%;margin:0 auto;background:var(--surface);border-radius:var(--radius-xl);padding:12px;overflow-y:auto;box-shadow:0 0 8px var(--shadow-color);overflow:hidden}.Backdrop .Picker .SearchContainer{width:100%;height:max-content}.Backdrop .Picker .SearchContainer .SearchInput{width:100%;height:32px;border-radius:var(--radius-md);padding:0 8px}.Backdrop .Picker .OptionsList{width:100%;display:flex;flex-direction:column;overflow:hidden;overflow-y:auto}.Backdrop .Picker .OptionsList .Option{width:100%;min-height:max-content;display:flex;justify-content:flex-start;align-items:center}.Backdrop .Picker .OptionsList .Option label{position:relative;width:100%;height:100%;padding:8px;display:flex;align-items:center;cursor:pointer;border-radius:var(--radius-md)}.Backdrop .Picker .OptionsList .Option label:hover{background-color:var(--surface-2)}.Backdrop .Picker .OptionsList .Option label [type=checkbox]{display:none}.Backdrop .Picker .OptionsList .Option label .Details{pointer-events:none;display:flex;align-items:center;gap:5px}.Backdrop .Picker .OptionsList .Option label .Details .Color{width:20px;min-width:20px;height:20px;min-height:20px;border-radius:100px;overflow:hidden}.Backdrop .Picker .OptionsList .Option label .Details .Image{width:35px;min-width:35px;height:35px;min-height:35px;border-radius:100px;overflow:hidden}.Backdrop .Picker .OptionsList .Option label .Details .Image img{width:100%;height:100%;object-fit:cover}.Backdrop .Picker .OptionsList .Option label .Details .Info{display:flex;flex-direction:column}.Backdrop .Picker .OptionsList .Option label .Details .Info .Name{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.Backdrop .Picker .OptionsList .Option label .Details .Info .Description{margin:0;padding:0;width:100%;font-size:.9rem;color:var(--text-muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.Backdrop .Picker .OptionsList .Option label .CheckIcon{width:30px;height:100%;padding:5px;display:flex;justify-content:center;align-items:center;margin-left:auto;color:var(--text-muted)}.Backdrop .Picker .OptionsList .Option label .CheckIcon lucide-icon .lucide-icon-svg{width:1rem;height:1rem}.Backdrop .Picker .OptionsList .Option label .CheckIcon.Selected{color:var(--text-primary)}.LoadingState{display:flex;align-items:center;justify-content:center;gap:8px;padding:var(--spacing-lg);color:var(--text-muted);font-size:.9rem}.LoadingState .fa-spinner{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.EmptyOptionsMessage{padding:var(--spacing-lg);text-align:center;color:var(--muted-text, var(--text-muted));font-weight:700;font-size:.9rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "component", type: LucideIconComponent, selector: "lucide-icon", inputs: ["name", "size", "spin", "filled"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: OnlySelectModalServiceComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'only-select-modal-service', standalone: true, imports: [CommonModule, LucideIconComponent], template: "<ng-container *ngIf=\"vm$ | async as session\">\r\n  <div class=\"Backdrop\" (click)=\"session.handlers.onBackdropClick($event)\">\r\n    <div class=\"Picker\" (click)=\"$event.stopPropagation()\">\r\n      <ng-container *ngIf=\"session.view.shouldShowSearch\">\r\n        <div class=\"SearchContainer\">\r\n          <input\r\n            type=\"text\"\r\n            class=\"SearchInput NativeInput\"\r\n            [value]=\"session.view.searchQuery\"\r\n            (input)=\"session.handlers.onSearchInput($event)\"\r\n            placeholder=\"Buscar\"\r\n            (click)=\"$event.stopPropagation()\"\r\n          />\r\n        </div>\r\n      </ng-container>\r\n\r\n      <div class=\"OptionsList\">\r\n        <div *ngIf=\"session.view.isLoading && !session.view.isSearching\" class=\"LoadingState\">\r\n          <lucide-icon name=\"loader-circle\" [spin]=\"true\"></lucide-icon>\r\n          <span>Cargando...</span>\r\n        </div>\r\n\r\n        <div *ngIf=\"session.view.isSearching && !session.view.isLoading\" class=\"LoadingState\">\r\n          <lucide-icon name=\"loader-circle\" [spin]=\"true\"></lucide-icon>\r\n          <span>Buscando...</span>\r\n        </div>\r\n\r\n        <div\r\n          *ngIf=\"!session.view.isLoading && !session.view.isSearching && session.view.filteredOptions.length === 0\"\r\n          class=\"EmptyOptionsMessage\"\r\n          role=\"status\"\r\n        >\r\n          {{ session.view.noOptionsMessage }}\r\n        </div>\r\n\r\n        <div\r\n          *ngFor=\"let option of session.view.filteredOptions\"\r\n          class=\"Option\"\r\n          (click)=\"session.handlers.onOptionSelect(option)\"\r\n        >\r\n          <label>\r\n            <div class=\"Details\">\r\n              <div\r\n                class=\"Color\"\r\n                *ngIf=\"option.color\"\r\n                [style.backgroundColor]=\"option.color\"\r\n              ></div>\r\n              <div class=\"Image\" *ngIf=\"option.image\">\r\n                <img [src]=\"option.image\" alt=\"\" />\r\n              </div>\r\n              <div class=\"Info\">\r\n                <span class=\"Name\">{{ option.name }}</span>\r\n                <span class=\"Description\" *ngIf=\"option.description\">{{\r\n                  option.description\r\n                }}</span>\r\n              </div>\r\n            </div>\r\n            <lucide-icon\r\n              class=\"CheckIcon\"\r\n              [class.Selected]=\"session.view.selectedOption?.value === option.value\"\r\n              [name]=\"session.view.selectedOption?.value === option.value ? 'check' : 'x'\"\r\n            ></lucide-icon>\r\n          </label>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n", styles: [":host{display:contents}.Backdrop{position:fixed;top:0;left:0;z-index:10050;display:flex;justify-content:center;align-items:center;width:100%;height:100%;padding:12px;background:var(--overlay-scrim);overflow:hidden}@media (width <= 768px){.Backdrop{align-items:flex-start}}.Backdrop .Picker{display:flex;flex-direction:column;gap:5px;width:100%;max-width:600px;max-height:100%;margin:0 auto;background:var(--surface);border-radius:var(--radius-xl);padding:12px;overflow-y:auto;box-shadow:0 0 8px var(--shadow-color);overflow:hidden}.Backdrop .Picker .SearchContainer{width:100%;height:max-content}.Backdrop .Picker .SearchContainer .SearchInput{width:100%;height:32px;border-radius:var(--radius-md);padding:0 8px}.Backdrop .Picker .OptionsList{width:100%;display:flex;flex-direction:column;overflow:hidden;overflow-y:auto}.Backdrop .Picker .OptionsList .Option{width:100%;min-height:max-content;display:flex;justify-content:flex-start;align-items:center}.Backdrop .Picker .OptionsList .Option label{position:relative;width:100%;height:100%;padding:8px;display:flex;align-items:center;cursor:pointer;border-radius:var(--radius-md)}.Backdrop .Picker .OptionsList .Option label:hover{background-color:var(--surface-2)}.Backdrop .Picker .OptionsList .Option label [type=checkbox]{display:none}.Backdrop .Picker .OptionsList .Option label .Details{pointer-events:none;display:flex;align-items:center;gap:5px}.Backdrop .Picker .OptionsList .Option label .Details .Color{width:20px;min-width:20px;height:20px;min-height:20px;border-radius:100px;overflow:hidden}.Backdrop .Picker .OptionsList .Option label .Details .Image{width:35px;min-width:35px;height:35px;min-height:35px;border-radius:100px;overflow:hidden}.Backdrop .Picker .OptionsList .Option label .Details .Image img{width:100%;height:100%;object-fit:cover}.Backdrop .Picker .OptionsList .Option label .Details .Info{display:flex;flex-direction:column}.Backdrop .Picker .OptionsList .Option label .Details .Info .Name{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.Backdrop .Picker .OptionsList .Option label .Details .Info .Description{margin:0;padding:0;width:100%;font-size:.9rem;color:var(--text-muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.Backdrop .Picker .OptionsList .Option label .CheckIcon{width:30px;height:100%;padding:5px;display:flex;justify-content:center;align-items:center;margin-left:auto;color:var(--text-muted)}.Backdrop .Picker .OptionsList .Option label .CheckIcon lucide-icon .lucide-icon-svg{width:1rem;height:1rem}.Backdrop .Picker .OptionsList .Option label .CheckIcon.Selected{color:var(--text-primary)}.LoadingState{display:flex;align-items:center;justify-content:center;gap:8px;padding:var(--spacing-lg);color:var(--text-muted);font-size:.9rem}.LoadingState .fa-spinner{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.EmptyOptionsMessage{padding:var(--spacing-lg);text-align:center;color:var(--muted-text, var(--text-muted));font-weight:700;font-size:.9rem}\n"] }]
+        }], ctorParameters: () => [{ type: OnlySelectModalService }, { type: i0.ChangeDetectorRef }] });
+
+class MultiselectComboboxModalServiceComponent {
+    multiselectModal;
+    cdr;
+    vm$;
+    sub;
+    constructor(multiselectModal, cdr) {
+        this.multiselectModal = multiselectModal;
+        this.cdr = cdr;
+        this.vm$ = this.multiselectModal.state$;
+    }
+    ngOnInit() {
+        this.sub = this.multiselectModal.state$.subscribe(() => this.cdr.markForCheck());
+    }
+    ngOnDestroy() {
+        this.sub?.unsubscribe();
+    }
+    isSelected(option, selected) {
+        return selected.some((o) => o.value === option.value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: MultiselectComboboxModalServiceComponent, deps: [{ token: MultiselectComboboxModalService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: MultiselectComboboxModalServiceComponent, isStandalone: true, selector: "multiselect-combobox-modal-service", ngImport: i0, template: "<ng-container *ngIf=\"vm$ | async as session\">\r\n  <div class=\"Backdrop\" (click)=\"session.handlers.onBackdropClick($event)\">\r\n    <div class=\"Picker\" (click)=\"$event.stopPropagation()\">\r\n      <div class=\"Close\" (click)=\"session.handlers.onBackdropClick($event); $event.stopPropagation()\">\r\n        Cerrar\r\n      </div>\r\n\r\n      <ng-container *ngIf=\"session.view.selectedOptions.length > 0\">\r\n        <div class=\"SelectedOptions\">\r\n          <span\r\n            *ngFor=\"let option of session.view.selectedOptions\"\r\n            class=\"SelectedOption\"\r\n            (click)=\"session.handlers.onRemoveSelected(option, $event)\"\r\n          >\r\n            {{ option.name }}\r\n            <span class=\"RemoveIcon\">\u00D7</span>\r\n          </span>\r\n        </div>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"session.view.shouldShowSearch\">\r\n        <div class=\"SearchContainer\">\r\n          <input\r\n            type=\"text\"\r\n            class=\"SearchInput NativeInput\"\r\n            [value]=\"session.view.searchQuery\"\r\n            (input)=\"session.handlers.onSearchInput($event)\"\r\n            placeholder=\"Buscar\"\r\n            (click)=\"$event.stopPropagation()\"\r\n          />\r\n        </div>\r\n      </ng-container>\r\n\r\n      <div class=\"OptionsList\">\r\n        <div *ngIf=\"session.view.isLoading && !session.view.isSearching\" class=\"LoadingState\">\r\n          <lucide-icon name=\"loader-circle\" [spin]=\"true\"></lucide-icon>\r\n          <span>Cargando...</span>\r\n        </div>\r\n\r\n        <div *ngIf=\"session.view.isSearching && !session.view.isLoading\" class=\"LoadingState\">\r\n          <lucide-icon name=\"loader-circle\" [spin]=\"true\"></lucide-icon>\r\n          <span>Buscando...</span>\r\n        </div>\r\n\r\n        <div\r\n          *ngIf=\"!session.view.isLoading && !session.view.isSearching && session.view.filteredOptions.length === 0\"\r\n          class=\"EmptyOptionsMessage\"\r\n          role=\"status\"\r\n        >\r\n          {{ session.view.noOptionsMessage }}\r\n        </div>\r\n\r\n        <ng-container *ngIf=\"!(session.view.isLoading && !session.view.isSearching)\">\r\n          <div *ngFor=\"let option of session.view.filteredOptions\" class=\"Option\">\r\n          <label>\r\n            <div class=\"Details\">\r\n              <div\r\n                class=\"Color\"\r\n                *ngIf=\"option.color\"\r\n                [style.backgroundColor]=\"option.color\"\r\n              ></div>\r\n\r\n              <div class=\"Image\" *ngIf=\"option.image\">\r\n                <img [src]=\"option.image\" alt=\"\" />\r\n              </div>\r\n              <div class=\"Info\">\r\n                <span class=\"Name\">{{ option.name }}</span>\r\n                <span class=\"Description\" *ngIf=\"option.description\">{{\r\n                  option.description\r\n                }}</span>\r\n              </div>\r\n            </div>\r\n            <input\r\n              type=\"checkbox\"\r\n              [checked]=\"isSelected(option, session.view.selectedOptions)\"\r\n              (change)=\"session.handlers.onOptionToggle(option, $event)\"\r\n            />\r\n            <lucide-icon\r\n              class=\"CheckIcon\"\r\n              [class.Selected]=\"isSelected(option, session.view.selectedOptions)\"\r\n              [name]=\"isSelected(option, session.view.selectedOptions) ? 'check' : 'x'\"\r\n            ></lucide-icon>\r\n          </label>\r\n        </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n", styles: [":host{display:contents}.Backdrop{position:fixed;top:0;left:0;z-index:10050;display:flex;justify-content:center;align-items:center;width:100%;height:100%;padding:12px;background:var(--overlay-scrim);overflow:hidden}@media (width <= 768px){.Backdrop{align-items:flex-start}}.Backdrop .Picker{display:flex;flex-direction:column;gap:5px;width:100%;max-width:600px;max-height:100%;margin:0 auto;background:var(--surface);border-radius:var(--radius-xl);padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--shadow-color)}.Backdrop .Picker .Close{padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-lg);color:var(--btn-cancel-text);border-color:var(--btn-cancel-border);background-color:var(--btn-cancel-bg);width:max-content;margin-left:auto;cursor:pointer}.Backdrop .Picker .Close:hover{color:var(--btn-cancel-text-hover);border-color:var(--btn-cancel-border-hover);background-color:var(--btn-cancel-bg-hover)}.Backdrop .Picker .Close:active{color:var(--btn-cancel-text-active);border-color:var(--btn-cancel-border-active);background-color:var(--btn-cancel-bg-active)}.Backdrop .Picker .SelectedOptions{display:flex;align-items:center;flex-wrap:wrap;gap:5px;border-bottom:solid 1px var(--border);padding:4px}.Backdrop .Picker .SelectedOptions .SelectedOption{background-color:var(--surface-2, var(--border));border-radius:var(--radius-md);width:max-content;height:25px;padding:0 var(--spacing-sm);padding-right:0;display:flex;justify-content:space-between;align-items:center;gap:3px;overflow:hidden}.Backdrop .Picker .SelectedOptions .SelectedOption .RemoveIcon{cursor:pointer;width:25px;height:25px;display:flex;justify-content:center;align-items:center;font-size:1rem}.Backdrop .Picker .SelectedOptions .SelectedOption .RemoveIcon lucide-icon .lucide-icon-svg{width:1rem;height:1rem}.Backdrop .Picker .SelectedOptions .SelectedOption .RemoveIcon:hover{color:var(--error-text);background-color:var(--border)}.Backdrop .Picker .SearchContainer{width:100%;height:max-content}.Backdrop .Picker .SearchContainer .SearchInput{width:100%;height:32px;border-radius:var(--radius-md);padding:0 8px}.Backdrop .Picker .OptionsList{width:100%;display:flex;flex-direction:column;overflow:hidden;overflow-y:auto}.Backdrop .Picker .OptionsList .Option{width:100%;min-height:max-content;display:flex;justify-content:flex-start;align-items:center}.Backdrop .Picker .OptionsList .Option label{position:relative;width:100%;height:100%;padding:8px;display:flex;align-items:center;cursor:pointer;border-radius:var(--radius-md)}.Backdrop .Picker .OptionsList .Option label:hover{background-color:var(--surface-2)}.Backdrop .Picker .OptionsList .Option label [type=checkbox]{display:none}.Backdrop .Picker .OptionsList .Option label .Details{pointer-events:none;display:flex;align-items:center;gap:5px}.Backdrop .Picker .OptionsList .Option label .Details .Color{width:20px;min-width:20px;height:20px;min-height:20px;border-radius:100px;overflow:hidden}.Backdrop .Picker .OptionsList .Option label .Details .Image{width:35px;min-width:35px;height:35px;min-height:35px;border-radius:100px;overflow:hidden}.Backdrop .Picker .OptionsList .Option label .Details .Image img{width:100%;height:100%;object-fit:cover}.Backdrop .Picker .OptionsList .Option label .Details .Info{display:flex;flex-direction:column}.Backdrop .Picker .OptionsList .Option label .Details .Info .Name{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.Backdrop .Picker .OptionsList .Option label .Details .Info .Description{margin:0;padding:0;width:100%;font-size:.9rem;color:var(--text-muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.Backdrop .Picker .OptionsList .Option label .CheckIcon{width:30px;height:100%;padding:5px;display:flex;justify-content:center;align-items:center;margin-left:auto;color:var(--text-muted)}.Backdrop .Picker .OptionsList .Option label .CheckIcon lucide-icon .lucide-icon-svg{width:1rem;height:1rem}.Backdrop .Picker .OptionsList .Option label .CheckIcon.Selected{color:var(--text-primary)}.LoadingState{display:flex;align-items:center;justify-content:center;gap:8px;padding:var(--spacing-lg);color:var(--text-muted);font-size:.9rem}.LoadingState .fa-spinner{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.EmptyOptionsMessage{padding:var(--spacing-lg);text-align:center;color:var(--muted-text, var(--text-muted));font-weight:700;font-size:.9rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "component", type: LucideIconComponent, selector: "lucide-icon", inputs: ["name", "size", "spin", "filled"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: MultiselectComboboxModalServiceComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'multiselect-combobox-modal-service', standalone: true, imports: [CommonModule, LucideIconComponent], template: "<ng-container *ngIf=\"vm$ | async as session\">\r\n  <div class=\"Backdrop\" (click)=\"session.handlers.onBackdropClick($event)\">\r\n    <div class=\"Picker\" (click)=\"$event.stopPropagation()\">\r\n      <div class=\"Close\" (click)=\"session.handlers.onBackdropClick($event); $event.stopPropagation()\">\r\n        Cerrar\r\n      </div>\r\n\r\n      <ng-container *ngIf=\"session.view.selectedOptions.length > 0\">\r\n        <div class=\"SelectedOptions\">\r\n          <span\r\n            *ngFor=\"let option of session.view.selectedOptions\"\r\n            class=\"SelectedOption\"\r\n            (click)=\"session.handlers.onRemoveSelected(option, $event)\"\r\n          >\r\n            {{ option.name }}\r\n            <span class=\"RemoveIcon\">\u00D7</span>\r\n          </span>\r\n        </div>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"session.view.shouldShowSearch\">\r\n        <div class=\"SearchContainer\">\r\n          <input\r\n            type=\"text\"\r\n            class=\"SearchInput NativeInput\"\r\n            [value]=\"session.view.searchQuery\"\r\n            (input)=\"session.handlers.onSearchInput($event)\"\r\n            placeholder=\"Buscar\"\r\n            (click)=\"$event.stopPropagation()\"\r\n          />\r\n        </div>\r\n      </ng-container>\r\n\r\n      <div class=\"OptionsList\">\r\n        <div *ngIf=\"session.view.isLoading && !session.view.isSearching\" class=\"LoadingState\">\r\n          <lucide-icon name=\"loader-circle\" [spin]=\"true\"></lucide-icon>\r\n          <span>Cargando...</span>\r\n        </div>\r\n\r\n        <div *ngIf=\"session.view.isSearching && !session.view.isLoading\" class=\"LoadingState\">\r\n          <lucide-icon name=\"loader-circle\" [spin]=\"true\"></lucide-icon>\r\n          <span>Buscando...</span>\r\n        </div>\r\n\r\n        <div\r\n          *ngIf=\"!session.view.isLoading && !session.view.isSearching && session.view.filteredOptions.length === 0\"\r\n          class=\"EmptyOptionsMessage\"\r\n          role=\"status\"\r\n        >\r\n          {{ session.view.noOptionsMessage }}\r\n        </div>\r\n\r\n        <ng-container *ngIf=\"!(session.view.isLoading && !session.view.isSearching)\">\r\n          <div *ngFor=\"let option of session.view.filteredOptions\" class=\"Option\">\r\n          <label>\r\n            <div class=\"Details\">\r\n              <div\r\n                class=\"Color\"\r\n                *ngIf=\"option.color\"\r\n                [style.backgroundColor]=\"option.color\"\r\n              ></div>\r\n\r\n              <div class=\"Image\" *ngIf=\"option.image\">\r\n                <img [src]=\"option.image\" alt=\"\" />\r\n              </div>\r\n              <div class=\"Info\">\r\n                <span class=\"Name\">{{ option.name }}</span>\r\n                <span class=\"Description\" *ngIf=\"option.description\">{{\r\n                  option.description\r\n                }}</span>\r\n              </div>\r\n            </div>\r\n            <input\r\n              type=\"checkbox\"\r\n              [checked]=\"isSelected(option, session.view.selectedOptions)\"\r\n              (change)=\"session.handlers.onOptionToggle(option, $event)\"\r\n            />\r\n            <lucide-icon\r\n              class=\"CheckIcon\"\r\n              [class.Selected]=\"isSelected(option, session.view.selectedOptions)\"\r\n              [name]=\"isSelected(option, session.view.selectedOptions) ? 'check' : 'x'\"\r\n            ></lucide-icon>\r\n          </label>\r\n        </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n", styles: [":host{display:contents}.Backdrop{position:fixed;top:0;left:0;z-index:10050;display:flex;justify-content:center;align-items:center;width:100%;height:100%;padding:12px;background:var(--overlay-scrim);overflow:hidden}@media (width <= 768px){.Backdrop{align-items:flex-start}}.Backdrop .Picker{display:flex;flex-direction:column;gap:5px;width:100%;max-width:600px;max-height:100%;margin:0 auto;background:var(--surface);border-radius:var(--radius-xl);padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--shadow-color)}.Backdrop .Picker .Close{padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-lg);color:var(--btn-cancel-text);border-color:var(--btn-cancel-border);background-color:var(--btn-cancel-bg);width:max-content;margin-left:auto;cursor:pointer}.Backdrop .Picker .Close:hover{color:var(--btn-cancel-text-hover);border-color:var(--btn-cancel-border-hover);background-color:var(--btn-cancel-bg-hover)}.Backdrop .Picker .Close:active{color:var(--btn-cancel-text-active);border-color:var(--btn-cancel-border-active);background-color:var(--btn-cancel-bg-active)}.Backdrop .Picker .SelectedOptions{display:flex;align-items:center;flex-wrap:wrap;gap:5px;border-bottom:solid 1px var(--border);padding:4px}.Backdrop .Picker .SelectedOptions .SelectedOption{background-color:var(--surface-2, var(--border));border-radius:var(--radius-md);width:max-content;height:25px;padding:0 var(--spacing-sm);padding-right:0;display:flex;justify-content:space-between;align-items:center;gap:3px;overflow:hidden}.Backdrop .Picker .SelectedOptions .SelectedOption .RemoveIcon{cursor:pointer;width:25px;height:25px;display:flex;justify-content:center;align-items:center;font-size:1rem}.Backdrop .Picker .SelectedOptions .SelectedOption .RemoveIcon lucide-icon .lucide-icon-svg{width:1rem;height:1rem}.Backdrop .Picker .SelectedOptions .SelectedOption .RemoveIcon:hover{color:var(--error-text);background-color:var(--border)}.Backdrop .Picker .SearchContainer{width:100%;height:max-content}.Backdrop .Picker .SearchContainer .SearchInput{width:100%;height:32px;border-radius:var(--radius-md);padding:0 8px}.Backdrop .Picker .OptionsList{width:100%;display:flex;flex-direction:column;overflow:hidden;overflow-y:auto}.Backdrop .Picker .OptionsList .Option{width:100%;min-height:max-content;display:flex;justify-content:flex-start;align-items:center}.Backdrop .Picker .OptionsList .Option label{position:relative;width:100%;height:100%;padding:8px;display:flex;align-items:center;cursor:pointer;border-radius:var(--radius-md)}.Backdrop .Picker .OptionsList .Option label:hover{background-color:var(--surface-2)}.Backdrop .Picker .OptionsList .Option label [type=checkbox]{display:none}.Backdrop .Picker .OptionsList .Option label .Details{pointer-events:none;display:flex;align-items:center;gap:5px}.Backdrop .Picker .OptionsList .Option label .Details .Color{width:20px;min-width:20px;height:20px;min-height:20px;border-radius:100px;overflow:hidden}.Backdrop .Picker .OptionsList .Option label .Details .Image{width:35px;min-width:35px;height:35px;min-height:35px;border-radius:100px;overflow:hidden}.Backdrop .Picker .OptionsList .Option label .Details .Image img{width:100%;height:100%;object-fit:cover}.Backdrop .Picker .OptionsList .Option label .Details .Info{display:flex;flex-direction:column}.Backdrop .Picker .OptionsList .Option label .Details .Info .Name{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.Backdrop .Picker .OptionsList .Option label .Details .Info .Description{margin:0;padding:0;width:100%;font-size:.9rem;color:var(--text-muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.Backdrop .Picker .OptionsList .Option label .CheckIcon{width:30px;height:100%;padding:5px;display:flex;justify-content:center;align-items:center;margin-left:auto;color:var(--text-muted)}.Backdrop .Picker .OptionsList .Option label .CheckIcon lucide-icon .lucide-icon-svg{width:1rem;height:1rem}.Backdrop .Picker .OptionsList .Option label .CheckIcon.Selected{color:var(--text-primary)}.LoadingState{display:flex;align-items:center;justify-content:center;gap:8px;padding:var(--spacing-lg);color:var(--text-muted);font-size:.9rem}.LoadingState .fa-spinner{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.EmptyOptionsMessage{padding:var(--spacing-lg);text-align:center;color:var(--muted-text, var(--text-muted));font-weight:700;font-size:.9rem}\n"] }]
+        }], ctorParameters: () => [{ type: MultiselectComboboxModalService }, { type: i0.ChangeDetectorRef }] });
+
+class SearchEntryModalServiceComponent {
+    searchEntryModal;
+    cdr;
+    vm$;
+    sub;
+    constructor(searchEntryModal, cdr) {
+        this.searchEntryModal = searchEntryModal;
+        this.cdr = cdr;
+        this.vm$ = this.searchEntryModal.state$;
+    }
+    ngOnInit() {
+        this.sub = this.searchEntryModal.state$.subscribe(() => this.cdr.markForCheck());
+    }
+    ngOnDestroy() {
+        this.sub?.unsubscribe();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: SearchEntryModalServiceComponent, deps: [{ token: SearchEntryModalService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: SearchEntryModalServiceComponent, isStandalone: true, selector: "search-entry-modal-service", ngImport: i0, template: "<ng-container *ngIf=\"vm$ | async as session\">\r\n  <div class=\"Backdrop InputModalBackdrop search-entry-modal\" (click)=\"session.handlers.onBackdropClick($event)\">\r\n    <div class=\"Picker\" (click)=\"$event.stopPropagation()\">\r\n      <ng-container *ngIf=\"session.view.shouldShowSearch\">\r\n        <div class=\"SearchContainer\">\r\n          <input\r\n            type=\"text\"\r\n            class=\"SearchInput NativeInput\"\r\n            [placeholder]=\"session.view.placeholder\"\r\n            [value]=\"session.view.searchText\"\r\n            (input)=\"session.handlers.onSearchInput($event)\"\r\n          />\r\n          <lucide-icon class=\"Close\" name=\"x\" (click)=\"session.handlers.onCloseIconClick($event); $event.stopPropagation()\"></lucide-icon>\r\n        </div>\r\n      </ng-container>\r\n\r\n      <div class=\"OptionsList\">\r\n        <div class=\"EmptyState\" *ngIf=\"!session.view.searchText.trim() && !session.view.loading && !session.view.error\">\r\n          <lucide-icon name=\"search\"></lucide-icon>\r\n          <p>Escribe para buscar productos</p>\r\n          <span class=\"Hint\">Busca por nombre, SKU, marca o categor\u00EDa</span>\r\n        </div>\r\n\r\n        <div class=\"LoadingState\" *ngIf=\"session.view.loading && session.view.searchText.trim()\">\r\n          <lucide-icon name=\"loader-circle\" [spin]=\"true\"></lucide-icon>\r\n          <span>Buscando...</span>\r\n        </div>\r\n\r\n        <div class=\"ErrorState\" *ngIf=\"session.view.error && !session.view.loading\">\r\n          <lucide-icon name=\"triangle-alert\"></lucide-icon>\r\n          <p>Error al realizar la b\u00FAsqueda</p>\r\n          <span class=\"Hint\">Intenta nuevamente</span>\r\n        </div>\r\n\r\n        <ng-container *ngIf=\"!session.view.loading && !session.view.error && session.view.searchText.trim()\">\r\n          <a\r\n            class=\"Option SearchAllOption\"\r\n            [routerLink]=\"['/search', session.view.searchText.trim()]\"\r\n            (click)=\"session.handlers.onResultNavigate()\"\r\n          >\r\n            <label>\r\n              <div class=\"Details\">\r\n                <div class=\"SearchAllIcon\">\r\n                  <lucide-icon name=\"search\"></lucide-icon>\r\n                </div>\r\n                <div class=\"Info\">\r\n                  <span class=\"Name\">Buscar \"{{ session.view.searchText.trim() }}\" en la p\u00E1gina de b\u00FAsqueda</span>\r\n                  <span class=\"Description\">Ver todos los resultados</span>\r\n                </div>\r\n              </div>\r\n              <lucide-icon class=\"LinkIcon\" name=\"arrow-right\"></lucide-icon>\r\n            </label>\r\n          </a>\r\n\r\n          <a\r\n            class=\"Option\"\r\n            *ngFor=\"let option of session.view.filteredOptions\"\r\n            [routerLink]=\"[option.to, option.param]\"\r\n            (click)=\"session.handlers.onResultNavigate()\"\r\n          >\r\n            <label>\r\n              <div class=\"Details\">\r\n                <div\r\n                  class=\"Color\"\r\n                  *ngIf=\"option.color\"\r\n                  [style.backgroundColor]=\"option.color\"\r\n                ></div>\r\n\r\n                <div class=\"Image\" *ngIf=\"option.image\">\r\n                  <img\r\n                    [src]=\"option.image\"\r\n                    alt=\"Imagen\"\r\n                    loading=\"lazy\"\r\n                    onerror=\"this.style.display='none'\"\r\n                  />\r\n                </div>\r\n\r\n                <div class=\"Info\">\r\n                  <span class=\"Name\" [innerHTML]=\"option.name\"></span>\r\n                  <span\r\n                    class=\"Description\"\r\n                    *ngIf=\"option.description\"\r\n                    [innerHTML]=\"option.description\"\r\n                  ></span>\r\n                </div>\r\n              </div>\r\n\r\n              <lucide-icon class=\"LinkIcon\" name=\"arrow-right\"></lucide-icon>\r\n            </label>\r\n          </a>\r\n\r\n          <div class=\"NoResults\" *ngIf=\"session.view.filteredOptions.length === 0 && session.view.searchText.trim()\">\r\n            <lucide-icon name=\"inbox\"></lucide-icon>\r\n            <p>No se encontraron resultados para: <strong>{{ session.view.searchText }}</strong></p>\r\n            <span class=\"Hint\">Intenta con otros t\u00E9rminos de b\u00FAsqueda</span>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n", styles: ["@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:contents}.Backdrop{position:fixed;top:0;left:0;z-index:10050;display:flex;justify-content:center;align-items:flex-start;width:100%;height:100%;padding:4px;background:var(--overlay-scrim)}.Backdrop .Picker{max-width:550px;width:100%;margin:0 auto;background:var(--surface);display:flex;flex-direction:column;gap:5px;border-radius:var(--radius-lg);max-height:calc(100vh - 20px);box-shadow:0 0 10px var(--shadow-color)}.Backdrop .Picker .SearchContainer{width:100%;height:max-content;display:flex;align-items:center;padding:8px 8px 0}.Backdrop .Picker .SearchContainer i,.Backdrop .Picker .SearchContainer lucide-icon{width:30px;min-width:30px;height:30px;min-height:30px;border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;font-size:1.3rem;color:var(--red);padding:4px;cursor:pointer}.Backdrop .Picker .SearchContainer i lucide-icon .lucide-icon-svg,.Backdrop .Picker .SearchContainer lucide-icon lucide-icon .lucide-icon-svg{width:1.3rem;height:1.3rem}.Backdrop .Picker .SearchContainer .SearchInput{width:100%;height:45px;border-radius:var(--radius-lg)}.Backdrop .Picker .OptionsList{width:100%;display:flex;flex-direction:column;overflow:hidden;overflow-y:auto;padding:0 12px 24px;gap:4px}.Backdrop .Picker .OptionsList .EmptyState{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:3rem 1rem;text-align:center;color:var(--text-muted)}.Backdrop .Picker .OptionsList .EmptyState i,.Backdrop .Picker .OptionsList .EmptyState lucide-icon{font-size:2.5rem;color:var(--text-label);opacity:.5}.Backdrop .Picker .OptionsList .EmptyState i lucide-icon .lucide-icon-svg,.Backdrop .Picker .OptionsList .EmptyState lucide-icon lucide-icon .lucide-icon-svg{width:2.5rem;height:2.5rem}.Backdrop .Picker .OptionsList .EmptyState p{font-size:1rem;font-weight:500;color:var(--text-base);margin:0}.Backdrop .Picker .OptionsList .EmptyState .Hint{font-size:.875rem;color:var(--text-muted);font-style:italic}.Backdrop .Picker .OptionsList .LoadingState{display:flex;align-items:center;justify-content:center;gap:12px;padding:2rem 1rem;color:var(--text-muted);font-size:.9375rem}.Backdrop .Picker .OptionsList .LoadingState i,.Backdrop .Picker .OptionsList .LoadingState lucide-icon{font-size:1.25rem;color:var(--primary);animation:spin 1s linear infinite}.Backdrop .Picker .OptionsList .LoadingState i lucide-icon .lucide-icon-svg,.Backdrop .Picker .OptionsList .LoadingState lucide-icon lucide-icon .lucide-icon-svg{width:1.25rem;height:1.25rem}.Backdrop .Picker .OptionsList .ErrorState{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:2rem 1rem;text-align:center;color:var(--red)}.Backdrop .Picker .OptionsList .ErrorState i,.Backdrop .Picker .OptionsList .ErrorState lucide-icon{font-size:2rem;color:var(--red)}.Backdrop .Picker .OptionsList .ErrorState i lucide-icon .lucide-icon-svg,.Backdrop .Picker .OptionsList .ErrorState lucide-icon lucide-icon .lucide-icon-svg{width:2rem;height:2rem}.Backdrop .Picker .OptionsList .ErrorState p{font-size:1rem;font-weight:500;color:var(--text-base);margin:0}.Backdrop .Picker .OptionsList .ErrorState .Hint{font-size:.875rem;color:var(--text-muted);font-style:italic}.Backdrop .Picker .OptionsList .NoResults{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:2rem 1rem;text-align:center;color:var(--text-muted)}.Backdrop .Picker .OptionsList .NoResults i,.Backdrop .Picker .OptionsList .NoResults lucide-icon{font-size:2rem;color:var(--text-label);opacity:.5}.Backdrop .Picker .OptionsList .NoResults i lucide-icon .lucide-icon-svg,.Backdrop .Picker .OptionsList .NoResults lucide-icon lucide-icon .lucide-icon-svg{width:2rem;height:2rem}.Backdrop .Picker .OptionsList .NoResults p{font-size:1rem;font-weight:600;color:var(--text-base);margin:0}.Backdrop .Picker .OptionsList .NoResults .Hint{font-size:.875rem;color:var(--text-muted);font-style:italic}.Backdrop .Picker .OptionsList .Option{width:100%;min-height:max-content;display:flex;justify-content:flex-start;align-items:center;text-decoration:none;color:inherit}.Backdrop .Picker .OptionsList .Option label{position:relative;width:100%;height:100%;padding:4px 8px;display:flex;align-items:center;cursor:pointer;border-radius:var(--radius-lg);gap:4px}.Backdrop .Picker .OptionsList .Option label:hover{background-color:var(--surface-2)}.Backdrop .Picker .OptionsList .Option.SearchAllOption{border-bottom:1px solid var(--input-border);margin-bottom:4px}.Backdrop .Picker .OptionsList .Option.SearchAllOption label .SearchAllIcon{width:40px;min-width:40px;height:40px;min-height:40px;border-radius:var(--radius-lg);background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark, var(--primary)) 100%);display:flex;align-items:center;justify-content:center}.Backdrop .Picker .OptionsList .Option.SearchAllOption label .SearchAllIcon i,.Backdrop .Picker .OptionsList .Option.SearchAllOption label .SearchAllIcon lucide-icon{color:#fff;font-size:1.125rem}.Backdrop .Picker .OptionsList .Option.SearchAllOption label .SearchAllIcon i lucide-icon .lucide-icon-svg,.Backdrop .Picker .OptionsList .Option.SearchAllOption label .SearchAllIcon lucide-icon lucide-icon .lucide-icon-svg{width:1.125rem;height:1.125rem}.Backdrop .Picker .OptionsList .Option.SearchAllOption label .Info .Name{font-weight:400;color:var(--primary)}.Backdrop .Picker .OptionsList .Option.SearchAllOption label .Info .Description{font-weight:400;font-size:.875rem;color:var(--text-muted)}.Backdrop .Picker .OptionsList .Option [type=checkbox]{display:none}.Backdrop .Picker .OptionsList .Option .Details{pointer-events:none;display:flex;align-items:center;gap:4px;flex:1;min-width:0}.Backdrop .Picker .OptionsList .Option .Details .Color{width:25px;min-width:25px;height:25px;min-height:25px;border-radius:100px;overflow:hidden;flex-shrink:0}.Backdrop .Picker .OptionsList .Option .Details .Image{width:40px;min-width:40px;height:40px;min-height:40px;border-radius:var(--radius-md);overflow:hidden;background-color:var(--surface-2);flex-shrink:0}.Backdrop .Picker .OptionsList .Option .Details .Image img{width:100%;height:100%;object-fit:contain;border:none}.Backdrop .Picker .OptionsList .Option .Details .Info{display:flex;flex-direction:column;flex:1;min-width:0;gap:2px}.Backdrop .Picker .OptionsList .Option .Details .Info .Name{font-weight:400;font-size:.9rem;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;color:var(--text-base);line-height:1.3}.Backdrop .Picker .OptionsList .Option .Details .Info .Description{font-size:.8rem;color:var(--text-muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;line-height:1.3}.Backdrop .Picker .OptionsList .Option .LinkIcon{color:var(--icon-primary);width:24px;min-width:24px;height:24px;flex-shrink:0;display:flex;justify-content:center;align-items:center;margin-left:auto;opacity:.6;transition:opacity .2s ease}.Backdrop .Picker .OptionsList .Option .LinkIcon lucide-icon .lucide-icon-svg{width:1rem;height:1rem}.Backdrop .Picker .OptionsList .Option:hover .LinkIcon{opacity:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: LucideIconComponent, selector: "lucide-icon", inputs: ["name", "size", "spin", "filled"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: SearchEntryModalServiceComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'search-entry-modal-service', standalone: true, imports: [CommonModule, RouterModule, LucideIconComponent], template: "<ng-container *ngIf=\"vm$ | async as session\">\r\n  <div class=\"Backdrop InputModalBackdrop search-entry-modal\" (click)=\"session.handlers.onBackdropClick($event)\">\r\n    <div class=\"Picker\" (click)=\"$event.stopPropagation()\">\r\n      <ng-container *ngIf=\"session.view.shouldShowSearch\">\r\n        <div class=\"SearchContainer\">\r\n          <input\r\n            type=\"text\"\r\n            class=\"SearchInput NativeInput\"\r\n            [placeholder]=\"session.view.placeholder\"\r\n            [value]=\"session.view.searchText\"\r\n            (input)=\"session.handlers.onSearchInput($event)\"\r\n          />\r\n          <lucide-icon class=\"Close\" name=\"x\" (click)=\"session.handlers.onCloseIconClick($event); $event.stopPropagation()\"></lucide-icon>\r\n        </div>\r\n      </ng-container>\r\n\r\n      <div class=\"OptionsList\">\r\n        <div class=\"EmptyState\" *ngIf=\"!session.view.searchText.trim() && !session.view.loading && !session.view.error\">\r\n          <lucide-icon name=\"search\"></lucide-icon>\r\n          <p>Escribe para buscar productos</p>\r\n          <span class=\"Hint\">Busca por nombre, SKU, marca o categor\u00EDa</span>\r\n        </div>\r\n\r\n        <div class=\"LoadingState\" *ngIf=\"session.view.loading && session.view.searchText.trim()\">\r\n          <lucide-icon name=\"loader-circle\" [spin]=\"true\"></lucide-icon>\r\n          <span>Buscando...</span>\r\n        </div>\r\n\r\n        <div class=\"ErrorState\" *ngIf=\"session.view.error && !session.view.loading\">\r\n          <lucide-icon name=\"triangle-alert\"></lucide-icon>\r\n          <p>Error al realizar la b\u00FAsqueda</p>\r\n          <span class=\"Hint\">Intenta nuevamente</span>\r\n        </div>\r\n\r\n        <ng-container *ngIf=\"!session.view.loading && !session.view.error && session.view.searchText.trim()\">\r\n          <a\r\n            class=\"Option SearchAllOption\"\r\n            [routerLink]=\"['/search', session.view.searchText.trim()]\"\r\n            (click)=\"session.handlers.onResultNavigate()\"\r\n          >\r\n            <label>\r\n              <div class=\"Details\">\r\n                <div class=\"SearchAllIcon\">\r\n                  <lucide-icon name=\"search\"></lucide-icon>\r\n                </div>\r\n                <div class=\"Info\">\r\n                  <span class=\"Name\">Buscar \"{{ session.view.searchText.trim() }}\" en la p\u00E1gina de b\u00FAsqueda</span>\r\n                  <span class=\"Description\">Ver todos los resultados</span>\r\n                </div>\r\n              </div>\r\n              <lucide-icon class=\"LinkIcon\" name=\"arrow-right\"></lucide-icon>\r\n            </label>\r\n          </a>\r\n\r\n          <a\r\n            class=\"Option\"\r\n            *ngFor=\"let option of session.view.filteredOptions\"\r\n            [routerLink]=\"[option.to, option.param]\"\r\n            (click)=\"session.handlers.onResultNavigate()\"\r\n          >\r\n            <label>\r\n              <div class=\"Details\">\r\n                <div\r\n                  class=\"Color\"\r\n                  *ngIf=\"option.color\"\r\n                  [style.backgroundColor]=\"option.color\"\r\n                ></div>\r\n\r\n                <div class=\"Image\" *ngIf=\"option.image\">\r\n                  <img\r\n                    [src]=\"option.image\"\r\n                    alt=\"Imagen\"\r\n                    loading=\"lazy\"\r\n                    onerror=\"this.style.display='none'\"\r\n                  />\r\n                </div>\r\n\r\n                <div class=\"Info\">\r\n                  <span class=\"Name\" [innerHTML]=\"option.name\"></span>\r\n                  <span\r\n                    class=\"Description\"\r\n                    *ngIf=\"option.description\"\r\n                    [innerHTML]=\"option.description\"\r\n                  ></span>\r\n                </div>\r\n              </div>\r\n\r\n              <lucide-icon class=\"LinkIcon\" name=\"arrow-right\"></lucide-icon>\r\n            </label>\r\n          </a>\r\n\r\n          <div class=\"NoResults\" *ngIf=\"session.view.filteredOptions.length === 0 && session.view.searchText.trim()\">\r\n            <lucide-icon name=\"inbox\"></lucide-icon>\r\n            <p>No se encontraron resultados para: <strong>{{ session.view.searchText }}</strong></p>\r\n            <span class=\"Hint\">Intenta con otros t\u00E9rminos de b\u00FAsqueda</span>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n", styles: ["@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{display:contents}.Backdrop{position:fixed;top:0;left:0;z-index:10050;display:flex;justify-content:center;align-items:flex-start;width:100%;height:100%;padding:4px;background:var(--overlay-scrim)}.Backdrop .Picker{max-width:550px;width:100%;margin:0 auto;background:var(--surface);display:flex;flex-direction:column;gap:5px;border-radius:var(--radius-lg);max-height:calc(100vh - 20px);box-shadow:0 0 10px var(--shadow-color)}.Backdrop .Picker .SearchContainer{width:100%;height:max-content;display:flex;align-items:center;padding:8px 8px 0}.Backdrop .Picker .SearchContainer i,.Backdrop .Picker .SearchContainer lucide-icon{width:30px;min-width:30px;height:30px;min-height:30px;border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;font-size:1.3rem;color:var(--red);padding:4px;cursor:pointer}.Backdrop .Picker .SearchContainer i lucide-icon .lucide-icon-svg,.Backdrop .Picker .SearchContainer lucide-icon lucide-icon .lucide-icon-svg{width:1.3rem;height:1.3rem}.Backdrop .Picker .SearchContainer .SearchInput{width:100%;height:45px;border-radius:var(--radius-lg)}.Backdrop .Picker .OptionsList{width:100%;display:flex;flex-direction:column;overflow:hidden;overflow-y:auto;padding:0 12px 24px;gap:4px}.Backdrop .Picker .OptionsList .EmptyState{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:3rem 1rem;text-align:center;color:var(--text-muted)}.Backdrop .Picker .OptionsList .EmptyState i,.Backdrop .Picker .OptionsList .EmptyState lucide-icon{font-size:2.5rem;color:var(--text-label);opacity:.5}.Backdrop .Picker .OptionsList .EmptyState i lucide-icon .lucide-icon-svg,.Backdrop .Picker .OptionsList .EmptyState lucide-icon lucide-icon .lucide-icon-svg{width:2.5rem;height:2.5rem}.Backdrop .Picker .OptionsList .EmptyState p{font-size:1rem;font-weight:500;color:var(--text-base);margin:0}.Backdrop .Picker .OptionsList .EmptyState .Hint{font-size:.875rem;color:var(--text-muted);font-style:italic}.Backdrop .Picker .OptionsList .LoadingState{display:flex;align-items:center;justify-content:center;gap:12px;padding:2rem 1rem;color:var(--text-muted);font-size:.9375rem}.Backdrop .Picker .OptionsList .LoadingState i,.Backdrop .Picker .OptionsList .LoadingState lucide-icon{font-size:1.25rem;color:var(--primary);animation:spin 1s linear infinite}.Backdrop .Picker .OptionsList .LoadingState i lucide-icon .lucide-icon-svg,.Backdrop .Picker .OptionsList .LoadingState lucide-icon lucide-icon .lucide-icon-svg{width:1.25rem;height:1.25rem}.Backdrop .Picker .OptionsList .ErrorState{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:2rem 1rem;text-align:center;color:var(--red)}.Backdrop .Picker .OptionsList .ErrorState i,.Backdrop .Picker .OptionsList .ErrorState lucide-icon{font-size:2rem;color:var(--red)}.Backdrop .Picker .OptionsList .ErrorState i lucide-icon .lucide-icon-svg,.Backdrop .Picker .OptionsList .ErrorState lucide-icon lucide-icon .lucide-icon-svg{width:2rem;height:2rem}.Backdrop .Picker .OptionsList .ErrorState p{font-size:1rem;font-weight:500;color:var(--text-base);margin:0}.Backdrop .Picker .OptionsList .ErrorState .Hint{font-size:.875rem;color:var(--text-muted);font-style:italic}.Backdrop .Picker .OptionsList .NoResults{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:2rem 1rem;text-align:center;color:var(--text-muted)}.Backdrop .Picker .OptionsList .NoResults i,.Backdrop .Picker .OptionsList .NoResults lucide-icon{font-size:2rem;color:var(--text-label);opacity:.5}.Backdrop .Picker .OptionsList .NoResults i lucide-icon .lucide-icon-svg,.Backdrop .Picker .OptionsList .NoResults lucide-icon lucide-icon .lucide-icon-svg{width:2rem;height:2rem}.Backdrop .Picker .OptionsList .NoResults p{font-size:1rem;font-weight:600;color:var(--text-base);margin:0}.Backdrop .Picker .OptionsList .NoResults .Hint{font-size:.875rem;color:var(--text-muted);font-style:italic}.Backdrop .Picker .OptionsList .Option{width:100%;min-height:max-content;display:flex;justify-content:flex-start;align-items:center;text-decoration:none;color:inherit}.Backdrop .Picker .OptionsList .Option label{position:relative;width:100%;height:100%;padding:4px 8px;display:flex;align-items:center;cursor:pointer;border-radius:var(--radius-lg);gap:4px}.Backdrop .Picker .OptionsList .Option label:hover{background-color:var(--surface-2)}.Backdrop .Picker .OptionsList .Option.SearchAllOption{border-bottom:1px solid var(--input-border);margin-bottom:4px}.Backdrop .Picker .OptionsList .Option.SearchAllOption label .SearchAllIcon{width:40px;min-width:40px;height:40px;min-height:40px;border-radius:var(--radius-lg);background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark, var(--primary)) 100%);display:flex;align-items:center;justify-content:center}.Backdrop .Picker .OptionsList .Option.SearchAllOption label .SearchAllIcon i,.Backdrop .Picker .OptionsList .Option.SearchAllOption label .SearchAllIcon lucide-icon{color:#fff;font-size:1.125rem}.Backdrop .Picker .OptionsList .Option.SearchAllOption label .SearchAllIcon i lucide-icon .lucide-icon-svg,.Backdrop .Picker .OptionsList .Option.SearchAllOption label .SearchAllIcon lucide-icon lucide-icon .lucide-icon-svg{width:1.125rem;height:1.125rem}.Backdrop .Picker .OptionsList .Option.SearchAllOption label .Info .Name{font-weight:400;color:var(--primary)}.Backdrop .Picker .OptionsList .Option.SearchAllOption label .Info .Description{font-weight:400;font-size:.875rem;color:var(--text-muted)}.Backdrop .Picker .OptionsList .Option [type=checkbox]{display:none}.Backdrop .Picker .OptionsList .Option .Details{pointer-events:none;display:flex;align-items:center;gap:4px;flex:1;min-width:0}.Backdrop .Picker .OptionsList .Option .Details .Color{width:25px;min-width:25px;height:25px;min-height:25px;border-radius:100px;overflow:hidden;flex-shrink:0}.Backdrop .Picker .OptionsList .Option .Details .Image{width:40px;min-width:40px;height:40px;min-height:40px;border-radius:var(--radius-md);overflow:hidden;background-color:var(--surface-2);flex-shrink:0}.Backdrop .Picker .OptionsList .Option .Details .Image img{width:100%;height:100%;object-fit:contain;border:none}.Backdrop .Picker .OptionsList .Option .Details .Info{display:flex;flex-direction:column;flex:1;min-width:0;gap:2px}.Backdrop .Picker .OptionsList .Option .Details .Info .Name{font-weight:400;font-size:.9rem;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;color:var(--text-base);line-height:1.3}.Backdrop .Picker .OptionsList .Option .Details .Info .Description{font-size:.8rem;color:var(--text-muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;line-height:1.3}.Backdrop .Picker .OptionsList .Option .LinkIcon{color:var(--icon-primary);width:24px;min-width:24px;height:24px;flex-shrink:0;display:flex;justify-content:center;align-items:center;margin-left:auto;opacity:.6;transition:opacity .2s ease}.Backdrop .Picker .OptionsList .Option .LinkIcon lucide-icon .lucide-icon-svg{width:1rem;height:1rem}.Backdrop .Picker .OptionsList .Option:hover .LinkIcon{opacity:1}\n"] }]
+        }], ctorParameters: () => [{ type: SearchEntryModalService }, { type: i0.ChangeDetectorRef }] });
+
+class PhoneEntryModalServiceComponent {
+    phoneModal;
+    cdr;
+    vm$;
+    sub;
+    constructor(phoneModal, cdr) {
+        this.phoneModal = phoneModal;
+        this.cdr = cdr;
+        this.vm$ = this.phoneModal.state$;
+    }
+    ngOnInit() {
+        this.sub = this.phoneModal.state$.subscribe(() => this.cdr.markForCheck());
+    }
+    ngOnDestroy() {
+        this.sub?.unsubscribe();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: PhoneEntryModalServiceComponent, deps: [{ token: PhoneEntryModalService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: PhoneEntryModalServiceComponent, isStandalone: true, selector: "phone-entry-modal-service", ngImport: i0, template: "<ng-container *ngIf=\"vm$ | async as session\">\r\n  <div class=\"Backdrop InputModalBackdrop phone-entry-modal\" (click)=\"session.handlers.onBackdropClick($event)\">\r\n    <div class=\"Picker\" (click)=\"$event.stopPropagation()\">\r\n      <div class=\"SearchContainer\">\r\n        <lucide-icon class=\"SearchIcon\" name=\"search\"></lucide-icon>\r\n        <input\r\n          type=\"text\"\r\n          class=\"SearchInput\"\r\n          [value]=\"session.view.searchQuery\"\r\n          (input)=\"session.handlers.onSearchInput($event)\"\r\n          (click)=\"$event.stopPropagation()\"\r\n          placeholder=\"Buscar por pa\u00EDs o c\u00F3digo...\"\r\n        />\r\n      </div>\r\n\r\n      <div class=\"CountriesList\">\r\n        <div\r\n          class=\"Item\"\r\n          *ngFor=\"let country of session.view.filteredCountries\"\r\n          (click)=\"session.handlers.onSelectCountry(country, $event)\"\r\n        >\r\n          <img *ngIf=\"country.img\" class=\"Icon\" [src]=\"country.img\" draggable=\"false\" />\r\n          <lucide-icon class=\"Icon\" name=\"globe\" *ngIf=\"!country.img\"></lucide-icon>\r\n          <span class=\"Code\">{{ country.prefix }}</span>\r\n          <span class=\"Country\">{{ country.name }}</span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex;flex-direction:column;width:100%;height:max-content;-webkit-user-select:auto;user-select:auto}:host .LabelRow{display:flex;align-items:center;justify-content:space-between;gap:6px;width:100%;margin-bottom:2px}:host .Label{color:var(--text-label);flex:1;min-width:0;cursor:pointer;padding:0 3px;margin:0;font-weight:400;-webkit-user-select:none;user-select:none}:host .Label .Opcional{color:var(--text-muted)}:host .Description{-webkit-user-select:none;user-select:none;font-size:.9rem;color:var(--text-base);font-weight:400;width:100%;cursor:pointer;padding:0 3px;margin:0 0 4px;overflow:hidden;word-break:break-all}:host .Entry{display:flex;width:100%;height:32px;justify-content:flex-start;align-items:center;border:solid 0 var(--input-border);border-radius:12px;cursor:pointer;overflow:hidden;background-color:var(--input-bg)}:host .Entry:hover{border:none;outline:solid 1px var(--input-hover-border)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--input-focus-border)}:host .Entry[class~=Error]{outline:solid 1px var(--input-border-error)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--input-border);padding:0 8px;color:var(--input-text);caret-color:var(--primary);text-align:start}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--input-placeholder)}:host .Entry.NotHover:hover{border:none;outline:none}:host .Backdrop{position:fixed;top:0;left:0;z-index:800;display:flex;justify-content:center;align-items:center;width:100%;height:100%;padding:12px;background:var(--overlay-scrim);overflow:hidden}@media (width <= 768px){:host .Backdrop{align-items:flex-start}}:host .Backdrop .Picker{display:flex;flex-direction:column;gap:5px;width:100%;max-width:600px;max-height:100%;margin:0 auto;background:var(--surface);border-radius:16px;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--shadow-color)}:host{display:contents}.Backdrop{position:fixed;top:0;left:0;z-index:10050;display:flex;justify-content:center;align-items:center;width:100%;height:100%;padding:12px;background:var(--overlay-scrim);overflow:hidden}.Backdrop .Picker{display:flex;flex-direction:column;gap:8px;width:100%;max-width:420px;max-height:90vh;margin:0 auto;background:var(--surface);border-radius:var(--radius-xl);padding:12px;box-shadow:0 0 8px var(--shadow-color)}.Backdrop .Picker .SearchContainer{display:flex;align-items:center;gap:8px;padding:8px;background-color:var(--input-bg);border-radius:var(--radius-md);border:solid 1px var(--input-border)}.Backdrop .Picker .SearchContainer .SearchIcon{color:var(--text-muted);font-size:.9rem;flex-shrink:0}.Backdrop .Picker .SearchContainer .SearchIcon lucide-icon .lucide-icon-svg{width:.9rem;height:.9rem}.Backdrop .Picker .SearchContainer .SearchInput{flex:1;border:none;outline:none;background:transparent;color:var(--input-text);font-size:.9rem}.Backdrop .Picker .SearchContainer .SearchInput::placeholder{color:var(--input-placeholder)}.Backdrop .Picker .CountriesList{display:flex;flex-direction:column;gap:2px;overflow-y:auto;max-height:calc(80vh - 120px)}.Backdrop .Picker .CountriesList .Item{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm);cursor:pointer;border-radius:var(--radius-md);transition:background-color .2s}.Backdrop .Picker .CountriesList .Item:hover{background-color:var(--surface-2)}.Backdrop .Picker .CountriesList .Item .Icon{width:25px;height:25px;object-fit:contain;flex-shrink:0}.Backdrop .Picker .CountriesList .Item .Code{padding:2px var(--spacing-sm);border-radius:100px;font-size:.8rem;font-weight:500;background-color:var(--primary);color:var(--surface);display:flex;justify-content:center;align-items:center;white-space:nowrap;flex-shrink:0}.Backdrop .Picker .CountriesList .Item .Country{flex:1;color:var(--text-primary);font-size:.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "component", type: LucideIconComponent, selector: "lucide-icon", inputs: ["name", "size", "spin", "filled"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: PhoneEntryModalServiceComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'phone-entry-modal-service', standalone: true, imports: [CommonModule, LucideIconComponent], template: "<ng-container *ngIf=\"vm$ | async as session\">\r\n  <div class=\"Backdrop InputModalBackdrop phone-entry-modal\" (click)=\"session.handlers.onBackdropClick($event)\">\r\n    <div class=\"Picker\" (click)=\"$event.stopPropagation()\">\r\n      <div class=\"SearchContainer\">\r\n        <lucide-icon class=\"SearchIcon\" name=\"search\"></lucide-icon>\r\n        <input\r\n          type=\"text\"\r\n          class=\"SearchInput\"\r\n          [value]=\"session.view.searchQuery\"\r\n          (input)=\"session.handlers.onSearchInput($event)\"\r\n          (click)=\"$event.stopPropagation()\"\r\n          placeholder=\"Buscar por pa\u00EDs o c\u00F3digo...\"\r\n        />\r\n      </div>\r\n\r\n      <div class=\"CountriesList\">\r\n        <div\r\n          class=\"Item\"\r\n          *ngFor=\"let country of session.view.filteredCountries\"\r\n          (click)=\"session.handlers.onSelectCountry(country, $event)\"\r\n        >\r\n          <img *ngIf=\"country.img\" class=\"Icon\" [src]=\"country.img\" draggable=\"false\" />\r\n          <lucide-icon class=\"Icon\" name=\"globe\" *ngIf=\"!country.img\"></lucide-icon>\r\n          <span class=\"Code\">{{ country.prefix }}</span>\r\n          <span class=\"Country\">{{ country.name }}</span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex;flex-direction:column;width:100%;height:max-content;-webkit-user-select:auto;user-select:auto}:host .LabelRow{display:flex;align-items:center;justify-content:space-between;gap:6px;width:100%;margin-bottom:2px}:host .Label{color:var(--text-label);flex:1;min-width:0;cursor:pointer;padding:0 3px;margin:0;font-weight:400;-webkit-user-select:none;user-select:none}:host .Label .Opcional{color:var(--text-muted)}:host .Description{-webkit-user-select:none;user-select:none;font-size:.9rem;color:var(--text-base);font-weight:400;width:100%;cursor:pointer;padding:0 3px;margin:0 0 4px;overflow:hidden;word-break:break-all}:host .Entry{display:flex;width:100%;height:32px;justify-content:flex-start;align-items:center;border:solid 0 var(--input-border);border-radius:12px;cursor:pointer;overflow:hidden;background-color:var(--input-bg)}:host .Entry:hover{border:none;outline:solid 1px var(--input-hover-border)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--input-focus-border)}:host .Entry[class~=Error]{outline:solid 1px var(--input-border-error)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--input-border);padding:0 8px;color:var(--input-text);caret-color:var(--primary);text-align:start}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--input-placeholder)}:host .Entry.NotHover:hover{border:none;outline:none}:host .Backdrop{position:fixed;top:0;left:0;z-index:800;display:flex;justify-content:center;align-items:center;width:100%;height:100%;padding:12px;background:var(--overlay-scrim);overflow:hidden}@media (width <= 768px){:host .Backdrop{align-items:flex-start}}:host .Backdrop .Picker{display:flex;flex-direction:column;gap:5px;width:100%;max-width:600px;max-height:100%;margin:0 auto;background:var(--surface);border-radius:16px;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--shadow-color)}:host{display:contents}.Backdrop{position:fixed;top:0;left:0;z-index:10050;display:flex;justify-content:center;align-items:center;width:100%;height:100%;padding:12px;background:var(--overlay-scrim);overflow:hidden}.Backdrop .Picker{display:flex;flex-direction:column;gap:8px;width:100%;max-width:420px;max-height:90vh;margin:0 auto;background:var(--surface);border-radius:var(--radius-xl);padding:12px;box-shadow:0 0 8px var(--shadow-color)}.Backdrop .Picker .SearchContainer{display:flex;align-items:center;gap:8px;padding:8px;background-color:var(--input-bg);border-radius:var(--radius-md);border:solid 1px var(--input-border)}.Backdrop .Picker .SearchContainer .SearchIcon{color:var(--text-muted);font-size:.9rem;flex-shrink:0}.Backdrop .Picker .SearchContainer .SearchIcon lucide-icon .lucide-icon-svg{width:.9rem;height:.9rem}.Backdrop .Picker .SearchContainer .SearchInput{flex:1;border:none;outline:none;background:transparent;color:var(--input-text);font-size:.9rem}.Backdrop .Picker .SearchContainer .SearchInput::placeholder{color:var(--input-placeholder)}.Backdrop .Picker .CountriesList{display:flex;flex-direction:column;gap:2px;overflow-y:auto;max-height:calc(80vh - 120px)}.Backdrop .Picker .CountriesList .Item{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm);cursor:pointer;border-radius:var(--radius-md);transition:background-color .2s}.Backdrop .Picker .CountriesList .Item:hover{background-color:var(--surface-2)}.Backdrop .Picker .CountriesList .Item .Icon{width:25px;height:25px;object-fit:contain;flex-shrink:0}.Backdrop .Picker .CountriesList .Item .Code{padding:2px var(--spacing-sm);border-radius:100px;font-size:.8rem;font-weight:500;background-color:var(--primary);color:var(--surface);display:flex;justify-content:center;align-items:center;white-space:nowrap;flex-shrink:0}.Backdrop .Picker .CountriesList .Item .Country{flex:1;color:var(--text-primary);font-size:.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"] }]
+        }], ctorParameters: () => [{ type: PhoneEntryModalService }, { type: i0.ChangeDetectorRef }] });
+
+class DatePickerModalServiceComponent {
+    datePickerModal;
+    cdr;
+    vm$;
+    sub;
+    constructor(datePickerModal, cdr) {
+        this.datePickerModal = datePickerModal;
+        this.cdr = cdr;
+        this.vm$ = this.datePickerModal.state$;
+    }
+    ngOnInit() {
+        this.sub = this.datePickerModal.state$.subscribe(() => this.cdr.markForCheck());
+    }
+    ngOnDestroy() {
+        this.sub?.unsubscribe();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DatePickerModalServiceComponent, deps: [{ token: DatePickerModalService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: DatePickerModalServiceComponent, isStandalone: true, selector: "date-picker-modal-service", ngImport: i0, template: "<ng-container *ngIf=\"vm$ | async as session\">\r\n  <div\r\n    class=\"Backdrop InputModalBackdrop date-picker-modal\"\r\n    (click)=\"session.handlers.toggleShowPicker($event)\"\r\n  >\r\n    <div class=\"Picker\" (click)=\"$event.stopPropagation()\">\r\n      <div class=\"Preview\" *ngIf=\"session.view.selectedValue\">\r\n        <span>{{ session.view.selectedValueExtended }}</span>\r\n      </div>\r\n\r\n      <div class=\"Cards\">\r\n        <div class=\"CardYears\" *ngIf=\"session.view.showYears\">\r\n          <div class=\"years Scroll\">\r\n            <div\r\n              *ngFor=\"let y of session.view.years\"\r\n              (click)=\"session.handlers.onSelectYear(y, $event)\"\r\n              class=\"year\"\r\n              [class.selected]=\"y === session.view.selectedYear\"\r\n            >\r\n              {{ y }}\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"CardMonths\" *ngIf=\"session.view.showMonths\">\r\n          <div class=\"CardChangeYear\">\r\n            <p\r\n              class=\"LabelYear\"\r\n              (click)=\"session.handlers.openYears($event)\"\r\n            >\r\n              {{ session.view.selectedYear || 'A\u00F1o' }}\r\n            </p>\r\n            <lucide-icon class=\"Up\" name=\"chevron-up\" (click)=\"session.handlers.onDecrementYear($event)\"></lucide-icon>\r\n            <lucide-icon class=\"Down\" name=\"chevron-down\" (click)=\"session.handlers.onIncrementYear($event)\"></lucide-icon>\r\n          </div>\r\n\r\n          <div class=\"months Scroll\">\r\n            <div\r\n              *ngFor=\"let m of session.view.months\"\r\n              class=\"month\"\r\n              [class.selected]=\"m === session.view.selectedMonth\"\r\n              (click)=\"session.handlers.onSelectMonth(m, $event)\"\r\n            >\r\n              <span class=\"NameMonth\">{{\r\n                session.view.MONTH_NAMES[m - 1]\r\n              }}</span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"CardDates\">\r\n          <div class=\"CardChangeMonth\">\r\n            <p\r\n              class=\"LabelMonth\"\r\n              (click)=\"session.handlers.openMonths($event)\"\r\n            >\r\n              {{ session.view.formattedMonthAndYear || 'Mes' }}\r\n            </p>\r\n            <lucide-icon class=\"Up\" name=\"chevron-up\" (click)=\"session.handlers.onDecrementMonth($event)\"></lucide-icon>\r\n            <lucide-icon class=\"Down\" name=\"chevron-down\" (click)=\"session.handlers.onIncrementMonth($event)\"></lucide-icon>\r\n          </div>\r\n\r\n          <div class=\"Labels\">\r\n            <div class=\"LabelDay\">DO</div>\r\n            <div class=\"LabelDay\">LU</div>\r\n            <div class=\"LabelDay\">MA</div>\r\n            <div class=\"LabelDay\">MI</div>\r\n            <div class=\"LabelDay\">JU</div>\r\n            <div class=\"LabelDay\">VI</div>\r\n            <div class=\"LabelDay\">SA</div>\r\n          </div>\r\n          <div class=\"dates\">\r\n            <div\r\n              *ngFor=\"let d of session.view.calendarDays\"\r\n              (click)=\"session.handlers.onClickDay(d, $event)\"\r\n              class=\"day Scroll\"\r\n              [class.selected]=\"\r\n                d.isCurrentMonth && d.day === session.view.selectedDay\r\n              \"\r\n              [class.outside]=\"!d.isCurrentMonth\"\r\n              [class.sunday]=\"d.date.weekday === 7\"\r\n              [class.monday]=\"d.date.weekday === 1\"\r\n              [class.tuesday]=\"d.date.weekday === 2\"\r\n              [class.wednesday]=\"d.date.weekday === 3\"\r\n              [class.thursday]=\"d.date.weekday === 4\"\r\n              [class.friday]=\"d.date.weekday === 5\"\r\n              [class.saturday]=\"d.date.weekday === 6\"\r\n            >\r\n              {{ d.day.toString().padStart(2, '0') }}\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"Actions\">\r\n        <div class=\"Cancel\" (click)=\"session.handlers.onCancel()\">\r\n          Cancelar\r\n        </div>\r\n        <div class=\"Clear\" (click)=\"session.handlers.onClear()\">Limpiar</div>\r\n        <div class=\"Ok\" (click)=\"session.handlers.onAccept()\">Aceptar</div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex;flex-direction:column;width:100%;height:max-content;-webkit-user-select:auto;user-select:auto}:host .LabelRow{display:flex;align-items:center;justify-content:space-between;gap:6px;width:100%;margin-bottom:2px}:host .Label{color:var(--text-label);flex:1;min-width:0;cursor:pointer;padding:0 3px;margin:0;font-weight:400;-webkit-user-select:none;user-select:none}:host .Label .Opcional{color:var(--text-muted)}:host .Description{-webkit-user-select:none;user-select:none;font-size:.9rem;color:var(--text-base);font-weight:400;width:100%;cursor:pointer;padding:0 3px;margin:0 0 4px;overflow:hidden;word-break:break-all}:host .Entry{display:flex;width:100%;height:32px;justify-content:flex-start;align-items:center;border:solid 0 var(--input-border);border-radius:12px;cursor:pointer;overflow:hidden;background-color:var(--input-bg)}:host .Entry:hover{border:none;outline:solid 1px var(--input-hover-border)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--input-focus-border)}:host .Entry[class~=Error]{outline:solid 1px var(--input-border-error)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--input-border);padding:0 8px;color:var(--input-text);caret-color:var(--primary);text-align:start}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--input-placeholder)}:host .Entry.NotHover:hover{border:none;outline:none}:host .Backdrop{position:fixed;top:0;left:0;z-index:800;display:flex;justify-content:center;align-items:center;width:100%;height:100%;padding:12px;background:var(--overlay-scrim);overflow:hidden}@media (width <= 768px){:host .Backdrop{align-items:flex-start}}:host .Backdrop .Picker{display:flex;flex-direction:column;gap:5px;width:100%;max-width:600px;max-height:100%;margin:0 auto;background:var(--surface);border-radius:16px;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--shadow-color)}:host{display:contents}.Backdrop{position:fixed;top:0;left:0;z-index:10050;display:flex;justify-content:center;align-items:center;width:100%;height:100%;padding:12px;background:var(--overlay-scrim);overflow:hidden}@media (width <= 768px){.Backdrop{align-items:flex-start}}.Backdrop .Picker{max-width:400px}.Backdrop .Picker .Preview{background-color:var(--surface-2);border-radius:var(--radius-lg);padding:var(--spacing-sm) var(--spacing-sm);text-align:center;color:var(--text-primary);margin-bottom:var(--spacing-sm);font-size:var(--size-sm);font-weight:500}.Backdrop .Picker .Preview:first-letter{text-transform:uppercase}.Backdrop .Picker .Cards{position:relative;width:100%;height:100%}.Backdrop .Picker .Cards .CardMonths .CardChangeYear,.Backdrop .Picker .Cards .CardMonths .CardChangeMonth,.Backdrop .Picker .Cards .CardDates .CardChangeYear,.Backdrop .Picker .Cards .CardDates .CardChangeMonth{width:100%;height:30px;display:flex;align-items:center;margin-bottom:10px}.Backdrop .Picker .Cards .CardMonths .CardChangeYear .LabelYear,.Backdrop .Picker .Cards .CardMonths .CardChangeYear .LabelMonth,.Backdrop .Picker .Cards .CardMonths .CardChangeMonth .LabelYear,.Backdrop .Picker .Cards .CardMonths .CardChangeMonth .LabelMonth,.Backdrop .Picker .Cards .CardDates .CardChangeYear .LabelYear,.Backdrop .Picker .Cards .CardDates .CardChangeYear .LabelMonth,.Backdrop .Picker .Cards .CardDates .CardChangeMonth .LabelYear,.Backdrop .Picker .Cards .CardDates .CardChangeMonth .LabelMonth{height:30px;padding:0 10px;display:flex;align-items:center;margin-right:auto;font-weight:600;cursor:pointer;border-radius:var(--radius-md)}.Backdrop .Picker .Cards .CardMonths .CardChangeYear .LabelYear:first-letter,.Backdrop .Picker .Cards .CardMonths .CardChangeYear .LabelMonth:first-letter,.Backdrop .Picker .Cards .CardMonths .CardChangeMonth .LabelYear:first-letter,.Backdrop .Picker .Cards .CardMonths .CardChangeMonth .LabelMonth:first-letter,.Backdrop .Picker .Cards .CardDates .CardChangeYear .LabelYear:first-letter,.Backdrop .Picker .Cards .CardDates .CardChangeYear .LabelMonth:first-letter,.Backdrop .Picker .Cards .CardDates .CardChangeMonth .LabelYear:first-letter,.Backdrop .Picker .Cards .CardDates .CardChangeMonth .LabelMonth:first-letter{text-transform:uppercase}.Backdrop .Picker .Cards .CardMonths .CardChangeYear .LabelYear:hover,.Backdrop .Picker .Cards .CardMonths .CardChangeYear .LabelMonth:hover,.Backdrop .Picker .Cards .CardMonths .CardChangeMonth .LabelYear:hover,.Backdrop .Picker .Cards .CardMonths .CardChangeMonth .LabelMonth:hover,.Backdrop .Picker .Cards .CardDates .CardChangeYear .LabelYear:hover,.Backdrop .Picker .Cards .CardDates .CardChangeYear .LabelMonth:hover,.Backdrop .Picker .Cards .CardDates .CardChangeMonth .LabelYear:hover,.Backdrop .Picker .Cards .CardDates .CardChangeMonth .LabelMonth:hover{background-color:var(--surface-2)}.Backdrop .Picker .Cards .CardMonths .CardChangeYear .Up,.Backdrop .Picker .Cards .CardMonths .CardChangeYear .Down,.Backdrop .Picker .Cards .CardMonths .CardChangeMonth .Up,.Backdrop .Picker .Cards .CardMonths .CardChangeMonth .Down,.Backdrop .Picker .Cards .CardDates .CardChangeYear .Up,.Backdrop .Picker .Cards .CardDates .CardChangeYear .Down,.Backdrop .Picker .Cards .CardDates .CardChangeMonth .Up,.Backdrop .Picker .Cards .CardDates .CardChangeMonth .Down{width:30px;height:30px;display:flex;justify-content:center;align-items:center;border-radius:var(--radius-md);cursor:pointer;font-size:.8rem}.Backdrop .Picker .Cards .CardMonths .CardChangeYear .Up lucide-icon .lucide-icon-svg,.Backdrop .Picker .Cards .CardMonths .CardChangeYear .Down lucide-icon .lucide-icon-svg,.Backdrop .Picker .Cards .CardMonths .CardChangeMonth .Up lucide-icon .lucide-icon-svg,.Backdrop .Picker .Cards .CardMonths .CardChangeMonth .Down lucide-icon .lucide-icon-svg,.Backdrop .Picker .Cards .CardDates .CardChangeYear .Up lucide-icon .lucide-icon-svg,.Backdrop .Picker .Cards .CardDates .CardChangeYear .Down lucide-icon .lucide-icon-svg,.Backdrop .Picker .Cards .CardDates .CardChangeMonth .Up lucide-icon .lucide-icon-svg,.Backdrop .Picker .Cards .CardDates .CardChangeMonth .Down lucide-icon .lucide-icon-svg{width:.8rem;height:.8rem}.Backdrop .Picker .Cards .CardMonths .CardChangeYear .Up:hover,.Backdrop .Picker .Cards .CardMonths .CardChangeYear .Down:hover,.Backdrop .Picker .Cards .CardMonths .CardChangeMonth .Up:hover,.Backdrop .Picker .Cards .CardMonths .CardChangeMonth .Down:hover,.Backdrop .Picker .Cards .CardDates .CardChangeYear .Up:hover,.Backdrop .Picker .Cards .CardDates .CardChangeYear .Down:hover,.Backdrop .Picker .Cards .CardDates .CardChangeMonth .Up:hover,.Backdrop .Picker .Cards .CardDates .CardChangeMonth .Down:hover{background-color:var(--surface-2)}.Backdrop .Picker .Cards .CardYears{position:absolute;top:0;left:0;z-index:10;width:100%;height:100%;background:var(--xu-on-fill)}.Backdrop .Picker .Cards .CardYears .years{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:35px;justify-items:center;align-items:center;width:100%;height:100%;overflow:hidden;overflow-y:auto}.Backdrop .Picker .Cards .CardYears .years .year{width:100%;height:100%;display:flex;justify-content:center;align-items:center;border-radius:var(--radius-md);text-transform:capitalize;padding:var(--spacing-xs) var(--spacing-md);border-radius:var(--radius-lg);cursor:pointer}.Backdrop .Picker .Cards .CardYears .years .year:hover{background-color:var(--surface-2)}.Backdrop .Picker .Cards .CardYears .years .selected{background-color:var(--primary);color:var(--xu-on-fill);font-weight:700}.Backdrop .Picker .Cards .CardYears .years .selected:hover{background-color:var(--primary)}.Backdrop .Picker .Cards .CardMonths{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--xu-on-fill);overflow:hidden;display:flex;flex-direction:column}.Backdrop .Picker .Cards .CardMonths .months{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;justify-items:center;align-items:center;width:100%;height:100%;overflow:hidden;overflow-y:auto}.Backdrop .Picker .Cards .CardMonths .months .month{width:100%;height:100%;display:flex;justify-content:center;align-items:center;gap:5px;padding:var(--spacing-xs) var(--spacing-md);border-radius:var(--radius-lg);cursor:pointer}.Backdrop .Picker .Cards .CardMonths .months .month:hover{background-color:var(--surface-2)}.Backdrop .Picker .Cards .CardMonths .months .selected{background-color:var(--primary);color:var(--text-muted);font-weight:700}.Backdrop .Picker .Cards .CardMonths .months .selected:hover{background-color:var(--primary)}.Backdrop .Picker .Cards .CardDates .Labels{display:grid;grid-template-columns:repeat(7,1fr);grid-auto-rows:30px;justify-items:center;align-items:center;width:100%}.Backdrop .Picker .Cards .CardDates .Labels .LabelDay{font-size:.8rem;font-weight:700}.Backdrop .Picker .Cards .CardDates .dates{display:grid;grid-template-columns:repeat(7,1fr);grid-auto-rows:30px;justify-items:center;align-items:center;width:100%;overflow:hidden;overflow-y:auto}.Backdrop .Picker .Cards .CardDates .dates .day{width:100%;height:100%;display:flex;justify-content:center;align-items:center;border-radius:var(--radius-lg);cursor:pointer}.Backdrop .Picker .Cards .CardDates .dates .day:hover{background-color:var(--surface-2)}.Backdrop .Picker .Cards .CardDates .dates .sunday{color:var(--error-text)}.Backdrop .Picker .Cards .CardDates .dates .outside{cursor:auto;color:var(--text-muted);pointer-events:none;cursor:not-allowed}.Backdrop .Picker .Cards .CardDates .dates .selected{background-color:var(--primary);color:var(--xu-on-fill);font-weight:700}.Backdrop .Picker .Cards .CardDates .dates .selected:hover{background-color:var(--primary)}.Backdrop .Picker .Actions{display:flex;justify-content:flex-end;gap:var(--spacing-xs);margin-top:var(--spacing-md)}.Backdrop .Picker .Actions .Ok{padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-lg);color:var(--btn-primary-text);border-color:var(--btn-primary-border);background-color:var(--btn-primary-bg);cursor:pointer}.Backdrop .Picker .Actions .Ok:hover{color:var(--btn-primary-text-hover);border-color:var(--btn-primary-border-hover);background-color:var(--btn-primary-bg-hover)}.Backdrop .Picker .Actions .Ok:active{color:var(--btn-primary-text-active);border-color:var(--btn-primary-border-active);background-color:var(--btn-primary-bg-active)}.Backdrop .Picker .Actions .Ok:disabled{opacity:.6;cursor:not-allowed}.Backdrop .Picker .Actions .Clear{padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-lg);color:var(--btn-secondary-text);border-color:var(--btn-secondary-border);background-color:var(--btn-secondary-bg);cursor:pointer}.Backdrop .Picker .Actions .Clear:hover{color:var(--btn-secondary-text-hover);border-color:var(--btn-secondary-border-hover);background-color:var(--btn-secondary-bg-hover)}.Backdrop .Picker .Actions .Clear:active{color:var(--btn-secondary-text-active);border-color:var(--btn-secondary-border-active);background-color:var(--btn-secondary-bg-active)}.Backdrop .Picker .Actions .Clear:disabled{opacity:.6;cursor:not-allowed}.Backdrop .Picker .Actions .Cancel{padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-lg);color:var(--btn-cancel-text);border-color:var(--btn-cancel-border);background-color:var(--btn-cancel-bg);cursor:pointer}.Backdrop .Picker .Actions .Cancel:hover{color:var(--btn-cancel-text-hover);border-color:var(--btn-cancel-border-hover);background-color:var(--btn-cancel-bg-hover)}.Backdrop .Picker .Actions .Cancel:active{color:var(--btn-cancel-text-active);border-color:var(--btn-cancel-border-active);background-color:var(--btn-cancel-bg-active)}.Backdrop .Picker .Actions .Cancel:disabled{opacity:.6;cursor:not-allowed}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "component", type: LucideIconComponent, selector: "lucide-icon", inputs: ["name", "size", "spin", "filled"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DatePickerModalServiceComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'date-picker-modal-service', standalone: true, imports: [CommonModule, LucideIconComponent], template: "<ng-container *ngIf=\"vm$ | async as session\">\r\n  <div\r\n    class=\"Backdrop InputModalBackdrop date-picker-modal\"\r\n    (click)=\"session.handlers.toggleShowPicker($event)\"\r\n  >\r\n    <div class=\"Picker\" (click)=\"$event.stopPropagation()\">\r\n      <div class=\"Preview\" *ngIf=\"session.view.selectedValue\">\r\n        <span>{{ session.view.selectedValueExtended }}</span>\r\n      </div>\r\n\r\n      <div class=\"Cards\">\r\n        <div class=\"CardYears\" *ngIf=\"session.view.showYears\">\r\n          <div class=\"years Scroll\">\r\n            <div\r\n              *ngFor=\"let y of session.view.years\"\r\n              (click)=\"session.handlers.onSelectYear(y, $event)\"\r\n              class=\"year\"\r\n              [class.selected]=\"y === session.view.selectedYear\"\r\n            >\r\n              {{ y }}\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"CardMonths\" *ngIf=\"session.view.showMonths\">\r\n          <div class=\"CardChangeYear\">\r\n            <p\r\n              class=\"LabelYear\"\r\n              (click)=\"session.handlers.openYears($event)\"\r\n            >\r\n              {{ session.view.selectedYear || 'A\u00F1o' }}\r\n            </p>\r\n            <lucide-icon class=\"Up\" name=\"chevron-up\" (click)=\"session.handlers.onDecrementYear($event)\"></lucide-icon>\r\n            <lucide-icon class=\"Down\" name=\"chevron-down\" (click)=\"session.handlers.onIncrementYear($event)\"></lucide-icon>\r\n          </div>\r\n\r\n          <div class=\"months Scroll\">\r\n            <div\r\n              *ngFor=\"let m of session.view.months\"\r\n              class=\"month\"\r\n              [class.selected]=\"m === session.view.selectedMonth\"\r\n              (click)=\"session.handlers.onSelectMonth(m, $event)\"\r\n            >\r\n              <span class=\"NameMonth\">{{\r\n                session.view.MONTH_NAMES[m - 1]\r\n              }}</span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"CardDates\">\r\n          <div class=\"CardChangeMonth\">\r\n            <p\r\n              class=\"LabelMonth\"\r\n              (click)=\"session.handlers.openMonths($event)\"\r\n            >\r\n              {{ session.view.formattedMonthAndYear || 'Mes' }}\r\n            </p>\r\n            <lucide-icon class=\"Up\" name=\"chevron-up\" (click)=\"session.handlers.onDecrementMonth($event)\"></lucide-icon>\r\n            <lucide-icon class=\"Down\" name=\"chevron-down\" (click)=\"session.handlers.onIncrementMonth($event)\"></lucide-icon>\r\n          </div>\r\n\r\n          <div class=\"Labels\">\r\n            <div class=\"LabelDay\">DO</div>\r\n            <div class=\"LabelDay\">LU</div>\r\n            <div class=\"LabelDay\">MA</div>\r\n            <div class=\"LabelDay\">MI</div>\r\n            <div class=\"LabelDay\">JU</div>\r\n            <div class=\"LabelDay\">VI</div>\r\n            <div class=\"LabelDay\">SA</div>\r\n          </div>\r\n          <div class=\"dates\">\r\n            <div\r\n              *ngFor=\"let d of session.view.calendarDays\"\r\n              (click)=\"session.handlers.onClickDay(d, $event)\"\r\n              class=\"day Scroll\"\r\n              [class.selected]=\"\r\n                d.isCurrentMonth && d.day === session.view.selectedDay\r\n              \"\r\n              [class.outside]=\"!d.isCurrentMonth\"\r\n              [class.sunday]=\"d.date.weekday === 7\"\r\n              [class.monday]=\"d.date.weekday === 1\"\r\n              [class.tuesday]=\"d.date.weekday === 2\"\r\n              [class.wednesday]=\"d.date.weekday === 3\"\r\n              [class.thursday]=\"d.date.weekday === 4\"\r\n              [class.friday]=\"d.date.weekday === 5\"\r\n              [class.saturday]=\"d.date.weekday === 6\"\r\n            >\r\n              {{ d.day.toString().padStart(2, '0') }}\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"Actions\">\r\n        <div class=\"Cancel\" (click)=\"session.handlers.onCancel()\">\r\n          Cancelar\r\n        </div>\r\n        <div class=\"Clear\" (click)=\"session.handlers.onClear()\">Limpiar</div>\r\n        <div class=\"Ok\" (click)=\"session.handlers.onAccept()\">Aceptar</div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex;flex-direction:column;width:100%;height:max-content;-webkit-user-select:auto;user-select:auto}:host .LabelRow{display:flex;align-items:center;justify-content:space-between;gap:6px;width:100%;margin-bottom:2px}:host .Label{color:var(--text-label);flex:1;min-width:0;cursor:pointer;padding:0 3px;margin:0;font-weight:400;-webkit-user-select:none;user-select:none}:host .Label .Opcional{color:var(--text-muted)}:host .Description{-webkit-user-select:none;user-select:none;font-size:.9rem;color:var(--text-base);font-weight:400;width:100%;cursor:pointer;padding:0 3px;margin:0 0 4px;overflow:hidden;word-break:break-all}:host .Entry{display:flex;width:100%;height:32px;justify-content:flex-start;align-items:center;border:solid 0 var(--input-border);border-radius:12px;cursor:pointer;overflow:hidden;background-color:var(--input-bg)}:host .Entry:hover{border:none;outline:solid 1px var(--input-hover-border)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--input-focus-border)}:host .Entry[class~=Error]{outline:solid 1px var(--input-border-error)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--input-border);padding:0 8px;color:var(--input-text);caret-color:var(--primary);text-align:start}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--input-placeholder)}:host .Entry.NotHover:hover{border:none;outline:none}:host .Backdrop{position:fixed;top:0;left:0;z-index:800;display:flex;justify-content:center;align-items:center;width:100%;height:100%;padding:12px;background:var(--overlay-scrim);overflow:hidden}@media (width <= 768px){:host .Backdrop{align-items:flex-start}}:host .Backdrop .Picker{display:flex;flex-direction:column;gap:5px;width:100%;max-width:600px;max-height:100%;margin:0 auto;background:var(--surface);border-radius:16px;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--shadow-color)}:host{display:contents}.Backdrop{position:fixed;top:0;left:0;z-index:10050;display:flex;justify-content:center;align-items:center;width:100%;height:100%;padding:12px;background:var(--overlay-scrim);overflow:hidden}@media (width <= 768px){.Backdrop{align-items:flex-start}}.Backdrop .Picker{max-width:400px}.Backdrop .Picker .Preview{background-color:var(--surface-2);border-radius:var(--radius-lg);padding:var(--spacing-sm) var(--spacing-sm);text-align:center;color:var(--text-primary);margin-bottom:var(--spacing-sm);font-size:var(--size-sm);font-weight:500}.Backdrop .Picker .Preview:first-letter{text-transform:uppercase}.Backdrop .Picker .Cards{position:relative;width:100%;height:100%}.Backdrop .Picker .Cards .CardMonths .CardChangeYear,.Backdrop .Picker .Cards .CardMonths .CardChangeMonth,.Backdrop .Picker .Cards .CardDates .CardChangeYear,.Backdrop .Picker .Cards .CardDates .CardChangeMonth{width:100%;height:30px;display:flex;align-items:center;margin-bottom:10px}.Backdrop .Picker .Cards .CardMonths .CardChangeYear .LabelYear,.Backdrop .Picker .Cards .CardMonths .CardChangeYear .LabelMonth,.Backdrop .Picker .Cards .CardMonths .CardChangeMonth .LabelYear,.Backdrop .Picker .Cards .CardMonths .CardChangeMonth .LabelMonth,.Backdrop .Picker .Cards .CardDates .CardChangeYear .LabelYear,.Backdrop .Picker .Cards .CardDates .CardChangeYear .LabelMonth,.Backdrop .Picker .Cards .CardDates .CardChangeMonth .LabelYear,.Backdrop .Picker .Cards .CardDates .CardChangeMonth .LabelMonth{height:30px;padding:0 10px;display:flex;align-items:center;margin-right:auto;font-weight:600;cursor:pointer;border-radius:var(--radius-md)}.Backdrop .Picker .Cards .CardMonths .CardChangeYear .LabelYear:first-letter,.Backdrop .Picker .Cards .CardMonths .CardChangeYear .LabelMonth:first-letter,.Backdrop .Picker .Cards .CardMonths .CardChangeMonth .LabelYear:first-letter,.Backdrop .Picker .Cards .CardMonths .CardChangeMonth .LabelMonth:first-letter,.Backdrop .Picker .Cards .CardDates .CardChangeYear .LabelYear:first-letter,.Backdrop .Picker .Cards .CardDates .CardChangeYear .LabelMonth:first-letter,.Backdrop .Picker .Cards .CardDates .CardChangeMonth .LabelYear:first-letter,.Backdrop .Picker .Cards .CardDates .CardChangeMonth .LabelMonth:first-letter{text-transform:uppercase}.Backdrop .Picker .Cards .CardMonths .CardChangeYear .LabelYear:hover,.Backdrop .Picker .Cards .CardMonths .CardChangeYear .LabelMonth:hover,.Backdrop .Picker .Cards .CardMonths .CardChangeMonth .LabelYear:hover,.Backdrop .Picker .Cards .CardMonths .CardChangeMonth .LabelMonth:hover,.Backdrop .Picker .Cards .CardDates .CardChangeYear .LabelYear:hover,.Backdrop .Picker .Cards .CardDates .CardChangeYear .LabelMonth:hover,.Backdrop .Picker .Cards .CardDates .CardChangeMonth .LabelYear:hover,.Backdrop .Picker .Cards .CardDates .CardChangeMonth .LabelMonth:hover{background-color:var(--surface-2)}.Backdrop .Picker .Cards .CardMonths .CardChangeYear .Up,.Backdrop .Picker .Cards .CardMonths .CardChangeYear .Down,.Backdrop .Picker .Cards .CardMonths .CardChangeMonth .Up,.Backdrop .Picker .Cards .CardMonths .CardChangeMonth .Down,.Backdrop .Picker .Cards .CardDates .CardChangeYear .Up,.Backdrop .Picker .Cards .CardDates .CardChangeYear .Down,.Backdrop .Picker .Cards .CardDates .CardChangeMonth .Up,.Backdrop .Picker .Cards .CardDates .CardChangeMonth .Down{width:30px;height:30px;display:flex;justify-content:center;align-items:center;border-radius:var(--radius-md);cursor:pointer;font-size:.8rem}.Backdrop .Picker .Cards .CardMonths .CardChangeYear .Up lucide-icon .lucide-icon-svg,.Backdrop .Picker .Cards .CardMonths .CardChangeYear .Down lucide-icon .lucide-icon-svg,.Backdrop .Picker .Cards .CardMonths .CardChangeMonth .Up lucide-icon .lucide-icon-svg,.Backdrop .Picker .Cards .CardMonths .CardChangeMonth .Down lucide-icon .lucide-icon-svg,.Backdrop .Picker .Cards .CardDates .CardChangeYear .Up lucide-icon .lucide-icon-svg,.Backdrop .Picker .Cards .CardDates .CardChangeYear .Down lucide-icon .lucide-icon-svg,.Backdrop .Picker .Cards .CardDates .CardChangeMonth .Up lucide-icon .lucide-icon-svg,.Backdrop .Picker .Cards .CardDates .CardChangeMonth .Down lucide-icon .lucide-icon-svg{width:.8rem;height:.8rem}.Backdrop .Picker .Cards .CardMonths .CardChangeYear .Up:hover,.Backdrop .Picker .Cards .CardMonths .CardChangeYear .Down:hover,.Backdrop .Picker .Cards .CardMonths .CardChangeMonth .Up:hover,.Backdrop .Picker .Cards .CardMonths .CardChangeMonth .Down:hover,.Backdrop .Picker .Cards .CardDates .CardChangeYear .Up:hover,.Backdrop .Picker .Cards .CardDates .CardChangeYear .Down:hover,.Backdrop .Picker .Cards .CardDates .CardChangeMonth .Up:hover,.Backdrop .Picker .Cards .CardDates .CardChangeMonth .Down:hover{background-color:var(--surface-2)}.Backdrop .Picker .Cards .CardYears{position:absolute;top:0;left:0;z-index:10;width:100%;height:100%;background:var(--xu-on-fill)}.Backdrop .Picker .Cards .CardYears .years{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:35px;justify-items:center;align-items:center;width:100%;height:100%;overflow:hidden;overflow-y:auto}.Backdrop .Picker .Cards .CardYears .years .year{width:100%;height:100%;display:flex;justify-content:center;align-items:center;border-radius:var(--radius-md);text-transform:capitalize;padding:var(--spacing-xs) var(--spacing-md);border-radius:var(--radius-lg);cursor:pointer}.Backdrop .Picker .Cards .CardYears .years .year:hover{background-color:var(--surface-2)}.Backdrop .Picker .Cards .CardYears .years .selected{background-color:var(--primary);color:var(--xu-on-fill);font-weight:700}.Backdrop .Picker .Cards .CardYears .years .selected:hover{background-color:var(--primary)}.Backdrop .Picker .Cards .CardMonths{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--xu-on-fill);overflow:hidden;display:flex;flex-direction:column}.Backdrop .Picker .Cards .CardMonths .months{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;justify-items:center;align-items:center;width:100%;height:100%;overflow:hidden;overflow-y:auto}.Backdrop .Picker .Cards .CardMonths .months .month{width:100%;height:100%;display:flex;justify-content:center;align-items:center;gap:5px;padding:var(--spacing-xs) var(--spacing-md);border-radius:var(--radius-lg);cursor:pointer}.Backdrop .Picker .Cards .CardMonths .months .month:hover{background-color:var(--surface-2)}.Backdrop .Picker .Cards .CardMonths .months .selected{background-color:var(--primary);color:var(--text-muted);font-weight:700}.Backdrop .Picker .Cards .CardMonths .months .selected:hover{background-color:var(--primary)}.Backdrop .Picker .Cards .CardDates .Labels{display:grid;grid-template-columns:repeat(7,1fr);grid-auto-rows:30px;justify-items:center;align-items:center;width:100%}.Backdrop .Picker .Cards .CardDates .Labels .LabelDay{font-size:.8rem;font-weight:700}.Backdrop .Picker .Cards .CardDates .dates{display:grid;grid-template-columns:repeat(7,1fr);grid-auto-rows:30px;justify-items:center;align-items:center;width:100%;overflow:hidden;overflow-y:auto}.Backdrop .Picker .Cards .CardDates .dates .day{width:100%;height:100%;display:flex;justify-content:center;align-items:center;border-radius:var(--radius-lg);cursor:pointer}.Backdrop .Picker .Cards .CardDates .dates .day:hover{background-color:var(--surface-2)}.Backdrop .Picker .Cards .CardDates .dates .sunday{color:var(--error-text)}.Backdrop .Picker .Cards .CardDates .dates .outside{cursor:auto;color:var(--text-muted);pointer-events:none;cursor:not-allowed}.Backdrop .Picker .Cards .CardDates .dates .selected{background-color:var(--primary);color:var(--xu-on-fill);font-weight:700}.Backdrop .Picker .Cards .CardDates .dates .selected:hover{background-color:var(--primary)}.Backdrop .Picker .Actions{display:flex;justify-content:flex-end;gap:var(--spacing-xs);margin-top:var(--spacing-md)}.Backdrop .Picker .Actions .Ok{padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-lg);color:var(--btn-primary-text);border-color:var(--btn-primary-border);background-color:var(--btn-primary-bg);cursor:pointer}.Backdrop .Picker .Actions .Ok:hover{color:var(--btn-primary-text-hover);border-color:var(--btn-primary-border-hover);background-color:var(--btn-primary-bg-hover)}.Backdrop .Picker .Actions .Ok:active{color:var(--btn-primary-text-active);border-color:var(--btn-primary-border-active);background-color:var(--btn-primary-bg-active)}.Backdrop .Picker .Actions .Ok:disabled{opacity:.6;cursor:not-allowed}.Backdrop .Picker .Actions .Clear{padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-lg);color:var(--btn-secondary-text);border-color:var(--btn-secondary-border);background-color:var(--btn-secondary-bg);cursor:pointer}.Backdrop .Picker .Actions .Clear:hover{color:var(--btn-secondary-text-hover);border-color:var(--btn-secondary-border-hover);background-color:var(--btn-secondary-bg-hover)}.Backdrop .Picker .Actions .Clear:active{color:var(--btn-secondary-text-active);border-color:var(--btn-secondary-border-active);background-color:var(--btn-secondary-bg-active)}.Backdrop .Picker .Actions .Clear:disabled{opacity:.6;cursor:not-allowed}.Backdrop .Picker .Actions .Cancel{padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-lg);color:var(--btn-cancel-text);border-color:var(--btn-cancel-border);background-color:var(--btn-cancel-bg);cursor:pointer}.Backdrop .Picker .Actions .Cancel:hover{color:var(--btn-cancel-text-hover);border-color:var(--btn-cancel-border-hover);background-color:var(--btn-cancel-bg-hover)}.Backdrop .Picker .Actions .Cancel:active{color:var(--btn-cancel-text-active);border-color:var(--btn-cancel-border-active);background-color:var(--btn-cancel-bg-active)}.Backdrop .Picker .Actions .Cancel:disabled{opacity:.6;cursor:not-allowed}\n"] }]
+        }], ctorParameters: () => [{ type: DatePickerModalService }, { type: i0.ChangeDetectorRef }] });
+
+class TimePickerModalServiceComponent {
+    timePickerModal;
+    cdr;
+    vm$;
+    sub;
+    constructor(timePickerModal, cdr) {
+        this.timePickerModal = timePickerModal;
+        this.cdr = cdr;
+        this.vm$ = this.timePickerModal.state$;
+    }
+    ngOnInit() {
+        this.sub = this.timePickerModal.state$.subscribe(() => this.cdr.markForCheck());
+    }
+    ngOnDestroy() {
+        this.sub?.unsubscribe();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: TimePickerModalServiceComponent, deps: [{ token: TimePickerModalService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: TimePickerModalServiceComponent, isStandalone: true, selector: "time-picker-modal-service", ngImport: i0, template: "<ng-container *ngIf=\"vm$ | async as session\">\r\n  <div\r\n    class=\"Backdrop InputModalBackdrop time-picker-modal\"\r\n    (click)=\"session.handlers.toggleShowPicker($event)\"\r\n  >\r\n    <div class=\"Picker\" (click)=\"$event.stopPropagation()\">\r\n      <div class=\"Preview\">\r\n        <span>{{\r\n          session.view.selectedDateExtended || 'Selecciona una hora y minuto'\r\n        }}</span>\r\n      </div>\r\n      <div class=\"TimePicker\">\r\n        <div class=\"Hours Scroll\">\r\n          <div\r\n            *ngFor=\"let h of session.view.HOURS\"\r\n            (click)=\"session.handlers.onSelectHour(h, $event)\"\r\n            class=\"hour\"\r\n            [class.selected]=\"h === session.view.selectedHour\"\r\n          >\r\n            {{ h.toString().padStart(2, '0') }}\r\n          </div>\r\n        </div>\r\n        <span class=\"Separate\">:</span>\r\n        <div class=\"Minutes Scroll\">\r\n          <div\r\n            *ngFor=\"let m of session.view.MINUTES\"\r\n            (click)=\"session.handlers.onSelectMinute(m, $event)\"\r\n            [class.selected]=\"m === session.view.selectedMinute\"\r\n          >\r\n            {{ m.toString().padStart(2, '0') }}\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"Actions\">\r\n        <div class=\"Cancel\" (click)=\"session.handlers.onCancel()\">\r\n          Cancelar\r\n        </div>\r\n        <div class=\"Clear\" (click)=\"session.handlers.onClear()\">Limpiar</div>\r\n        <div class=\"Ok\" (click)=\"session.handlers.onAccept()\">Aceptar</div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex;flex-direction:column;width:100%;height:max-content;-webkit-user-select:auto;user-select:auto}:host .LabelRow{display:flex;align-items:center;justify-content:space-between;gap:6px;width:100%;margin-bottom:2px}:host .Label{color:var(--text-label);flex:1;min-width:0;cursor:pointer;padding:0 3px;margin:0;font-weight:400;-webkit-user-select:none;user-select:none}:host .Label .Opcional{color:var(--text-muted)}:host .Description{-webkit-user-select:none;user-select:none;font-size:.9rem;color:var(--text-base);font-weight:400;width:100%;cursor:pointer;padding:0 3px;margin:0 0 4px;overflow:hidden;word-break:break-all}:host .Entry{display:flex;width:100%;height:32px;justify-content:flex-start;align-items:center;border:solid 0 var(--input-border);border-radius:12px;cursor:pointer;overflow:hidden;background-color:var(--input-bg)}:host .Entry:hover{border:none;outline:solid 1px var(--input-hover-border)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--input-focus-border)}:host .Entry[class~=Error]{outline:solid 1px var(--input-border-error)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--input-border);padding:0 8px;color:var(--input-text);caret-color:var(--primary);text-align:start}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--input-placeholder)}:host .Entry.NotHover:hover{border:none;outline:none}:host .Backdrop{position:fixed;top:0;left:0;z-index:800;display:flex;justify-content:center;align-items:center;width:100%;height:100%;padding:12px;background:var(--overlay-scrim);overflow:hidden}@media (width <= 768px){:host .Backdrop{align-items:flex-start}}:host .Backdrop .Picker{display:flex;flex-direction:column;gap:5px;width:100%;max-width:600px;max-height:100%;margin:0 auto;background:var(--surface);border-radius:16px;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--shadow-color)}:host{display:contents}.Backdrop{position:fixed;top:0;left:0;z-index:10050;display:flex;justify-content:center;align-items:center;width:100%;height:100%;padding:12px;background:var(--overlay-scrim);overflow:hidden}@media (width <= 768px){.Backdrop{align-items:flex-start}}.Backdrop .Picker{max-width:400px}.Backdrop .Picker .Preview{background-color:var(--surface-2);border-radius:var(--radius-lg);padding:var(--spacing-sm) var(--spacing-sm);text-align:center;color:var(--text-primary);margin-bottom:var(--spacing-sm);font-size:var(--size-sm);font-weight:500}.Backdrop .Picker .Preview:first-letter{text-transform:uppercase}.Backdrop .Picker .TimePicker{display:grid;grid-template-columns:1fr 10px 1fr;grid-auto-rows:100px;gap:5px;align-items:center;justify-items:center;-webkit-user-select:none;user-select:none;padding-top:var(--spacing-sm)}.Backdrop .Picker .TimePicker .Separate{font-weight:900;font-size:2rem;color:var(--text-muted)}.Backdrop .Picker .TimePicker .Hours,.Backdrop .Picker .TimePicker .Minutes{width:100%;height:100%;overflow:hidden;overflow-y:auto;background-color:var(--surface-2);border-radius:var(--radius-lg);display:grid;grid-template-columns:repeat(1,1fr);grid-auto-rows:30px;scrollbar-width:none;-ms-overflow-style:none}.Backdrop .Picker .TimePicker .Hours::-webkit-scrollbar,.Backdrop .Picker .TimePicker .Minutes::-webkit-scrollbar{display:none}.Backdrop .Picker .TimePicker .Hours div,.Backdrop .Picker .TimePicker .Minutes div{border-radius:var(--radius-lg);padding:var(--spacing-md);display:flex;justify-content:center;align-items:center;cursor:pointer}.Backdrop .Picker .TimePicker .Hours div:hover,.Backdrop .Picker .TimePicker .Minutes div:hover{background-color:var(--surface-3)}.Backdrop .Picker .TimePicker .Hours .selected,.Backdrop .Picker .TimePicker .Minutes .selected{background-color:var(--primary);color:var(--text-muted);font-weight:700}.Backdrop .Picker .TimePicker .Hours .selected:hover,.Backdrop .Picker .TimePicker .Minutes .selected:hover{background-color:var(--primary)}.Backdrop .Picker .Actions{display:flex;justify-content:flex-end;gap:var(--spacing-xs);margin-top:var(--spacing-md)}.Backdrop .Picker .Actions .Ok{padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-lg);color:var(--btn-primary-text);border-color:var(--btn-primary-border);background-color:var(--btn-primary-bg);cursor:pointer}.Backdrop .Picker .Actions .Ok:hover{color:var(--btn-primary-text-hover);border-color:var(--btn-primary-border-hover);background-color:var(--btn-primary-bg-hover)}.Backdrop .Picker .Actions .Ok:active{color:var(--btn-primary-text-active);border-color:var(--btn-primary-border-active);background-color:var(--btn-primary-bg-active)}.Backdrop .Picker .Actions .Ok:disabled{opacity:.6;cursor:not-allowed}.Backdrop .Picker .Actions .Clear{padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-lg);color:var(--btn-secondary-text);border-color:var(--btn-secondary-border);background-color:var(--btn-secondary-bg);cursor:pointer}.Backdrop .Picker .Actions .Clear:hover{color:var(--btn-secondary-text-hover);border-color:var(--btn-secondary-border-hover);background-color:var(--btn-secondary-bg-hover)}.Backdrop .Picker .Actions .Clear:active{color:var(--btn-secondary-text-active);border-color:var(--btn-secondary-border-active);background-color:var(--btn-secondary-bg-active)}.Backdrop .Picker .Actions .Clear:disabled{opacity:.6;cursor:not-allowed}.Backdrop .Picker .Actions .Cancel{padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-lg);color:var(--btn-cancel-text);border-color:var(--btn-cancel-border);background-color:var(--btn-cancel-bg);cursor:pointer}.Backdrop .Picker .Actions .Cancel:hover{color:var(--btn-cancel-text-hover);border-color:var(--btn-cancel-border-hover);background-color:var(--btn-cancel-bg-hover)}.Backdrop .Picker .Actions .Cancel:active{color:var(--btn-cancel-text-active);border-color:var(--btn-cancel-border-active);background-color:var(--btn-cancel-bg-active)}.Backdrop .Picker .Actions .Cancel:disabled{opacity:.6;cursor:not-allowed}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: TimePickerModalServiceComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'time-picker-modal-service', standalone: true, imports: [CommonModule], template: "<ng-container *ngIf=\"vm$ | async as session\">\r\n  <div\r\n    class=\"Backdrop InputModalBackdrop time-picker-modal\"\r\n    (click)=\"session.handlers.toggleShowPicker($event)\"\r\n  >\r\n    <div class=\"Picker\" (click)=\"$event.stopPropagation()\">\r\n      <div class=\"Preview\">\r\n        <span>{{\r\n          session.view.selectedDateExtended || 'Selecciona una hora y minuto'\r\n        }}</span>\r\n      </div>\r\n      <div class=\"TimePicker\">\r\n        <div class=\"Hours Scroll\">\r\n          <div\r\n            *ngFor=\"let h of session.view.HOURS\"\r\n            (click)=\"session.handlers.onSelectHour(h, $event)\"\r\n            class=\"hour\"\r\n            [class.selected]=\"h === session.view.selectedHour\"\r\n          >\r\n            {{ h.toString().padStart(2, '0') }}\r\n          </div>\r\n        </div>\r\n        <span class=\"Separate\">:</span>\r\n        <div class=\"Minutes Scroll\">\r\n          <div\r\n            *ngFor=\"let m of session.view.MINUTES\"\r\n            (click)=\"session.handlers.onSelectMinute(m, $event)\"\r\n            [class.selected]=\"m === session.view.selectedMinute\"\r\n          >\r\n            {{ m.toString().padStart(2, '0') }}\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"Actions\">\r\n        <div class=\"Cancel\" (click)=\"session.handlers.onCancel()\">\r\n          Cancelar\r\n        </div>\r\n        <div class=\"Clear\" (click)=\"session.handlers.onClear()\">Limpiar</div>\r\n        <div class=\"Ok\" (click)=\"session.handlers.onAccept()\">Aceptar</div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex;flex-direction:column;width:100%;height:max-content;-webkit-user-select:auto;user-select:auto}:host .LabelRow{display:flex;align-items:center;justify-content:space-between;gap:6px;width:100%;margin-bottom:2px}:host .Label{color:var(--text-label);flex:1;min-width:0;cursor:pointer;padding:0 3px;margin:0;font-weight:400;-webkit-user-select:none;user-select:none}:host .Label .Opcional{color:var(--text-muted)}:host .Description{-webkit-user-select:none;user-select:none;font-size:.9rem;color:var(--text-base);font-weight:400;width:100%;cursor:pointer;padding:0 3px;margin:0 0 4px;overflow:hidden;word-break:break-all}:host .Entry{display:flex;width:100%;height:32px;justify-content:flex-start;align-items:center;border:solid 0 var(--input-border);border-radius:12px;cursor:pointer;overflow:hidden;background-color:var(--input-bg)}:host .Entry:hover{border:none;outline:solid 1px var(--input-hover-border)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--input-focus-border)}:host .Entry[class~=Error]{outline:solid 1px var(--input-border-error)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--input-border);padding:0 8px;color:var(--input-text);caret-color:var(--primary);text-align:start}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--input-placeholder)}:host .Entry.NotHover:hover{border:none;outline:none}:host .Backdrop{position:fixed;top:0;left:0;z-index:800;display:flex;justify-content:center;align-items:center;width:100%;height:100%;padding:12px;background:var(--overlay-scrim);overflow:hidden}@media (width <= 768px){:host .Backdrop{align-items:flex-start}}:host .Backdrop .Picker{display:flex;flex-direction:column;gap:5px;width:100%;max-width:600px;max-height:100%;margin:0 auto;background:var(--surface);border-radius:16px;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--shadow-color)}:host{display:contents}.Backdrop{position:fixed;top:0;left:0;z-index:10050;display:flex;justify-content:center;align-items:center;width:100%;height:100%;padding:12px;background:var(--overlay-scrim);overflow:hidden}@media (width <= 768px){.Backdrop{align-items:flex-start}}.Backdrop .Picker{max-width:400px}.Backdrop .Picker .Preview{background-color:var(--surface-2);border-radius:var(--radius-lg);padding:var(--spacing-sm) var(--spacing-sm);text-align:center;color:var(--text-primary);margin-bottom:var(--spacing-sm);font-size:var(--size-sm);font-weight:500}.Backdrop .Picker .Preview:first-letter{text-transform:uppercase}.Backdrop .Picker .TimePicker{display:grid;grid-template-columns:1fr 10px 1fr;grid-auto-rows:100px;gap:5px;align-items:center;justify-items:center;-webkit-user-select:none;user-select:none;padding-top:var(--spacing-sm)}.Backdrop .Picker .TimePicker .Separate{font-weight:900;font-size:2rem;color:var(--text-muted)}.Backdrop .Picker .TimePicker .Hours,.Backdrop .Picker .TimePicker .Minutes{width:100%;height:100%;overflow:hidden;overflow-y:auto;background-color:var(--surface-2);border-radius:var(--radius-lg);display:grid;grid-template-columns:repeat(1,1fr);grid-auto-rows:30px;scrollbar-width:none;-ms-overflow-style:none}.Backdrop .Picker .TimePicker .Hours::-webkit-scrollbar,.Backdrop .Picker .TimePicker .Minutes::-webkit-scrollbar{display:none}.Backdrop .Picker .TimePicker .Hours div,.Backdrop .Picker .TimePicker .Minutes div{border-radius:var(--radius-lg);padding:var(--spacing-md);display:flex;justify-content:center;align-items:center;cursor:pointer}.Backdrop .Picker .TimePicker .Hours div:hover,.Backdrop .Picker .TimePicker .Minutes div:hover{background-color:var(--surface-3)}.Backdrop .Picker .TimePicker .Hours .selected,.Backdrop .Picker .TimePicker .Minutes .selected{background-color:var(--primary);color:var(--text-muted);font-weight:700}.Backdrop .Picker .TimePicker .Hours .selected:hover,.Backdrop .Picker .TimePicker .Minutes .selected:hover{background-color:var(--primary)}.Backdrop .Picker .Actions{display:flex;justify-content:flex-end;gap:var(--spacing-xs);margin-top:var(--spacing-md)}.Backdrop .Picker .Actions .Ok{padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-lg);color:var(--btn-primary-text);border-color:var(--btn-primary-border);background-color:var(--btn-primary-bg);cursor:pointer}.Backdrop .Picker .Actions .Ok:hover{color:var(--btn-primary-text-hover);border-color:var(--btn-primary-border-hover);background-color:var(--btn-primary-bg-hover)}.Backdrop .Picker .Actions .Ok:active{color:var(--btn-primary-text-active);border-color:var(--btn-primary-border-active);background-color:var(--btn-primary-bg-active)}.Backdrop .Picker .Actions .Ok:disabled{opacity:.6;cursor:not-allowed}.Backdrop .Picker .Actions .Clear{padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-lg);color:var(--btn-secondary-text);border-color:var(--btn-secondary-border);background-color:var(--btn-secondary-bg);cursor:pointer}.Backdrop .Picker .Actions .Clear:hover{color:var(--btn-secondary-text-hover);border-color:var(--btn-secondary-border-hover);background-color:var(--btn-secondary-bg-hover)}.Backdrop .Picker .Actions .Clear:active{color:var(--btn-secondary-text-active);border-color:var(--btn-secondary-border-active);background-color:var(--btn-secondary-bg-active)}.Backdrop .Picker .Actions .Clear:disabled{opacity:.6;cursor:not-allowed}.Backdrop .Picker .Actions .Cancel{padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-lg);color:var(--btn-cancel-text);border-color:var(--btn-cancel-border);background-color:var(--btn-cancel-bg);cursor:pointer}.Backdrop .Picker .Actions .Cancel:hover{color:var(--btn-cancel-text-hover);border-color:var(--btn-cancel-border-hover);background-color:var(--btn-cancel-bg-hover)}.Backdrop .Picker .Actions .Cancel:active{color:var(--btn-cancel-text-active);border-color:var(--btn-cancel-border-active);background-color:var(--btn-cancel-bg-active)}.Backdrop .Picker .Actions .Cancel:disabled{opacity:.6;cursor:not-allowed}\n"] }]
+        }], ctorParameters: () => [{ type: TimePickerModalService }, { type: i0.ChangeDetectorRef }] });
+
+class DatetimePickerModalServiceComponent {
+    datetimePickerModal;
+    cdr;
+    vm$;
+    sub;
+    constructor(datetimePickerModal, cdr) {
+        this.datetimePickerModal = datetimePickerModal;
+        this.cdr = cdr;
+        this.vm$ = this.datetimePickerModal.state$;
+    }
+    ngOnInit() {
+        this.sub = this.datetimePickerModal.state$.subscribe(() => this.cdr.markForCheck());
+    }
+    ngOnDestroy() {
+        this.sub?.unsubscribe();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DatetimePickerModalServiceComponent, deps: [{ token: DatetimePickerModalService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: DatetimePickerModalServiceComponent, isStandalone: true, selector: "datetime-picker-modal-service", ngImport: i0, template: "<ng-container *ngIf=\"vm$ | async as session\">\r\n  <div\r\n    class=\"Backdrop InputModalBackdrop datetime-picker-modal\"\r\n    (click)=\"session.handlers.toggleShowPicker($event)\"\r\n  >\r\n    <div class=\"Picker\" (click)=\"$event.stopPropagation()\">\r\n      <div class=\"Preview\" *ngIf=\"session.view.selectedValue\">\r\n        <span>{{ session.view.selectedDateExtended }}</span>\r\n      </div>\r\n\r\n      <div class=\"Cards\">\r\n        <div class=\"CardYears\" *ngIf=\"session.view.showYears\">\r\n          <div class=\"years Scroll\">\r\n            <div\r\n              *ngFor=\"let y of session.view.years\"\r\n              (click)=\"session.handlers.onSelectYear(y, $event)\"\r\n              class=\"year\"\r\n              [class.selected]=\"y === session.view.selectedYear\"\r\n            >\r\n              {{ y }}\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"CardMonths\" *ngIf=\"session.view.showMonths\">\r\n          <div class=\"CardChangeYear\">\r\n            <span\r\n              class=\"LabelYear\"\r\n              (click)=\"session.handlers.openYears($event)\"\r\n            >\r\n              {{ session.view.selectedYear }}\r\n            </span>\r\n            <lucide-icon class=\"Up\" name=\"chevron-up\" (click)=\"session.handlers.onDecrementYear($event)\"></lucide-icon>\r\n            <lucide-icon class=\"Down\" name=\"chevron-down\" (click)=\"session.handlers.onIncrementYear($event)\"></lucide-icon>\r\n          </div>\r\n\r\n          <div class=\"months Scroll\">\r\n            <div\r\n              *ngFor=\"let m of session.view.months\"\r\n              (click)=\"session.handlers.onSelectMonth(m, $event)\"\r\n              class=\"month\"\r\n              [class.selected]=\"m === session.view.selectedMonth\"\r\n            >\r\n              <span class=\"NameMonth\">{{\r\n                session.view.MONTH_NAMES[m - 1]\r\n              }}</span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"CardDates\">\r\n          <div class=\"CardChangeMonth\">\r\n            <span\r\n              class=\"LabelMonth\"\r\n              (click)=\"session.handlers.openMonths($event)\"\r\n            >\r\n              {{ session.view.formattedMonthAndYear }}\r\n            </span>\r\n            <lucide-icon class=\"Up\" name=\"chevron-up\" (click)=\"session.handlers.onDecrementMonth($event)\"></lucide-icon>\r\n            <lucide-icon class=\"Down\" name=\"chevron-down\" (click)=\"session.handlers.onIncrementMonth($event)\"></lucide-icon>\r\n          </div>\r\n\r\n          <div class=\"Labels\">\r\n            <div class=\"LabelDay\">DO</div>\r\n            <div class=\"LabelDay\">LU</div>\r\n            <div class=\"LabelDay\">MA</div>\r\n            <div class=\"LabelDay\">MI</div>\r\n            <div class=\"LabelDay\">JU</div>\r\n            <div class=\"LabelDay\">VI</div>\r\n            <div class=\"LabelDay\">SA</div>\r\n          </div>\r\n          <div class=\"dates\">\r\n            <div\r\n              *ngFor=\"let d of session.view.calendarDays\"\r\n              (click)=\"session.handlers.onClickDay(d, $event)\"\r\n              class=\"day Scroll\"\r\n              [class.selected]=\"\r\n                d.isCurrentMonth && d.day === session.view.selectedDay\r\n              \"\r\n              [class.outside]=\"!d.isCurrentMonth\"\r\n              [class.sunday]=\"d.date.weekday === 7\"\r\n              [class.monday]=\"d.date.weekday === 1\"\r\n              [class.tuesday]=\"d.date.weekday === 2\"\r\n              [class.wednesday]=\"d.date.weekday === 3\"\r\n              [class.thursday]=\"d.date.weekday === 4\"\r\n              [class.friday]=\"d.date.weekday === 5\"\r\n              [class.saturday]=\"d.date.weekday === 6\"\r\n            >\r\n              {{ d.day.toString().padStart(2, '0') }}\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"TimePicker\">\r\n        <div class=\"Hours Scroll\">\r\n          <div\r\n            *ngFor=\"let h of session.view.HOURS\"\r\n            (click)=\"session.handlers.onSelectHour(h, $event)\"\r\n            class=\"hour\"\r\n            [class.selected]=\"h === session.view.selectedHour\"\r\n          >\r\n            {{ h.toString().padStart(2, '0') }}\r\n          </div>\r\n        </div>\r\n        <span class=\"Separate\">:</span>\r\n        <div class=\"Minutes Scroll\">\r\n          <div\r\n            *ngFor=\"let m of session.view.MINUTES\"\r\n            (click)=\"session.handlers.onSelectMinute(m, $event)\"\r\n            [class.selected]=\"m === session.view.selectedMinute\"\r\n          >\r\n            {{ m.toString().padStart(2, '0') }}\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"Actions\">\r\n        <div class=\"Cancel\" (click)=\"session.handlers.onCancel()\">\r\n          Cancelar\r\n        </div>\r\n        <div class=\"Clear\" (click)=\"session.handlers.onClear()\">Limpiar</div>\r\n        <div class=\"Ok\" (click)=\"session.handlers.onAccept()\">Aceptar</div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex;flex-direction:column;width:100%;height:max-content;-webkit-user-select:auto;user-select:auto}:host .LabelRow{display:flex;align-items:center;justify-content:space-between;gap:6px;width:100%;margin-bottom:2px}:host .Label{color:var(--text-label);flex:1;min-width:0;cursor:pointer;padding:0 3px;margin:0;font-weight:400;-webkit-user-select:none;user-select:none}:host .Label .Opcional{color:var(--text-muted)}:host .Description{-webkit-user-select:none;user-select:none;font-size:.9rem;color:var(--text-base);font-weight:400;width:100%;cursor:pointer;padding:0 3px;margin:0 0 4px;overflow:hidden;word-break:break-all}:host .Entry{display:flex;width:100%;height:32px;justify-content:flex-start;align-items:center;border:solid 0 var(--input-border);border-radius:12px;cursor:pointer;overflow:hidden;background-color:var(--input-bg)}:host .Entry:hover{border:none;outline:solid 1px var(--input-hover-border)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--input-focus-border)}:host .Entry[class~=Error]{outline:solid 1px var(--input-border-error)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--input-border);padding:0 8px;color:var(--input-text);caret-color:var(--primary);text-align:start}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--input-placeholder)}:host .Entry.NotHover:hover{border:none;outline:none}:host .Backdrop{position:fixed;top:0;left:0;z-index:800;display:flex;justify-content:center;align-items:center;width:100%;height:100%;padding:12px;background:var(--overlay-scrim);overflow:hidden}@media (width <= 768px){:host .Backdrop{align-items:flex-start}}:host .Backdrop .Picker{display:flex;flex-direction:column;gap:5px;width:100%;max-width:600px;max-height:100%;margin:0 auto;background:var(--surface);border-radius:16px;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--shadow-color)}:host{display:contents}.Backdrop{position:fixed;top:0;left:0;z-index:10050;display:flex;justify-content:center;align-items:center;width:100%;height:100%;padding:12px;background:var(--overlay-scrim);overflow:hidden}@media (width <= 768px){.Backdrop{align-items:flex-start}}.Backdrop .Picker{max-width:400px}.Backdrop .Picker .Preview{background-color:var(--surface-2);border-radius:var(--radius-lg);padding:var(--spacing-sm) var(--spacing-sm);text-align:center;color:var(--text-primary);margin-bottom:var(--spacing-sm);font-size:var(--size-sm);font-weight:500}.Backdrop .Picker .Preview:first-letter{text-transform:uppercase}.Backdrop .Picker .Cards{position:relative;width:100%;height:100%}.Backdrop .Picker .Cards .CardMonths .CardChangeYear,.Backdrop .Picker .Cards .CardMonths .CardChangeMonth,.Backdrop .Picker .Cards .CardDates .CardChangeYear,.Backdrop .Picker .Cards .CardDates .CardChangeMonth{width:100%;height:30px;display:flex;align-items:center;margin-bottom:10px}.Backdrop .Picker .Cards .CardMonths .CardChangeYear .LabelYear,.Backdrop .Picker .Cards .CardMonths .CardChangeYear .LabelMonth,.Backdrop .Picker .Cards .CardMonths .CardChangeMonth .LabelYear,.Backdrop .Picker .Cards .CardMonths .CardChangeMonth .LabelMonth,.Backdrop .Picker .Cards .CardDates .CardChangeYear .LabelYear,.Backdrop .Picker .Cards .CardDates .CardChangeYear .LabelMonth,.Backdrop .Picker .Cards .CardDates .CardChangeMonth .LabelYear,.Backdrop .Picker .Cards .CardDates .CardChangeMonth .LabelMonth{height:30px;padding:0 10px;display:flex;align-items:center;margin-right:auto;font-weight:600;cursor:pointer;border-radius:var(--radius-md)}.Backdrop .Picker .Cards .CardMonths .CardChangeYear .LabelYear:first-letter,.Backdrop .Picker .Cards .CardMonths .CardChangeYear .LabelMonth:first-letter,.Backdrop .Picker .Cards .CardMonths .CardChangeMonth .LabelYear:first-letter,.Backdrop .Picker .Cards .CardMonths .CardChangeMonth .LabelMonth:first-letter,.Backdrop .Picker .Cards .CardDates .CardChangeYear .LabelYear:first-letter,.Backdrop .Picker .Cards .CardDates .CardChangeYear .LabelMonth:first-letter,.Backdrop .Picker .Cards .CardDates .CardChangeMonth .LabelYear:first-letter,.Backdrop .Picker .Cards .CardDates .CardChangeMonth .LabelMonth:first-letter{text-transform:uppercase}.Backdrop .Picker .Cards .CardMonths .CardChangeYear .LabelYear:hover,.Backdrop .Picker .Cards .CardMonths .CardChangeYear .LabelMonth:hover,.Backdrop .Picker .Cards .CardMonths .CardChangeMonth .LabelYear:hover,.Backdrop .Picker .Cards .CardMonths .CardChangeMonth .LabelMonth:hover,.Backdrop .Picker .Cards .CardDates .CardChangeYear .LabelYear:hover,.Backdrop .Picker .Cards .CardDates .CardChangeYear .LabelMonth:hover,.Backdrop .Picker .Cards .CardDates .CardChangeMonth .LabelYear:hover,.Backdrop .Picker .Cards .CardDates .CardChangeMonth .LabelMonth:hover{background-color:var(--surface-2)}.Backdrop .Picker .Cards .CardMonths .CardChangeYear .Up,.Backdrop .Picker .Cards .CardMonths .CardChangeYear .Down,.Backdrop .Picker .Cards .CardMonths .CardChangeMonth .Up,.Backdrop .Picker .Cards .CardMonths .CardChangeMonth .Down,.Backdrop .Picker .Cards .CardDates .CardChangeYear .Up,.Backdrop .Picker .Cards .CardDates .CardChangeYear .Down,.Backdrop .Picker .Cards .CardDates .CardChangeMonth .Up,.Backdrop .Picker .Cards .CardDates .CardChangeMonth .Down{width:30px;height:30px;display:flex;justify-content:center;align-items:center;border-radius:var(--radius-md);cursor:pointer;font-size:.8rem}.Backdrop .Picker .Cards .CardMonths .CardChangeYear .Up lucide-icon .lucide-icon-svg,.Backdrop .Picker .Cards .CardMonths .CardChangeYear .Down lucide-icon .lucide-icon-svg,.Backdrop .Picker .Cards .CardMonths .CardChangeMonth .Up lucide-icon .lucide-icon-svg,.Backdrop .Picker .Cards .CardMonths .CardChangeMonth .Down lucide-icon .lucide-icon-svg,.Backdrop .Picker .Cards .CardDates .CardChangeYear .Up lucide-icon .lucide-icon-svg,.Backdrop .Picker .Cards .CardDates .CardChangeYear .Down lucide-icon .lucide-icon-svg,.Backdrop .Picker .Cards .CardDates .CardChangeMonth .Up lucide-icon .lucide-icon-svg,.Backdrop .Picker .Cards .CardDates .CardChangeMonth .Down lucide-icon .lucide-icon-svg{width:.8rem;height:.8rem}.Backdrop .Picker .Cards .CardMonths .CardChangeYear .Up:hover,.Backdrop .Picker .Cards .CardMonths .CardChangeYear .Down:hover,.Backdrop .Picker .Cards .CardMonths .CardChangeMonth .Up:hover,.Backdrop .Picker .Cards .CardMonths .CardChangeMonth .Down:hover,.Backdrop .Picker .Cards .CardDates .CardChangeYear .Up:hover,.Backdrop .Picker .Cards .CardDates .CardChangeYear .Down:hover,.Backdrop .Picker .Cards .CardDates .CardChangeMonth .Up:hover,.Backdrop .Picker .Cards .CardDates .CardChangeMonth .Down:hover{background-color:var(--surface-2)}.Backdrop .Picker .Cards .CardYears{position:absolute;top:0;left:0;z-index:10;width:100%;height:100%;background:var(--xu-on-fill)}.Backdrop .Picker .Cards .CardYears .years{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:35px;justify-items:center;align-items:center;width:100%;height:100%;overflow:hidden;overflow-y:auto}.Backdrop .Picker .Cards .CardYears .years .year{width:100%;height:100%;display:flex;justify-content:center;align-items:center;border-radius:var(--radius-md);text-transform:capitalize;padding:var(--spacing-xs) var(--spacing-md);border-radius:var(--radius-lg);cursor:pointer}.Backdrop .Picker .Cards .CardYears .years .year:hover{background-color:var(--surface-2)}.Backdrop .Picker .Cards .CardYears .years .selected{background-color:var(--primary);color:var(--xu-on-fill);font-weight:700}.Backdrop .Picker .Cards .CardYears .years .selected:hover{background-color:var(--primary)}.Backdrop .Picker .Cards .CardMonths{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--xu-on-fill);overflow:hidden;display:flex;flex-direction:column}.Backdrop .Picker .Cards .CardMonths .months{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;justify-items:center;align-items:center;width:100%;height:100%;overflow:hidden;overflow-y:auto}.Backdrop .Picker .Cards .CardMonths .months .month{width:100%;height:100%;display:flex;justify-content:center;align-items:center;gap:5px;padding:var(--spacing-xs) var(--spacing-md);border-radius:var(--radius-lg);cursor:pointer}.Backdrop .Picker .Cards .CardMonths .months .month:hover{background-color:var(--surface-2)}.Backdrop .Picker .Cards .CardMonths .months .selected{background-color:var(--primary);color:var(--text-muted);font-weight:700}.Backdrop .Picker .Cards .CardMonths .months .selected:hover{background-color:var(--primary)}.Backdrop .Picker .Cards .CardDates .Labels{display:grid;grid-template-columns:repeat(7,1fr);grid-auto-rows:30px;justify-items:center;align-items:center;width:100%}.Backdrop .Picker .Cards .CardDates .Labels .LabelDay{font-size:.8rem;font-weight:700}.Backdrop .Picker .Cards .CardDates .dates{display:grid;grid-template-columns:repeat(7,1fr);grid-auto-rows:30px;justify-items:center;align-items:center;width:100%;overflow:hidden;overflow-y:auto}.Backdrop .Picker .Cards .CardDates .dates .day{width:100%;height:100%;display:flex;justify-content:center;align-items:center;border-radius:var(--radius-lg);cursor:pointer}.Backdrop .Picker .Cards .CardDates .dates .day:hover{background-color:var(--surface-2)}.Backdrop .Picker .Cards .CardDates .dates .sunday{color:var(--error-text)}.Backdrop .Picker .Cards .CardDates .dates .outside{cursor:auto;color:var(--text-muted);pointer-events:none;cursor:not-allowed}.Backdrop .Picker .Cards .CardDates .dates .selected{background-color:var(--primary);color:var(--xu-on-fill);font-weight:700}.Backdrop .Picker .Cards .CardDates .dates .selected:hover{background-color:var(--primary)}.Backdrop .Picker .TimePicker{display:grid;grid-template-columns:1fr 10px 1fr;grid-auto-rows:100px;gap:5px;align-items:center;justify-items:center;-webkit-user-select:none;user-select:none;border-top:solid 1px var(--border);padding-top:var(--spacing-sm)}.Backdrop .Picker .TimePicker .Separate{font-weight:900;font-size:2rem;color:var(--text-muted)}.Backdrop .Picker .TimePicker .Hours,.Backdrop .Picker .TimePicker .Minutes{width:100%;height:100%;overflow:hidden;overflow-y:auto;background-color:var(--surface-2);border-radius:var(--radius-lg);display:grid;grid-template-columns:repeat(1,1fr);grid-auto-rows:30px;scrollbar-width:none;-ms-overflow-style:none}.Backdrop .Picker .TimePicker .Hours::-webkit-scrollbar,.Backdrop .Picker .TimePicker .Minutes::-webkit-scrollbar{display:none}.Backdrop .Picker .TimePicker .Hours div,.Backdrop .Picker .TimePicker .Minutes div{border-radius:var(--radius-lg);padding:var(--spacing-md);display:flex;justify-content:center;align-items:center;cursor:pointer}.Backdrop .Picker .TimePicker .Hours div:hover,.Backdrop .Picker .TimePicker .Minutes div:hover{background-color:var(--surface-3)}.Backdrop .Picker .TimePicker .Hours .selected,.Backdrop .Picker .TimePicker .Minutes .selected{background-color:var(--primary);color:var(--text-muted);font-weight:700}.Backdrop .Picker .TimePicker .Hours .selected:hover,.Backdrop .Picker .TimePicker .Minutes .selected:hover{background-color:var(--primary)}.Backdrop .Picker .Actions{display:flex;justify-content:flex-end;gap:var(--spacing-xs);margin-top:var(--spacing-md)}.Backdrop .Picker .Actions .Ok{padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-lg);color:var(--btn-primary-text);border-color:var(--btn-primary-border);background-color:var(--btn-primary-bg);cursor:pointer}.Backdrop .Picker .Actions .Ok:hover{color:var(--btn-primary-text-hover);border-color:var(--btn-primary-border-hover);background-color:var(--btn-primary-bg-hover)}.Backdrop .Picker .Actions .Ok:active{color:var(--btn-primary-text-active);border-color:var(--btn-primary-border-active);background-color:var(--btn-primary-bg-active)}.Backdrop .Picker .Actions .Ok:disabled{opacity:.6;cursor:not-allowed}.Backdrop .Picker .Actions .Clear{padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-lg);color:var(--btn-secondary-text);border-color:var(--btn-secondary-border);background-color:var(--btn-secondary-bg);cursor:pointer}.Backdrop .Picker .Actions .Clear:hover{color:var(--btn-secondary-text-hover);border-color:var(--btn-secondary-border-hover);background-color:var(--btn-secondary-bg-hover)}.Backdrop .Picker .Actions .Clear:active{color:var(--btn-secondary-text-active);border-color:var(--btn-secondary-border-active);background-color:var(--btn-secondary-bg-active)}.Backdrop .Picker .Actions .Clear:disabled{opacity:.6;cursor:not-allowed}.Backdrop .Picker .Actions .Cancel{padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-lg);color:var(--btn-cancel-text);border-color:var(--btn-cancel-border);background-color:var(--btn-cancel-bg);cursor:pointer}.Backdrop .Picker .Actions .Cancel:hover{color:var(--btn-cancel-text-hover);border-color:var(--btn-cancel-border-hover);background-color:var(--btn-cancel-bg-hover)}.Backdrop .Picker .Actions .Cancel:active{color:var(--btn-cancel-text-active);border-color:var(--btn-cancel-border-active);background-color:var(--btn-cancel-bg-active)}.Backdrop .Picker .Actions .Cancel:disabled{opacity:.6;cursor:not-allowed}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "component", type: LucideIconComponent, selector: "lucide-icon", inputs: ["name", "size", "spin", "filled"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: DatetimePickerModalServiceComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'datetime-picker-modal-service', standalone: true, imports: [CommonModule, LucideIconComponent], template: "<ng-container *ngIf=\"vm$ | async as session\">\r\n  <div\r\n    class=\"Backdrop InputModalBackdrop datetime-picker-modal\"\r\n    (click)=\"session.handlers.toggleShowPicker($event)\"\r\n  >\r\n    <div class=\"Picker\" (click)=\"$event.stopPropagation()\">\r\n      <div class=\"Preview\" *ngIf=\"session.view.selectedValue\">\r\n        <span>{{ session.view.selectedDateExtended }}</span>\r\n      </div>\r\n\r\n      <div class=\"Cards\">\r\n        <div class=\"CardYears\" *ngIf=\"session.view.showYears\">\r\n          <div class=\"years Scroll\">\r\n            <div\r\n              *ngFor=\"let y of session.view.years\"\r\n              (click)=\"session.handlers.onSelectYear(y, $event)\"\r\n              class=\"year\"\r\n              [class.selected]=\"y === session.view.selectedYear\"\r\n            >\r\n              {{ y }}\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"CardMonths\" *ngIf=\"session.view.showMonths\">\r\n          <div class=\"CardChangeYear\">\r\n            <span\r\n              class=\"LabelYear\"\r\n              (click)=\"session.handlers.openYears($event)\"\r\n            >\r\n              {{ session.view.selectedYear }}\r\n            </span>\r\n            <lucide-icon class=\"Up\" name=\"chevron-up\" (click)=\"session.handlers.onDecrementYear($event)\"></lucide-icon>\r\n            <lucide-icon class=\"Down\" name=\"chevron-down\" (click)=\"session.handlers.onIncrementYear($event)\"></lucide-icon>\r\n          </div>\r\n\r\n          <div class=\"months Scroll\">\r\n            <div\r\n              *ngFor=\"let m of session.view.months\"\r\n              (click)=\"session.handlers.onSelectMonth(m, $event)\"\r\n              class=\"month\"\r\n              [class.selected]=\"m === session.view.selectedMonth\"\r\n            >\r\n              <span class=\"NameMonth\">{{\r\n                session.view.MONTH_NAMES[m - 1]\r\n              }}</span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"CardDates\">\r\n          <div class=\"CardChangeMonth\">\r\n            <span\r\n              class=\"LabelMonth\"\r\n              (click)=\"session.handlers.openMonths($event)\"\r\n            >\r\n              {{ session.view.formattedMonthAndYear }}\r\n            </span>\r\n            <lucide-icon class=\"Up\" name=\"chevron-up\" (click)=\"session.handlers.onDecrementMonth($event)\"></lucide-icon>\r\n            <lucide-icon class=\"Down\" name=\"chevron-down\" (click)=\"session.handlers.onIncrementMonth($event)\"></lucide-icon>\r\n          </div>\r\n\r\n          <div class=\"Labels\">\r\n            <div class=\"LabelDay\">DO</div>\r\n            <div class=\"LabelDay\">LU</div>\r\n            <div class=\"LabelDay\">MA</div>\r\n            <div class=\"LabelDay\">MI</div>\r\n            <div class=\"LabelDay\">JU</div>\r\n            <div class=\"LabelDay\">VI</div>\r\n            <div class=\"LabelDay\">SA</div>\r\n          </div>\r\n          <div class=\"dates\">\r\n            <div\r\n              *ngFor=\"let d of session.view.calendarDays\"\r\n              (click)=\"session.handlers.onClickDay(d, $event)\"\r\n              class=\"day Scroll\"\r\n              [class.selected]=\"\r\n                d.isCurrentMonth && d.day === session.view.selectedDay\r\n              \"\r\n              [class.outside]=\"!d.isCurrentMonth\"\r\n              [class.sunday]=\"d.date.weekday === 7\"\r\n              [class.monday]=\"d.date.weekday === 1\"\r\n              [class.tuesday]=\"d.date.weekday === 2\"\r\n              [class.wednesday]=\"d.date.weekday === 3\"\r\n              [class.thursday]=\"d.date.weekday === 4\"\r\n              [class.friday]=\"d.date.weekday === 5\"\r\n              [class.saturday]=\"d.date.weekday === 6\"\r\n            >\r\n              {{ d.day.toString().padStart(2, '0') }}\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"TimePicker\">\r\n        <div class=\"Hours Scroll\">\r\n          <div\r\n            *ngFor=\"let h of session.view.HOURS\"\r\n            (click)=\"session.handlers.onSelectHour(h, $event)\"\r\n            class=\"hour\"\r\n            [class.selected]=\"h === session.view.selectedHour\"\r\n          >\r\n            {{ h.toString().padStart(2, '0') }}\r\n          </div>\r\n        </div>\r\n        <span class=\"Separate\">:</span>\r\n        <div class=\"Minutes Scroll\">\r\n          <div\r\n            *ngFor=\"let m of session.view.MINUTES\"\r\n            (click)=\"session.handlers.onSelectMinute(m, $event)\"\r\n            [class.selected]=\"m === session.view.selectedMinute\"\r\n          >\r\n            {{ m.toString().padStart(2, '0') }}\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"Actions\">\r\n        <div class=\"Cancel\" (click)=\"session.handlers.onCancel()\">\r\n          Cancelar\r\n        </div>\r\n        <div class=\"Clear\" (click)=\"session.handlers.onClear()\">Limpiar</div>\r\n        <div class=\"Ok\" (click)=\"session.handlers.onAccept()\">Aceptar</div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex;flex-direction:column;width:100%;height:max-content;-webkit-user-select:auto;user-select:auto}:host .LabelRow{display:flex;align-items:center;justify-content:space-between;gap:6px;width:100%;margin-bottom:2px}:host .Label{color:var(--text-label);flex:1;min-width:0;cursor:pointer;padding:0 3px;margin:0;font-weight:400;-webkit-user-select:none;user-select:none}:host .Label .Opcional{color:var(--text-muted)}:host .Description{-webkit-user-select:none;user-select:none;font-size:.9rem;color:var(--text-base);font-weight:400;width:100%;cursor:pointer;padding:0 3px;margin:0 0 4px;overflow:hidden;word-break:break-all}:host .Entry{display:flex;width:100%;height:32px;justify-content:flex-start;align-items:center;border:solid 0 var(--input-border);border-radius:12px;cursor:pointer;overflow:hidden;background-color:var(--input-bg)}:host .Entry:hover{border:none;outline:solid 1px var(--input-hover-border)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--input-focus-border)}:host .Entry[class~=Error]{outline:solid 1px var(--input-border-error)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--input-border);padding:0 8px;color:var(--input-text);caret-color:var(--primary);text-align:start}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--input-placeholder)}:host .Entry.NotHover:hover{border:none;outline:none}:host .Backdrop{position:fixed;top:0;left:0;z-index:800;display:flex;justify-content:center;align-items:center;width:100%;height:100%;padding:12px;background:var(--overlay-scrim);overflow:hidden}@media (width <= 768px){:host .Backdrop{align-items:flex-start}}:host .Backdrop .Picker{display:flex;flex-direction:column;gap:5px;width:100%;max-width:600px;max-height:100%;margin:0 auto;background:var(--surface);border-radius:16px;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--shadow-color)}:host{display:contents}.Backdrop{position:fixed;top:0;left:0;z-index:10050;display:flex;justify-content:center;align-items:center;width:100%;height:100%;padding:12px;background:var(--overlay-scrim);overflow:hidden}@media (width <= 768px){.Backdrop{align-items:flex-start}}.Backdrop .Picker{max-width:400px}.Backdrop .Picker .Preview{background-color:var(--surface-2);border-radius:var(--radius-lg);padding:var(--spacing-sm) var(--spacing-sm);text-align:center;color:var(--text-primary);margin-bottom:var(--spacing-sm);font-size:var(--size-sm);font-weight:500}.Backdrop .Picker .Preview:first-letter{text-transform:uppercase}.Backdrop .Picker .Cards{position:relative;width:100%;height:100%}.Backdrop .Picker .Cards .CardMonths .CardChangeYear,.Backdrop .Picker .Cards .CardMonths .CardChangeMonth,.Backdrop .Picker .Cards .CardDates .CardChangeYear,.Backdrop .Picker .Cards .CardDates .CardChangeMonth{width:100%;height:30px;display:flex;align-items:center;margin-bottom:10px}.Backdrop .Picker .Cards .CardMonths .CardChangeYear .LabelYear,.Backdrop .Picker .Cards .CardMonths .CardChangeYear .LabelMonth,.Backdrop .Picker .Cards .CardMonths .CardChangeMonth .LabelYear,.Backdrop .Picker .Cards .CardMonths .CardChangeMonth .LabelMonth,.Backdrop .Picker .Cards .CardDates .CardChangeYear .LabelYear,.Backdrop .Picker .Cards .CardDates .CardChangeYear .LabelMonth,.Backdrop .Picker .Cards .CardDates .CardChangeMonth .LabelYear,.Backdrop .Picker .Cards .CardDates .CardChangeMonth .LabelMonth{height:30px;padding:0 10px;display:flex;align-items:center;margin-right:auto;font-weight:600;cursor:pointer;border-radius:var(--radius-md)}.Backdrop .Picker .Cards .CardMonths .CardChangeYear .LabelYear:first-letter,.Backdrop .Picker .Cards .CardMonths .CardChangeYear .LabelMonth:first-letter,.Backdrop .Picker .Cards .CardMonths .CardChangeMonth .LabelYear:first-letter,.Backdrop .Picker .Cards .CardMonths .CardChangeMonth .LabelMonth:first-letter,.Backdrop .Picker .Cards .CardDates .CardChangeYear .LabelYear:first-letter,.Backdrop .Picker .Cards .CardDates .CardChangeYear .LabelMonth:first-letter,.Backdrop .Picker .Cards .CardDates .CardChangeMonth .LabelYear:first-letter,.Backdrop .Picker .Cards .CardDates .CardChangeMonth .LabelMonth:first-letter{text-transform:uppercase}.Backdrop .Picker .Cards .CardMonths .CardChangeYear .LabelYear:hover,.Backdrop .Picker .Cards .CardMonths .CardChangeYear .LabelMonth:hover,.Backdrop .Picker .Cards .CardMonths .CardChangeMonth .LabelYear:hover,.Backdrop .Picker .Cards .CardMonths .CardChangeMonth .LabelMonth:hover,.Backdrop .Picker .Cards .CardDates .CardChangeYear .LabelYear:hover,.Backdrop .Picker .Cards .CardDates .CardChangeYear .LabelMonth:hover,.Backdrop .Picker .Cards .CardDates .CardChangeMonth .LabelYear:hover,.Backdrop .Picker .Cards .CardDates .CardChangeMonth .LabelMonth:hover{background-color:var(--surface-2)}.Backdrop .Picker .Cards .CardMonths .CardChangeYear .Up,.Backdrop .Picker .Cards .CardMonths .CardChangeYear .Down,.Backdrop .Picker .Cards .CardMonths .CardChangeMonth .Up,.Backdrop .Picker .Cards .CardMonths .CardChangeMonth .Down,.Backdrop .Picker .Cards .CardDates .CardChangeYear .Up,.Backdrop .Picker .Cards .CardDates .CardChangeYear .Down,.Backdrop .Picker .Cards .CardDates .CardChangeMonth .Up,.Backdrop .Picker .Cards .CardDates .CardChangeMonth .Down{width:30px;height:30px;display:flex;justify-content:center;align-items:center;border-radius:var(--radius-md);cursor:pointer;font-size:.8rem}.Backdrop .Picker .Cards .CardMonths .CardChangeYear .Up lucide-icon .lucide-icon-svg,.Backdrop .Picker .Cards .CardMonths .CardChangeYear .Down lucide-icon .lucide-icon-svg,.Backdrop .Picker .Cards .CardMonths .CardChangeMonth .Up lucide-icon .lucide-icon-svg,.Backdrop .Picker .Cards .CardMonths .CardChangeMonth .Down lucide-icon .lucide-icon-svg,.Backdrop .Picker .Cards .CardDates .CardChangeYear .Up lucide-icon .lucide-icon-svg,.Backdrop .Picker .Cards .CardDates .CardChangeYear .Down lucide-icon .lucide-icon-svg,.Backdrop .Picker .Cards .CardDates .CardChangeMonth .Up lucide-icon .lucide-icon-svg,.Backdrop .Picker .Cards .CardDates .CardChangeMonth .Down lucide-icon .lucide-icon-svg{width:.8rem;height:.8rem}.Backdrop .Picker .Cards .CardMonths .CardChangeYear .Up:hover,.Backdrop .Picker .Cards .CardMonths .CardChangeYear .Down:hover,.Backdrop .Picker .Cards .CardMonths .CardChangeMonth .Up:hover,.Backdrop .Picker .Cards .CardMonths .CardChangeMonth .Down:hover,.Backdrop .Picker .Cards .CardDates .CardChangeYear .Up:hover,.Backdrop .Picker .Cards .CardDates .CardChangeYear .Down:hover,.Backdrop .Picker .Cards .CardDates .CardChangeMonth .Up:hover,.Backdrop .Picker .Cards .CardDates .CardChangeMonth .Down:hover{background-color:var(--surface-2)}.Backdrop .Picker .Cards .CardYears{position:absolute;top:0;left:0;z-index:10;width:100%;height:100%;background:var(--xu-on-fill)}.Backdrop .Picker .Cards .CardYears .years{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:35px;justify-items:center;align-items:center;width:100%;height:100%;overflow:hidden;overflow-y:auto}.Backdrop .Picker .Cards .CardYears .years .year{width:100%;height:100%;display:flex;justify-content:center;align-items:center;border-radius:var(--radius-md);text-transform:capitalize;padding:var(--spacing-xs) var(--spacing-md);border-radius:var(--radius-lg);cursor:pointer}.Backdrop .Picker .Cards .CardYears .years .year:hover{background-color:var(--surface-2)}.Backdrop .Picker .Cards .CardYears .years .selected{background-color:var(--primary);color:var(--xu-on-fill);font-weight:700}.Backdrop .Picker .Cards .CardYears .years .selected:hover{background-color:var(--primary)}.Backdrop .Picker .Cards .CardMonths{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--xu-on-fill);overflow:hidden;display:flex;flex-direction:column}.Backdrop .Picker .Cards .CardMonths .months{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;justify-items:center;align-items:center;width:100%;height:100%;overflow:hidden;overflow-y:auto}.Backdrop .Picker .Cards .CardMonths .months .month{width:100%;height:100%;display:flex;justify-content:center;align-items:center;gap:5px;padding:var(--spacing-xs) var(--spacing-md);border-radius:var(--radius-lg);cursor:pointer}.Backdrop .Picker .Cards .CardMonths .months .month:hover{background-color:var(--surface-2)}.Backdrop .Picker .Cards .CardMonths .months .selected{background-color:var(--primary);color:var(--text-muted);font-weight:700}.Backdrop .Picker .Cards .CardMonths .months .selected:hover{background-color:var(--primary)}.Backdrop .Picker .Cards .CardDates .Labels{display:grid;grid-template-columns:repeat(7,1fr);grid-auto-rows:30px;justify-items:center;align-items:center;width:100%}.Backdrop .Picker .Cards .CardDates .Labels .LabelDay{font-size:.8rem;font-weight:700}.Backdrop .Picker .Cards .CardDates .dates{display:grid;grid-template-columns:repeat(7,1fr);grid-auto-rows:30px;justify-items:center;align-items:center;width:100%;overflow:hidden;overflow-y:auto}.Backdrop .Picker .Cards .CardDates .dates .day{width:100%;height:100%;display:flex;justify-content:center;align-items:center;border-radius:var(--radius-lg);cursor:pointer}.Backdrop .Picker .Cards .CardDates .dates .day:hover{background-color:var(--surface-2)}.Backdrop .Picker .Cards .CardDates .dates .sunday{color:var(--error-text)}.Backdrop .Picker .Cards .CardDates .dates .outside{cursor:auto;color:var(--text-muted);pointer-events:none;cursor:not-allowed}.Backdrop .Picker .Cards .CardDates .dates .selected{background-color:var(--primary);color:var(--xu-on-fill);font-weight:700}.Backdrop .Picker .Cards .CardDates .dates .selected:hover{background-color:var(--primary)}.Backdrop .Picker .TimePicker{display:grid;grid-template-columns:1fr 10px 1fr;grid-auto-rows:100px;gap:5px;align-items:center;justify-items:center;-webkit-user-select:none;user-select:none;border-top:solid 1px var(--border);padding-top:var(--spacing-sm)}.Backdrop .Picker .TimePicker .Separate{font-weight:900;font-size:2rem;color:var(--text-muted)}.Backdrop .Picker .TimePicker .Hours,.Backdrop .Picker .TimePicker .Minutes{width:100%;height:100%;overflow:hidden;overflow-y:auto;background-color:var(--surface-2);border-radius:var(--radius-lg);display:grid;grid-template-columns:repeat(1,1fr);grid-auto-rows:30px;scrollbar-width:none;-ms-overflow-style:none}.Backdrop .Picker .TimePicker .Hours::-webkit-scrollbar,.Backdrop .Picker .TimePicker .Minutes::-webkit-scrollbar{display:none}.Backdrop .Picker .TimePicker .Hours div,.Backdrop .Picker .TimePicker .Minutes div{border-radius:var(--radius-lg);padding:var(--spacing-md);display:flex;justify-content:center;align-items:center;cursor:pointer}.Backdrop .Picker .TimePicker .Hours div:hover,.Backdrop .Picker .TimePicker .Minutes div:hover{background-color:var(--surface-3)}.Backdrop .Picker .TimePicker .Hours .selected,.Backdrop .Picker .TimePicker .Minutes .selected{background-color:var(--primary);color:var(--text-muted);font-weight:700}.Backdrop .Picker .TimePicker .Hours .selected:hover,.Backdrop .Picker .TimePicker .Minutes .selected:hover{background-color:var(--primary)}.Backdrop .Picker .Actions{display:flex;justify-content:flex-end;gap:var(--spacing-xs);margin-top:var(--spacing-md)}.Backdrop .Picker .Actions .Ok{padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-lg);color:var(--btn-primary-text);border-color:var(--btn-primary-border);background-color:var(--btn-primary-bg);cursor:pointer}.Backdrop .Picker .Actions .Ok:hover{color:var(--btn-primary-text-hover);border-color:var(--btn-primary-border-hover);background-color:var(--btn-primary-bg-hover)}.Backdrop .Picker .Actions .Ok:active{color:var(--btn-primary-text-active);border-color:var(--btn-primary-border-active);background-color:var(--btn-primary-bg-active)}.Backdrop .Picker .Actions .Ok:disabled{opacity:.6;cursor:not-allowed}.Backdrop .Picker .Actions .Clear{padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-lg);color:var(--btn-secondary-text);border-color:var(--btn-secondary-border);background-color:var(--btn-secondary-bg);cursor:pointer}.Backdrop .Picker .Actions .Clear:hover{color:var(--btn-secondary-text-hover);border-color:var(--btn-secondary-border-hover);background-color:var(--btn-secondary-bg-hover)}.Backdrop .Picker .Actions .Clear:active{color:var(--btn-secondary-text-active);border-color:var(--btn-secondary-border-active);background-color:var(--btn-secondary-bg-active)}.Backdrop .Picker .Actions .Clear:disabled{opacity:.6;cursor:not-allowed}.Backdrop .Picker .Actions .Cancel{padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-lg);color:var(--btn-cancel-text);border-color:var(--btn-cancel-border);background-color:var(--btn-cancel-bg);cursor:pointer}.Backdrop .Picker .Actions .Cancel:hover{color:var(--btn-cancel-text-hover);border-color:var(--btn-cancel-border-hover);background-color:var(--btn-cancel-bg-hover)}.Backdrop .Picker .Actions .Cancel:active{color:var(--btn-cancel-text-active);border-color:var(--btn-cancel-border-active);background-color:var(--btn-cancel-bg-active)}.Backdrop .Picker .Actions .Cancel:disabled{opacity:.6;cursor:not-allowed}\n"] }]
+        }], ctorParameters: () => [{ type: DatetimePickerModalService }, { type: i0.ChangeDetectorRef }] });
+
+class MonthPickerModalServiceComponent {
+    monthPickerModal;
+    cdr;
+    vm$;
+    sub;
+    constructor(monthPickerModal, cdr) {
+        this.monthPickerModal = monthPickerModal;
+        this.cdr = cdr;
+        this.vm$ = this.monthPickerModal.state$;
+    }
+    ngOnInit() {
+        this.sub = this.monthPickerModal.state$.subscribe(() => this.cdr.markForCheck());
+    }
+    ngOnDestroy() {
+        this.sub?.unsubscribe();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: MonthPickerModalServiceComponent, deps: [{ token: MonthPickerModalService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: MonthPickerModalServiceComponent, isStandalone: true, selector: "month-picker-modal-service", ngImport: i0, template: "<ng-container *ngIf=\"vm$ | async as session\">\r\n  <div\r\n    class=\"Backdrop InputModalBackdrop month-picker-modal\"\r\n    (click)=\"session.handlers.toggleShowPicker($event)\"\r\n  >\r\n    <div class=\"Picker\" (click)=\"$event.stopPropagation()\">\r\n      <div class=\"Preview\" *ngIf=\"session.view.selectedValue\">\r\n        <span>{{ session.view.selectedDateExtended }}</span>\r\n      </div>\r\n\r\n      <div class=\"Cards\">\r\n        <div class=\"CardYears\" *ngIf=\"session.view.showYears\">\r\n          <div class=\"years Scroll\">\r\n            <div\r\n              *ngFor=\"let y of session.view.years\"\r\n              (click)=\"session.handlers.onSelectYear(y, $event)\"\r\n              class=\"year\"\r\n              [class.selected]=\"y === session.view.selectedYear\"\r\n            >\r\n              {{ y }}\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"CardMonths\">\r\n          <div class=\"CardChangeYear\">\r\n            <span\r\n              class=\"LabelYear\"\r\n              (click)=\"session.handlers.openYears($event)\"\r\n            >\r\n              {{ session.view.selectedYear || 'A\u00F1o' }}\r\n            </span>\r\n            <lucide-icon class=\"Up\" name=\"chevron-up\" (click)=\"session.handlers.onDecrementYear($event)\"></lucide-icon>\r\n            <lucide-icon class=\"Down\" name=\"chevron-down\" (click)=\"session.handlers.onIncrementYear($event)\"></lucide-icon>\r\n          </div>\r\n\r\n          <div class=\"months Scroll\">\r\n            <div\r\n              *ngFor=\"let m of session.view.months\"\r\n              (click)=\"session.handlers.onSelectMonth(m, $event)\"\r\n              class=\"month\"\r\n              [class.selected]=\"m === session.view.selectedMonth\"\r\n            >\r\n              <span class=\"NameMonth\">{{\r\n                session.view.MONTH_NAMES[m - 1]\r\n              }}</span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"Actions\">\r\n        <div class=\"Cancel\" (click)=\"session.handlers.onCancel()\">\r\n          Cancelar\r\n        </div>\r\n        <div class=\"Clear\" (click)=\"session.handlers.onClear()\">Limpiar</div>\r\n        <div class=\"Ok\" (click)=\"session.handlers.onAccept()\">Aceptar</div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex;flex-direction:column;width:100%;height:max-content;-webkit-user-select:auto;user-select:auto}:host .LabelRow{display:flex;align-items:center;justify-content:space-between;gap:6px;width:100%;margin-bottom:2px}:host .Label{color:var(--text-label);flex:1;min-width:0;cursor:pointer;padding:0 3px;margin:0;font-weight:400;-webkit-user-select:none;user-select:none}:host .Label .Opcional{color:var(--text-muted)}:host .Description{-webkit-user-select:none;user-select:none;font-size:.9rem;color:var(--text-base);font-weight:400;width:100%;cursor:pointer;padding:0 3px;margin:0 0 4px;overflow:hidden;word-break:break-all}:host .Entry{display:flex;width:100%;height:32px;justify-content:flex-start;align-items:center;border:solid 0 var(--input-border);border-radius:12px;cursor:pointer;overflow:hidden;background-color:var(--input-bg)}:host .Entry:hover{border:none;outline:solid 1px var(--input-hover-border)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--input-focus-border)}:host .Entry[class~=Error]{outline:solid 1px var(--input-border-error)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--input-border);padding:0 8px;color:var(--input-text);caret-color:var(--primary);text-align:start}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--input-placeholder)}:host .Entry.NotHover:hover{border:none;outline:none}:host .Backdrop{position:fixed;top:0;left:0;z-index:800;display:flex;justify-content:center;align-items:center;width:100%;height:100%;padding:12px;background:var(--overlay-scrim);overflow:hidden}@media (width <= 768px){:host .Backdrop{align-items:flex-start}}:host .Backdrop .Picker{display:flex;flex-direction:column;gap:5px;width:100%;max-width:600px;max-height:100%;margin:0 auto;background:var(--surface);border-radius:16px;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--shadow-color)}:host{display:contents}.Backdrop{position:fixed;top:0;left:0;z-index:10050;display:flex;justify-content:center;align-items:center;width:100%;height:100%;padding:12px;background:var(--overlay-scrim);overflow:hidden}@media (width <= 768px){.Backdrop{align-items:flex-start}}.Backdrop .Picker{max-width:400px}.Backdrop .Picker .Preview{background-color:var(--surface-2);border-radius:var(--radius-lg);padding:var(--spacing-sm) var(--spacing-sm);text-align:center;color:var(--text-primary);margin-bottom:var(--spacing-sm);font-size:var(--size-sm);font-weight:500}.Backdrop .Picker .Preview:first-letter{text-transform:uppercase}.Backdrop .Picker .Cards{position:relative;width:100%;height:100%}.Backdrop .Picker .Cards .CardMonths .CardChangeYear,.Backdrop .Picker .Cards .CardMonths .CardChangeMonth,.Backdrop .Picker .Cards .CardDates .CardChangeYear,.Backdrop .Picker .Cards .CardDates .CardChangeMonth{width:100%;height:30px;display:flex;align-items:center;margin-bottom:10px}.Backdrop .Picker .Cards .CardMonths .CardChangeYear .LabelYear,.Backdrop .Picker .Cards .CardMonths .CardChangeYear .LabelMonth,.Backdrop .Picker .Cards .CardMonths .CardChangeMonth .LabelYear,.Backdrop .Picker .Cards .CardMonths .CardChangeMonth .LabelMonth,.Backdrop .Picker .Cards .CardDates .CardChangeYear .LabelYear,.Backdrop .Picker .Cards .CardDates .CardChangeYear .LabelMonth,.Backdrop .Picker .Cards .CardDates .CardChangeMonth .LabelYear,.Backdrop .Picker .Cards .CardDates .CardChangeMonth .LabelMonth{height:30px;padding:0 10px;display:flex;align-items:center;margin-right:auto;font-weight:600;cursor:pointer;border-radius:var(--radius-md)}.Backdrop .Picker .Cards .CardMonths .CardChangeYear .LabelYear:first-letter,.Backdrop .Picker .Cards .CardMonths .CardChangeYear .LabelMonth:first-letter,.Backdrop .Picker .Cards .CardMonths .CardChangeMonth .LabelYear:first-letter,.Backdrop .Picker .Cards .CardMonths .CardChangeMonth .LabelMonth:first-letter,.Backdrop .Picker .Cards .CardDates .CardChangeYear .LabelYear:first-letter,.Backdrop .Picker .Cards .CardDates .CardChangeYear .LabelMonth:first-letter,.Backdrop .Picker .Cards .CardDates .CardChangeMonth .LabelYear:first-letter,.Backdrop .Picker .Cards .CardDates .CardChangeMonth .LabelMonth:first-letter{text-transform:uppercase}.Backdrop .Picker .Cards .CardMonths .CardChangeYear .LabelYear:hover,.Backdrop .Picker .Cards .CardMonths .CardChangeYear .LabelMonth:hover,.Backdrop .Picker .Cards .CardMonths .CardChangeMonth .LabelYear:hover,.Backdrop .Picker .Cards .CardMonths .CardChangeMonth .LabelMonth:hover,.Backdrop .Picker .Cards .CardDates .CardChangeYear .LabelYear:hover,.Backdrop .Picker .Cards .CardDates .CardChangeYear .LabelMonth:hover,.Backdrop .Picker .Cards .CardDates .CardChangeMonth .LabelYear:hover,.Backdrop .Picker .Cards .CardDates .CardChangeMonth .LabelMonth:hover{background-color:var(--surface-2)}.Backdrop .Picker .Cards .CardMonths .CardChangeYear .Up,.Backdrop .Picker .Cards .CardMonths .CardChangeYear .Down,.Backdrop .Picker .Cards .CardMonths .CardChangeMonth .Up,.Backdrop .Picker .Cards .CardMonths .CardChangeMonth .Down,.Backdrop .Picker .Cards .CardDates .CardChangeYear .Up,.Backdrop .Picker .Cards .CardDates .CardChangeYear .Down,.Backdrop .Picker .Cards .CardDates .CardChangeMonth .Up,.Backdrop .Picker .Cards .CardDates .CardChangeMonth .Down{width:30px;height:30px;display:flex;justify-content:center;align-items:center;border-radius:var(--radius-md);cursor:pointer;font-size:.8rem}.Backdrop .Picker .Cards .CardMonths .CardChangeYear .Up lucide-icon .lucide-icon-svg,.Backdrop .Picker .Cards .CardMonths .CardChangeYear .Down lucide-icon .lucide-icon-svg,.Backdrop .Picker .Cards .CardMonths .CardChangeMonth .Up lucide-icon .lucide-icon-svg,.Backdrop .Picker .Cards .CardMonths .CardChangeMonth .Down lucide-icon .lucide-icon-svg,.Backdrop .Picker .Cards .CardDates .CardChangeYear .Up lucide-icon .lucide-icon-svg,.Backdrop .Picker .Cards .CardDates .CardChangeYear .Down lucide-icon .lucide-icon-svg,.Backdrop .Picker .Cards .CardDates .CardChangeMonth .Up lucide-icon .lucide-icon-svg,.Backdrop .Picker .Cards .CardDates .CardChangeMonth .Down lucide-icon .lucide-icon-svg{width:.8rem;height:.8rem}.Backdrop .Picker .Cards .CardMonths .CardChangeYear .Up:hover,.Backdrop .Picker .Cards .CardMonths .CardChangeYear .Down:hover,.Backdrop .Picker .Cards .CardMonths .CardChangeMonth .Up:hover,.Backdrop .Picker .Cards .CardMonths .CardChangeMonth .Down:hover,.Backdrop .Picker .Cards .CardDates .CardChangeYear .Up:hover,.Backdrop .Picker .Cards .CardDates .CardChangeYear .Down:hover,.Backdrop .Picker .Cards .CardDates .CardChangeMonth .Up:hover,.Backdrop .Picker .Cards .CardDates .CardChangeMonth .Down:hover{background-color:var(--surface-2)}.Backdrop .Picker .Cards .CardYears{position:absolute;top:0;left:0;z-index:10;width:100%;height:100%;background:var(--xu-on-fill)}.Backdrop .Picker .Cards .CardYears .years{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:35px;justify-items:center;align-items:center;width:100%;height:100%;overflow:hidden;overflow-y:auto}.Backdrop .Picker .Cards .CardYears .years .year{width:100%;height:100%;display:flex;justify-content:center;align-items:center;border-radius:var(--radius-md);text-transform:capitalize;padding:var(--spacing-xs) var(--spacing-md);border-radius:var(--radius-lg);cursor:pointer}.Backdrop .Picker .Cards .CardYears .years .year:hover{background-color:var(--surface-2)}.Backdrop .Picker .Cards .CardYears .years .selected{background-color:var(--primary);color:var(--xu-on-fill);font-weight:700}.Backdrop .Picker .Cards .CardYears .years .selected:hover{background-color:var(--primary)}.Backdrop .Picker .Cards .CardMonths{width:100%;height:100%;background:var(--xu-on-fill);overflow:hidden;display:flex;flex-direction:column}.Backdrop .Picker .Cards .CardMonths .months{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;justify-items:center;align-items:center;width:100%;height:100%;overflow:hidden;overflow-y:auto}.Backdrop .Picker .Cards .CardMonths .months .month{width:100%;height:100%;display:flex;justify-content:center;align-items:center;gap:5px;padding:var(--spacing-xs) var(--spacing-md);border-radius:var(--radius-lg);cursor:pointer}.Backdrop .Picker .Cards .CardMonths .months .month:hover{background-color:var(--surface-2)}.Backdrop .Picker .Cards .CardMonths .months .selected{background-color:var(--primary);color:var(--text-muted);font-weight:700}.Backdrop .Picker .Cards .CardMonths .months .selected:hover{background-color:var(--primary)}.Backdrop .Picker .Actions{display:flex;justify-content:flex-end;gap:var(--spacing-xs);margin-top:var(--spacing-md)}.Backdrop .Picker .Actions .Ok{padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-lg);color:var(--btn-primary-text);border-color:var(--btn-primary-border);background-color:var(--btn-primary-bg);cursor:pointer}.Backdrop .Picker .Actions .Ok:hover{color:var(--btn-primary-text-hover);border-color:var(--btn-primary-border-hover);background-color:var(--btn-primary-bg-hover)}.Backdrop .Picker .Actions .Ok:active{color:var(--btn-primary-text-active);border-color:var(--btn-primary-border-active);background-color:var(--btn-primary-bg-active)}.Backdrop .Picker .Actions .Ok:disabled{opacity:.6;cursor:not-allowed}.Backdrop .Picker .Actions .Clear{padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-lg);color:var(--btn-secondary-text);border-color:var(--btn-secondary-border);background-color:var(--btn-secondary-bg);cursor:pointer}.Backdrop .Picker .Actions .Clear:hover{color:var(--btn-secondary-text-hover);border-color:var(--btn-secondary-border-hover);background-color:var(--btn-secondary-bg-hover)}.Backdrop .Picker .Actions .Clear:active{color:var(--btn-secondary-text-active);border-color:var(--btn-secondary-border-active);background-color:var(--btn-secondary-bg-active)}.Backdrop .Picker .Actions .Clear:disabled{opacity:.6;cursor:not-allowed}.Backdrop .Picker .Actions .Cancel{padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-lg);color:var(--btn-cancel-text);border-color:var(--btn-cancel-border);background-color:var(--btn-cancel-bg);cursor:pointer}.Backdrop .Picker .Actions .Cancel:hover{color:var(--btn-cancel-text-hover);border-color:var(--btn-cancel-border-hover);background-color:var(--btn-cancel-bg-hover)}.Backdrop .Picker .Actions .Cancel:active{color:var(--btn-cancel-text-active);border-color:var(--btn-cancel-border-active);background-color:var(--btn-cancel-bg-active)}.Backdrop .Picker .Actions .Cancel:disabled{opacity:.6;cursor:not-allowed}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "component", type: LucideIconComponent, selector: "lucide-icon", inputs: ["name", "size", "spin", "filled"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: MonthPickerModalServiceComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'month-picker-modal-service', standalone: true, imports: [CommonModule, LucideIconComponent], template: "<ng-container *ngIf=\"vm$ | async as session\">\r\n  <div\r\n    class=\"Backdrop InputModalBackdrop month-picker-modal\"\r\n    (click)=\"session.handlers.toggleShowPicker($event)\"\r\n  >\r\n    <div class=\"Picker\" (click)=\"$event.stopPropagation()\">\r\n      <div class=\"Preview\" *ngIf=\"session.view.selectedValue\">\r\n        <span>{{ session.view.selectedDateExtended }}</span>\r\n      </div>\r\n\r\n      <div class=\"Cards\">\r\n        <div class=\"CardYears\" *ngIf=\"session.view.showYears\">\r\n          <div class=\"years Scroll\">\r\n            <div\r\n              *ngFor=\"let y of session.view.years\"\r\n              (click)=\"session.handlers.onSelectYear(y, $event)\"\r\n              class=\"year\"\r\n              [class.selected]=\"y === session.view.selectedYear\"\r\n            >\r\n              {{ y }}\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"CardMonths\">\r\n          <div class=\"CardChangeYear\">\r\n            <span\r\n              class=\"LabelYear\"\r\n              (click)=\"session.handlers.openYears($event)\"\r\n            >\r\n              {{ session.view.selectedYear || 'A\u00F1o' }}\r\n            </span>\r\n            <lucide-icon class=\"Up\" name=\"chevron-up\" (click)=\"session.handlers.onDecrementYear($event)\"></lucide-icon>\r\n            <lucide-icon class=\"Down\" name=\"chevron-down\" (click)=\"session.handlers.onIncrementYear($event)\"></lucide-icon>\r\n          </div>\r\n\r\n          <div class=\"months Scroll\">\r\n            <div\r\n              *ngFor=\"let m of session.view.months\"\r\n              (click)=\"session.handlers.onSelectMonth(m, $event)\"\r\n              class=\"month\"\r\n              [class.selected]=\"m === session.view.selectedMonth\"\r\n            >\r\n              <span class=\"NameMonth\">{{\r\n                session.view.MONTH_NAMES[m - 1]\r\n              }}</span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"Actions\">\r\n        <div class=\"Cancel\" (click)=\"session.handlers.onCancel()\">\r\n          Cancelar\r\n        </div>\r\n        <div class=\"Clear\" (click)=\"session.handlers.onClear()\">Limpiar</div>\r\n        <div class=\"Ok\" (click)=\"session.handlers.onAccept()\">Aceptar</div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex;flex-direction:column;width:100%;height:max-content;-webkit-user-select:auto;user-select:auto}:host .LabelRow{display:flex;align-items:center;justify-content:space-between;gap:6px;width:100%;margin-bottom:2px}:host .Label{color:var(--text-label);flex:1;min-width:0;cursor:pointer;padding:0 3px;margin:0;font-weight:400;-webkit-user-select:none;user-select:none}:host .Label .Opcional{color:var(--text-muted)}:host .Description{-webkit-user-select:none;user-select:none;font-size:.9rem;color:var(--text-base);font-weight:400;width:100%;cursor:pointer;padding:0 3px;margin:0 0 4px;overflow:hidden;word-break:break-all}:host .Entry{display:flex;width:100%;height:32px;justify-content:flex-start;align-items:center;border:solid 0 var(--input-border);border-radius:12px;cursor:pointer;overflow:hidden;background-color:var(--input-bg)}:host .Entry:hover{border:none;outline:solid 1px var(--input-hover-border)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--input-focus-border)}:host .Entry[class~=Error]{outline:solid 1px var(--input-border-error)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--input-border);padding:0 8px;color:var(--input-text);caret-color:var(--primary);text-align:start}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--input-placeholder)}:host .Entry.NotHover:hover{border:none;outline:none}:host .Backdrop{position:fixed;top:0;left:0;z-index:800;display:flex;justify-content:center;align-items:center;width:100%;height:100%;padding:12px;background:var(--overlay-scrim);overflow:hidden}@media (width <= 768px){:host .Backdrop{align-items:flex-start}}:host .Backdrop .Picker{display:flex;flex-direction:column;gap:5px;width:100%;max-width:600px;max-height:100%;margin:0 auto;background:var(--surface);border-radius:16px;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--shadow-color)}:host{display:contents}.Backdrop{position:fixed;top:0;left:0;z-index:10050;display:flex;justify-content:center;align-items:center;width:100%;height:100%;padding:12px;background:var(--overlay-scrim);overflow:hidden}@media (width <= 768px){.Backdrop{align-items:flex-start}}.Backdrop .Picker{max-width:400px}.Backdrop .Picker .Preview{background-color:var(--surface-2);border-radius:var(--radius-lg);padding:var(--spacing-sm) var(--spacing-sm);text-align:center;color:var(--text-primary);margin-bottom:var(--spacing-sm);font-size:var(--size-sm);font-weight:500}.Backdrop .Picker .Preview:first-letter{text-transform:uppercase}.Backdrop .Picker .Cards{position:relative;width:100%;height:100%}.Backdrop .Picker .Cards .CardMonths .CardChangeYear,.Backdrop .Picker .Cards .CardMonths .CardChangeMonth,.Backdrop .Picker .Cards .CardDates .CardChangeYear,.Backdrop .Picker .Cards .CardDates .CardChangeMonth{width:100%;height:30px;display:flex;align-items:center;margin-bottom:10px}.Backdrop .Picker .Cards .CardMonths .CardChangeYear .LabelYear,.Backdrop .Picker .Cards .CardMonths .CardChangeYear .LabelMonth,.Backdrop .Picker .Cards .CardMonths .CardChangeMonth .LabelYear,.Backdrop .Picker .Cards .CardMonths .CardChangeMonth .LabelMonth,.Backdrop .Picker .Cards .CardDates .CardChangeYear .LabelYear,.Backdrop .Picker .Cards .CardDates .CardChangeYear .LabelMonth,.Backdrop .Picker .Cards .CardDates .CardChangeMonth .LabelYear,.Backdrop .Picker .Cards .CardDates .CardChangeMonth .LabelMonth{height:30px;padding:0 10px;display:flex;align-items:center;margin-right:auto;font-weight:600;cursor:pointer;border-radius:var(--radius-md)}.Backdrop .Picker .Cards .CardMonths .CardChangeYear .LabelYear:first-letter,.Backdrop .Picker .Cards .CardMonths .CardChangeYear .LabelMonth:first-letter,.Backdrop .Picker .Cards .CardMonths .CardChangeMonth .LabelYear:first-letter,.Backdrop .Picker .Cards .CardMonths .CardChangeMonth .LabelMonth:first-letter,.Backdrop .Picker .Cards .CardDates .CardChangeYear .LabelYear:first-letter,.Backdrop .Picker .Cards .CardDates .CardChangeYear .LabelMonth:first-letter,.Backdrop .Picker .Cards .CardDates .CardChangeMonth .LabelYear:first-letter,.Backdrop .Picker .Cards .CardDates .CardChangeMonth .LabelMonth:first-letter{text-transform:uppercase}.Backdrop .Picker .Cards .CardMonths .CardChangeYear .LabelYear:hover,.Backdrop .Picker .Cards .CardMonths .CardChangeYear .LabelMonth:hover,.Backdrop .Picker .Cards .CardMonths .CardChangeMonth .LabelYear:hover,.Backdrop .Picker .Cards .CardMonths .CardChangeMonth .LabelMonth:hover,.Backdrop .Picker .Cards .CardDates .CardChangeYear .LabelYear:hover,.Backdrop .Picker .Cards .CardDates .CardChangeYear .LabelMonth:hover,.Backdrop .Picker .Cards .CardDates .CardChangeMonth .LabelYear:hover,.Backdrop .Picker .Cards .CardDates .CardChangeMonth .LabelMonth:hover{background-color:var(--surface-2)}.Backdrop .Picker .Cards .CardMonths .CardChangeYear .Up,.Backdrop .Picker .Cards .CardMonths .CardChangeYear .Down,.Backdrop .Picker .Cards .CardMonths .CardChangeMonth .Up,.Backdrop .Picker .Cards .CardMonths .CardChangeMonth .Down,.Backdrop .Picker .Cards .CardDates .CardChangeYear .Up,.Backdrop .Picker .Cards .CardDates .CardChangeYear .Down,.Backdrop .Picker .Cards .CardDates .CardChangeMonth .Up,.Backdrop .Picker .Cards .CardDates .CardChangeMonth .Down{width:30px;height:30px;display:flex;justify-content:center;align-items:center;border-radius:var(--radius-md);cursor:pointer;font-size:.8rem}.Backdrop .Picker .Cards .CardMonths .CardChangeYear .Up lucide-icon .lucide-icon-svg,.Backdrop .Picker .Cards .CardMonths .CardChangeYear .Down lucide-icon .lucide-icon-svg,.Backdrop .Picker .Cards .CardMonths .CardChangeMonth .Up lucide-icon .lucide-icon-svg,.Backdrop .Picker .Cards .CardMonths .CardChangeMonth .Down lucide-icon .lucide-icon-svg,.Backdrop .Picker .Cards .CardDates .CardChangeYear .Up lucide-icon .lucide-icon-svg,.Backdrop .Picker .Cards .CardDates .CardChangeYear .Down lucide-icon .lucide-icon-svg,.Backdrop .Picker .Cards .CardDates .CardChangeMonth .Up lucide-icon .lucide-icon-svg,.Backdrop .Picker .Cards .CardDates .CardChangeMonth .Down lucide-icon .lucide-icon-svg{width:.8rem;height:.8rem}.Backdrop .Picker .Cards .CardMonths .CardChangeYear .Up:hover,.Backdrop .Picker .Cards .CardMonths .CardChangeYear .Down:hover,.Backdrop .Picker .Cards .CardMonths .CardChangeMonth .Up:hover,.Backdrop .Picker .Cards .CardMonths .CardChangeMonth .Down:hover,.Backdrop .Picker .Cards .CardDates .CardChangeYear .Up:hover,.Backdrop .Picker .Cards .CardDates .CardChangeYear .Down:hover,.Backdrop .Picker .Cards .CardDates .CardChangeMonth .Up:hover,.Backdrop .Picker .Cards .CardDates .CardChangeMonth .Down:hover{background-color:var(--surface-2)}.Backdrop .Picker .Cards .CardYears{position:absolute;top:0;left:0;z-index:10;width:100%;height:100%;background:var(--xu-on-fill)}.Backdrop .Picker .Cards .CardYears .years{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:35px;justify-items:center;align-items:center;width:100%;height:100%;overflow:hidden;overflow-y:auto}.Backdrop .Picker .Cards .CardYears .years .year{width:100%;height:100%;display:flex;justify-content:center;align-items:center;border-radius:var(--radius-md);text-transform:capitalize;padding:var(--spacing-xs) var(--spacing-md);border-radius:var(--radius-lg);cursor:pointer}.Backdrop .Picker .Cards .CardYears .years .year:hover{background-color:var(--surface-2)}.Backdrop .Picker .Cards .CardYears .years .selected{background-color:var(--primary);color:var(--xu-on-fill);font-weight:700}.Backdrop .Picker .Cards .CardYears .years .selected:hover{background-color:var(--primary)}.Backdrop .Picker .Cards .CardMonths{width:100%;height:100%;background:var(--xu-on-fill);overflow:hidden;display:flex;flex-direction:column}.Backdrop .Picker .Cards .CardMonths .months{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;justify-items:center;align-items:center;width:100%;height:100%;overflow:hidden;overflow-y:auto}.Backdrop .Picker .Cards .CardMonths .months .month{width:100%;height:100%;display:flex;justify-content:center;align-items:center;gap:5px;padding:var(--spacing-xs) var(--spacing-md);border-radius:var(--radius-lg);cursor:pointer}.Backdrop .Picker .Cards .CardMonths .months .month:hover{background-color:var(--surface-2)}.Backdrop .Picker .Cards .CardMonths .months .selected{background-color:var(--primary);color:var(--text-muted);font-weight:700}.Backdrop .Picker .Cards .CardMonths .months .selected:hover{background-color:var(--primary)}.Backdrop .Picker .Actions{display:flex;justify-content:flex-end;gap:var(--spacing-xs);margin-top:var(--spacing-md)}.Backdrop .Picker .Actions .Ok{padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-lg);color:var(--btn-primary-text);border-color:var(--btn-primary-border);background-color:var(--btn-primary-bg);cursor:pointer}.Backdrop .Picker .Actions .Ok:hover{color:var(--btn-primary-text-hover);border-color:var(--btn-primary-border-hover);background-color:var(--btn-primary-bg-hover)}.Backdrop .Picker .Actions .Ok:active{color:var(--btn-primary-text-active);border-color:var(--btn-primary-border-active);background-color:var(--btn-primary-bg-active)}.Backdrop .Picker .Actions .Ok:disabled{opacity:.6;cursor:not-allowed}.Backdrop .Picker .Actions .Clear{padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-lg);color:var(--btn-secondary-text);border-color:var(--btn-secondary-border);background-color:var(--btn-secondary-bg);cursor:pointer}.Backdrop .Picker .Actions .Clear:hover{color:var(--btn-secondary-text-hover);border-color:var(--btn-secondary-border-hover);background-color:var(--btn-secondary-bg-hover)}.Backdrop .Picker .Actions .Clear:active{color:var(--btn-secondary-text-active);border-color:var(--btn-secondary-border-active);background-color:var(--btn-secondary-bg-active)}.Backdrop .Picker .Actions .Clear:disabled{opacity:.6;cursor:not-allowed}.Backdrop .Picker .Actions .Cancel{padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-lg);color:var(--btn-cancel-text);border-color:var(--btn-cancel-border);background-color:var(--btn-cancel-bg);cursor:pointer}.Backdrop .Picker .Actions .Cancel:hover{color:var(--btn-cancel-text-hover);border-color:var(--btn-cancel-border-hover);background-color:var(--btn-cancel-bg-hover)}.Backdrop .Picker .Actions .Cancel:active{color:var(--btn-cancel-text-active);border-color:var(--btn-cancel-border-active);background-color:var(--btn-cancel-bg-active)}.Backdrop .Picker .Actions .Cancel:disabled{opacity:.6;cursor:not-allowed}\n"] }]
+        }], ctorParameters: () => [{ type: MonthPickerModalService }, { type: i0.ChangeDetectorRef }] });
+
+// ============================================================================
+// IMPORTS
+// ============================================================================
+// ============================================================================
+// COMPONENT DECORATOR
+// ============================================================================
+class ColorPickerPanelComponent {
+    // ============================================================================
+    // DEPENDENCIES (Injected Services)
+    // ============================================================================
+    cdr = inject(ChangeDetectorRef);
+    elementRef = inject(ElementRef);
+    platformId = inject(PLATFORM_ID);
+    // ============================================================================
+    // VIEW CHILDREN (Referencias a elementos del DOM)
+    // ============================================================================
+    colorCanvas;
+    hueCanvas;
+    pickerContainer;
+    canvasContainer;
+    mode = 'hex';
+    /** Valor controlado desde el padre (hex o rgb según mode) */
+    textValue = '';
+    textValueChange = new EventEmitter();
+    // ============================================================================
+    // DISABLED STATE (Estado deshabilitado)
+    // ============================================================================
+    get hostDisabledClass() {
+        return this.isDisabled;
+    }
+    set disabled(value) {
+        this.isDisabled = value;
+        this.cdr.markForCheck();
+    }
+    // ============================================================================
+    // INTERNAL STATE (Estado interno del componente)
+    // ============================================================================
+    isDisabled = false;
+    selectedColor = null;
+    isDragging = false;
+    isDraggingHue = false;
+    isDraggingSaturation = false;
+    currentHex = '';
+    currentRgb = '';
+    /** Muestra el color elegido en el recuadro de vista previa (separado de HEX/RGB). */
+    get previewColor() {
+        return this.currentHex || '';
+    }
+    // Valores HSL para el color picker (estilo Chrome)
+    hue = 0; // 0-360
+    saturation = 100; // 0-100
+    lightness = 50; // 0-100
+    // Posición del puntero en el canvas de saturación/luminosidad
+    pointerX = 1; // 0-1 (relativo al canvas)
+    pointerY = 0.5; // 0-1 (relativo al canvas)
+    canvasContext = null;
+    hueCanvasContext = null;
+    // Referencias a los handlers para poder removerlos correctamente
+    documentMouseMoveHandler = (event) => this.handleDocumentMouseMove(event);
+    documentMouseUpHandler = (event) => this.handleDocumentMouseUp(event);
+    documentTouchMoveHandler = (event) => this.handleDocumentTouchMove(event);
+    documentTouchEndHandler = (event) => this.handleDocumentTouchEnd(event);
+    // ============================================================================
+    // DATA (Datos del componente)
+    // ============================================================================
+    colors = [
+        // Colores Primarios
+        { name: 'Rojo', hex: '#FF0000', rgb: 'rgb(255,0,0)' },
+        { name: 'Verde', hex: '#00FF00', rgb: 'rgb(0,255,0)' },
+        { name: 'Azul', hex: '#0000FF', rgb: 'rgb(0,0,255)' },
+        { name: 'Amarillo', hex: '#FFFF00', rgb: 'rgb(255,255,0)' },
+        { name: 'Cian', hex: '#00FFFF', rgb: 'rgb(0,255,255)' },
+        { name: 'Magenta', hex: '#FF00FF', rgb: 'rgb(255,0,255)' },
+        { name: 'Rosa Pastel', hex: '#FFD1DC', rgb: 'rgb(255,209,220)' },
+        { name: 'Azul Pastel', hex: '#B0E0E6', rgb: 'rgb(176,224,230)' },
+        { name: 'Verde Pastel', hex: '#98FB98', rgb: 'rgb(152,251,152)' },
+        { name: 'Amarillo Pastel', hex: '#FFFACD', rgb: 'rgb(255,250,205)' },
+        { name: 'Lavanda Pastel', hex: '#E6E6FA', rgb: 'rgb(230,230,250)' },
+        { name: 'Melocotón Pastel', hex: '#FFDAB9', rgb: 'rgb(255,218,185)' },
+    ];
+    ngOnChanges(changes) {
+        if (changes['textValue'] || changes['mode']) {
+            this.applyValueFromParent(this.textValue);
+        }
+    }
+    applyValueFromParent(value) {
+        const v = value ?? '';
+        if (v && this.isValidColor(v)) {
+            let rgb = null;
+            if (this.mode === 'hex' && v.startsWith('#')) {
+                this.currentHex = v;
+                rgb = this.hexToRgb(v);
+                if (rgb) {
+                    this.currentRgb = `rgb(${rgb.r},${rgb.g},${rgb.b})`;
+                }
+            }
+            else if (this.mode === 'rgb' && v.startsWith('rgb')) {
+                this.currentRgb = v;
+                const hex = this.rgbStringToHex(v);
+                if (hex) {
+                    this.currentHex = hex;
+                }
+                rgb = this.parseRgbString(v);
+            }
+            if (rgb) {
+                const hsl = this.rgbToHsl(rgb.r, rgb.g, rgb.b);
+                this.hue = hsl.h;
+                this.saturation = hsl.s * 100;
+                this.lightness = hsl.l * 100;
+                this.pointerX = hsl.s;
+                this.pointerY = 1 - hsl.l;
+                setTimeout(() => {
+                    this.drawSaturationCanvas();
+                    this.drawHueIndicator();
+                }, 0);
+            }
+        }
+        this.cdr.markForCheck();
+    }
+    // ============================================================================
+    // LIFECYCLE HOOKS (Hooks del ciclo de vida)
+    // ============================================================================
+    ngOnInit() {
+        this.colors.sort((a, b) => a.name.localeCompare(b.name));
+        this.applyValueFromParent(this.textValue);
+    }
+    ngAfterViewInit() {
+        if (!isPlatformBrowser(this.platformId))
+            return;
+        setTimeout(() => {
+            this.initHueCanvas();
+            this.initSaturationCanvas();
+        }, 0);
+        document.addEventListener('mousemove', this.documentMouseMoveHandler, true);
+        document.addEventListener('mouseup', this.documentMouseUpHandler, true);
+        document.addEventListener('touchmove', this.documentTouchMoveHandler, { passive: false, capture: true });
+        // Limpiar estados de arrastre
+        document.addEventListener('touchend', this.documentTouchEndHandler, { passive: false, capture: true });
+    }
+    ngOnDestroy() {
+        if (!isPlatformBrowser(this.platformId))
+            return;
+        document.removeEventListener('mousemove', this.documentMouseMoveHandler, true);
+        document.removeEventListener('mouseup', this.documentMouseUpHandler, true);
+        document.removeEventListener('touchmove', this.documentTouchMoveHandler, true);
+        document.removeEventListener('touchend', this.documentTouchEndHandler, true);
+        this.isDragging = false;
+        this.isDraggingSaturation = false;
+        this.isDraggingHue = false;
+    }
+    handleDocumentMouseMove(event) {
+        if (this.isDisabled)
+            return;
+        // Si se está arrastrando en el área de saturación/luminosidad
+        if (this.isDraggingSaturation) {
+            event.preventDefault();
+            event.stopPropagation();
+            this.updateSaturationFromEvent(event);
+            return;
+        }
+        // Si se está arrastrando en la barra de hue
+        if (this.isDraggingHue) {
+            event.preventDefault();
+            event.stopPropagation();
+            this.updateHueFromEvent(event);
+            return;
+        }
+    }
+    handleDocumentMouseUp(event) {
+        // Detener el arrastre de saturación/luminosidad
+        if (this.isDraggingSaturation) {
+            this.isDraggingSaturation = false;
+        }
+        // Detener el arrastre de hue
+        if (this.isDraggingHue) {
+            this.isDraggingHue = false;
+        }
+    }
+    handleDocumentTouchMove(event) {
+        if (this.isDisabled)
+            return;
+        const touch = event.touches[0];
+        if (!touch)
+            return;
+        // Convertir evento táctil a evento de mouse para reutilizar la lógica existente
+        const mouseEvent = this.touchToMouseEvent(touch, event);
+        // Si se está arrastrando en el área de saturación/luminosidad
+        if (this.isDraggingSaturation) {
+            event.preventDefault();
+            event.stopPropagation();
+            this.updateSaturationFromEvent(mouseEvent);
+            return;
+        }
+        // Si se está arrastrando en la barra de hue
+        if (this.isDraggingHue) {
+            event.preventDefault();
+            event.stopPropagation();
+            this.updateHueFromEvent(mouseEvent);
+            return;
+        }
+    }
+    handleDocumentTouchEnd(event) {
+        // Detener el arrastre de saturación/luminosidad
+        if (this.isDraggingSaturation) {
+            this.isDraggingSaturation = false;
+        }
+        // Detener el arrastre de hue
+        if (this.isDraggingHue) {
+            this.isDraggingHue = false;
+        }
+    }
+    touchToMouseEvent(touch, originalEvent) {
+        return {
+            clientX: touch.clientX,
+            clientY: touch.clientY,
+            preventDefault: () => originalEvent.preventDefault(),
+            stopPropagation: () => originalEvent.stopPropagation(),
+        };
+    }
+    // ============================================================================
+    // VALIDATION METHODS (Métodos de validación)
+    // ============================================================================
+    isValidColor(value) {
+        if (this.mode === 'hex') {
+            return /^#[0-9A-Fa-f]{6}$/.test(value);
+        }
+        if (this.mode === 'rgb') {
+            return /^rgb\(\s*\d{1,3}\s*,\s*\d{1,3}\s*,\s*\d{1,3}\s*\)$/.test(value);
+        }
+        return false;
+    }
+    // ============================================================================
+    // PICKER METHODS (Métodos del picker de colores)
+    // ============================================================================
+    initHueCanvas() {
+        if (!this.hueCanvas?.nativeElement) {
+            return;
+        }
+        const canvas = this.hueCanvas.nativeElement;
+        this.hueCanvasContext = canvas.getContext('2d', { willReadFrequently: true });
+        if (!this.hueCanvasContext) {
+            return;
+        }
+        const width = 30; // Ancho fijo de la barra
+        const height = canvas.clientHeight || 300;
+        canvas.width = width;
+        canvas.height = height;
+        const ctx = this.hueCanvasContext;
+        const imageData = ctx.createImageData(width, height);
+        const data = imageData.data;
+        // Dibujar gradiente vertical de hue (0-360°)
+        for (let y = 0; y < height; y++) {
+            const hue = (y / height) * 360; // 0 a 360
+            for (let x = 0; x < width; x++) {
+                const index = (y * width + x) * 4;
+                // Color con saturación y luminosidad al 100% para mostrar el color puro
+                const rgb = this.hslToRgb(hue / 360, 1, 0.5);
+                data[index] = rgb.r; // R
+                data[index + 1] = rgb.g; // G
+                data[index + 2] = rgb.b; // B
+                data[index + 3] = 255; // A
+            }
+        }
+        ctx.putImageData(imageData, 0, 0);
+    }
+    initSaturationCanvas() {
+        if (!this.colorCanvas?.nativeElement || !this.canvasContainer?.nativeElement) {
+            return;
+        }
+        const canvas = this.colorCanvas.nativeElement;
+        const container = this.canvasContainer.nativeElement;
+        this.canvasContext = canvas.getContext('2d', { willReadFrequently: true });
+        if (!this.canvasContext) {
+            return;
+        }
+        const rect = container.getBoundingClientRect();
+        const width = Math.floor(rect.width) || 300;
+        const height = Math.floor(rect.height) || 300;
+        canvas.style.width = '100%';
+        canvas.style.height = '100%';
+        canvas.width = width;
+        canvas.height = height;
+        this.drawSaturationCanvas();
+    }
+    drawSaturationCanvas() {
+        if (!this.canvasContext || !this.colorCanvas?.nativeElement) {
+            return;
+        }
+        const canvas = this.colorCanvas.nativeElement;
+        const width = canvas.width;
+        const height = canvas.height;
+        const ctx = this.canvasContext;
+        const imageData = ctx.createImageData(width, height);
+        const data = imageData.data;
+        const currentHue = this.hue / 360; // Convertir a 0-1
+        // Dibujar gradiente: X = saturación (0-1), Y = luminosidad (1-0)
+        for (let y = 0; y < height; y++) {
+            for (let x = 0; x < width; x++) {
+                const index = (y * width + x) * 4;
+                // Normalizar coordenadas
+                const saturation = x / width; // 0 a 1 (izquierda a derecha)
+                const lightness = 1 - (y / height); // 1 a 0 (arriba a abajo)
+                // Convertir HSL a RGB
+                const rgb = this.hslToRgb(currentHue, saturation, lightness);
+                data[index] = rgb.r; // R
+                data[index + 1] = rgb.g; // G
+                data[index + 2] = rgb.b; // B
+                data[index + 3] = 255; // A
+            }
+        }
+        ctx.putImageData(imageData, 0, 0);
+        // Dibujar el puntero
+        this.drawPointer();
+    }
+    drawPointer() {
+        if (!this.canvasContext || !this.colorCanvas?.nativeElement) {
+            return;
+        }
+        const canvas = this.colorCanvas.nativeElement;
+        const ctx = this.canvasContext;
+        const x = this.pointerX * canvas.width;
+        const y = this.pointerY * canvas.height;
+        // Asegurar que el puntero esté dentro de los límites
+        const clampedX = Math.max(0, Math.min(canvas.width, x));
+        const clampedY = Math.max(0, Math.min(canvas.height, y));
+        // Círculo exterior blanco
+        ctx.beginPath();
+        ctx.arc(clampedX, clampedY, 10, 0, 2 * Math.PI);
+        ctx.strokeStyle = '#fff';
+        ctx.lineWidth = 2;
+        ctx.stroke();
+        // Círculo interior negro
+        ctx.beginPath();
+        ctx.arc(clampedX, clampedY, 8, 0, 2 * Math.PI);
+        ctx.strokeStyle = '#000';
+        ctx.lineWidth = 1;
+        ctx.stroke();
+    }
+    drawHueIndicator() {
+        if (!this.hueCanvasContext || !this.hueCanvas?.nativeElement) {
+            return;
+        }
+        const canvas = this.hueCanvas.nativeElement;
+        const ctx = this.hueCanvasContext;
+        const y = (this.hue / 360) * canvas.height;
+        // Redibujar el canvas de hue
+        this.initHueCanvas();
+        // Dibujar indicador
+        ctx.beginPath();
+        ctx.moveTo(0, y);
+        ctx.lineTo(canvas.width, y);
+        ctx.strokeStyle = '#fff';
+        ctx.lineWidth = 2;
+        ctx.stroke();
+        ctx.beginPath();
+        ctx.moveTo(0, y - 1);
+        ctx.lineTo(canvas.width, y - 1);
+        ctx.strokeStyle = '#000';
+        ctx.lineWidth = 1;
+        ctx.stroke();
+    }
+    hslToRgb(h, s, l) {
+        let r, g, b;
+        if (s === 0) {
+            r = g = b = l; // Gris acromático
+        }
+        else {
+            const hue2rgb = (p, q, t) => {
+                if (t < 0)
+                    t += 1;
+                if (t > 1)
+                    t -= 1;
+                if (t < 1 / 6)
+                    return p + (q - p) * 6 * t;
+                if (t < 1 / 2)
+                    return q;
+                if (t < 2 / 3)
+                    return p + (q - p) * (2 / 3 - t) * 6;
+                return p;
+            };
+            const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+            const p = 2 * l - q;
+            r = hue2rgb(p, q, h + 1 / 3);
+            g = hue2rgb(p, q, h);
+            b = hue2rgb(p, q, h - 1 / 3);
+        }
+        return {
+            r: Math.round(r * 255),
+            g: Math.round(g * 255),
+            b: Math.round(b * 255),
+        };
+    }
+    onSaturationMouseDown(event) {
+        if (this.isDisabled || !this.canvasContext)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        this.isDraggingSaturation = true;
+        this.updateSaturationFromEvent(event);
+    }
+    onSaturationTouchStart(event) {
+        if (this.isDisabled || !this.canvasContext)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        const touch = event.touches[0];
+        if (!touch)
+            return;
+        this.isDraggingSaturation = true;
+        const mouseEvent = this.touchToMouseEvent(touch, event);
+        this.updateSaturationFromEvent(mouseEvent);
+    }
+    onSaturationMouseMove(event) {
+        if (this.isDisabled || !this.canvasContext)
+            return;
+        if (this.isDraggingSaturation) {
+            event.preventDefault();
+            event.stopPropagation(); // Evitar que el evento llegue al document listener
+            this.updateSaturationFromEvent(event);
+        }
+    }
+    onDocumentMouseMove(event) {
+        if (this.isDisabled)
+            return;
+        // Si se está arrastrando en el área de saturación/luminosidad
+        if (this.isDraggingSaturation) {
+            event.preventDefault();
+            event.stopPropagation();
+            this.updateSaturationFromEvent(event);
+            return;
+        }
+        // Si se está arrastrando en la barra de hue
+        if (this.isDraggingHue) {
+            event.preventDefault();
+            event.stopPropagation();
+            this.updateHueFromEvent(event);
+            return;
+        }
+    }
+    updateSaturationFromEvent(event) {
+        if (!this.colorCanvas?.nativeElement || !this.canvasContext)
+            return;
+        const canvas = this.colorCanvas.nativeElement;
+        const rect = canvas.getBoundingClientRect();
+        // Calcular posición relativa al canvas (puede ser negativa o mayor que el tamaño si está fuera)
+        let x = event.clientX - rect.left;
+        let y = event.clientY - rect.top;
+        // Clamp a los bordes del canvas (esto permite que funcione incluso si el mouse está fuera)
+        // Si x o y son negativos o mayores que el tamaño, los limitamos a los bordes
+        x = Math.max(0, Math.min(canvas.width, x));
+        y = Math.max(0, Math.min(canvas.height, y));
+        // Actualizar posiciones relativas (0-1) basadas en las coordenadas clampadas
+        const newPointerX = x / canvas.width;
+        const newPointerY = y / canvas.height;
+        // Solo actualizar si la posición cambió significativamente (optimización)
+        const threshold = 0.001;
+        if (Math.abs(newPointerX - this.pointerX) < threshold && Math.abs(newPointerY - this.pointerY) < threshold) {
+            return;
+        }
+        // Actualizar posiciones
+        this.pointerX = newPointerX;
+        this.pointerY = newPointerY;
+        // Actualizar valores HSL
+        this.saturation = this.pointerX * 100; // 0-100
+        this.lightness = (1 - this.pointerY) * 100; // 0-100
+        // Redibujar el canvas completo (incluyendo el puntero en la nueva posición)
+        // Esto asegura que el puntero anterior se limpie y el nuevo se dibuje correctamente
+        this.drawSaturationCanvas();
+        // Actualizar color y valores mostrados
+        this.updateColorFromHSL();
+    }
+    onHueMouseDown(event) {
+        if (this.isDisabled || !this.hueCanvasContext)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        this.isDraggingHue = true;
+        this.updateHueFromEvent(event);
+    }
+    onHueTouchStart(event) {
+        if (this.isDisabled || !this.hueCanvasContext)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        const touch = event.touches[0];
+        if (!touch)
+            return;
+        this.isDraggingHue = true;
+        const mouseEvent = this.touchToMouseEvent(touch, event);
+        this.updateHueFromEvent(mouseEvent);
+    }
+    onSaturationTouchMove(event) {
+        if (this.isDisabled || !this.canvasContext)
+            return;
+        if (this.isDraggingSaturation) {
+            event.preventDefault();
+            event.stopPropagation();
+            const touch = event.touches[0];
+            if (!touch)
+                return;
+            const mouseEvent = this.touchToMouseEvent(touch, event);
+            this.updateSaturationFromEvent(mouseEvent);
+        }
+    }
+    onHueTouchMove(event) {
+        if (this.isDisabled || !this.hueCanvasContext)
+            return;
+        if (this.isDraggingHue) {
+            event.preventDefault();
+            event.stopPropagation();
+            const touch = event.touches[0];
+            if (!touch)
+                return;
+            const mouseEvent = this.touchToMouseEvent(touch, event);
+            this.updateHueFromEvent(mouseEvent);
+        }
+    }
+    onHueMouseMove(event) {
+        if (this.isDisabled || !this.hueCanvasContext)
+            return;
+        if (this.isDraggingHue) {
+            event.preventDefault();
+            event.stopPropagation(); // Evitar que el evento llegue al document listener
+            this.updateHueFromEvent(event);
+        }
+    }
+    updateHueFromEvent(event) {
+        if (!this.hueCanvas?.nativeElement || !this.hueCanvasContext)
+            return;
+        const canvas = this.hueCanvas.nativeElement;
+        const rect = canvas.getBoundingClientRect();
+        // Calcular posición relativa al canvas (puede ser negativa o mayor que el tamaño si está fuera)
+        let y = event.clientY - rect.top;
+        // Clamp a los bordes del canvas (esto permite que funcione incluso si el mouse está fuera)
+        // Si y es negativa o mayor que la altura, la limitamos a los bordes
+        // Esto permite que el selector persiga al mouse hasta que vuelva a una posición válida
+        y = Math.max(0, Math.min(canvas.height, y));
+        // Actualizar hue (0-360) basado en la coordenada Y clampada
+        const newHue = (y / canvas.height) * 360;
+        // Solo redibujar si el hue cambió significativamente (optimización)
+        const threshold = 0.1;
+        if (Math.abs(newHue - this.hue) > threshold) {
+            this.hue = newHue;
+            // Redibujar el canvas de saturación con el nuevo hue
+            this.drawSaturationCanvas();
+            this.drawHueIndicator();
+            // Actualizar color
+            this.updateColorFromHSL();
+        }
+    }
+    updateColorFromHSL() {
+        const rgb = this.hslToRgb(this.hue / 360, this.saturation / 100, this.lightness / 100);
+        this.currentRgb = `rgb(${rgb.r},${rgb.g},${rgb.b})`;
+        this.currentHex = this.rgbToHex(rgb.r, rgb.g, rgb.b);
+        // Actualizar el valor según el modo seleccionado
+        const value = this.mode === 'hex' ? this.currentHex : this.currentRgb;
+        this.textValueChange.emit(value);
+        this.cdr.markForCheck();
+    }
+    onMouseUp(event) {
+        if (this.isDraggingSaturation) {
+            this.isDraggingSaturation = false;
+        }
+        if (this.isDraggingHue) {
+            this.isDraggingHue = false;
+        }
+    }
+    rgbToHex(r, g, b) {
+        return '#' + [r, g, b].map(x => {
+            const hex = x.toString(16);
+            return hex.length === 1 ? '0' + hex : hex;
+        }).join('');
+    }
+    hexToRgb(hex) {
+        const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+        return result
+            ? {
+                r: parseInt(result[1], 16),
+                g: parseInt(result[2], 16),
+                b: parseInt(result[3], 16),
+            }
+            : null;
+    }
+    rgbStringToHex(rgb) {
+        const result = /^rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/.exec(rgb);
+        if (!result)
+            return null;
+        const r = parseInt(result[1], 10);
+        const g = parseInt(result[2], 10);
+        const b = parseInt(result[3], 10);
+        // Validar que los valores estén en el rango correcto
+        if (r > 255 || g > 255 || b > 255)
+            return null;
+        return this.rgbToHex(r, g, b);
+    }
+    parseRgbString(rgb) {
+        const result = /^rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/.exec(rgb);
+        if (!result)
+            return null;
+        const r = parseInt(result[1], 10);
+        const g = parseInt(result[2], 10);
+        const b = parseInt(result[3], 10);
+        // Validar que los valores estén en el rango correcto
+        if (r > 255 || g > 255 || b > 255)
+            return null;
+        return { r, g, b };
+    }
+    rgbToHsl(r, g, b) {
+        r /= 255;
+        g /= 255;
+        b /= 255;
+        const max = Math.max(r, g, b);
+        const min = Math.min(r, g, b);
+        let h = 0;
+        let s = 0;
+        const l = (max + min) / 2;
+        if (max !== min) {
+            const d = max - min;
+            s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+            switch (max) {
+                case r:
+                    h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+                    break;
+                case g:
+                    h = ((b - r) / d + 2) / 6;
+                    break;
+                case b:
+                    h = ((r - g) / d + 4) / 6;
+                    break;
+            }
+        }
+        return {
+            h: h * 360, // 0-360
+            s: s, // 0-1
+            l: l, // 0-1
+        };
+    }
+    selectColor(color) {
+        const value = this.mode === 'hex' ? color.hex : color.rgb;
+        this.currentHex = color.hex;
+        this.currentRgb = color.rgb;
+        // Convertir a HSL y actualizar los valores
+        const rgb = this.hexToRgb(color.hex);
+        if (rgb) {
+            const hsl = this.rgbToHsl(rgb.r, rgb.g, rgb.b);
+            this.hue = hsl.h;
+            this.saturation = hsl.s * 100;
+            this.lightness = hsl.l * 100;
+            // Actualizar posición del puntero
+            this.pointerX = hsl.s;
+            this.pointerY = 1 - hsl.l;
+            setTimeout(() => {
+                this.drawSaturationCanvas();
+                this.drawHueIndicator();
+            }, 0);
+        }
+        this.selectedColor = color;
+        this.textValueChange.emit(value);
+        this.cdr.markForCheck();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: ColorPickerPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: ColorPickerPanelComponent, isStandalone: true, selector: "color-picker-panel", inputs: { mode: "mode", textValue: "textValue", disabled: "disabled" }, outputs: { textValueChange: "textValueChange" }, host: { listeners: { "document:mousemove": "onDocumentMouseMove($event)", "document:mouseup": "onMouseUp($event)" }, properties: { "class.IsDisable": "this.hostDisabledClass" } }, viewQueries: [{ propertyName: "colorCanvas", first: true, predicate: ["colorCanvas"], descendants: true }, { propertyName: "hueCanvas", first: true, predicate: ["hueCanvas"], descendants: true }, { propertyName: "pickerContainer", first: true, predicate: ["pickerContainer"], descendants: true }, { propertyName: "canvasContainer", first: true, predicate: ["canvasContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"Picker\" #pickerContainer (click)=\"$event.stopPropagation()\">\n  <div class=\"ColorPickerMain\">\n    <div class=\"CanvasContainer\" #canvasContainer>\n      <canvas\n        #colorCanvas\n        class=\"ColorCanvas\"\n        (mousedown)=\"onSaturationMouseDown($event)\"\n        (mousemove)=\"onSaturationMouseMove($event)\"\n        (touchstart)=\"onSaturationTouchStart($event)\"\n        (touchmove)=\"onSaturationTouchMove($event)\"\n      ></canvas>\n    </div>\n\n    <div class=\"HueContainer\">\n      <canvas\n        #hueCanvas\n        class=\"HueCanvas\"\n        (mousedown)=\"onHueMouseDown($event)\"\n        (mousemove)=\"onHueMouseMove($event)\"\n        (touchstart)=\"onHueTouchStart($event)\"\n        (touchmove)=\"onHueTouchMove($event)\"\n      ></canvas>\n    </div>\n  </div>\n\n  <div class=\"ColorMeta\">\n    <div\n      class=\"ColorPreview\"\n      [style.background-color]=\"previewColor\"\n      aria-hidden=\"true\"\n    ></div>\n    <div class=\"ColorValues\">\n      <div class=\"ColorValueRow\">\n        <span class=\"Label\">HEX</span>\n        <span class=\"Value\">{{ currentHex || '\u2014' }}</span>\n      </div>\n      <div class=\"ColorValueRow\">\n        <span class=\"Label\">RGB</span>\n        <span class=\"Value\">{{ currentRgb || '\u2014' }}</span>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"SwatchesContainer\">\n    <div\n      class=\"Swatch\"\n      *ngFor=\"let color of colors\"\n      [style.background]=\"mode === 'hex' ? color.hex : color.rgb\"\n      (click)=\"selectColor(color)\"\n      [title]=\"color.name\"\n    ></div>\n  </div>\n</div>\n", styles: [":host{display:block;width:100%}:host .Picker{display:flex;flex-direction:column;gap:var(--spacing-md);overflow-y:auto}:host .Picker .ColorPickerMain{display:flex;gap:var(--spacing-md);align-items:stretch;width:100%;min-height:200px;max-height:200px}:host .Picker .ColorPickerMain .CanvasContainer{position:relative;flex:1;aspect-ratio:1;border-radius:var(--radius-lg);overflow:hidden;cursor:crosshair}:host .Picker .ColorPickerMain .CanvasContainer .ColorCanvas{width:100%;height:100%;display:block;touch-action:none}:host .Picker .ColorPickerMain .HueContainer{position:relative;width:30px;border-radius:var(--radius-lg);overflow:hidden;cursor:crosshair}:host .Picker .ColorPickerMain .HueContainer .HueCanvas{width:100%;height:100%;display:block;touch-action:none}:host .Picker .ColorMeta{display:flex;gap:var(--spacing-md);align-items:center;padding:var(--spacing-sm);background:var(--surface-2);border:1px solid var(--input-border);border-radius:var(--radius-md)}:host .Picker .ColorMeta .ColorPreview{flex-shrink:0;width:52px;height:52px;border-radius:var(--radius-md);border:1px solid var(--input-border);background-color:var(--input-concats-bg);box-shadow:inset 0 0 0 1px var(--border)}:host .Picker .ColorMeta .ColorValues{flex:1;display:flex;flex-direction:column;gap:var(--spacing-xs);min-width:0}:host .Picker .ColorMeta .ColorValues .ColorValueRow{display:flex;align-items:center;gap:var(--spacing-sm)}:host .Picker .ColorMeta .ColorValues .ColorValueRow .Label{flex-shrink:0;min-width:2.25rem;font-size:.7rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted)}:host .Picker .ColorMeta .ColorValues .ColorValueRow .Value{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.875rem;font-weight:500;color:var(--text-base);word-break:break-all}:host .Picker .SwatchesContainer{display:grid;grid-template-columns:repeat(auto-fill,minmax(20px,1fr));gap:2px;max-height:150px;overflow-y:auto;padding:2px}:host .Picker .SwatchesContainer .Swatch{width:100%;aspect-ratio:1;cursor:pointer;border-radius:var(--radius-sm);border:2px solid transparent;transition:all .2s ease}:host .Picker .SwatchesContainer .Swatch:hover{border-color:var(--primary);transform:scale(1.1);box-shadow:0 2px 8px var(--overlay-scrim)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: ColorPickerPanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'color-picker-panel', standalone: true, imports: [CommonModule], template: "<div class=\"Picker\" #pickerContainer (click)=\"$event.stopPropagation()\">\n  <div class=\"ColorPickerMain\">\n    <div class=\"CanvasContainer\" #canvasContainer>\n      <canvas\n        #colorCanvas\n        class=\"ColorCanvas\"\n        (mousedown)=\"onSaturationMouseDown($event)\"\n        (mousemove)=\"onSaturationMouseMove($event)\"\n        (touchstart)=\"onSaturationTouchStart($event)\"\n        (touchmove)=\"onSaturationTouchMove($event)\"\n      ></canvas>\n    </div>\n\n    <div class=\"HueContainer\">\n      <canvas\n        #hueCanvas\n        class=\"HueCanvas\"\n        (mousedown)=\"onHueMouseDown($event)\"\n        (mousemove)=\"onHueMouseMove($event)\"\n        (touchstart)=\"onHueTouchStart($event)\"\n        (touchmove)=\"onHueTouchMove($event)\"\n      ></canvas>\n    </div>\n  </div>\n\n  <div class=\"ColorMeta\">\n    <div\n      class=\"ColorPreview\"\n      [style.background-color]=\"previewColor\"\n      aria-hidden=\"true\"\n    ></div>\n    <div class=\"ColorValues\">\n      <div class=\"ColorValueRow\">\n        <span class=\"Label\">HEX</span>\n        <span class=\"Value\">{{ currentHex || '\u2014' }}</span>\n      </div>\n      <div class=\"ColorValueRow\">\n        <span class=\"Label\">RGB</span>\n        <span class=\"Value\">{{ currentRgb || '\u2014' }}</span>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"SwatchesContainer\">\n    <div\n      class=\"Swatch\"\n      *ngFor=\"let color of colors\"\n      [style.background]=\"mode === 'hex' ? color.hex : color.rgb\"\n      (click)=\"selectColor(color)\"\n      [title]=\"color.name\"\n    ></div>\n  </div>\n</div>\n", styles: [":host{display:block;width:100%}:host .Picker{display:flex;flex-direction:column;gap:var(--spacing-md);overflow-y:auto}:host .Picker .ColorPickerMain{display:flex;gap:var(--spacing-md);align-items:stretch;width:100%;min-height:200px;max-height:200px}:host .Picker .ColorPickerMain .CanvasContainer{position:relative;flex:1;aspect-ratio:1;border-radius:var(--radius-lg);overflow:hidden;cursor:crosshair}:host .Picker .ColorPickerMain .CanvasContainer .ColorCanvas{width:100%;height:100%;display:block;touch-action:none}:host .Picker .ColorPickerMain .HueContainer{position:relative;width:30px;border-radius:var(--radius-lg);overflow:hidden;cursor:crosshair}:host .Picker .ColorPickerMain .HueContainer .HueCanvas{width:100%;height:100%;display:block;touch-action:none}:host .Picker .ColorMeta{display:flex;gap:var(--spacing-md);align-items:center;padding:var(--spacing-sm);background:var(--surface-2);border:1px solid var(--input-border);border-radius:var(--radius-md)}:host .Picker .ColorMeta .ColorPreview{flex-shrink:0;width:52px;height:52px;border-radius:var(--radius-md);border:1px solid var(--input-border);background-color:var(--input-concats-bg);box-shadow:inset 0 0 0 1px var(--border)}:host .Picker .ColorMeta .ColorValues{flex:1;display:flex;flex-direction:column;gap:var(--spacing-xs);min-width:0}:host .Picker .ColorMeta .ColorValues .ColorValueRow{display:flex;align-items:center;gap:var(--spacing-sm)}:host .Picker .ColorMeta .ColorValues .ColorValueRow .Label{flex-shrink:0;min-width:2.25rem;font-size:.7rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted)}:host .Picker .ColorMeta .ColorValues .ColorValueRow .Value{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.875rem;font-weight:500;color:var(--text-base);word-break:break-all}:host .Picker .SwatchesContainer{display:grid;grid-template-columns:repeat(auto-fill,minmax(20px,1fr));gap:2px;max-height:150px;overflow-y:auto;padding:2px}:host .Picker .SwatchesContainer .Swatch{width:100%;aspect-ratio:1;cursor:pointer;border-radius:var(--radius-sm);border:2px solid transparent;transition:all .2s ease}:host .Picker .SwatchesContainer .Swatch:hover{border-color:var(--primary);transform:scale(1.1);box-shadow:0 2px 8px var(--overlay-scrim)}\n"] }]
+        }], propDecorators: { colorCanvas: [{
+                type: ViewChild,
+                args: ['colorCanvas', { static: false }]
+            }], hueCanvas: [{
+                type: ViewChild,
+                args: ['hueCanvas', { static: false }]
+            }], pickerContainer: [{
+                type: ViewChild,
+                args: ['pickerContainer', { static: false }]
+            }], canvasContainer: [{
+                type: ViewChild,
+                args: ['canvasContainer', { static: false }]
+            }], mode: [{
+                type: Input
+            }], textValue: [{
+                type: Input
+            }], textValueChange: [{
+                type: Output
+            }], hostDisabledClass: [{
+                type: HostBinding,
+                args: ['class.IsDisable']
+            }], disabled: [{
+                type: Input
+            }], onDocumentMouseMove: [{
+                type: HostListener,
+                args: ['document:mousemove', ['$event']]
+            }], onMouseUp: [{
+                type: HostListener,
+                args: ['document:mouseup', ['$event']]
+            }] } });
+
+class ColorPickerModalServiceComponent {
+    colorPickerModal;
+    cdr;
+    vm$;
+    sub;
+    constructor(colorPickerModal, cdr) {
+        this.colorPickerModal = colorPickerModal;
+        this.cdr = cdr;
+        this.vm$ = this.colorPickerModal.state$;
+    }
+    ngOnInit() {
+        this.sub = this.colorPickerModal.state$.subscribe(() => this.cdr.markForCheck());
+    }
+    ngOnDestroy() {
+        this.sub?.unsubscribe();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: ColorPickerModalServiceComponent, deps: [{ token: ColorPickerModalService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: ColorPickerModalServiceComponent, isStandalone: true, selector: "color-picker-modal-service", ngImport: i0, template: "<ng-container *ngIf=\"vm$ | async as session\">\r\n  <div class=\"Backdrop InputModalBackdrop color-picker-modal\">\r\n    <div class=\"Picker\" (click)=\"$event.stopPropagation()\">\r\n      <color-picker-panel\r\n        [mode]=\"session.view.mode\"\r\n        [textValue]=\"session.view.textValue\"\r\n        [disabled]=\"false\"\r\n        (textValueChange)=\"session.handlers.onTextValueChange($event)\"\r\n      />\r\n      <div class=\"Actions\">\r\n        <button type=\"button\" class=\"Cancel\" (click)=\"session.handlers.onCancel()\">\r\n          Cancelar\r\n        </button>\r\n        <button type=\"button\" class=\"Ok\" (click)=\"session.handlers.onAccept()\">\r\n          Aceptar\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex;flex-direction:column;width:100%;height:max-content;-webkit-user-select:auto;user-select:auto}:host .LabelRow{display:flex;align-items:center;justify-content:space-between;gap:6px;width:100%;margin-bottom:2px}:host .Label{color:var(--text-label);flex:1;min-width:0;cursor:pointer;padding:0 3px;margin:0;font-weight:400;-webkit-user-select:none;user-select:none}:host .Label .Opcional{color:var(--text-muted)}:host .Description{-webkit-user-select:none;user-select:none;font-size:.9rem;color:var(--text-base);font-weight:400;width:100%;cursor:pointer;padding:0 3px;margin:0 0 4px;overflow:hidden;word-break:break-all}:host .Entry{display:flex;width:100%;height:32px;justify-content:flex-start;align-items:center;border:solid 0 var(--input-border);border-radius:12px;cursor:pointer;overflow:hidden;background-color:var(--input-bg)}:host .Entry:hover{border:none;outline:solid 1px var(--input-hover-border)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--input-focus-border)}:host .Entry[class~=Error]{outline:solid 1px var(--input-border-error)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--input-border);padding:0 8px;color:var(--input-text);caret-color:var(--primary);text-align:start}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--input-placeholder)}:host .Entry.NotHover:hover{border:none;outline:none}:host .Backdrop{position:fixed;top:0;left:0;z-index:800;display:flex;justify-content:center;align-items:center;width:100%;height:100%;padding:12px;background:var(--overlay-scrim);overflow:hidden}@media (width <= 768px){:host .Backdrop{align-items:flex-start}}:host .Backdrop .Picker{display:flex;flex-direction:column;gap:5px;width:100%;max-width:600px;max-height:100%;margin:0 auto;background:var(--surface);border-radius:16px;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--shadow-color)}:host{display:contents}.Backdrop{position:fixed;top:0;left:0;z-index:10050;display:flex;justify-content:center;align-items:center;width:100%;height:100%;padding:12px;background:var(--overlay-scrim);overflow:hidden}@media (width <= 768px){.Backdrop{align-items:flex-start}}.Backdrop .Picker{display:flex;flex-direction:column;width:100%;max-width:400px;margin:0 auto;background:var(--surface);border-radius:var(--radius-xl);padding:12px;box-shadow:0 0 8px var(--shadow-color);max-height:calc(100vh - 24px);overflow:hidden}.Backdrop .Picker color-picker-panel{flex:1;min-height:0;overflow-y:auto}.Backdrop .Picker .Actions{display:flex;justify-content:flex-end;gap:var(--spacing-xs);margin-top:var(--spacing-md);padding-top:var(--spacing-md);border-top:1px solid var(--border);flex-shrink:0}.Backdrop .Picker .Actions button{border:none;font:inherit}.Backdrop .Picker .Actions .Ok{padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-lg);color:var(--btn-primary-text);border-color:var(--btn-primary-border);background-color:var(--btn-primary-bg);cursor:pointer}.Backdrop .Picker .Actions .Ok:hover{color:var(--btn-primary-text-hover);border-color:var(--btn-primary-border-hover);background-color:var(--btn-primary-bg-hover)}.Backdrop .Picker .Actions .Ok:active{color:var(--btn-primary-text-active);border-color:var(--btn-primary-border-active);background-color:var(--btn-primary-bg-active)}.Backdrop .Picker .Actions .Ok:disabled{opacity:.6;cursor:not-allowed}.Backdrop .Picker .Actions .Cancel{padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-lg);color:var(--btn-cancel-text);border-color:var(--btn-cancel-border);background-color:var(--btn-cancel-bg);cursor:pointer}.Backdrop .Picker .Actions .Cancel:hover{color:var(--btn-cancel-text-hover);border-color:var(--btn-cancel-border-hover);background-color:var(--btn-cancel-bg-hover)}.Backdrop .Picker .Actions .Cancel:active{color:var(--btn-cancel-text-active);border-color:var(--btn-cancel-border-active);background-color:var(--btn-cancel-bg-active)}.Backdrop .Picker .Actions .Cancel:disabled{opacity:.6;cursor:not-allowed}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "component", type: ColorPickerPanelComponent, selector: "color-picker-panel", inputs: ["mode", "textValue", "disabled"], outputs: ["textValueChange"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: ColorPickerModalServiceComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'color-picker-modal-service', standalone: true, imports: [CommonModule, ColorPickerPanelComponent], template: "<ng-container *ngIf=\"vm$ | async as session\">\r\n  <div class=\"Backdrop InputModalBackdrop color-picker-modal\">\r\n    <div class=\"Picker\" (click)=\"$event.stopPropagation()\">\r\n      <color-picker-panel\r\n        [mode]=\"session.view.mode\"\r\n        [textValue]=\"session.view.textValue\"\r\n        [disabled]=\"false\"\r\n        (textValueChange)=\"session.handlers.onTextValueChange($event)\"\r\n      />\r\n      <div class=\"Actions\">\r\n        <button type=\"button\" class=\"Cancel\" (click)=\"session.handlers.onCancel()\">\r\n          Cancelar\r\n        </button>\r\n        <button type=\"button\" class=\"Ok\" (click)=\"session.handlers.onAccept()\">\r\n          Aceptar\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex;flex-direction:column;width:100%;height:max-content;-webkit-user-select:auto;user-select:auto}:host .LabelRow{display:flex;align-items:center;justify-content:space-between;gap:6px;width:100%;margin-bottom:2px}:host .Label{color:var(--text-label);flex:1;min-width:0;cursor:pointer;padding:0 3px;margin:0;font-weight:400;-webkit-user-select:none;user-select:none}:host .Label .Opcional{color:var(--text-muted)}:host .Description{-webkit-user-select:none;user-select:none;font-size:.9rem;color:var(--text-base);font-weight:400;width:100%;cursor:pointer;padding:0 3px;margin:0 0 4px;overflow:hidden;word-break:break-all}:host .Entry{display:flex;width:100%;height:32px;justify-content:flex-start;align-items:center;border:solid 0 var(--input-border);border-radius:12px;cursor:pointer;overflow:hidden;background-color:var(--input-bg)}:host .Entry:hover{border:none;outline:solid 1px var(--input-hover-border)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--input-focus-border)}:host .Entry[class~=Error]{outline:solid 1px var(--input-border-error)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--input-border);padding:0 8px;color:var(--input-text);caret-color:var(--primary);text-align:start}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--input-placeholder)}:host .Entry.NotHover:hover{border:none;outline:none}:host .Backdrop{position:fixed;top:0;left:0;z-index:800;display:flex;justify-content:center;align-items:center;width:100%;height:100%;padding:12px;background:var(--overlay-scrim);overflow:hidden}@media (width <= 768px){:host .Backdrop{align-items:flex-start}}:host .Backdrop .Picker{display:flex;flex-direction:column;gap:5px;width:100%;max-width:600px;max-height:100%;margin:0 auto;background:var(--surface);border-radius:16px;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--shadow-color)}:host{display:contents}.Backdrop{position:fixed;top:0;left:0;z-index:10050;display:flex;justify-content:center;align-items:center;width:100%;height:100%;padding:12px;background:var(--overlay-scrim);overflow:hidden}@media (width <= 768px){.Backdrop{align-items:flex-start}}.Backdrop .Picker{display:flex;flex-direction:column;width:100%;max-width:400px;margin:0 auto;background:var(--surface);border-radius:var(--radius-xl);padding:12px;box-shadow:0 0 8px var(--shadow-color);max-height:calc(100vh - 24px);overflow:hidden}.Backdrop .Picker color-picker-panel{flex:1;min-height:0;overflow-y:auto}.Backdrop .Picker .Actions{display:flex;justify-content:flex-end;gap:var(--spacing-xs);margin-top:var(--spacing-md);padding-top:var(--spacing-md);border-top:1px solid var(--border);flex-shrink:0}.Backdrop .Picker .Actions button{border:none;font:inherit}.Backdrop .Picker .Actions .Ok{padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-lg);color:var(--btn-primary-text);border-color:var(--btn-primary-border);background-color:var(--btn-primary-bg);cursor:pointer}.Backdrop .Picker .Actions .Ok:hover{color:var(--btn-primary-text-hover);border-color:var(--btn-primary-border-hover);background-color:var(--btn-primary-bg-hover)}.Backdrop .Picker .Actions .Ok:active{color:var(--btn-primary-text-active);border-color:var(--btn-primary-border-active);background-color:var(--btn-primary-bg-active)}.Backdrop .Picker .Actions .Ok:disabled{opacity:.6;cursor:not-allowed}.Backdrop .Picker .Actions .Cancel{padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-lg);color:var(--btn-cancel-text);border-color:var(--btn-cancel-border);background-color:var(--btn-cancel-bg);cursor:pointer}.Backdrop .Picker .Actions .Cancel:hover{color:var(--btn-cancel-text-hover);border-color:var(--btn-cancel-border-hover);background-color:var(--btn-cancel-bg-hover)}.Backdrop .Picker .Actions .Cancel:active{color:var(--btn-cancel-text-active);border-color:var(--btn-cancel-border-active);background-color:var(--btn-cancel-bg-active)}.Backdrop .Picker .Actions .Cancel:disabled{opacity:.6;cursor:not-allowed}\n"] }]
+        }], ctorParameters: () => [{ type: ColorPickerModalService }, { type: i0.ChangeDetectorRef }] });
+
+/**
+ * Shells globales de modales ligados a inputs (montados en `app-root`).
+ * Un solo punto de entrada para importar en `AppComponent` u otros.
+ */
+/** Lista para `imports: [..., ...INPUT_MODAL_SERVICE_COMPONENTS]` en el decorador. */
+const INPUT_MODAL_SERVICE_COMPONENTS = [
+    OnlySelectModalServiceComponent,
+    MultiselectComboboxModalServiceComponent,
+    SearchEntryModalServiceComponent,
+    PhoneEntryModalServiceComponent,
+    DatePickerModalServiceComponent,
+    TimePickerModalServiceComponent,
+    DatetimePickerModalServiceComponent,
+    MonthPickerModalServiceComponent,
+    ColorPickerModalServiceComponent,
+];
+
+/**
+ * Monta en un solo lugar los shells globales de modales de inputs (equivalente a los tags sueltos en `app-root`).
+ */
+class InputModalServicesComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: InputModalServicesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.11", type: InputModalServicesComponent, isStandalone: true, selector: "input-modal-services", ngImport: i0, template: "<only-select-modal-service></only-select-modal-service>\r\n<multiselect-combobox-modal-service></multiselect-combobox-modal-service>\r\n<search-entry-modal-service></search-entry-modal-service>\r\n<phone-entry-modal-service></phone-entry-modal-service>\r\n<date-picker-modal-service></date-picker-modal-service>\r\n<time-picker-modal-service></time-picker-modal-service>\r\n<datetime-picker-modal-service></datetime-picker-modal-service>\r\n<month-picker-modal-service></month-picker-modal-service>\r\n<color-picker-modal-service></color-picker-modal-service>\r\n", dependencies: [{ kind: "component", type: OnlySelectModalServiceComponent, selector: "only-select-modal-service" }, { kind: "component", type: MultiselectComboboxModalServiceComponent, selector: "multiselect-combobox-modal-service" }, { kind: "component", type: SearchEntryModalServiceComponent, selector: "search-entry-modal-service" }, { kind: "component", type: PhoneEntryModalServiceComponent, selector: "phone-entry-modal-service" }, { kind: "component", type: DatePickerModalServiceComponent, selector: "date-picker-modal-service" }, { kind: "component", type: TimePickerModalServiceComponent, selector: "time-picker-modal-service" }, { kind: "component", type: DatetimePickerModalServiceComponent, selector: "datetime-picker-modal-service" }, { kind: "component", type: MonthPickerModalServiceComponent, selector: "month-picker-modal-service" }, { kind: "component", type: ColorPickerModalServiceComponent, selector: "color-picker-modal-service" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: InputModalServicesComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'input-modal-services', standalone: true, imports: [...INPUT_MODAL_SERVICE_COMPONENTS], changeDetection: ChangeDetectionStrategy.OnPush, template: "<only-select-modal-service></only-select-modal-service>\r\n<multiselect-combobox-modal-service></multiselect-combobox-modal-service>\r\n<search-entry-modal-service></search-entry-modal-service>\r\n<phone-entry-modal-service></phone-entry-modal-service>\r\n<date-picker-modal-service></date-picker-modal-service>\r\n<time-picker-modal-service></time-picker-modal-service>\r\n<datetime-picker-modal-service></datetime-picker-modal-service>\r\n<month-picker-modal-service></month-picker-modal-service>\r\n<color-picker-modal-service></color-picker-modal-service>\r\n" }]
+        }] });
+
 /**
  * Barrel export para todos los componentes de inputs.
  *
@@ -11117,7 +12063,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
  * import { ALL_INPUT_COMPONENTS } from '@shared/components/inputs';
  * imports: [ALL_INPUT_COMPONENTS]
  */
-// Texto y texto largo
 /**
  * Array con todos los componentes de inputs completamente standalone.
  *
@@ -11328,5 +12273,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ALL_INPUT_COMPONENTS, BooleanEntryComponent, ColorPickerComponent, ContextMenuService, ContextMenuServiceComponent, CounterEntryComponent, DatePickerComponent, DatetimePickerComponent, DecimalEntryComponent, DragScrollDirective, EmailEntryComponent, FieldHelpTooltipComponent, FileSizePipe, IntegerEntryComponent, LucideIconComponent, MediaEntryComponent, MonthPickerComponent, MultichoiceEntryComponent, MultiselectComboboxComponent, OnlySelectComponent, OnlychoiceEntryComponent, OtpEntryComponent, PasswordEntryComponent, PhoneEntryComponent, PriceEntryComponent, RangeEntryComponent, RatingEntryComponent, RichTextEntryComponent, SearchEntryComponent, SignatureEntryComponent, SliderEntryComponent, SwitchEntryComponent, TagsEntryComponent, TextAreaEntryComponent, TextEntryComponent, TimePickerComponent, UrlEntryComponent, XOSUE_UTILS_INPUTS_CONFIG, XOSUE_UTILS_MEDIA_PREVIEW, XOSUE_UTILS_MEDIA_VIEWER, createBackendMediaImageUrlState, provideXosueUtilsInputs, provideXosueUtilsMedia };
+export { ALL_INPUT_COMPONENTS, BooleanEntryComponent, ColorPickerComponent, ColorPickerModalServiceComponent, ContextMenuService, ContextMenuServiceComponent, CounterEntryComponent, DatePickerComponent, DatePickerModalServiceComponent, DatetimePickerComponent, DatetimePickerModalServiceComponent, DecimalEntryComponent, DragScrollDirective, EmailEntryComponent, FieldHelpTooltipComponent, FileSizePipe, INPUT_MODAL_SERVICE_COMPONENTS, InputModalServicesComponent, IntegerEntryComponent, LucideIconComponent, MediaEntryComponent, MonthPickerComponent, MonthPickerModalServiceComponent, MultichoiceEntryComponent, MultiselectComboboxComponent, MultiselectComboboxModalServiceComponent, OnlySelectComponent, OnlySelectModalServiceComponent, OnlychoiceEntryComponent, OtpEntryComponent, PasswordEntryComponent, PhoneEntryComponent, PhoneEntryModalServiceComponent, PriceEntryComponent, RangeEntryComponent, RatingEntryComponent, RichTextEntryComponent, SearchEntryComponent, SearchEntryModalServiceComponent, SignatureEntryComponent, SliderEntryComponent, SwitchEntryComponent, TagsEntryComponent, TextAreaEntryComponent, TextEntryComponent, TimePickerComponent, TimePickerModalServiceComponent, UrlEntryComponent, XOSUE_UTILS_INPUTS_CONFIG, XOSUE_UTILS_MEDIA_PREVIEW, XOSUE_UTILS_MEDIA_VIEWER, createBackendMediaImageUrlState, formatPhoneForDisplay, provideXosueUtilsInputs, provideXosueUtilsMedia, stripCountryCodeFromNumber };
 //# sourceMappingURL=xosue-utils-inputs.mjs.map