@xosue-utils/inputs 0.1.8 → 0.1.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/fesm2022/xosue-utils-inputs.mjs +322 -288
  2. package/fesm2022/xosue-utils-inputs.mjs.map +1 -1
  3. package/index.d.ts +43 -1
  4. package/lib/index.d.ts +1 -1
  5. package/lib/multiselect-combobox/multiselect-combobox.component.d.ts +0 -13
  6. package/lib/multiselect-combobox/services/multiselect-combobox-modal/multiselect-combobox-modal-service.component.d.ts +5 -2
  7. package/lib/only-select/only-select.component.d.ts +0 -13
  8. package/lib/only-select/services/only-select-modal/only-select-modal-service.component.d.ts +5 -2
  9. package/lib/overlay-search-chrome.d.ts +11 -0
  10. package/lib/phone-entry/services/phone-entry-modal/phone-entry-modal-service.component.d.ts +5 -2
  11. package/lib/search-entry/services/search-entry-modal/search-entry-modal-service.component.d.ts +5 -2
  12. package/lib/select-search.util.d.ts +9 -0
  13. package/package.json +1 -1
package/fesm2022/xosue-utils-inputs.mjs CHANGED
@@ -316,7 +316,7 @@ class TextEntryComponent {
316
316
  useExisting: forwardRef(() => TextEntryComponent),
317
317
  multi: true,
318
318
  },
319
- ], ngImport: i0, template: "<div\r\n *ngIf=\"label\"\r\n class=\"LabelRow\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n <p class=\"Label\">\r\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\r\n </p>\r\n <field-help-tooltip\r\n *ngIf=\"fieldHelp\"\r\n [title]=\"label\"\r\n [text]=\"fieldHelp\"\r\n ></field-help-tooltip>\r\n</div>\r\n\r\n<p\r\n *ngIf=\"description\"\r\n class=\"Description\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ description }}\r\n</p>\r\n\r\n<div class=\"Entry\" [class.IsFocus]=\"isFocus\">\r\n <div\r\n class=\"Prefix\"\r\n *ngIf=\"prefix\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n >\r\n {{ prefix }}\r\n </div>\r\n <input\r\n type=\"text\"\r\n class=\"Input\"\r\n [class.Disabled]=\"isDisabled\"\r\n [placeholder]=\"placeholder\"\r\n [value]=\"rawValue || ''\"\r\n (input)=\"onInput($event)\"\r\n (focus)=\"onFocus($event)\"\r\n (blur)=\"onBlur($event)\"\r\n [class.WithPrefix]=\"prefix\"\r\n [class.WithSuffix]=\"suffix\"\r\n />\r\n <div\r\n class=\"Suffix\"\r\n *ngIf=\"suffix\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n >\r\n {{ suffix }}\r\n </div>\r\n</div>\r\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex;flex-direction:column;width:100%;height:max-content;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);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(--color-input-border, #d4d4d4);border-radius:12px;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .Entry .Prefix,:host .Entry .Suffix{height:100%;display:flex;justify-content:center;align-items:center;width:max-content;padding:0 8px;background-color:var(--color-input-addon-bg, var(--color-surface-muted, #e5e5e5))}:host .Entry .Input[class~=WithPrefix]{padding-left:5px}:host .Entry .Input[class~=WithPreffix]{padding-right:5px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FieldHelpTooltipComponent, selector: "field-help-tooltip", inputs: ["text", "title"] }] });
319
+ ], ngImport: i0, template: "<div\r\n *ngIf=\"label\"\r\n class=\"LabelRow\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n <p class=\"Label\">\r\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\r\n </p>\r\n <field-help-tooltip\r\n *ngIf=\"fieldHelp\"\r\n [title]=\"label\"\r\n [text]=\"fieldHelp\"\r\n ></field-help-tooltip>\r\n</div>\r\n\r\n<p\r\n *ngIf=\"description\"\r\n class=\"Description\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ description }}\r\n</p>\r\n\r\n<div class=\"Entry\" [class.IsFocus]=\"isFocus\">\r\n <div\r\n class=\"Prefix\"\r\n *ngIf=\"prefix\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n >\r\n {{ prefix }}\r\n </div>\r\n <input\r\n type=\"text\"\r\n class=\"Input\"\r\n [class.Disabled]=\"isDisabled\"\r\n [placeholder]=\"placeholder\"\r\n [value]=\"rawValue || ''\"\r\n (input)=\"onInput($event)\"\r\n (focus)=\"onFocus($event)\"\r\n (blur)=\"onBlur($event)\"\r\n [class.WithPrefix]=\"prefix\"\r\n [class.WithSuffix]=\"suffix\"\r\n />\r\n <div\r\n class=\"Suffix\"\r\n *ngIf=\"suffix\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n >\r\n {{ suffix }}\r\n </div>\r\n</div>\r\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex!important;flex-direction:column!important;width:100%;height:max-content;--radius-none: 0;--radius-xs: 2px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 16px;--radius-full: 9999px;--spacing-xxs: 2px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 16px;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);font-weight:400;width:100%;cursor:pointer;padding:0 3px;margin:0 0 4px;overflow:hidden;word-break:break-all}:host .Entry{display:flex!important;width:100%;height:32px;justify-content:flex-start;align-items:center;border:solid 0 var(--color-input-border, #d4d4d4);border-radius:12px!important;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px!important;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .Entry .Prefix,:host .Entry .Suffix{height:100%;display:flex;justify-content:center;align-items:center;width:max-content;padding:0 8px;background-color:var(--color-input-addon-bg, var(--color-surface-muted, #e5e5e5))}:host .Entry .Input[class~=WithPrefix]{padding-left:5px}:host .Entry .Input[class~=WithPreffix]{padding-right:5px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FieldHelpTooltipComponent, selector: "field-help-tooltip", inputs: ["text", "title"] }] });
320
320
  }
321
321
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TextEntryComponent, decorators: [{
322
322
  type: Component,
@@ -326,7 +326,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
326
326
  useExisting: forwardRef(() => TextEntryComponent),
327
327
  multi: true,
328
328
  },
329
- ], template: "<div\r\n *ngIf=\"label\"\r\n class=\"LabelRow\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n <p class=\"Label\">\r\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\r\n </p>\r\n <field-help-tooltip\r\n *ngIf=\"fieldHelp\"\r\n [title]=\"label\"\r\n [text]=\"fieldHelp\"\r\n ></field-help-tooltip>\r\n</div>\r\n\r\n<p\r\n *ngIf=\"description\"\r\n class=\"Description\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ description }}\r\n</p>\r\n\r\n<div class=\"Entry\" [class.IsFocus]=\"isFocus\">\r\n <div\r\n class=\"Prefix\"\r\n *ngIf=\"prefix\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n >\r\n {{ prefix }}\r\n </div>\r\n <input\r\n type=\"text\"\r\n class=\"Input\"\r\n [class.Disabled]=\"isDisabled\"\r\n [placeholder]=\"placeholder\"\r\n [value]=\"rawValue || ''\"\r\n (input)=\"onInput($event)\"\r\n (focus)=\"onFocus($event)\"\r\n (blur)=\"onBlur($event)\"\r\n [class.WithPrefix]=\"prefix\"\r\n [class.WithSuffix]=\"suffix\"\r\n />\r\n <div\r\n class=\"Suffix\"\r\n *ngIf=\"suffix\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n >\r\n {{ suffix }}\r\n </div>\r\n</div>\r\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex;flex-direction:column;width:100%;height:max-content;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);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(--color-input-border, #d4d4d4);border-radius:12px;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .Entry .Prefix,:host .Entry .Suffix{height:100%;display:flex;justify-content:center;align-items:center;width:max-content;padding:0 8px;background-color:var(--color-input-addon-bg, var(--color-surface-muted, #e5e5e5))}:host .Entry .Input[class~=WithPrefix]{padding-left:5px}:host .Entry .Input[class~=WithPreffix]{padding-right:5px}\n"] }]
329
+ ], template: "<div\r\n *ngIf=\"label\"\r\n class=\"LabelRow\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n <p class=\"Label\">\r\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\r\n </p>\r\n <field-help-tooltip\r\n *ngIf=\"fieldHelp\"\r\n [title]=\"label\"\r\n [text]=\"fieldHelp\"\r\n ></field-help-tooltip>\r\n</div>\r\n\r\n<p\r\n *ngIf=\"description\"\r\n class=\"Description\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ description }}\r\n</p>\r\n\r\n<div class=\"Entry\" [class.IsFocus]=\"isFocus\">\r\n <div\r\n class=\"Prefix\"\r\n *ngIf=\"prefix\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n >\r\n {{ prefix }}\r\n </div>\r\n <input\r\n type=\"text\"\r\n class=\"Input\"\r\n [class.Disabled]=\"isDisabled\"\r\n [placeholder]=\"placeholder\"\r\n [value]=\"rawValue || ''\"\r\n (input)=\"onInput($event)\"\r\n (focus)=\"onFocus($event)\"\r\n (blur)=\"onBlur($event)\"\r\n [class.WithPrefix]=\"prefix\"\r\n [class.WithSuffix]=\"suffix\"\r\n />\r\n <div\r\n class=\"Suffix\"\r\n *ngIf=\"suffix\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n >\r\n {{ suffix }}\r\n </div>\r\n</div>\r\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex!important;flex-direction:column!important;width:100%;height:max-content;--radius-none: 0;--radius-xs: 2px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 16px;--radius-full: 9999px;--spacing-xxs: 2px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 16px;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);font-weight:400;width:100%;cursor:pointer;padding:0 3px;margin:0 0 4px;overflow:hidden;word-break:break-all}:host .Entry{display:flex!important;width:100%;height:32px;justify-content:flex-start;align-items:center;border:solid 0 var(--color-input-border, #d4d4d4);border-radius:12px!important;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px!important;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .Entry .Prefix,:host .Entry .Suffix{height:100%;display:flex;justify-content:center;align-items:center;width:max-content;padding:0 8px;background-color:var(--color-input-addon-bg, var(--color-surface-muted, #e5e5e5))}:host .Entry .Input[class~=WithPrefix]{padding-left:5px}:host .Entry .Input[class~=WithPreffix]{padding-right:5px}\n"] }]
330
330
  }], propDecorators: { label: [{
331
331
  type: Input
332
332
  }], description: [{
@@ -432,7 +432,7 @@ class TextAreaEntryComponent {
432
432
  useExisting: forwardRef(() => TextAreaEntryComponent),
433
433
  multi: true,
434
434
  },
435
- ], ngImport: i0, template: "<p\r\n *ngIf=\"label\"\r\n class=\"Label\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\r\n</p>\r\n\r\n<p\r\n *ngIf=\"description\"\r\n class=\"Description\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ description }}\r\n</p>\r\n\r\n<div\r\n class=\"Entry\"\r\n [class.IsFocus]=\"isFocus\"\r\n [class.Disabled]=\"isDisabled\"\r\n>\r\n <textarea\r\n class=\"TextArea\"\r\n [placeholder]=\"placeholder\"\r\n [disabled]=\"isDisabled\"\r\n [value]=\"value\"\r\n (input)=\"onInput($event)\"\r\n (focus)=\"onFocus()\"\r\n (blur)=\"onBlur()\"\r\n ></textarea>\r\n</div>\r\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex;flex-direction:column;width:100%;height:max-content;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);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(--color-input-border, #d4d4d4);border-radius:12px;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .Entry{height:max-content}:host .Entry textarea{background-color:var(--color-input-bg, #f5f5f5);min-height:180px;height:auto;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);caret-shape:block;text-align:start;resize:vertical}:host .Entry textarea:focus{border:none;outline:none}:host .Entry textarea::placeholder{color:var(--color-input-placeholder, #a3a3a3)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
435
+ ], ngImport: i0, template: "<p\r\n *ngIf=\"label\"\r\n class=\"Label\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\r\n</p>\r\n\r\n<p\r\n *ngIf=\"description\"\r\n class=\"Description\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ description }}\r\n</p>\r\n\r\n<div\r\n class=\"Entry\"\r\n [class.IsFocus]=\"isFocus\"\r\n [class.Disabled]=\"isDisabled\"\r\n>\r\n <textarea\r\n class=\"TextArea\"\r\n [placeholder]=\"placeholder\"\r\n [disabled]=\"isDisabled\"\r\n [value]=\"value\"\r\n (input)=\"onInput($event)\"\r\n (focus)=\"onFocus()\"\r\n (blur)=\"onBlur()\"\r\n ></textarea>\r\n</div>\r\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex!important;flex-direction:column!important;width:100%;height:max-content;--radius-none: 0;--radius-xs: 2px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 16px;--radius-full: 9999px;--spacing-xxs: 2px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 16px;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);font-weight:400;width:100%;cursor:pointer;padding:0 3px;margin:0 0 4px;overflow:hidden;word-break:break-all}:host .Entry{display:flex!important;width:100%;height:32px;justify-content:flex-start;align-items:center;border:solid 0 var(--color-input-border, #d4d4d4);border-radius:12px!important;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px!important;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .Entry{height:max-content}:host .Entry textarea{background-color:var(--color-input-bg, #f5f5f5);min-height:180px;height:auto;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);caret-shape:block;text-align:start;resize:vertical}:host .Entry textarea:focus{border:none;outline:none}:host .Entry textarea::placeholder{color:var(--color-input-placeholder, #a3a3a3)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
436
436
  }
437
437
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TextAreaEntryComponent, decorators: [{
438
438
  type: Component,
@@ -442,7 +442,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
442
442
  useExisting: forwardRef(() => TextAreaEntryComponent),
443
443
  multi: true,
444
444
  },
445
- ], template: "<p\r\n *ngIf=\"label\"\r\n class=\"Label\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\r\n</p>\r\n\r\n<p\r\n *ngIf=\"description\"\r\n class=\"Description\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ description }}\r\n</p>\r\n\r\n<div\r\n class=\"Entry\"\r\n [class.IsFocus]=\"isFocus\"\r\n [class.Disabled]=\"isDisabled\"\r\n>\r\n <textarea\r\n class=\"TextArea\"\r\n [placeholder]=\"placeholder\"\r\n [disabled]=\"isDisabled\"\r\n [value]=\"value\"\r\n (input)=\"onInput($event)\"\r\n (focus)=\"onFocus()\"\r\n (blur)=\"onBlur()\"\r\n ></textarea>\r\n</div>\r\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex;flex-direction:column;width:100%;height:max-content;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);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(--color-input-border, #d4d4d4);border-radius:12px;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .Entry{height:max-content}:host .Entry textarea{background-color:var(--color-input-bg, #f5f5f5);min-height:180px;height:auto;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);caret-shape:block;text-align:start;resize:vertical}:host .Entry textarea:focus{border:none;outline:none}:host .Entry textarea::placeholder{color:var(--color-input-placeholder, #a3a3a3)}\n"] }]
445
+ ], template: "<p\r\n *ngIf=\"label\"\r\n class=\"Label\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\r\n</p>\r\n\r\n<p\r\n *ngIf=\"description\"\r\n class=\"Description\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ description }}\r\n</p>\r\n\r\n<div\r\n class=\"Entry\"\r\n [class.IsFocus]=\"isFocus\"\r\n [class.Disabled]=\"isDisabled\"\r\n>\r\n <textarea\r\n class=\"TextArea\"\r\n [placeholder]=\"placeholder\"\r\n [disabled]=\"isDisabled\"\r\n [value]=\"value\"\r\n (input)=\"onInput($event)\"\r\n (focus)=\"onFocus()\"\r\n (blur)=\"onBlur()\"\r\n ></textarea>\r\n</div>\r\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex!important;flex-direction:column!important;width:100%;height:max-content;--radius-none: 0;--radius-xs: 2px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 16px;--radius-full: 9999px;--spacing-xxs: 2px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 16px;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);font-weight:400;width:100%;cursor:pointer;padding:0 3px;margin:0 0 4px;overflow:hidden;word-break:break-all}:host .Entry{display:flex!important;width:100%;height:32px;justify-content:flex-start;align-items:center;border:solid 0 var(--color-input-border, #d4d4d4);border-radius:12px!important;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px!important;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .Entry{height:max-content}:host .Entry textarea{background-color:var(--color-input-bg, #f5f5f5);min-height:180px;height:auto;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);caret-shape:block;text-align:start;resize:vertical}:host .Entry textarea:focus{border:none;outline:none}:host .Entry textarea::placeholder{color:var(--color-input-placeholder, #a3a3a3)}\n"] }]
446
446
  }], propDecorators: { label: [{
447
447
  type: Input
448
448
  }], description: [{
@@ -553,7 +553,7 @@ class EmailEntryComponent {
553
553
  useExisting: forwardRef(() => EmailEntryComponent),
554
554
  multi: true,
555
555
  },
556
- ], ngImport: i0, template: "<p\r\n *ngIf=\"label\"\r\n class=\"Label\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\r\n</p>\r\n\r\n<p\r\n *ngIf=\"description\"\r\n class=\"Description\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ description }}\r\n</p>\r\n\r\n<div class=\"Entry\" [class.IsFocus]=\"isFocus\" [class.Error]=\"error\">\r\n <input\r\n type=\"text\"\r\n inputmode=\"email\"\r\n class=\"Input\"\r\n [class.Disabled]=\"isDisabled\"\r\n [placeholder]=\"placeholder\"\r\n [value]=\"textValue\"\r\n (input)=\"onInput($event)\"\r\n (focus)=\"onFocus()\"\r\n (blur)=\"onBlur()\"\r\n />\r\n</div>\r\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex;flex-direction:column;width:100%;height:max-content;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);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(--color-input-border, #d4d4d4);border-radius:12px;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}.Entry .Input{text-align:start}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
556
+ ], ngImport: i0, template: "<p\r\n *ngIf=\"label\"\r\n class=\"Label\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\r\n</p>\r\n\r\n<p\r\n *ngIf=\"description\"\r\n class=\"Description\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ description }}\r\n</p>\r\n\r\n<div class=\"Entry\" [class.IsFocus]=\"isFocus\" [class.Error]=\"error\">\r\n <input\r\n type=\"text\"\r\n inputmode=\"email\"\r\n class=\"Input\"\r\n [class.Disabled]=\"isDisabled\"\r\n [placeholder]=\"placeholder\"\r\n [value]=\"textValue\"\r\n (input)=\"onInput($event)\"\r\n (focus)=\"onFocus()\"\r\n (blur)=\"onBlur()\"\r\n />\r\n</div>\r\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex!important;flex-direction:column!important;width:100%;height:max-content;--radius-none: 0;--radius-xs: 2px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 16px;--radius-full: 9999px;--spacing-xxs: 2px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 16px;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);font-weight:400;width:100%;cursor:pointer;padding:0 3px;margin:0 0 4px;overflow:hidden;word-break:break-all}:host .Entry{display:flex!important;width:100%;height:32px;justify-content:flex-start;align-items:center;border:solid 0 var(--color-input-border, #d4d4d4);border-radius:12px!important;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px!important;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}.Entry .Input{text-align:start}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
557
557
  }
558
558
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: EmailEntryComponent, decorators: [{
559
559
  type: Component,
@@ -563,7 +563,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
563
563
  useExisting: forwardRef(() => EmailEntryComponent),
564
564
  multi: true,
565
565
  },
566
- ], template: "<p\r\n *ngIf=\"label\"\r\n class=\"Label\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\r\n</p>\r\n\r\n<p\r\n *ngIf=\"description\"\r\n class=\"Description\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ description }}\r\n</p>\r\n\r\n<div class=\"Entry\" [class.IsFocus]=\"isFocus\" [class.Error]=\"error\">\r\n <input\r\n type=\"text\"\r\n inputmode=\"email\"\r\n class=\"Input\"\r\n [class.Disabled]=\"isDisabled\"\r\n [placeholder]=\"placeholder\"\r\n [value]=\"textValue\"\r\n (input)=\"onInput($event)\"\r\n (focus)=\"onFocus()\"\r\n (blur)=\"onBlur()\"\r\n />\r\n</div>\r\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex;flex-direction:column;width:100%;height:max-content;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);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(--color-input-border, #d4d4d4);border-radius:12px;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}.Entry .Input{text-align:start}\n"] }]
566
+ ], template: "<p\r\n *ngIf=\"label\"\r\n class=\"Label\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\r\n</p>\r\n\r\n<p\r\n *ngIf=\"description\"\r\n class=\"Description\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ description }}\r\n</p>\r\n\r\n<div class=\"Entry\" [class.IsFocus]=\"isFocus\" [class.Error]=\"error\">\r\n <input\r\n type=\"text\"\r\n inputmode=\"email\"\r\n class=\"Input\"\r\n [class.Disabled]=\"isDisabled\"\r\n [placeholder]=\"placeholder\"\r\n [value]=\"textValue\"\r\n (input)=\"onInput($event)\"\r\n (focus)=\"onFocus()\"\r\n (blur)=\"onBlur()\"\r\n />\r\n</div>\r\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex!important;flex-direction:column!important;width:100%;height:max-content;--radius-none: 0;--radius-xs: 2px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 16px;--radius-full: 9999px;--spacing-xxs: 2px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 16px;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);font-weight:400;width:100%;cursor:pointer;padding:0 3px;margin:0 0 4px;overflow:hidden;word-break:break-all}:host .Entry{display:flex!important;width:100%;height:32px;justify-content:flex-start;align-items:center;border:solid 0 var(--color-input-border, #d4d4d4);border-radius:12px!important;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px!important;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}.Entry .Input{text-align:start}\n"] }]
567
567
  }], propDecorators: { label: [{
568
568
  type: Input
569
569
  }], description: [{
@@ -687,7 +687,7 @@ class UrlEntryComponent {
687
687
  useExisting: forwardRef(() => UrlEntryComponent),
688
688
  multi: true,
689
689
  },
690
- ], ngImport: i0, template: "<p\r\n *ngIf=\"label\"\r\n class=\"Label\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\r\n</p>\r\n\r\n<p\r\n *ngIf=\"description\"\r\n class=\"Description\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ description }}\r\n</p>\r\n\r\n\r\n<div class=\"Entry\" [class.IsFocus]=\"isFocus\" [class.Error]=\"error\">\r\n <div class=\"Prefix\" (click)=\"manualClick($event); $event.stopPropagation()\">\r\n https://\r\n </div>\r\n <input\r\n type=\"text\"\r\n inputmode=\"url\"\r\n class=\"Input\"\r\n [class.Disabled]=\"isDisabled\"\r\n [placeholder]=\"placeholder\"\r\n [value]=\"textValue\"\r\n (input)=\"onInput($event)\"\r\n (focus)=\"onFocus()\"\r\n (blur)=\"onBlur()\"\r\n />\r\n</div>\r\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex;flex-direction:column;width:100%;height:max-content;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);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(--color-input-border, #d4d4d4);border-radius:12px;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .Entry .Prefix{height:100%;display:flex;justify-content:center;align-items:center;width:max-content;padding:0 8px;background-color:var(--color-input-addon-bg)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
690
+ ], ngImport: i0, template: "<p\r\n *ngIf=\"label\"\r\n class=\"Label\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\r\n</p>\r\n\r\n<p\r\n *ngIf=\"description\"\r\n class=\"Description\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ description }}\r\n</p>\r\n\r\n\r\n<div class=\"Entry\" [class.IsFocus]=\"isFocus\" [class.Error]=\"error\">\r\n <div class=\"Prefix\" (click)=\"manualClick($event); $event.stopPropagation()\">\r\n https://\r\n </div>\r\n <input\r\n type=\"text\"\r\n inputmode=\"url\"\r\n class=\"Input\"\r\n [class.Disabled]=\"isDisabled\"\r\n [placeholder]=\"placeholder\"\r\n [value]=\"textValue\"\r\n (input)=\"onInput($event)\"\r\n (focus)=\"onFocus()\"\r\n (blur)=\"onBlur()\"\r\n />\r\n</div>\r\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex!important;flex-direction:column!important;width:100%;height:max-content;--radius-none: 0;--radius-xs: 2px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 16px;--radius-full: 9999px;--spacing-xxs: 2px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 16px;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);font-weight:400;width:100%;cursor:pointer;padding:0 3px;margin:0 0 4px;overflow:hidden;word-break:break-all}:host .Entry{display:flex!important;width:100%;height:32px;justify-content:flex-start;align-items:center;border:solid 0 var(--color-input-border, #d4d4d4);border-radius:12px!important;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px!important;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .Entry .Prefix{height:100%;display:flex;justify-content:center;align-items:center;width:max-content;padding:0 8px;background-color:var(--color-input-addon-bg)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
691
691
  }
692
692
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: UrlEntryComponent, decorators: [{
693
693
  type: Component,
@@ -697,7 +697,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
697
697
  useExisting: forwardRef(() => UrlEntryComponent),
698
698
  multi: true,
699
699
  },
700
- ], template: "<p\r\n *ngIf=\"label\"\r\n class=\"Label\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\r\n</p>\r\n\r\n<p\r\n *ngIf=\"description\"\r\n class=\"Description\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ description }}\r\n</p>\r\n\r\n\r\n<div class=\"Entry\" [class.IsFocus]=\"isFocus\" [class.Error]=\"error\">\r\n <div class=\"Prefix\" (click)=\"manualClick($event); $event.stopPropagation()\">\r\n https://\r\n </div>\r\n <input\r\n type=\"text\"\r\n inputmode=\"url\"\r\n class=\"Input\"\r\n [class.Disabled]=\"isDisabled\"\r\n [placeholder]=\"placeholder\"\r\n [value]=\"textValue\"\r\n (input)=\"onInput($event)\"\r\n (focus)=\"onFocus()\"\r\n (blur)=\"onBlur()\"\r\n />\r\n</div>\r\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex;flex-direction:column;width:100%;height:max-content;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);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(--color-input-border, #d4d4d4);border-radius:12px;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .Entry .Prefix{height:100%;display:flex;justify-content:center;align-items:center;width:max-content;padding:0 8px;background-color:var(--color-input-addon-bg)}\n"] }]
700
+ ], template: "<p\r\n *ngIf=\"label\"\r\n class=\"Label\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\r\n</p>\r\n\r\n<p\r\n *ngIf=\"description\"\r\n class=\"Description\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ description }}\r\n</p>\r\n\r\n\r\n<div class=\"Entry\" [class.IsFocus]=\"isFocus\" [class.Error]=\"error\">\r\n <div class=\"Prefix\" (click)=\"manualClick($event); $event.stopPropagation()\">\r\n https://\r\n </div>\r\n <input\r\n type=\"text\"\r\n inputmode=\"url\"\r\n class=\"Input\"\r\n [class.Disabled]=\"isDisabled\"\r\n [placeholder]=\"placeholder\"\r\n [value]=\"textValue\"\r\n (input)=\"onInput($event)\"\r\n (focus)=\"onFocus()\"\r\n (blur)=\"onBlur()\"\r\n />\r\n</div>\r\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex!important;flex-direction:column!important;width:100%;height:max-content;--radius-none: 0;--radius-xs: 2px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 16px;--radius-full: 9999px;--spacing-xxs: 2px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 16px;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);font-weight:400;width:100%;cursor:pointer;padding:0 3px;margin:0 0 4px;overflow:hidden;word-break:break-all}:host .Entry{display:flex!important;width:100%;height:32px;justify-content:flex-start;align-items:center;border:solid 0 var(--color-input-border, #d4d4d4);border-radius:12px!important;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px!important;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .Entry .Prefix{height:100%;display:flex;justify-content:center;align-items:center;width:max-content;padding:0 8px;background-color:var(--color-input-addon-bg)}\n"] }]
701
701
  }], propDecorators: { label: [{
702
702
  type: Input
703
703
  }], description: [{
@@ -811,7 +811,7 @@ class PasswordEntryComponent {
811
811
  useExisting: forwardRef(() => PasswordEntryComponent),
812
812
  multi: true,
813
813
  },
814
- ], ngImport: i0, template: "<p\r\n *ngIf=\"label\"\r\n class=\"Label\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\r\n</p>\r\n\r\n<p\r\n *ngIf=\"description\"\r\n class=\"Description\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ description }}\r\n</p>\r\n\r\n<div class=\"Entry\" [class.IsFocus]=\"isFocus\">\r\n <input\r\n class=\"Input\"\r\n [type]=\"isPasswordVisible ? 'text' : 'password'\"\r\n [class.Disabled]=\"isDisabled\"\r\n [placeholder]=\"placeholder\"\r\n [value]=\"value || ''\"\r\n (input)=\"onInput($event)\"\r\n (focus)=\"onFocus($event)\"\r\n (blur)=\"onBlur($event)\"\r\n />\r\n <button\r\n type=\"button\"\r\n class=\"ToggleVisible\"\r\n *ngIf=\"toggleVisibility\"\r\n (click)=\"togglePasswordVisibility($event)\"\r\n [attr.aria-label]=\"isPasswordVisible ? 'Ocultar contrase\u00F1a' : 'Mostrar contrase\u00F1a'\"\r\n [attr.aria-pressed]=\"isPasswordVisible\"\r\n [disabled]=\"isDisabled\"\r\n tabindex=\"-1\"\r\n >\r\n <lucide-icon [name]=\"isPasswordVisible ? 'eye-off' : 'eye'\" [size]=\"14\"></lucide-icon>\r\n </button>\r\n</div>\r\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex;flex-direction:column;width:100%;height:max-content;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);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(--color-input-border, #d4d4d4);border-radius:12px;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .Entry .Prefix,:host .Entry .Suffix{height:100%;display:flex;justify-content:center;align-items:center;width:max-content;padding:0 8px;background-color:var(--color-input-addon-bg, #e5e5e5)}:host .Entry .Input[class~=WithPrefix]{padding-left:5px}:host .Entry .Input[class~=WithPreffix]{padding-right:5px}:host .Entry .ToggleVisible{height:100%;display:flex;justify-content:center;align-items:center;width:40px;min-width:40px;padding:0 var(--spacing-sm);margin:0;border:none;cursor:pointer;background-color:var(--color-input-bg, #f5f5f5);color:var(--color-fg, #171717)}:host .Entry .ToggleVisible:disabled{opacity:.5;cursor:not-allowed}:host .Entry .ToggleVisible lucide-icon .lucide-svg{pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LucideIconComponent, selector: "lucide-icon", inputs: ["name", "size", "spin", "filled"] }] });
814
+ ], ngImport: i0, template: "<p\r\n *ngIf=\"label\"\r\n class=\"Label\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\r\n</p>\r\n\r\n<p\r\n *ngIf=\"description\"\r\n class=\"Description\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ description }}\r\n</p>\r\n\r\n<div class=\"Entry\" [class.IsFocus]=\"isFocus\">\r\n <input\r\n class=\"Input\"\r\n [type]=\"isPasswordVisible ? 'text' : 'password'\"\r\n [class.Disabled]=\"isDisabled\"\r\n [placeholder]=\"placeholder\"\r\n [value]=\"value || ''\"\r\n (input)=\"onInput($event)\"\r\n (focus)=\"onFocus($event)\"\r\n (blur)=\"onBlur($event)\"\r\n />\r\n <button\r\n type=\"button\"\r\n class=\"ToggleVisible\"\r\n *ngIf=\"toggleVisibility\"\r\n (click)=\"togglePasswordVisibility($event)\"\r\n [attr.aria-label]=\"isPasswordVisible ? 'Ocultar contrase\u00F1a' : 'Mostrar contrase\u00F1a'\"\r\n [attr.aria-pressed]=\"isPasswordVisible\"\r\n [disabled]=\"isDisabled\"\r\n tabindex=\"-1\"\r\n >\r\n <lucide-icon [name]=\"isPasswordVisible ? 'eye-off' : 'eye'\" [size]=\"14\"></lucide-icon>\r\n </button>\r\n</div>\r\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex!important;flex-direction:column!important;width:100%;height:max-content;--radius-none: 0;--radius-xs: 2px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 16px;--radius-full: 9999px;--spacing-xxs: 2px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 16px;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);font-weight:400;width:100%;cursor:pointer;padding:0 3px;margin:0 0 4px;overflow:hidden;word-break:break-all}:host .Entry{display:flex!important;width:100%;height:32px;justify-content:flex-start;align-items:center;border:solid 0 var(--color-input-border, #d4d4d4);border-radius:12px!important;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px!important;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .Entry .Prefix,:host .Entry .Suffix{height:100%;display:flex;justify-content:center;align-items:center;width:max-content;padding:0 8px;background-color:var(--color-input-addon-bg, #e5e5e5)}:host .Entry .Input[class~=WithPrefix]{padding-left:5px}:host .Entry .Input[class~=WithPreffix]{padding-right:5px}:host .Entry .ToggleVisible{height:100%;display:flex;justify-content:center;align-items:center;width:40px;min-width:40px;padding:0 8px;margin:0;border:none;cursor:pointer;background-color:var(--color-input-bg, #f5f5f5);color:var(--color-fg, #171717)}:host .Entry .ToggleVisible:disabled{opacity:.5;cursor:not-allowed}:host .Entry .ToggleVisible lucide-icon .lucide-svg{pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LucideIconComponent, selector: "lucide-icon", inputs: ["name", "size", "spin", "filled"] }] });
815
815
  }
816
816
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: PasswordEntryComponent, decorators: [{
817
817
  type: Component,
@@ -821,7 +821,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
821
821
  useExisting: forwardRef(() => PasswordEntryComponent),
822
822
  multi: true,
823
823
  },
824
- ], template: "<p\r\n *ngIf=\"label\"\r\n class=\"Label\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\r\n</p>\r\n\r\n<p\r\n *ngIf=\"description\"\r\n class=\"Description\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ description }}\r\n</p>\r\n\r\n<div class=\"Entry\" [class.IsFocus]=\"isFocus\">\r\n <input\r\n class=\"Input\"\r\n [type]=\"isPasswordVisible ? 'text' : 'password'\"\r\n [class.Disabled]=\"isDisabled\"\r\n [placeholder]=\"placeholder\"\r\n [value]=\"value || ''\"\r\n (input)=\"onInput($event)\"\r\n (focus)=\"onFocus($event)\"\r\n (blur)=\"onBlur($event)\"\r\n />\r\n <button\r\n type=\"button\"\r\n class=\"ToggleVisible\"\r\n *ngIf=\"toggleVisibility\"\r\n (click)=\"togglePasswordVisibility($event)\"\r\n [attr.aria-label]=\"isPasswordVisible ? 'Ocultar contrase\u00F1a' : 'Mostrar contrase\u00F1a'\"\r\n [attr.aria-pressed]=\"isPasswordVisible\"\r\n [disabled]=\"isDisabled\"\r\n tabindex=\"-1\"\r\n >\r\n <lucide-icon [name]=\"isPasswordVisible ? 'eye-off' : 'eye'\" [size]=\"14\"></lucide-icon>\r\n </button>\r\n</div>\r\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex;flex-direction:column;width:100%;height:max-content;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);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(--color-input-border, #d4d4d4);border-radius:12px;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .Entry .Prefix,:host .Entry .Suffix{height:100%;display:flex;justify-content:center;align-items:center;width:max-content;padding:0 8px;background-color:var(--color-input-addon-bg, #e5e5e5)}:host .Entry .Input[class~=WithPrefix]{padding-left:5px}:host .Entry .Input[class~=WithPreffix]{padding-right:5px}:host .Entry .ToggleVisible{height:100%;display:flex;justify-content:center;align-items:center;width:40px;min-width:40px;padding:0 var(--spacing-sm);margin:0;border:none;cursor:pointer;background-color:var(--color-input-bg, #f5f5f5);color:var(--color-fg, #171717)}:host .Entry .ToggleVisible:disabled{opacity:.5;cursor:not-allowed}:host .Entry .ToggleVisible lucide-icon .lucide-svg{pointer-events:none}\n"] }]
824
+ ], template: "<p\r\n *ngIf=\"label\"\r\n class=\"Label\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\r\n</p>\r\n\r\n<p\r\n *ngIf=\"description\"\r\n class=\"Description\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ description }}\r\n</p>\r\n\r\n<div class=\"Entry\" [class.IsFocus]=\"isFocus\">\r\n <input\r\n class=\"Input\"\r\n [type]=\"isPasswordVisible ? 'text' : 'password'\"\r\n [class.Disabled]=\"isDisabled\"\r\n [placeholder]=\"placeholder\"\r\n [value]=\"value || ''\"\r\n (input)=\"onInput($event)\"\r\n (focus)=\"onFocus($event)\"\r\n (blur)=\"onBlur($event)\"\r\n />\r\n <button\r\n type=\"button\"\r\n class=\"ToggleVisible\"\r\n *ngIf=\"toggleVisibility\"\r\n (click)=\"togglePasswordVisibility($event)\"\r\n [attr.aria-label]=\"isPasswordVisible ? 'Ocultar contrase\u00F1a' : 'Mostrar contrase\u00F1a'\"\r\n [attr.aria-pressed]=\"isPasswordVisible\"\r\n [disabled]=\"isDisabled\"\r\n tabindex=\"-1\"\r\n >\r\n <lucide-icon [name]=\"isPasswordVisible ? 'eye-off' : 'eye'\" [size]=\"14\"></lucide-icon>\r\n </button>\r\n</div>\r\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex!important;flex-direction:column!important;width:100%;height:max-content;--radius-none: 0;--radius-xs: 2px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 16px;--radius-full: 9999px;--spacing-xxs: 2px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 16px;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);font-weight:400;width:100%;cursor:pointer;padding:0 3px;margin:0 0 4px;overflow:hidden;word-break:break-all}:host .Entry{display:flex!important;width:100%;height:32px;justify-content:flex-start;align-items:center;border:solid 0 var(--color-input-border, #d4d4d4);border-radius:12px!important;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px!important;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .Entry .Prefix,:host .Entry .Suffix{height:100%;display:flex;justify-content:center;align-items:center;width:max-content;padding:0 8px;background-color:var(--color-input-addon-bg, #e5e5e5)}:host .Entry .Input[class~=WithPrefix]{padding-left:5px}:host .Entry .Input[class~=WithPreffix]{padding-right:5px}:host .Entry .ToggleVisible{height:100%;display:flex;justify-content:center;align-items:center;width:40px;min-width:40px;padding:0 8px;margin:0;border:none;cursor:pointer;background-color:var(--color-input-bg, #f5f5f5);color:var(--color-fg, #171717)}:host .Entry .ToggleVisible:disabled{opacity:.5;cursor:not-allowed}:host .Entry .ToggleVisible lucide-icon .lucide-svg{pointer-events:none}\n"] }]
825
825
  }], propDecorators: { label: [{
826
826
  type: Input
827
827
  }], description: [{
@@ -1231,7 +1231,7 @@ class SearchEntryComponent {
1231
1231
  useExisting: forwardRef(() => SearchEntryComponent),
1232
1232
  multi: true,
1233
1233
  },
1234
- ], usesOnChanges: true, ngImport: i0, template: "<div\n *ngIf=\"label\"\n class=\"Label\"\n (click)=\"toggleOpenOptions($event)\"\n [class.Disabled]=\"isDisabled\"\n>\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\n</div>\n\n<div\n class=\"Input\"\n (click)=\"toggleOpenOptions($event)\"\n [class.IsFocus]=\"isFocus\"\n [class.Disabled]=\"isDisabled\"\n (focus)=\"focus()\"\n (blur)=\"blur()\"\n>\n <div class=\"SelectedOptions\">\n <div class=\"SelectedOption\">\n <span class=\"Text\" *ngIf=\"searchText\">{{ searchText }}</span>\n <div class=\"Placeholder\" *ngIf=\"!searchText\">\n {{ placeholder }}\n </div>\n <lucide-icon class=\"RemoveIcon\" name=\"x\" *ngIf=\"searchText\"\n (click)=\"clear(); $event.preventDefault()\"></lucide-icon>\n </div>\n </div>\n <lucide-icon class=\"IconSort\" name=\"search\"></lucide-icon>\n</div>\n", styles: ["@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex;flex-direction:column;width:100%;height:max-content;user-select:none;-webkit-user-select:none}:host .Label{color:var(--color-fg-secondary);width:100%;cursor:pointer;padding:0 3px}:host .Label .Opcional{color:var(--color-fg-muted)}:host .Description{font-size:14px;color:var(--color-fg);font-weight:400;width:100%;cursor:pointer;padding:0 3px;overflow:hidden;word-break:break-all}:host .Input{display:flex;width:100%;height:40px;justify-content:flex-start;align-items:center;border:solid 0 var(--color-input-border);border-radius:var(--radius-lg);background-color:var(--color-input-bg);padding:4px 12px;cursor:pointer;gap:5px;flex-grow:1}:host .Input[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus)}:host .Input .SelectedOptions{display:flex;align-items:center;gap:5px;width:100%;height:100%;overflow:hidden}:host .Input .SelectedOptions .SelectedOption{width:100%;height:100%;display:flex;align-items:center;gap:3px;font-weight:400;overflow:hidden}:host .Input .SelectedOptions .SelectedOption .Text{display:block;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .Input .SelectedOptions .SelectedOption .RemoveIcon{cursor:pointer;width:40px;height:100%;display:flex;justify-content:center;align-items:center;font-size:14px}:host .Input .SelectedOptions .SelectedOption .RemoveIcon lucide-icon .lucide-svg{width:14px;height:14px}:host .Input .SelectedOptions .SelectedOption .RemoveIcon:hover{color:var(--color-danger-fg);background-color:var(--color-input-addon-bg)}:host .Input .Value{color:var(--color-input-fg);display:block;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .Input .Placeholder{color:var(--color-input-placeholder);display:block;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .Input .IconSort{display:flex;justify-content:center;align-items:center;margin-left:auto;color:var(--color-input-placeholder)}\n"], dependencies: [{ kind: "component", type: LucideIconComponent, selector: "lucide-icon", inputs: ["name", "size", "spin", "filled"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1234
+ ], usesOnChanges: true, ngImport: i0, template: "<div\n *ngIf=\"label\"\n class=\"Label\"\n (click)=\"toggleOpenOptions($event)\"\n [class.Disabled]=\"isDisabled\"\n>\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\n</div>\n\n<div\n class=\"Input\"\n (click)=\"toggleOpenOptions($event)\"\n [class.IsFocus]=\"isFocus\"\n [class.Disabled]=\"isDisabled\"\n (focus)=\"focus()\"\n (blur)=\"blur()\"\n>\n <div class=\"SelectedOptions\">\n <div class=\"SelectedOption\">\n <span class=\"Text\" *ngIf=\"searchText\">{{ searchText }}</span>\n <div class=\"Placeholder\" *ngIf=\"!searchText\">\n {{ placeholder }}\n </div>\n <lucide-icon class=\"RemoveIcon\" name=\"x\" *ngIf=\"searchText\"\n (click)=\"clear(); $event.preventDefault()\"></lucide-icon>\n </div>\n </div>\n <lucide-icon class=\"IconSort\" name=\"search\"></lucide-icon>\n</div>\n", styles: ["@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex;flex-direction:column;width:100%;height:max-content;user-select:none;-webkit-user-select:none}:host .Label{color:var(--color-fg-secondary);width:100%;cursor:pointer;padding:0 3px}:host .Label .Opcional{color:var(--color-fg-muted)}:host .Description{font-size:14px;color:var(--color-fg);font-weight:400;width:100%;cursor:pointer;padding:0 3px;overflow:hidden;word-break:break-all}:host .Input{display:flex;width:100%;height:40px;justify-content:flex-start;align-items:center;border:solid 0 var(--color-input-border);border-radius:12px;background-color:var(--color-input-bg);padding:4px 12px;cursor:pointer;gap:5px;flex-grow:1}:host .Input[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus)}:host .Input .SelectedOptions{display:flex;align-items:center;gap:5px;width:100%;height:100%;overflow:hidden}:host .Input .SelectedOptions .SelectedOption{width:100%;height:100%;display:flex;align-items:center;gap:3px;font-weight:400;overflow:hidden}:host .Input .SelectedOptions .SelectedOption .Text{display:block;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .Input .SelectedOptions .SelectedOption .RemoveIcon{cursor:pointer;width:40px;height:100%;display:flex;justify-content:center;align-items:center;font-size:14px}:host .Input .SelectedOptions .SelectedOption .RemoveIcon lucide-icon .lucide-svg{width:14px;height:14px}:host .Input .SelectedOptions .SelectedOption .RemoveIcon:hover{color:var(--color-danger-fg);background-color:var(--color-input-addon-bg)}:host .Input .Value{color:var(--color-input-fg);display:block;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .Input .Placeholder{color:var(--color-input-placeholder);display:block;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .Input .IconSort{display:flex;justify-content:center;align-items:center;margin-left:auto;color:var(--color-input-placeholder)}\n"], dependencies: [{ kind: "component", type: LucideIconComponent, selector: "lucide-icon", inputs: ["name", "size", "spin", "filled"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1235
1235
  }
1236
1236
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SearchEntryComponent, decorators: [{
1237
1237
  type: Component,
@@ -1243,7 +1243,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
1243
1243
  useExisting: forwardRef(() => SearchEntryComponent),
1244
1244
  multi: true,
1245
1245
  },
1246
- ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n *ngIf=\"label\"\n class=\"Label\"\n (click)=\"toggleOpenOptions($event)\"\n [class.Disabled]=\"isDisabled\"\n>\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\n</div>\n\n<div\n class=\"Input\"\n (click)=\"toggleOpenOptions($event)\"\n [class.IsFocus]=\"isFocus\"\n [class.Disabled]=\"isDisabled\"\n (focus)=\"focus()\"\n (blur)=\"blur()\"\n>\n <div class=\"SelectedOptions\">\n <div class=\"SelectedOption\">\n <span class=\"Text\" *ngIf=\"searchText\">{{ searchText }}</span>\n <div class=\"Placeholder\" *ngIf=\"!searchText\">\n {{ placeholder }}\n </div>\n <lucide-icon class=\"RemoveIcon\" name=\"x\" *ngIf=\"searchText\"\n (click)=\"clear(); $event.preventDefault()\"></lucide-icon>\n </div>\n </div>\n <lucide-icon class=\"IconSort\" name=\"search\"></lucide-icon>\n</div>\n", styles: ["@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex;flex-direction:column;width:100%;height:max-content;user-select:none;-webkit-user-select:none}:host .Label{color:var(--color-fg-secondary);width:100%;cursor:pointer;padding:0 3px}:host .Label .Opcional{color:var(--color-fg-muted)}:host .Description{font-size:14px;color:var(--color-fg);font-weight:400;width:100%;cursor:pointer;padding:0 3px;overflow:hidden;word-break:break-all}:host .Input{display:flex;width:100%;height:40px;justify-content:flex-start;align-items:center;border:solid 0 var(--color-input-border);border-radius:var(--radius-lg);background-color:var(--color-input-bg);padding:4px 12px;cursor:pointer;gap:5px;flex-grow:1}:host .Input[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus)}:host .Input .SelectedOptions{display:flex;align-items:center;gap:5px;width:100%;height:100%;overflow:hidden}:host .Input .SelectedOptions .SelectedOption{width:100%;height:100%;display:flex;align-items:center;gap:3px;font-weight:400;overflow:hidden}:host .Input .SelectedOptions .SelectedOption .Text{display:block;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .Input .SelectedOptions .SelectedOption .RemoveIcon{cursor:pointer;width:40px;height:100%;display:flex;justify-content:center;align-items:center;font-size:14px}:host .Input .SelectedOptions .SelectedOption .RemoveIcon lucide-icon .lucide-svg{width:14px;height:14px}:host .Input .SelectedOptions .SelectedOption .RemoveIcon:hover{color:var(--color-danger-fg);background-color:var(--color-input-addon-bg)}:host .Input .Value{color:var(--color-input-fg);display:block;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .Input .Placeholder{color:var(--color-input-placeholder);display:block;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .Input .IconSort{display:flex;justify-content:center;align-items:center;margin-left:auto;color:var(--color-input-placeholder)}\n"] }]
1246
+ ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n *ngIf=\"label\"\n class=\"Label\"\n (click)=\"toggleOpenOptions($event)\"\n [class.Disabled]=\"isDisabled\"\n>\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\n</div>\n\n<div\n class=\"Input\"\n (click)=\"toggleOpenOptions($event)\"\n [class.IsFocus]=\"isFocus\"\n [class.Disabled]=\"isDisabled\"\n (focus)=\"focus()\"\n (blur)=\"blur()\"\n>\n <div class=\"SelectedOptions\">\n <div class=\"SelectedOption\">\n <span class=\"Text\" *ngIf=\"searchText\">{{ searchText }}</span>\n <div class=\"Placeholder\" *ngIf=\"!searchText\">\n {{ placeholder }}\n </div>\n <lucide-icon class=\"RemoveIcon\" name=\"x\" *ngIf=\"searchText\"\n (click)=\"clear(); $event.preventDefault()\"></lucide-icon>\n </div>\n </div>\n <lucide-icon class=\"IconSort\" name=\"search\"></lucide-icon>\n</div>\n", styles: ["@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex;flex-direction:column;width:100%;height:max-content;user-select:none;-webkit-user-select:none}:host .Label{color:var(--color-fg-secondary);width:100%;cursor:pointer;padding:0 3px}:host .Label .Opcional{color:var(--color-fg-muted)}:host .Description{font-size:14px;color:var(--color-fg);font-weight:400;width:100%;cursor:pointer;padding:0 3px;overflow:hidden;word-break:break-all}:host .Input{display:flex;width:100%;height:40px;justify-content:flex-start;align-items:center;border:solid 0 var(--color-input-border);border-radius:12px;background-color:var(--color-input-bg);padding:4px 12px;cursor:pointer;gap:5px;flex-grow:1}:host .Input[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus)}:host .Input .SelectedOptions{display:flex;align-items:center;gap:5px;width:100%;height:100%;overflow:hidden}:host .Input .SelectedOptions .SelectedOption{width:100%;height:100%;display:flex;align-items:center;gap:3px;font-weight:400;overflow:hidden}:host .Input .SelectedOptions .SelectedOption .Text{display:block;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .Input .SelectedOptions .SelectedOption .RemoveIcon{cursor:pointer;width:40px;height:100%;display:flex;justify-content:center;align-items:center;font-size:14px}:host .Input .SelectedOptions .SelectedOption .RemoveIcon lucide-icon .lucide-svg{width:14px;height:14px}:host .Input .SelectedOptions .SelectedOption .RemoveIcon:hover{color:var(--color-danger-fg);background-color:var(--color-input-addon-bg)}:host .Input .Value{color:var(--color-input-fg);display:block;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .Input .Placeholder{color:var(--color-input-placeholder);display:block;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .Input .IconSort{display:flex;justify-content:center;align-items:center;margin-left:auto;color:var(--color-input-placeholder)}\n"] }]
1247
1247
  }], ctorParameters: () => [{ type: i1$1.HttpClient }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i2.Router }], propDecorators: { label: [{
1248
1248
  type: Input
1249
1249
  }], placeholder: [{
@@ -1405,7 +1405,7 @@ class TagsEntryComponent {
1405
1405
  useExisting: forwardRef(() => TagsEntryComponent),
1406
1406
  multi: true,
1407
1407
  },
1408
- ], viewQueries: [{ propertyName: "tagInputRef", first: true, predicate: ["tagInput"], descendants: true }], ngImport: i0, template: "<p\r\n *ngIf=\"label\"\r\n class=\"Label\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\r\n</p>\r\n\r\n<p\r\n *ngIf=\"description\"\r\n class=\"Description\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ description }}\r\n</p>\r\n\r\n<div class=\"Entry\" [class.Disabled]=\"isDisabled\" [class.IsFocus]=\"isFocus\">\r\n <div class=\"Chip\" *ngFor=\"let tag of tags ?? []; let i = index\">\r\n {{ tag }}\r\n <button\r\n type=\"button\"\r\n (click)=\"removeTag(i)\"\r\n class=\"Remove\"\r\n aria-label=\"Eliminar\"\r\n >\r\n <lucide-icon name=\"x\"></lucide-icon>\r\n </button>\r\n </div>\r\n\r\n <input\r\n #tagInput\r\n type=\"text\"\r\n class=\"TagInput\"\r\n [disabled]=\"isDisabled\"\r\n [placeholder]=\"placeholder\"\r\n [(ngModel)]=\"inputValue\"\r\n (keydown)=\"onInputKeydown($event)\"\r\n (paste)=\"onPaste($event)\"\r\n (focus)=\"onFocus($event)\"\r\n (blur)=\"onBlur($event)\"\r\n />\r\n\r\n <button\r\n type=\"button\"\r\n class=\"ClearAll\"\r\n *ngIf=\"(tags?.length ?? 0) > 0\"\r\n (click)=\"clearAll()\"\r\n aria-label=\"Limpiar todo\"\r\n >\r\n <lucide-icon name=\"brush-cleaning\"></lucide-icon>\r\n </button>\r\n</div>\r\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex;flex-direction:column;width:100%;height:max-content;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);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(--color-input-border, #d4d4d4);border-radius:12px;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .Entry{display:flex;min-height:32px;height:max-content;flex-wrap:wrap;gap:4px;padding:4px}:host .Entry.Disabled{opacity:.5;pointer-events:none}:host .Entry .Chip{height:28px;max-height:28px;background-color:var(--color-surface);border-radius:100px;padding:0 0 0 8px;display:flex;align-items:center;font-size:14px;font-weight:400}:host .Entry .Chip .Remove{display:flex;justify-content:center;align-items:center;height:100%;width:28px;background:none;border:none;font-size:14px;cursor:pointer}:host .Entry .Chip .Remove:hover{color:var(--color-danger-fg)}:host .Entry .TagInput{border:none;outline:none;flex:1;min-width:max-content;height:100%;max-height:28px;font-size:14px;padding:0 4px}:host .Entry .TagInput:hover{border:none;outline:none}:host .Entry .TagInput:focus{border:none;outline:none}:host .Entry .TagInput::placeholder{color:var(--color-input-placeholder)}:host .Entry .ClearAll{width:28px;height:28px;font-size:14px;color:var(--color-danger-fg);text-decoration:underline;cursor:pointer}:host .Entry .ClearAll i{pointer-events:none}\n"], dependencies: [{ kind: "component", type: LucideIconComponent, selector: "lucide-icon", inputs: ["name", "size", "spin", "filled"] }, { 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: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
1408
+ ], viewQueries: [{ propertyName: "tagInputRef", first: true, predicate: ["tagInput"], descendants: true }], ngImport: i0, template: "<p\r\n *ngIf=\"label\"\r\n class=\"Label\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\r\n</p>\r\n\r\n<p\r\n *ngIf=\"description\"\r\n class=\"Description\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ description }}\r\n</p>\r\n\r\n<div class=\"Entry\" [class.Disabled]=\"isDisabled\" [class.IsFocus]=\"isFocus\">\r\n <div class=\"Chip\" *ngFor=\"let tag of tags ?? []; let i = index\">\r\n {{ tag }}\r\n <button\r\n type=\"button\"\r\n (click)=\"removeTag(i)\"\r\n class=\"Remove\"\r\n aria-label=\"Eliminar\"\r\n >\r\n <lucide-icon name=\"x\"></lucide-icon>\r\n </button>\r\n </div>\r\n\r\n <input\r\n #tagInput\r\n type=\"text\"\r\n class=\"TagInput\"\r\n [disabled]=\"isDisabled\"\r\n [placeholder]=\"placeholder\"\r\n [(ngModel)]=\"inputValue\"\r\n (keydown)=\"onInputKeydown($event)\"\r\n (paste)=\"onPaste($event)\"\r\n (focus)=\"onFocus($event)\"\r\n (blur)=\"onBlur($event)\"\r\n />\r\n\r\n <button\r\n type=\"button\"\r\n class=\"ClearAll\"\r\n *ngIf=\"(tags?.length ?? 0) > 0\"\r\n (click)=\"clearAll()\"\r\n aria-label=\"Limpiar todo\"\r\n >\r\n <lucide-icon name=\"brush-cleaning\"></lucide-icon>\r\n </button>\r\n</div>\r\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex!important;flex-direction:column!important;width:100%;height:max-content;--radius-none: 0;--radius-xs: 2px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 16px;--radius-full: 9999px;--spacing-xxs: 2px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 16px;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);font-weight:400;width:100%;cursor:pointer;padding:0 3px;margin:0 0 4px;overflow:hidden;word-break:break-all}:host .Entry{display:flex!important;width:100%;height:32px;justify-content:flex-start;align-items:center;border:solid 0 var(--color-input-border, #d4d4d4);border-radius:12px!important;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px!important;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .Entry{display:flex;min-height:32px;height:max-content;flex-wrap:wrap;gap:4px;padding:4px}:host .Entry.Disabled{opacity:.5;pointer-events:none}:host .Entry .Chip{height:28px;max-height:28px;background-color:var(--color-surface);border-radius:100px;padding:0 0 0 8px;display:flex;align-items:center;font-size:14px;font-weight:400}:host .Entry .Chip .Remove{display:flex;justify-content:center;align-items:center;height:100%;width:28px;background:none;border:none;font-size:14px;cursor:pointer}:host .Entry .Chip .Remove:hover{color:var(--color-danger-fg)}:host .Entry .TagInput{border:none;outline:none;flex:1;min-width:max-content;height:100%;max-height:28px;font-size:14px;padding:0 4px}:host .Entry .TagInput:hover{border:none;outline:none}:host .Entry .TagInput:focus{border:none;outline:none}:host .Entry .TagInput::placeholder{color:var(--color-input-placeholder)}:host .Entry .ClearAll{width:28px;height:28px;font-size:14px;color:var(--color-danger-fg);text-decoration:underline;cursor:pointer}:host .Entry .ClearAll i{pointer-events:none}\n"], dependencies: [{ kind: "component", type: LucideIconComponent, selector: "lucide-icon", inputs: ["name", "size", "spin", "filled"] }, { 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: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
1409
1409
  }
1410
1410
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TagsEntryComponent, decorators: [{
1411
1411
  type: Component,
@@ -1417,7 +1417,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
1417
1417
  useExisting: forwardRef(() => TagsEntryComponent),
1418
1418
  multi: true,
1419
1419
  },
1420
- ], template: "<p\r\n *ngIf=\"label\"\r\n class=\"Label\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\r\n</p>\r\n\r\n<p\r\n *ngIf=\"description\"\r\n class=\"Description\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ description }}\r\n</p>\r\n\r\n<div class=\"Entry\" [class.Disabled]=\"isDisabled\" [class.IsFocus]=\"isFocus\">\r\n <div class=\"Chip\" *ngFor=\"let tag of tags ?? []; let i = index\">\r\n {{ tag }}\r\n <button\r\n type=\"button\"\r\n (click)=\"removeTag(i)\"\r\n class=\"Remove\"\r\n aria-label=\"Eliminar\"\r\n >\r\n <lucide-icon name=\"x\"></lucide-icon>\r\n </button>\r\n </div>\r\n\r\n <input\r\n #tagInput\r\n type=\"text\"\r\n class=\"TagInput\"\r\n [disabled]=\"isDisabled\"\r\n [placeholder]=\"placeholder\"\r\n [(ngModel)]=\"inputValue\"\r\n (keydown)=\"onInputKeydown($event)\"\r\n (paste)=\"onPaste($event)\"\r\n (focus)=\"onFocus($event)\"\r\n (blur)=\"onBlur($event)\"\r\n />\r\n\r\n <button\r\n type=\"button\"\r\n class=\"ClearAll\"\r\n *ngIf=\"(tags?.length ?? 0) > 0\"\r\n (click)=\"clearAll()\"\r\n aria-label=\"Limpiar todo\"\r\n >\r\n <lucide-icon name=\"brush-cleaning\"></lucide-icon>\r\n </button>\r\n</div>\r\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex;flex-direction:column;width:100%;height:max-content;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);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(--color-input-border, #d4d4d4);border-radius:12px;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .Entry{display:flex;min-height:32px;height:max-content;flex-wrap:wrap;gap:4px;padding:4px}:host .Entry.Disabled{opacity:.5;pointer-events:none}:host .Entry .Chip{height:28px;max-height:28px;background-color:var(--color-surface);border-radius:100px;padding:0 0 0 8px;display:flex;align-items:center;font-size:14px;font-weight:400}:host .Entry .Chip .Remove{display:flex;justify-content:center;align-items:center;height:100%;width:28px;background:none;border:none;font-size:14px;cursor:pointer}:host .Entry .Chip .Remove:hover{color:var(--color-danger-fg)}:host .Entry .TagInput{border:none;outline:none;flex:1;min-width:max-content;height:100%;max-height:28px;font-size:14px;padding:0 4px}:host .Entry .TagInput:hover{border:none;outline:none}:host .Entry .TagInput:focus{border:none;outline:none}:host .Entry .TagInput::placeholder{color:var(--color-input-placeholder)}:host .Entry .ClearAll{width:28px;height:28px;font-size:14px;color:var(--color-danger-fg);text-decoration:underline;cursor:pointer}:host .Entry .ClearAll i{pointer-events:none}\n"] }]
1420
+ ], template: "<p\r\n *ngIf=\"label\"\r\n class=\"Label\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\r\n</p>\r\n\r\n<p\r\n *ngIf=\"description\"\r\n class=\"Description\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ description }}\r\n</p>\r\n\r\n<div class=\"Entry\" [class.Disabled]=\"isDisabled\" [class.IsFocus]=\"isFocus\">\r\n <div class=\"Chip\" *ngFor=\"let tag of tags ?? []; let i = index\">\r\n {{ tag }}\r\n <button\r\n type=\"button\"\r\n (click)=\"removeTag(i)\"\r\n class=\"Remove\"\r\n aria-label=\"Eliminar\"\r\n >\r\n <lucide-icon name=\"x\"></lucide-icon>\r\n </button>\r\n </div>\r\n\r\n <input\r\n #tagInput\r\n type=\"text\"\r\n class=\"TagInput\"\r\n [disabled]=\"isDisabled\"\r\n [placeholder]=\"placeholder\"\r\n [(ngModel)]=\"inputValue\"\r\n (keydown)=\"onInputKeydown($event)\"\r\n (paste)=\"onPaste($event)\"\r\n (focus)=\"onFocus($event)\"\r\n (blur)=\"onBlur($event)\"\r\n />\r\n\r\n <button\r\n type=\"button\"\r\n class=\"ClearAll\"\r\n *ngIf=\"(tags?.length ?? 0) > 0\"\r\n (click)=\"clearAll()\"\r\n aria-label=\"Limpiar todo\"\r\n >\r\n <lucide-icon name=\"brush-cleaning\"></lucide-icon>\r\n </button>\r\n</div>\r\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex!important;flex-direction:column!important;width:100%;height:max-content;--radius-none: 0;--radius-xs: 2px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 16px;--radius-full: 9999px;--spacing-xxs: 2px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 16px;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);font-weight:400;width:100%;cursor:pointer;padding:0 3px;margin:0 0 4px;overflow:hidden;word-break:break-all}:host .Entry{display:flex!important;width:100%;height:32px;justify-content:flex-start;align-items:center;border:solid 0 var(--color-input-border, #d4d4d4);border-radius:12px!important;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px!important;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .Entry{display:flex;min-height:32px;height:max-content;flex-wrap:wrap;gap:4px;padding:4px}:host .Entry.Disabled{opacity:.5;pointer-events:none}:host .Entry .Chip{height:28px;max-height:28px;background-color:var(--color-surface);border-radius:100px;padding:0 0 0 8px;display:flex;align-items:center;font-size:14px;font-weight:400}:host .Entry .Chip .Remove{display:flex;justify-content:center;align-items:center;height:100%;width:28px;background:none;border:none;font-size:14px;cursor:pointer}:host .Entry .Chip .Remove:hover{color:var(--color-danger-fg)}:host .Entry .TagInput{border:none;outline:none;flex:1;min-width:max-content;height:100%;max-height:28px;font-size:14px;padding:0 4px}:host .Entry .TagInput:hover{border:none;outline:none}:host .Entry .TagInput:focus{border:none;outline:none}:host .Entry .TagInput::placeholder{color:var(--color-input-placeholder)}:host .Entry .ClearAll{width:28px;height:28px;font-size:14px;color:var(--color-danger-fg);text-decoration:underline;cursor:pointer}:host .Entry .ClearAll i{pointer-events:none}\n"] }]
1421
1421
  }], propDecorators: { label: [{
1422
1422
  type: Input
1423
1423
  }], description: [{
@@ -1555,7 +1555,7 @@ class IntegerEntryComponent {
1555
1555
  useExisting: forwardRef(() => IntegerEntryComponent),
1556
1556
  multi: true,
1557
1557
  },
1558
- ], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputEl"], descendants: true }], ngImport: i0, template: "<p\r\n *ngIf=\"label\"\r\n class=\"Label\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\r\n</p>\r\n\r\n<p\r\n *ngIf=\"description\"\r\n class=\"Description\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ description }}\r\n</p>\r\n\r\n<div class=\"Entry\" [class.Disabled]=\"isDisabled\" [class.IsFocus]=\"isFocus\">\r\n <input\r\n #inputEl\r\n type=\"text\"\r\n inputmode=\"numeric\"\r\n [value]=\"textValue\"\r\n [placeholder]=\"placeholder\"\r\n (input)=\"onInput($event)\"\r\n (focus)=\"onFocus()\"\r\n (blur)=\"onBlur()\"\r\n class=\"Input\"\r\n [disabled]=\"isDisabled\"\r\n/>\r\n</div>\r\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex;flex-direction:column;width:100%;height:max-content;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);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(--color-input-border, #d4d4d4);border-radius:12px;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .Entry .Input{text-align:end}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
1558
+ ], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputEl"], descendants: true }], ngImport: i0, template: "<p\r\n *ngIf=\"label\"\r\n class=\"Label\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\r\n</p>\r\n\r\n<p\r\n *ngIf=\"description\"\r\n class=\"Description\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ description }}\r\n</p>\r\n\r\n<div class=\"Entry\" [class.Disabled]=\"isDisabled\" [class.IsFocus]=\"isFocus\">\r\n <input\r\n #inputEl\r\n type=\"text\"\r\n inputmode=\"numeric\"\r\n [value]=\"textValue\"\r\n [placeholder]=\"placeholder\"\r\n (input)=\"onInput($event)\"\r\n (focus)=\"onFocus()\"\r\n (blur)=\"onBlur()\"\r\n class=\"Input\"\r\n [disabled]=\"isDisabled\"\r\n/>\r\n</div>\r\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex!important;flex-direction:column!important;width:100%;height:max-content;--radius-none: 0;--radius-xs: 2px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 16px;--radius-full: 9999px;--spacing-xxs: 2px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 16px;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);font-weight:400;width:100%;cursor:pointer;padding:0 3px;margin:0 0 4px;overflow:hidden;word-break:break-all}:host .Entry{display:flex!important;width:100%;height:32px;justify-content:flex-start;align-items:center;border:solid 0 var(--color-input-border, #d4d4d4);border-radius:12px!important;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px!important;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .Entry .Input{text-align:end}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
1559
1559
  }
1560
1560
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: IntegerEntryComponent, decorators: [{
1561
1561
  type: Component,
@@ -1565,7 +1565,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
1565
1565
  useExisting: forwardRef(() => IntegerEntryComponent),
1566
1566
  multi: true,
1567
1567
  },
1568
- ], template: "<p\r\n *ngIf=\"label\"\r\n class=\"Label\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\r\n</p>\r\n\r\n<p\r\n *ngIf=\"description\"\r\n class=\"Description\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ description }}\r\n</p>\r\n\r\n<div class=\"Entry\" [class.Disabled]=\"isDisabled\" [class.IsFocus]=\"isFocus\">\r\n <input\r\n #inputEl\r\n type=\"text\"\r\n inputmode=\"numeric\"\r\n [value]=\"textValue\"\r\n [placeholder]=\"placeholder\"\r\n (input)=\"onInput($event)\"\r\n (focus)=\"onFocus()\"\r\n (blur)=\"onBlur()\"\r\n class=\"Input\"\r\n [disabled]=\"isDisabled\"\r\n/>\r\n</div>\r\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex;flex-direction:column;width:100%;height:max-content;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);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(--color-input-border, #d4d4d4);border-radius:12px;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .Entry .Input{text-align:end}\n"] }]
1568
+ ], template: "<p\r\n *ngIf=\"label\"\r\n class=\"Label\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\r\n</p>\r\n\r\n<p\r\n *ngIf=\"description\"\r\n class=\"Description\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ description }}\r\n</p>\r\n\r\n<div class=\"Entry\" [class.Disabled]=\"isDisabled\" [class.IsFocus]=\"isFocus\">\r\n <input\r\n #inputEl\r\n type=\"text\"\r\n inputmode=\"numeric\"\r\n [value]=\"textValue\"\r\n [placeholder]=\"placeholder\"\r\n (input)=\"onInput($event)\"\r\n (focus)=\"onFocus()\"\r\n (blur)=\"onBlur()\"\r\n class=\"Input\"\r\n [disabled]=\"isDisabled\"\r\n/>\r\n</div>\r\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex!important;flex-direction:column!important;width:100%;height:max-content;--radius-none: 0;--radius-xs: 2px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 16px;--radius-full: 9999px;--spacing-xxs: 2px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 16px;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);font-weight:400;width:100%;cursor:pointer;padding:0 3px;margin:0 0 4px;overflow:hidden;word-break:break-all}:host .Entry{display:flex!important;width:100%;height:32px;justify-content:flex-start;align-items:center;border:solid 0 var(--color-input-border, #d4d4d4);border-radius:12px!important;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px!important;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .Entry .Input{text-align:end}\n"] }]
1569
1569
  }], propDecorators: { label: [{
1570
1570
  type: Input
1571
1571
  }], opcional: [{
@@ -1716,7 +1716,7 @@ class DecimalEntryComponent {
1716
1716
  useExisting: forwardRef(() => DecimalEntryComponent),
1717
1717
  multi: true,
1718
1718
  },
1719
- ], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputEl"], descendants: true }], ngImport: i0, template: "<p\r\n *ngIf=\"label\"\r\n class=\"Label\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\r\n</p>\r\n\r\n<p\r\n *ngIf=\"description\"\r\n class=\"Description\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ description }}\r\n</p>\r\n\r\n<div class=\"Entry\" [class.IsFocus]=\"isFocus\">\r\n <input\r\n #inputEl\r\n type=\"text\"\r\n inputmode=\"decimal\"\r\n [value]=\"textValue\"\r\n [placeholder]=\"placeholder\"\r\n (input)=\"onInput($event)\"\r\n (focus)=\"onFocus()\"\r\n (blur)=\"onBlur()\"\r\n class=\"Input\"\r\n [disabled]=\"isDisabled\"\r\n/>\r\n</div>\r\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex;flex-direction:column;width:100%;height:max-content;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);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(--color-input-border, #d4d4d4);border-radius:12px;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .Entry .Input{text-align:end}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
1719
+ ], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputEl"], descendants: true }], ngImport: i0, template: "<p\r\n *ngIf=\"label\"\r\n class=\"Label\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\r\n</p>\r\n\r\n<p\r\n *ngIf=\"description\"\r\n class=\"Description\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ description }}\r\n</p>\r\n\r\n<div class=\"Entry\" [class.IsFocus]=\"isFocus\">\r\n <input\r\n #inputEl\r\n type=\"text\"\r\n inputmode=\"decimal\"\r\n [value]=\"textValue\"\r\n [placeholder]=\"placeholder\"\r\n (input)=\"onInput($event)\"\r\n (focus)=\"onFocus()\"\r\n (blur)=\"onBlur()\"\r\n class=\"Input\"\r\n [disabled]=\"isDisabled\"\r\n/>\r\n</div>\r\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex!important;flex-direction:column!important;width:100%;height:max-content;--radius-none: 0;--radius-xs: 2px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 16px;--radius-full: 9999px;--spacing-xxs: 2px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 16px;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);font-weight:400;width:100%;cursor:pointer;padding:0 3px;margin:0 0 4px;overflow:hidden;word-break:break-all}:host .Entry{display:flex!important;width:100%;height:32px;justify-content:flex-start;align-items:center;border:solid 0 var(--color-input-border, #d4d4d4);border-radius:12px!important;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px!important;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .Entry .Input{text-align:end}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
1720
1720
  }
1721
1721
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: DecimalEntryComponent, decorators: [{
1722
1722
  type: Component,
@@ -1726,7 +1726,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
1726
1726
  useExisting: forwardRef(() => DecimalEntryComponent),
1727
1727
  multi: true,
1728
1728
  },
1729
- ], template: "<p\r\n *ngIf=\"label\"\r\n class=\"Label\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\r\n</p>\r\n\r\n<p\r\n *ngIf=\"description\"\r\n class=\"Description\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ description }}\r\n</p>\r\n\r\n<div class=\"Entry\" [class.IsFocus]=\"isFocus\">\r\n <input\r\n #inputEl\r\n type=\"text\"\r\n inputmode=\"decimal\"\r\n [value]=\"textValue\"\r\n [placeholder]=\"placeholder\"\r\n (input)=\"onInput($event)\"\r\n (focus)=\"onFocus()\"\r\n (blur)=\"onBlur()\"\r\n class=\"Input\"\r\n [disabled]=\"isDisabled\"\r\n/>\r\n</div>\r\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex;flex-direction:column;width:100%;height:max-content;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);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(--color-input-border, #d4d4d4);border-radius:12px;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .Entry .Input{text-align:end}\n"] }]
1729
+ ], template: "<p\r\n *ngIf=\"label\"\r\n class=\"Label\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\r\n</p>\r\n\r\n<p\r\n *ngIf=\"description\"\r\n class=\"Description\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ description }}\r\n</p>\r\n\r\n<div class=\"Entry\" [class.IsFocus]=\"isFocus\">\r\n <input\r\n #inputEl\r\n type=\"text\"\r\n inputmode=\"decimal\"\r\n [value]=\"textValue\"\r\n [placeholder]=\"placeholder\"\r\n (input)=\"onInput($event)\"\r\n (focus)=\"onFocus()\"\r\n (blur)=\"onBlur()\"\r\n class=\"Input\"\r\n [disabled]=\"isDisabled\"\r\n/>\r\n</div>\r\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex!important;flex-direction:column!important;width:100%;height:max-content;--radius-none: 0;--radius-xs: 2px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 16px;--radius-full: 9999px;--spacing-xxs: 2px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 16px;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);font-weight:400;width:100%;cursor:pointer;padding:0 3px;margin:0 0 4px;overflow:hidden;word-break:break-all}:host .Entry{display:flex!important;width:100%;height:32px;justify-content:flex-start;align-items:center;border:solid 0 var(--color-input-border, #d4d4d4);border-radius:12px!important;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px!important;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .Entry .Input{text-align:end}\n"] }]
1730
1730
  }], propDecorators: { label: [{
1731
1731
  type: Input
1732
1732
  }], opcional: [{
@@ -1901,7 +1901,7 @@ class CounterEntryComponent {
1901
1901
  useExisting: forwardRef(() => CounterEntryComponent),
1902
1902
  multi: true,
1903
1903
  },
1904
- ], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputEl"], descendants: true }], ngImport: i0, template: "<p\r\n *ngIf=\"label\"\r\n class=\"Label\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\r\n</p>\r\n\r\n<p\r\n *ngIf=\"description\"\r\n class=\"Description\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ description }}\r\n</p>\r\n\r\n<div class=\"Entry\" [class.IsFocus]=\"isFocus\">\r\n <button\r\n type=\"button\"\r\n class=\"Btn BtnDecrement\"\r\n [class.IsMin]=\"isMin\"\r\n [disabled]=\"isDisabled || isMin\"\r\n (click)=\"decrement()\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n >\r\n <lucide-icon name=\"minus\"></lucide-icon>\r\n </button>\r\n\r\n <input\r\n #inputEl\r\n type=\"text\"\r\n inputmode=\"numeric\"\r\n [value]=\"textValue\"\r\n [placeholder]=\"placeholder\"\r\n (input)=\"onInput($event)\"\r\n (focus)=\"onFocus()\"\r\n (blur)=\"onBlur()\"\r\n class=\"Input\"\r\n [disabled]=\"isDisabled\"\r\n />\r\n\r\n <button\r\n type=\"button\"\r\n class=\"Btn BtnIncrement\"\r\n [class.IsMax]=\"isMax\"\r\n [disabled]=\"isDisabled || isMax\"\r\n (click)=\"increment()\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n >\r\n <lucide-icon name=\"plus\"></lucide-icon>\r\n </button>\r\n</div>\r\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex;flex-direction:column;width:100%;height:max-content;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);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(--color-input-border, #d4d4d4);border-radius:12px;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .Entry .Btn{width:32px;min-width:32px;height:100%;display:flex;justify-content:center;align-items:center;padding:0 8px;background-color:var(--color-input-addon-bg);font-size:14px;cursor:pointer}:host .Entry .Btn i{pointer-events:none}:host .Entry .Btn.IsMin,:host .Entry .Btn.IsMax{opacity:.5;cursor:not-allowed}:host .Entry .Input{padding-right:8px;text-align:end}\n"], dependencies: [{ kind: "component", type: LucideIconComponent, selector: "lucide-icon", inputs: ["name", "size", "spin", "filled"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
1904
+ ], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputEl"], descendants: true }], ngImport: i0, template: "<p\r\n *ngIf=\"label\"\r\n class=\"Label\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\r\n</p>\r\n\r\n<p\r\n *ngIf=\"description\"\r\n class=\"Description\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ description }}\r\n</p>\r\n\r\n<div class=\"Entry\" [class.IsFocus]=\"isFocus\">\r\n <button\r\n type=\"button\"\r\n class=\"Btn BtnDecrement\"\r\n [class.IsMin]=\"isMin\"\r\n [disabled]=\"isDisabled || isMin\"\r\n (click)=\"decrement()\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n >\r\n <lucide-icon name=\"minus\"></lucide-icon>\r\n </button>\r\n\r\n <input\r\n #inputEl\r\n type=\"text\"\r\n inputmode=\"numeric\"\r\n [value]=\"textValue\"\r\n [placeholder]=\"placeholder\"\r\n (input)=\"onInput($event)\"\r\n (focus)=\"onFocus()\"\r\n (blur)=\"onBlur()\"\r\n class=\"Input\"\r\n [disabled]=\"isDisabled\"\r\n />\r\n\r\n <button\r\n type=\"button\"\r\n class=\"Btn BtnIncrement\"\r\n [class.IsMax]=\"isMax\"\r\n [disabled]=\"isDisabled || isMax\"\r\n (click)=\"increment()\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n >\r\n <lucide-icon name=\"plus\"></lucide-icon>\r\n </button>\r\n</div>\r\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex!important;flex-direction:column!important;width:100%;height:max-content;--radius-none: 0;--radius-xs: 2px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 16px;--radius-full: 9999px;--spacing-xxs: 2px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 16px;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);font-weight:400;width:100%;cursor:pointer;padding:0 3px;margin:0 0 4px;overflow:hidden;word-break:break-all}:host .Entry{display:flex!important;width:100%;height:32px;justify-content:flex-start;align-items:center;border:solid 0 var(--color-input-border, #d4d4d4);border-radius:12px!important;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px!important;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .Entry .Btn{width:32px;min-width:32px;height:100%;display:flex;justify-content:center;align-items:center;padding:0 8px;background-color:var(--color-input-addon-bg);font-size:14px;cursor:pointer}:host .Entry .Btn i{pointer-events:none}:host .Entry .Btn.IsMin,:host .Entry .Btn.IsMax{opacity:.5;cursor:not-allowed}:host .Entry .Input{padding-right:8px;text-align:end}\n"], dependencies: [{ kind: "component", type: LucideIconComponent, selector: "lucide-icon", inputs: ["name", "size", "spin", "filled"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
1905
1905
  }
1906
1906
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: CounterEntryComponent, decorators: [{
1907
1907
  type: Component,
@@ -1913,7 +1913,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
1913
1913
  useExisting: forwardRef(() => CounterEntryComponent),
1914
1914
  multi: true,
1915
1915
  },
1916
- ], template: "<p\r\n *ngIf=\"label\"\r\n class=\"Label\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\r\n</p>\r\n\r\n<p\r\n *ngIf=\"description\"\r\n class=\"Description\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ description }}\r\n</p>\r\n\r\n<div class=\"Entry\" [class.IsFocus]=\"isFocus\">\r\n <button\r\n type=\"button\"\r\n class=\"Btn BtnDecrement\"\r\n [class.IsMin]=\"isMin\"\r\n [disabled]=\"isDisabled || isMin\"\r\n (click)=\"decrement()\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n >\r\n <lucide-icon name=\"minus\"></lucide-icon>\r\n </button>\r\n\r\n <input\r\n #inputEl\r\n type=\"text\"\r\n inputmode=\"numeric\"\r\n [value]=\"textValue\"\r\n [placeholder]=\"placeholder\"\r\n (input)=\"onInput($event)\"\r\n (focus)=\"onFocus()\"\r\n (blur)=\"onBlur()\"\r\n class=\"Input\"\r\n [disabled]=\"isDisabled\"\r\n />\r\n\r\n <button\r\n type=\"button\"\r\n class=\"Btn BtnIncrement\"\r\n [class.IsMax]=\"isMax\"\r\n [disabled]=\"isDisabled || isMax\"\r\n (click)=\"increment()\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n >\r\n <lucide-icon name=\"plus\"></lucide-icon>\r\n </button>\r\n</div>\r\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex;flex-direction:column;width:100%;height:max-content;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);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(--color-input-border, #d4d4d4);border-radius:12px;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .Entry .Btn{width:32px;min-width:32px;height:100%;display:flex;justify-content:center;align-items:center;padding:0 8px;background-color:var(--color-input-addon-bg);font-size:14px;cursor:pointer}:host .Entry .Btn i{pointer-events:none}:host .Entry .Btn.IsMin,:host .Entry .Btn.IsMax{opacity:.5;cursor:not-allowed}:host .Entry .Input{padding-right:8px;text-align:end}\n"] }]
1916
+ ], template: "<p\r\n *ngIf=\"label\"\r\n class=\"Label\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\r\n</p>\r\n\r\n<p\r\n *ngIf=\"description\"\r\n class=\"Description\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ description }}\r\n</p>\r\n\r\n<div class=\"Entry\" [class.IsFocus]=\"isFocus\">\r\n <button\r\n type=\"button\"\r\n class=\"Btn BtnDecrement\"\r\n [class.IsMin]=\"isMin\"\r\n [disabled]=\"isDisabled || isMin\"\r\n (click)=\"decrement()\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n >\r\n <lucide-icon name=\"minus\"></lucide-icon>\r\n </button>\r\n\r\n <input\r\n #inputEl\r\n type=\"text\"\r\n inputmode=\"numeric\"\r\n [value]=\"textValue\"\r\n [placeholder]=\"placeholder\"\r\n (input)=\"onInput($event)\"\r\n (focus)=\"onFocus()\"\r\n (blur)=\"onBlur()\"\r\n class=\"Input\"\r\n [disabled]=\"isDisabled\"\r\n />\r\n\r\n <button\r\n type=\"button\"\r\n class=\"Btn BtnIncrement\"\r\n [class.IsMax]=\"isMax\"\r\n [disabled]=\"isDisabled || isMax\"\r\n (click)=\"increment()\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n >\r\n <lucide-icon name=\"plus\"></lucide-icon>\r\n </button>\r\n</div>\r\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex!important;flex-direction:column!important;width:100%;height:max-content;--radius-none: 0;--radius-xs: 2px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 16px;--radius-full: 9999px;--spacing-xxs: 2px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 16px;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);font-weight:400;width:100%;cursor:pointer;padding:0 3px;margin:0 0 4px;overflow:hidden;word-break:break-all}:host .Entry{display:flex!important;width:100%;height:32px;justify-content:flex-start;align-items:center;border:solid 0 var(--color-input-border, #d4d4d4);border-radius:12px!important;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px!important;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .Entry .Btn{width:32px;min-width:32px;height:100%;display:flex;justify-content:center;align-items:center;padding:0 8px;background-color:var(--color-input-addon-bg);font-size:14px;cursor:pointer}:host .Entry .Btn i{pointer-events:none}:host .Entry .Btn.IsMin,:host .Entry .Btn.IsMax{opacity:.5;cursor:not-allowed}:host .Entry .Input{padding-right:8px;text-align:end}\n"] }]
1917
1917
  }], propDecorators: { label: [{
1918
1918
  type: Input
1919
1919
  }], description: [{
@@ -2110,7 +2110,7 @@ class PriceEntryComponent {
2110
2110
  useExisting: forwardRef(() => PriceEntryComponent),
2111
2111
  multi: true,
2112
2112
  },
2113
- ], ngImport: i0, template: "<p\r\n *ngIf=\"label\"\r\n class=\"Label\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\r\n</p>\r\n\r\n<p\r\n *ngIf=\"description\"\r\n class=\"Description\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ description }}\r\n</p>\r\n\r\n<div class=\"Entry\" [class.IsFocus]=\"isFocus\">\r\n <div class=\"Symbol\" (click)=\"manualClick($event); $event.stopPropagation()\">\r\n {{ symbol }}\r\n </div>\r\n <input\r\n type=\"text\"\r\n [value]=\"repValue || ''\"\r\n [placeholder]=\"placeholder\"\r\n (focus)=\"onFocus()\"\r\n (blur)=\"onBlur()\"\r\n class=\"Input\"\r\n [class.Disabled]=\"isDisabled\"\r\n [disabled]=\"isDisabled\"\r\n />\r\n</div>\r\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex;flex-direction:column;width:100%;height:max-content;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);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(--color-input-border, #d4d4d4);border-radius:12px;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .Entry .Symbol{width:32px;min-width:32px;height:100%;display:flex;justify-content:center;align-items:center;padding:0 8px;background-color:var(--color-input-addon-bg);font-size:14px;cursor:pointer}:host .Entry .Input{text-align:end}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
2113
+ ], ngImport: i0, template: "<p\r\n *ngIf=\"label\"\r\n class=\"Label\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\r\n</p>\r\n\r\n<p\r\n *ngIf=\"description\"\r\n class=\"Description\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ description }}\r\n</p>\r\n\r\n<div class=\"Entry\" [class.IsFocus]=\"isFocus\">\r\n <div class=\"Symbol\" (click)=\"manualClick($event); $event.stopPropagation()\">\r\n {{ symbol }}\r\n </div>\r\n <input\r\n type=\"text\"\r\n [value]=\"repValue || ''\"\r\n [placeholder]=\"placeholder\"\r\n (focus)=\"onFocus()\"\r\n (blur)=\"onBlur()\"\r\n class=\"Input\"\r\n [class.Disabled]=\"isDisabled\"\r\n [disabled]=\"isDisabled\"\r\n />\r\n</div>\r\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex!important;flex-direction:column!important;width:100%;height:max-content;--radius-none: 0;--radius-xs: 2px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 16px;--radius-full: 9999px;--spacing-xxs: 2px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 16px;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);font-weight:400;width:100%;cursor:pointer;padding:0 3px;margin:0 0 4px;overflow:hidden;word-break:break-all}:host .Entry{display:flex!important;width:100%;height:32px;justify-content:flex-start;align-items:center;border:solid 0 var(--color-input-border, #d4d4d4);border-radius:12px!important;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px!important;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .Entry .Symbol{width:32px;min-width:32px;height:100%;display:flex;justify-content:center;align-items:center;padding:0 8px;background-color:var(--color-input-addon-bg);font-size:14px;cursor:pointer}:host .Entry .Input{text-align:end}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
2114
2114
  }
2115
2115
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: PriceEntryComponent, decorators: [{
2116
2116
  type: Component,
@@ -2120,7 +2120,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
2120
2120
  useExisting: forwardRef(() => PriceEntryComponent),
2121
2121
  multi: true,
2122
2122
  },
2123
- ], template: "<p\r\n *ngIf=\"label\"\r\n class=\"Label\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\r\n</p>\r\n\r\n<p\r\n *ngIf=\"description\"\r\n class=\"Description\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ description }}\r\n</p>\r\n\r\n<div class=\"Entry\" [class.IsFocus]=\"isFocus\">\r\n <div class=\"Symbol\" (click)=\"manualClick($event); $event.stopPropagation()\">\r\n {{ symbol }}\r\n </div>\r\n <input\r\n type=\"text\"\r\n [value]=\"repValue || ''\"\r\n [placeholder]=\"placeholder\"\r\n (focus)=\"onFocus()\"\r\n (blur)=\"onBlur()\"\r\n class=\"Input\"\r\n [class.Disabled]=\"isDisabled\"\r\n [disabled]=\"isDisabled\"\r\n />\r\n</div>\r\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex;flex-direction:column;width:100%;height:max-content;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);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(--color-input-border, #d4d4d4);border-radius:12px;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .Entry .Symbol{width:32px;min-width:32px;height:100%;display:flex;justify-content:center;align-items:center;padding:0 8px;background-color:var(--color-input-addon-bg);font-size:14px;cursor:pointer}:host .Entry .Input{text-align:end}\n"] }]
2123
+ ], template: "<p\r\n *ngIf=\"label\"\r\n class=\"Label\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\r\n</p>\r\n\r\n<p\r\n *ngIf=\"description\"\r\n class=\"Description\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ description }}\r\n</p>\r\n\r\n<div class=\"Entry\" [class.IsFocus]=\"isFocus\">\r\n <div class=\"Symbol\" (click)=\"manualClick($event); $event.stopPropagation()\">\r\n {{ symbol }}\r\n </div>\r\n <input\r\n type=\"text\"\r\n [value]=\"repValue || ''\"\r\n [placeholder]=\"placeholder\"\r\n (focus)=\"onFocus()\"\r\n (blur)=\"onBlur()\"\r\n class=\"Input\"\r\n [class.Disabled]=\"isDisabled\"\r\n [disabled]=\"isDisabled\"\r\n />\r\n</div>\r\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex!important;flex-direction:column!important;width:100%;height:max-content;--radius-none: 0;--radius-xs: 2px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 16px;--radius-full: 9999px;--spacing-xxs: 2px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 16px;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);font-weight:400;width:100%;cursor:pointer;padding:0 3px;margin:0 0 4px;overflow:hidden;word-break:break-all}:host .Entry{display:flex!important;width:100%;height:32px;justify-content:flex-start;align-items:center;border:solid 0 var(--color-input-border, #d4d4d4);border-radius:12px!important;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px!important;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .Entry .Symbol{width:32px;min-width:32px;height:100%;display:flex;justify-content:center;align-items:center;padding:0 8px;background-color:var(--color-input-addon-bg);font-size:14px;cursor:pointer}:host .Entry .Input{text-align:end}\n"] }]
2124
2124
  }], propDecorators: { label: [{
2125
2125
  type: Input
2126
2126
  }], opcional: [{
@@ -2636,7 +2636,7 @@ class RangeEntryComponent {
2636
2636
  useExisting: forwardRef(() => RangeEntryComponent),
2637
2637
  multi: true,
2638
2638
  },
2639
- ], viewQueries: [{ propertyName: "trackWrapper", first: true, predicate: ["trackWrapper"], descendants: true }, { propertyName: "trackRef", first: true, predicate: ["trackRef"], descendants: true }], ngImport: i0, template: "<p\r\n *ngIf=\"label\"\r\n class=\"Label\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\r\n</p>\r\n\r\n<p\r\n *ngIf=\"description\"\r\n class=\"Description\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ description }}\r\n</p>\r\n\r\n<div class=\"ValuePrint\">\r\n <input\r\n class=\"MinValue Value\"\r\n type=\"text\"\r\n [value]=\"decimal ? minValue.toFixed(2) : minValue.toString()\"\r\n (input)=\"onMinChange($event)\"\r\n (keydown)=\"onValueKeydown($event)\"\r\n [disabled]=\"isDisabled\"\r\n />\r\n -\r\n <input\r\n class=\"MaxValue Value\"\r\n type=\"text\"\r\n [value]=\"decimal ? maxValue.toFixed(2) : maxValue.toString()\"\r\n (input)=\"onMaxChange($event)\"\r\n (keydown)=\"onValueKeydown($event)\"\r\n [disabled]=\"isDisabled\"\r\n />\r\n</div>\r\n\r\n<div class=\"RangeEntry\">\r\n <div class=\"RangeWrapper\" #trackWrapper [class.Disabled]=\"isDisabled\">\r\n <div\r\n class=\"Track\"\r\n #trackRef\r\n (click)=\"onTrackClick($event)\"\r\n (touchstart)=\"onTrackTouchStart($event)\"\r\n >\r\n <div class=\"Range\" [ngStyle]=\"rangeStyle\"></div>\r\n </div>\r\n\r\n <!-- Thumb UI personalizado para min -->\r\n <div\r\n class=\"Thumb ThumbMin\"\r\n [style.left.%]=\"leftPercent\"\r\n (mousedown)=\"onThumbMouseDown('min', $event)\"\r\n (touchstart)=\"onThumbTouchStart('min', $event)\"\r\n [class.Dragging]=\"isDraggingMin\"\r\n ></div>\r\n\r\n <!-- Thumb UI personalizado para max -->\r\n <div\r\n class=\"Thumb ThumbMax\"\r\n [style.left.%]=\"rightPercent\"\r\n (mousedown)=\"onThumbMouseDown('max', $event)\"\r\n (touchstart)=\"onThumbTouchStart('max', $event)\"\r\n [class.Dragging]=\"isDraggingMax\"\r\n ></div>\r\n\r\n <!-- Inputs range ocultos (solo para sincronizaci\u00F3n) -->\r\n <input\r\n type=\"range\"\r\n class=\"HiddenRange\"\r\n [min]=\"min\"\r\n [max]=\"max\"\r\n [step]=\"step\"\r\n [value]=\"minValue\"\r\n (input)=\"onMinChange($event)\"\r\n (change)=\"onSliderRelease()\"\r\n [disabled]=\"isDisabled\"\r\n tabindex=\"-1\"\r\n aria-hidden=\"true\"\r\n />\r\n\r\n <input\r\n type=\"range\"\r\n class=\"HiddenRange\"\r\n [min]=\"min\"\r\n [max]=\"max\"\r\n [step]=\"step\"\r\n [value]=\"maxValue\"\r\n (input)=\"onMaxChange($event)\"\r\n (change)=\"onSliderRelease()\"\r\n [disabled]=\"isDisabled\"\r\n tabindex=\"-1\"\r\n aria-hidden=\"true\"\r\n />\r\n </div>\r\n</div>\r\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex;flex-direction:column;width:100%;height:max-content;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);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(--color-input-border, #d4d4d4);border-radius:12px;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .ValuePrint{width:100%;display:flex;align-items:center;justify-content:space-between;gap:5px;overflow:hidden}:host .ValuePrint .Value{display:flex;flex:1;max-width:30%;height:36px;padding:0 4px;text-align:center;border:none;outline:none;caret-color:var(--color-fg-brand)}:host .ValuePrint .Value::-webkit-outer-spin-button,:host .ValuePrint .Value::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host .ValuePrint .MinValue{text-align:left}:host .ValuePrint .MaxValue{text-align:right}:host .RangeEntry{display:flex;align-items:center;gap:5px;padding:0 12px}:host .RangeEntry .RangeWrapper{position:relative;width:100%}:host .RangeEntry .RangeWrapper.Disabled{opacity:.5;pointer-events:none}:host .RangeEntry .Track{position:relative;z-index:0;height:8px;background-color:var(--color-input-bg);border-radius:50px;overflow:visible;cursor:pointer;touch-action:none}:host .RangeEntry .Range{position:absolute;height:100%;background-color:var(--color-fg-brand);pointer-events:none;z-index:10;left:0;right:0}:host .RangeEntry .Track{cursor:pointer;touch-action:none}:host .RangeEntry .Thumb{position:absolute;top:50%;transform:translate(-50%,-50%);width:20px;height:20px;background-color:var(--color-input-bg);border:3px solid var(--color-fg-brand);border-radius:50%;cursor:grab;z-index:20;touch-action:none;transition:transform .1s ease;-webkit-user-select:none;user-select:none}:host .RangeEntry .Thumb:hover,:host .RangeEntry .Thumb.Dragging{transform:translate(-50%,-50%) scale(1.2);cursor:grabbing;box-shadow:0 2px 8px var(--color-scrim)}:host .RangeEntry .Thumb:active{cursor:grabbing}:host .RangeEntry .HiddenRange{position:absolute;top:0;left:0;width:100%;height:100%;background:transparent;pointer-events:none;opacity:0;appearance:none;-webkit-appearance:none;-moz-appearance:none;z-index:-1}:host .RangeEntry .HiddenRange::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:0;height:0}:host .RangeEntry .HiddenRange::-moz-range-thumb{width:0;height:0;border:none;background:transparent}:host .RangeEntry .HiddenRange::-webkit-slider-runnable-track{background:transparent}:host .RangeEntry .HiddenRange::-moz-range-track{background:transparent}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }] });
2639
+ ], viewQueries: [{ propertyName: "trackWrapper", first: true, predicate: ["trackWrapper"], descendants: true }, { propertyName: "trackRef", first: true, predicate: ["trackRef"], descendants: true }], ngImport: i0, template: "<p\r\n *ngIf=\"label\"\r\n class=\"Label\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\r\n</p>\r\n\r\n<p\r\n *ngIf=\"description\"\r\n class=\"Description\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ description }}\r\n</p>\r\n\r\n<div class=\"ValuePrint\">\r\n <input\r\n class=\"MinValue Value\"\r\n type=\"text\"\r\n [value]=\"decimal ? minValue.toFixed(2) : minValue.toString()\"\r\n (input)=\"onMinChange($event)\"\r\n (keydown)=\"onValueKeydown($event)\"\r\n [disabled]=\"isDisabled\"\r\n />\r\n -\r\n <input\r\n class=\"MaxValue Value\"\r\n type=\"text\"\r\n [value]=\"decimal ? maxValue.toFixed(2) : maxValue.toString()\"\r\n (input)=\"onMaxChange($event)\"\r\n (keydown)=\"onValueKeydown($event)\"\r\n [disabled]=\"isDisabled\"\r\n />\r\n</div>\r\n\r\n<div class=\"RangeEntry\">\r\n <div class=\"RangeWrapper\" #trackWrapper [class.Disabled]=\"isDisabled\">\r\n <div\r\n class=\"Track\"\r\n #trackRef\r\n (click)=\"onTrackClick($event)\"\r\n (touchstart)=\"onTrackTouchStart($event)\"\r\n >\r\n <div class=\"Range\" [ngStyle]=\"rangeStyle\"></div>\r\n </div>\r\n\r\n <!-- Thumb UI personalizado para min -->\r\n <div\r\n class=\"Thumb ThumbMin\"\r\n [style.left.%]=\"leftPercent\"\r\n (mousedown)=\"onThumbMouseDown('min', $event)\"\r\n (touchstart)=\"onThumbTouchStart('min', $event)\"\r\n [class.Dragging]=\"isDraggingMin\"\r\n ></div>\r\n\r\n <!-- Thumb UI personalizado para max -->\r\n <div\r\n class=\"Thumb ThumbMax\"\r\n [style.left.%]=\"rightPercent\"\r\n (mousedown)=\"onThumbMouseDown('max', $event)\"\r\n (touchstart)=\"onThumbTouchStart('max', $event)\"\r\n [class.Dragging]=\"isDraggingMax\"\r\n ></div>\r\n\r\n <!-- Inputs range ocultos (solo para sincronizaci\u00F3n) -->\r\n <input\r\n type=\"range\"\r\n class=\"HiddenRange\"\r\n [min]=\"min\"\r\n [max]=\"max\"\r\n [step]=\"step\"\r\n [value]=\"minValue\"\r\n (input)=\"onMinChange($event)\"\r\n (change)=\"onSliderRelease()\"\r\n [disabled]=\"isDisabled\"\r\n tabindex=\"-1\"\r\n aria-hidden=\"true\"\r\n />\r\n\r\n <input\r\n type=\"range\"\r\n class=\"HiddenRange\"\r\n [min]=\"min\"\r\n [max]=\"max\"\r\n [step]=\"step\"\r\n [value]=\"maxValue\"\r\n (input)=\"onMaxChange($event)\"\r\n (change)=\"onSliderRelease()\"\r\n [disabled]=\"isDisabled\"\r\n tabindex=\"-1\"\r\n aria-hidden=\"true\"\r\n />\r\n </div>\r\n</div>\r\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex!important;flex-direction:column!important;width:100%;height:max-content;--radius-none: 0;--radius-xs: 2px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 16px;--radius-full: 9999px;--spacing-xxs: 2px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 16px;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);font-weight:400;width:100%;cursor:pointer;padding:0 3px;margin:0 0 4px;overflow:hidden;word-break:break-all}:host .Entry{display:flex!important;width:100%;height:32px;justify-content:flex-start;align-items:center;border:solid 0 var(--color-input-border, #d4d4d4);border-radius:12px!important;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px!important;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .ValuePrint{width:100%;display:flex;align-items:center;justify-content:space-between;gap:5px;overflow:hidden}:host .ValuePrint .Value{display:flex;flex:1;max-width:30%;height:36px;padding:0 4px;text-align:center;border:none;outline:none;caret-color:var(--color-fg-brand)}:host .ValuePrint .Value::-webkit-outer-spin-button,:host .ValuePrint .Value::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host .ValuePrint .MinValue{text-align:left}:host .ValuePrint .MaxValue{text-align:right}:host .RangeEntry{display:flex;align-items:center;gap:5px;padding:0 12px}:host .RangeEntry .RangeWrapper{position:relative;width:100%}:host .RangeEntry .RangeWrapper.Disabled{opacity:.5;pointer-events:none}:host .RangeEntry .Track{position:relative;z-index:0;height:8px;background-color:var(--color-input-bg);border-radius:50px;overflow:visible;cursor:pointer;touch-action:none}:host .RangeEntry .Range{position:absolute;height:100%;background-color:var(--color-fg-brand);pointer-events:none;z-index:10;left:0;right:0}:host .RangeEntry .Track{cursor:pointer;touch-action:none}:host .RangeEntry .Thumb{position:absolute;top:50%;transform:translate(-50%,-50%);width:20px;height:20px;background-color:var(--color-input-bg);border:3px solid var(--color-fg-brand);border-radius:50%;cursor:grab;z-index:20;touch-action:none;transition:transform .1s ease;-webkit-user-select:none;user-select:none}:host .RangeEntry .Thumb:hover,:host .RangeEntry .Thumb.Dragging{transform:translate(-50%,-50%) scale(1.2);cursor:grabbing;box-shadow:0 2px 8px var(--color-scrim)}:host .RangeEntry .Thumb:active{cursor:grabbing}:host .RangeEntry .HiddenRange{position:absolute;top:0;left:0;width:100%;height:100%;background:transparent;pointer-events:none;opacity:0;appearance:none;-webkit-appearance:none;-moz-appearance:none;z-index:-1}:host .RangeEntry .HiddenRange::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:0;height:0}:host .RangeEntry .HiddenRange::-moz-range-thumb{width:0;height:0;border:none;background:transparent}:host .RangeEntry .HiddenRange::-webkit-slider-runnable-track{background:transparent}:host .RangeEntry .HiddenRange::-moz-range-track{background:transparent}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }] });
2640
2640
  }
2641
2641
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: RangeEntryComponent, decorators: [{
2642
2642
  type: Component,
@@ -2646,7 +2646,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
2646
2646
  useExisting: forwardRef(() => RangeEntryComponent),
2647
2647
  multi: true,
2648
2648
  },
2649
- ], template: "<p\r\n *ngIf=\"label\"\r\n class=\"Label\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\r\n</p>\r\n\r\n<p\r\n *ngIf=\"description\"\r\n class=\"Description\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ description }}\r\n</p>\r\n\r\n<div class=\"ValuePrint\">\r\n <input\r\n class=\"MinValue Value\"\r\n type=\"text\"\r\n [value]=\"decimal ? minValue.toFixed(2) : minValue.toString()\"\r\n (input)=\"onMinChange($event)\"\r\n (keydown)=\"onValueKeydown($event)\"\r\n [disabled]=\"isDisabled\"\r\n />\r\n -\r\n <input\r\n class=\"MaxValue Value\"\r\n type=\"text\"\r\n [value]=\"decimal ? maxValue.toFixed(2) : maxValue.toString()\"\r\n (input)=\"onMaxChange($event)\"\r\n (keydown)=\"onValueKeydown($event)\"\r\n [disabled]=\"isDisabled\"\r\n />\r\n</div>\r\n\r\n<div class=\"RangeEntry\">\r\n <div class=\"RangeWrapper\" #trackWrapper [class.Disabled]=\"isDisabled\">\r\n <div\r\n class=\"Track\"\r\n #trackRef\r\n (click)=\"onTrackClick($event)\"\r\n (touchstart)=\"onTrackTouchStart($event)\"\r\n >\r\n <div class=\"Range\" [ngStyle]=\"rangeStyle\"></div>\r\n </div>\r\n\r\n <!-- Thumb UI personalizado para min -->\r\n <div\r\n class=\"Thumb ThumbMin\"\r\n [style.left.%]=\"leftPercent\"\r\n (mousedown)=\"onThumbMouseDown('min', $event)\"\r\n (touchstart)=\"onThumbTouchStart('min', $event)\"\r\n [class.Dragging]=\"isDraggingMin\"\r\n ></div>\r\n\r\n <!-- Thumb UI personalizado para max -->\r\n <div\r\n class=\"Thumb ThumbMax\"\r\n [style.left.%]=\"rightPercent\"\r\n (mousedown)=\"onThumbMouseDown('max', $event)\"\r\n (touchstart)=\"onThumbTouchStart('max', $event)\"\r\n [class.Dragging]=\"isDraggingMax\"\r\n ></div>\r\n\r\n <!-- Inputs range ocultos (solo para sincronizaci\u00F3n) -->\r\n <input\r\n type=\"range\"\r\n class=\"HiddenRange\"\r\n [min]=\"min\"\r\n [max]=\"max\"\r\n [step]=\"step\"\r\n [value]=\"minValue\"\r\n (input)=\"onMinChange($event)\"\r\n (change)=\"onSliderRelease()\"\r\n [disabled]=\"isDisabled\"\r\n tabindex=\"-1\"\r\n aria-hidden=\"true\"\r\n />\r\n\r\n <input\r\n type=\"range\"\r\n class=\"HiddenRange\"\r\n [min]=\"min\"\r\n [max]=\"max\"\r\n [step]=\"step\"\r\n [value]=\"maxValue\"\r\n (input)=\"onMaxChange($event)\"\r\n (change)=\"onSliderRelease()\"\r\n [disabled]=\"isDisabled\"\r\n tabindex=\"-1\"\r\n aria-hidden=\"true\"\r\n />\r\n </div>\r\n</div>\r\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex;flex-direction:column;width:100%;height:max-content;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);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(--color-input-border, #d4d4d4);border-radius:12px;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .ValuePrint{width:100%;display:flex;align-items:center;justify-content:space-between;gap:5px;overflow:hidden}:host .ValuePrint .Value{display:flex;flex:1;max-width:30%;height:36px;padding:0 4px;text-align:center;border:none;outline:none;caret-color:var(--color-fg-brand)}:host .ValuePrint .Value::-webkit-outer-spin-button,:host .ValuePrint .Value::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host .ValuePrint .MinValue{text-align:left}:host .ValuePrint .MaxValue{text-align:right}:host .RangeEntry{display:flex;align-items:center;gap:5px;padding:0 12px}:host .RangeEntry .RangeWrapper{position:relative;width:100%}:host .RangeEntry .RangeWrapper.Disabled{opacity:.5;pointer-events:none}:host .RangeEntry .Track{position:relative;z-index:0;height:8px;background-color:var(--color-input-bg);border-radius:50px;overflow:visible;cursor:pointer;touch-action:none}:host .RangeEntry .Range{position:absolute;height:100%;background-color:var(--color-fg-brand);pointer-events:none;z-index:10;left:0;right:0}:host .RangeEntry .Track{cursor:pointer;touch-action:none}:host .RangeEntry .Thumb{position:absolute;top:50%;transform:translate(-50%,-50%);width:20px;height:20px;background-color:var(--color-input-bg);border:3px solid var(--color-fg-brand);border-radius:50%;cursor:grab;z-index:20;touch-action:none;transition:transform .1s ease;-webkit-user-select:none;user-select:none}:host .RangeEntry .Thumb:hover,:host .RangeEntry .Thumb.Dragging{transform:translate(-50%,-50%) scale(1.2);cursor:grabbing;box-shadow:0 2px 8px var(--color-scrim)}:host .RangeEntry .Thumb:active{cursor:grabbing}:host .RangeEntry .HiddenRange{position:absolute;top:0;left:0;width:100%;height:100%;background:transparent;pointer-events:none;opacity:0;appearance:none;-webkit-appearance:none;-moz-appearance:none;z-index:-1}:host .RangeEntry .HiddenRange::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:0;height:0}:host .RangeEntry .HiddenRange::-moz-range-thumb{width:0;height:0;border:none;background:transparent}:host .RangeEntry .HiddenRange::-webkit-slider-runnable-track{background:transparent}:host .RangeEntry .HiddenRange::-moz-range-track{background:transparent}\n"] }]
2649
+ ], template: "<p\r\n *ngIf=\"label\"\r\n class=\"Label\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\r\n</p>\r\n\r\n<p\r\n *ngIf=\"description\"\r\n class=\"Description\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ description }}\r\n</p>\r\n\r\n<div class=\"ValuePrint\">\r\n <input\r\n class=\"MinValue Value\"\r\n type=\"text\"\r\n [value]=\"decimal ? minValue.toFixed(2) : minValue.toString()\"\r\n (input)=\"onMinChange($event)\"\r\n (keydown)=\"onValueKeydown($event)\"\r\n [disabled]=\"isDisabled\"\r\n />\r\n -\r\n <input\r\n class=\"MaxValue Value\"\r\n type=\"text\"\r\n [value]=\"decimal ? maxValue.toFixed(2) : maxValue.toString()\"\r\n (input)=\"onMaxChange($event)\"\r\n (keydown)=\"onValueKeydown($event)\"\r\n [disabled]=\"isDisabled\"\r\n />\r\n</div>\r\n\r\n<div class=\"RangeEntry\">\r\n <div class=\"RangeWrapper\" #trackWrapper [class.Disabled]=\"isDisabled\">\r\n <div\r\n class=\"Track\"\r\n #trackRef\r\n (click)=\"onTrackClick($event)\"\r\n (touchstart)=\"onTrackTouchStart($event)\"\r\n >\r\n <div class=\"Range\" [ngStyle]=\"rangeStyle\"></div>\r\n </div>\r\n\r\n <!-- Thumb UI personalizado para min -->\r\n <div\r\n class=\"Thumb ThumbMin\"\r\n [style.left.%]=\"leftPercent\"\r\n (mousedown)=\"onThumbMouseDown('min', $event)\"\r\n (touchstart)=\"onThumbTouchStart('min', $event)\"\r\n [class.Dragging]=\"isDraggingMin\"\r\n ></div>\r\n\r\n <!-- Thumb UI personalizado para max -->\r\n <div\r\n class=\"Thumb ThumbMax\"\r\n [style.left.%]=\"rightPercent\"\r\n (mousedown)=\"onThumbMouseDown('max', $event)\"\r\n (touchstart)=\"onThumbTouchStart('max', $event)\"\r\n [class.Dragging]=\"isDraggingMax\"\r\n ></div>\r\n\r\n <!-- Inputs range ocultos (solo para sincronizaci\u00F3n) -->\r\n <input\r\n type=\"range\"\r\n class=\"HiddenRange\"\r\n [min]=\"min\"\r\n [max]=\"max\"\r\n [step]=\"step\"\r\n [value]=\"minValue\"\r\n (input)=\"onMinChange($event)\"\r\n (change)=\"onSliderRelease()\"\r\n [disabled]=\"isDisabled\"\r\n tabindex=\"-1\"\r\n aria-hidden=\"true\"\r\n />\r\n\r\n <input\r\n type=\"range\"\r\n class=\"HiddenRange\"\r\n [min]=\"min\"\r\n [max]=\"max\"\r\n [step]=\"step\"\r\n [value]=\"maxValue\"\r\n (input)=\"onMaxChange($event)\"\r\n (change)=\"onSliderRelease()\"\r\n [disabled]=\"isDisabled\"\r\n tabindex=\"-1\"\r\n aria-hidden=\"true\"\r\n />\r\n </div>\r\n</div>\r\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex!important;flex-direction:column!important;width:100%;height:max-content;--radius-none: 0;--radius-xs: 2px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 16px;--radius-full: 9999px;--spacing-xxs: 2px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 16px;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);font-weight:400;width:100%;cursor:pointer;padding:0 3px;margin:0 0 4px;overflow:hidden;word-break:break-all}:host .Entry{display:flex!important;width:100%;height:32px;justify-content:flex-start;align-items:center;border:solid 0 var(--color-input-border, #d4d4d4);border-radius:12px!important;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px!important;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .ValuePrint{width:100%;display:flex;align-items:center;justify-content:space-between;gap:5px;overflow:hidden}:host .ValuePrint .Value{display:flex;flex:1;max-width:30%;height:36px;padding:0 4px;text-align:center;border:none;outline:none;caret-color:var(--color-fg-brand)}:host .ValuePrint .Value::-webkit-outer-spin-button,:host .ValuePrint .Value::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host .ValuePrint .MinValue{text-align:left}:host .ValuePrint .MaxValue{text-align:right}:host .RangeEntry{display:flex;align-items:center;gap:5px;padding:0 12px}:host .RangeEntry .RangeWrapper{position:relative;width:100%}:host .RangeEntry .RangeWrapper.Disabled{opacity:.5;pointer-events:none}:host .RangeEntry .Track{position:relative;z-index:0;height:8px;background-color:var(--color-input-bg);border-radius:50px;overflow:visible;cursor:pointer;touch-action:none}:host .RangeEntry .Range{position:absolute;height:100%;background-color:var(--color-fg-brand);pointer-events:none;z-index:10;left:0;right:0}:host .RangeEntry .Track{cursor:pointer;touch-action:none}:host .RangeEntry .Thumb{position:absolute;top:50%;transform:translate(-50%,-50%);width:20px;height:20px;background-color:var(--color-input-bg);border:3px solid var(--color-fg-brand);border-radius:50%;cursor:grab;z-index:20;touch-action:none;transition:transform .1s ease;-webkit-user-select:none;user-select:none}:host .RangeEntry .Thumb:hover,:host .RangeEntry .Thumb.Dragging{transform:translate(-50%,-50%) scale(1.2);cursor:grabbing;box-shadow:0 2px 8px var(--color-scrim)}:host .RangeEntry .Thumb:active{cursor:grabbing}:host .RangeEntry .HiddenRange{position:absolute;top:0;left:0;width:100%;height:100%;background:transparent;pointer-events:none;opacity:0;appearance:none;-webkit-appearance:none;-moz-appearance:none;z-index:-1}:host .RangeEntry .HiddenRange::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:0;height:0}:host .RangeEntry .HiddenRange::-moz-range-thumb{width:0;height:0;border:none;background:transparent}:host .RangeEntry .HiddenRange::-webkit-slider-runnable-track{background:transparent}:host .RangeEntry .HiddenRange::-moz-range-track{background:transparent}\n"] }]
2650
2650
  }], propDecorators: { trackWrapper: [{
2651
2651
  type: ViewChild,
2652
2652
  args: ['trackWrapper', { static: false }]
@@ -3062,7 +3062,7 @@ class SliderEntryComponent {
3062
3062
  useExisting: forwardRef(() => SliderEntryComponent),
3063
3063
  multi: true,
3064
3064
  },
3065
- ], viewQueries: [{ propertyName: "trackRef", first: true, predicate: ["trackRef"], descendants: true }], ngImport: i0, template: "<p\r\n *ngIf=\"label\"\r\n class=\"Label\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\r\n</p>\r\n\r\n<p\r\n *ngIf=\"description\"\r\n class=\"Description\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ description }}\r\n</p>\r\n\r\n<div class=\"ValuePrint\">\r\n <input\r\n class=\"Value\"\r\n type=\"text\"\r\n [value]=\"decimal ? value.toFixed(2) : value.toString()\"\r\n (input)=\"onInputChange($event)\"\r\n (keydown)=\"onKeydown($event)\"\r\n [disabled]=\"disabled\"\r\n />\r\n</div>\r\n\r\n<div class=\"SliderEntry\">\r\n <div class=\"RangeWrapper\" [class.Disabled]=\"disabled\">\r\n <div\r\n class=\"Track\"\r\n #trackRef\r\n (click)=\"onTrackClick($event)\"\r\n (touchstart)=\"onTrackTouchStart($event)\"\r\n >\r\n <div class=\"Fill\" [ngStyle]=\"fillStyle\"></div>\r\n </div>\r\n\r\n <!-- Thumb UI personalizado -->\r\n <div\r\n class=\"Thumb\"\r\n [style.left.%]=\"thumbPosition\"\r\n (mousedown)=\"onThumbMouseDown($event)\"\r\n (touchstart)=\"onThumbTouchStart($event)\"\r\n [class.Dragging]=\"isDragging\"\r\n ></div>\r\n\r\n <!-- Input range oculto (solo para sincronizaci\u00F3n) -->\r\n <input\r\n type=\"range\"\r\n class=\"HiddenRange\"\r\n [min]=\"min\"\r\n [max]=\"max\"\r\n [step]=\"calculatedStep\"\r\n [value]=\"value\"\r\n (input)=\"onSliderInput($event)\"\r\n (change)=\"onSliderChange()\"\r\n [disabled]=\"disabled\"\r\n tabindex=\"-1\"\r\n aria-hidden=\"true\"\r\n />\r\n </div>\r\n</div>\r\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex;flex-direction:column;width:100%;height:max-content;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);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(--color-input-border, #d4d4d4);border-radius:12px;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .ValuePrint{width:100%;display:flex;align-items:center;justify-content:space-between;gap:5px;overflow:hidden}:host .ValuePrint .Value{display:flex;flex:1;max-width:30%;height:36px;padding:0 4px;text-align:center;border:none;outline:none;text-align:left;caret-color:var(--color-fg-brand)}:host .ValuePrint .Value::-webkit-outer-spin-button,:host .ValuePrint .Value::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host .SliderEntry{display:flex;align-items:center;gap:5px;padding:0 12px}:host .SliderEntry .RangeWrapper{position:relative;width:100%}:host .SliderEntry .RangeWrapper.Disabled{opacity:.5;pointer-events:none}:host .SliderEntry .Track{position:relative;z-index:0;height:8px;background-color:var(--color-input-bg);border-radius:50px;overflow:visible;cursor:pointer;touch-action:none}:host .SliderEntry .Track .Fill{height:100%;background-color:var(--color-fg-brand);border-radius:50px}:host .SliderEntry .Thumb{position:absolute;top:50%;transform:translate(-50%,-50%);width:20px;height:20px;background-color:var(--color-input-bg);border:3px solid var(--color-fg-brand);border-radius:50%;cursor:grab;z-index:20;touch-action:none;transition:transform .1s ease;-webkit-user-select:none;user-select:none}:host .SliderEntry .Thumb:hover,:host .SliderEntry .Thumb.Dragging{transform:translate(-50%,-50%) scale(1.2);cursor:grabbing;box-shadow:0 2px 8px var(--color-scrim)}:host .SliderEntry .Thumb:active{cursor:grabbing}:host .SliderEntry .HiddenRange{position:absolute;top:0;left:0;width:100%;height:100%;background:transparent;pointer-events:none;opacity:0;appearance:none;-webkit-appearance:none;-moz-appearance:none;z-index:-1}:host .SliderEntry .HiddenRange::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:0;height:0}:host .SliderEntry .HiddenRange::-moz-range-thumb{width:0;height:0;border:none;background:transparent}:host .SliderEntry .HiddenRange::-webkit-slider-runnable-track{background:transparent}:host .SliderEntry .HiddenRange::-moz-range-track{background:transparent}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }] });
3065
+ ], viewQueries: [{ propertyName: "trackRef", first: true, predicate: ["trackRef"], descendants: true }], ngImport: i0, template: "<p\r\n *ngIf=\"label\"\r\n class=\"Label\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\r\n</p>\r\n\r\n<p\r\n *ngIf=\"description\"\r\n class=\"Description\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ description }}\r\n</p>\r\n\r\n<div class=\"ValuePrint\">\r\n <input\r\n class=\"Value\"\r\n type=\"text\"\r\n [value]=\"decimal ? value.toFixed(2) : value.toString()\"\r\n (input)=\"onInputChange($event)\"\r\n (keydown)=\"onKeydown($event)\"\r\n [disabled]=\"disabled\"\r\n />\r\n</div>\r\n\r\n<div class=\"SliderEntry\">\r\n <div class=\"RangeWrapper\" [class.Disabled]=\"disabled\">\r\n <div\r\n class=\"Track\"\r\n #trackRef\r\n (click)=\"onTrackClick($event)\"\r\n (touchstart)=\"onTrackTouchStart($event)\"\r\n >\r\n <div class=\"Fill\" [ngStyle]=\"fillStyle\"></div>\r\n </div>\r\n\r\n <!-- Thumb UI personalizado -->\r\n <div\r\n class=\"Thumb\"\r\n [style.left.%]=\"thumbPosition\"\r\n (mousedown)=\"onThumbMouseDown($event)\"\r\n (touchstart)=\"onThumbTouchStart($event)\"\r\n [class.Dragging]=\"isDragging\"\r\n ></div>\r\n\r\n <!-- Input range oculto (solo para sincronizaci\u00F3n) -->\r\n <input\r\n type=\"range\"\r\n class=\"HiddenRange\"\r\n [min]=\"min\"\r\n [max]=\"max\"\r\n [step]=\"calculatedStep\"\r\n [value]=\"value\"\r\n (input)=\"onSliderInput($event)\"\r\n (change)=\"onSliderChange()\"\r\n [disabled]=\"disabled\"\r\n tabindex=\"-1\"\r\n aria-hidden=\"true\"\r\n />\r\n </div>\r\n</div>\r\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex!important;flex-direction:column!important;width:100%;height:max-content;--radius-none: 0;--radius-xs: 2px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 16px;--radius-full: 9999px;--spacing-xxs: 2px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 16px;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);font-weight:400;width:100%;cursor:pointer;padding:0 3px;margin:0 0 4px;overflow:hidden;word-break:break-all}:host .Entry{display:flex!important;width:100%;height:32px;justify-content:flex-start;align-items:center;border:solid 0 var(--color-input-border, #d4d4d4);border-radius:12px!important;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px!important;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .ValuePrint{width:100%;display:flex;align-items:center;justify-content:space-between;gap:5px;overflow:hidden}:host .ValuePrint .Value{display:flex;flex:1;max-width:30%;height:36px;padding:0 4px;text-align:center;border:none;outline:none;text-align:left;caret-color:var(--color-fg-brand)}:host .ValuePrint .Value::-webkit-outer-spin-button,:host .ValuePrint .Value::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host .SliderEntry{display:flex;align-items:center;gap:5px;padding:0 12px}:host .SliderEntry .RangeWrapper{position:relative;width:100%}:host .SliderEntry .RangeWrapper.Disabled{opacity:.5;pointer-events:none}:host .SliderEntry .Track{position:relative;z-index:0;height:8px;background-color:var(--color-input-bg);border-radius:50px;overflow:visible;cursor:pointer;touch-action:none}:host .SliderEntry .Track .Fill{height:100%;background-color:var(--color-fg-brand);border-radius:50px}:host .SliderEntry .Thumb{position:absolute;top:50%;transform:translate(-50%,-50%);width:20px;height:20px;background-color:var(--color-input-bg);border:3px solid var(--color-fg-brand);border-radius:50%;cursor:grab;z-index:20;touch-action:none;transition:transform .1s ease;-webkit-user-select:none;user-select:none}:host .SliderEntry .Thumb:hover,:host .SliderEntry .Thumb.Dragging{transform:translate(-50%,-50%) scale(1.2);cursor:grabbing;box-shadow:0 2px 8px var(--color-scrim)}:host .SliderEntry .Thumb:active{cursor:grabbing}:host .SliderEntry .HiddenRange{position:absolute;top:0;left:0;width:100%;height:100%;background:transparent;pointer-events:none;opacity:0;appearance:none;-webkit-appearance:none;-moz-appearance:none;z-index:-1}:host .SliderEntry .HiddenRange::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:0;height:0}:host .SliderEntry .HiddenRange::-moz-range-thumb{width:0;height:0;border:none;background:transparent}:host .SliderEntry .HiddenRange::-webkit-slider-runnable-track{background:transparent}:host .SliderEntry .HiddenRange::-moz-range-track{background:transparent}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }] });
3066
3066
  }
3067
3067
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SliderEntryComponent, decorators: [{
3068
3068
  type: Component,
@@ -3072,7 +3072,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
3072
3072
  useExisting: forwardRef(() => SliderEntryComponent),
3073
3073
  multi: true,
3074
3074
  },
3075
- ], template: "<p\r\n *ngIf=\"label\"\r\n class=\"Label\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\r\n</p>\r\n\r\n<p\r\n *ngIf=\"description\"\r\n class=\"Description\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ description }}\r\n</p>\r\n\r\n<div class=\"ValuePrint\">\r\n <input\r\n class=\"Value\"\r\n type=\"text\"\r\n [value]=\"decimal ? value.toFixed(2) : value.toString()\"\r\n (input)=\"onInputChange($event)\"\r\n (keydown)=\"onKeydown($event)\"\r\n [disabled]=\"disabled\"\r\n />\r\n</div>\r\n\r\n<div class=\"SliderEntry\">\r\n <div class=\"RangeWrapper\" [class.Disabled]=\"disabled\">\r\n <div\r\n class=\"Track\"\r\n #trackRef\r\n (click)=\"onTrackClick($event)\"\r\n (touchstart)=\"onTrackTouchStart($event)\"\r\n >\r\n <div class=\"Fill\" [ngStyle]=\"fillStyle\"></div>\r\n </div>\r\n\r\n <!-- Thumb UI personalizado -->\r\n <div\r\n class=\"Thumb\"\r\n [style.left.%]=\"thumbPosition\"\r\n (mousedown)=\"onThumbMouseDown($event)\"\r\n (touchstart)=\"onThumbTouchStart($event)\"\r\n [class.Dragging]=\"isDragging\"\r\n ></div>\r\n\r\n <!-- Input range oculto (solo para sincronizaci\u00F3n) -->\r\n <input\r\n type=\"range\"\r\n class=\"HiddenRange\"\r\n [min]=\"min\"\r\n [max]=\"max\"\r\n [step]=\"calculatedStep\"\r\n [value]=\"value\"\r\n (input)=\"onSliderInput($event)\"\r\n (change)=\"onSliderChange()\"\r\n [disabled]=\"disabled\"\r\n tabindex=\"-1\"\r\n aria-hidden=\"true\"\r\n />\r\n </div>\r\n</div>\r\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex;flex-direction:column;width:100%;height:max-content;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);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(--color-input-border, #d4d4d4);border-radius:12px;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .ValuePrint{width:100%;display:flex;align-items:center;justify-content:space-between;gap:5px;overflow:hidden}:host .ValuePrint .Value{display:flex;flex:1;max-width:30%;height:36px;padding:0 4px;text-align:center;border:none;outline:none;text-align:left;caret-color:var(--color-fg-brand)}:host .ValuePrint .Value::-webkit-outer-spin-button,:host .ValuePrint .Value::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host .SliderEntry{display:flex;align-items:center;gap:5px;padding:0 12px}:host .SliderEntry .RangeWrapper{position:relative;width:100%}:host .SliderEntry .RangeWrapper.Disabled{opacity:.5;pointer-events:none}:host .SliderEntry .Track{position:relative;z-index:0;height:8px;background-color:var(--color-input-bg);border-radius:50px;overflow:visible;cursor:pointer;touch-action:none}:host .SliderEntry .Track .Fill{height:100%;background-color:var(--color-fg-brand);border-radius:50px}:host .SliderEntry .Thumb{position:absolute;top:50%;transform:translate(-50%,-50%);width:20px;height:20px;background-color:var(--color-input-bg);border:3px solid var(--color-fg-brand);border-radius:50%;cursor:grab;z-index:20;touch-action:none;transition:transform .1s ease;-webkit-user-select:none;user-select:none}:host .SliderEntry .Thumb:hover,:host .SliderEntry .Thumb.Dragging{transform:translate(-50%,-50%) scale(1.2);cursor:grabbing;box-shadow:0 2px 8px var(--color-scrim)}:host .SliderEntry .Thumb:active{cursor:grabbing}:host .SliderEntry .HiddenRange{position:absolute;top:0;left:0;width:100%;height:100%;background:transparent;pointer-events:none;opacity:0;appearance:none;-webkit-appearance:none;-moz-appearance:none;z-index:-1}:host .SliderEntry .HiddenRange::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:0;height:0}:host .SliderEntry .HiddenRange::-moz-range-thumb{width:0;height:0;border:none;background:transparent}:host .SliderEntry .HiddenRange::-webkit-slider-runnable-track{background:transparent}:host .SliderEntry .HiddenRange::-moz-range-track{background:transparent}\n"] }]
3075
+ ], template: "<p\r\n *ngIf=\"label\"\r\n class=\"Label\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\r\n</p>\r\n\r\n<p\r\n *ngIf=\"description\"\r\n class=\"Description\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ description }}\r\n</p>\r\n\r\n<div class=\"ValuePrint\">\r\n <input\r\n class=\"Value\"\r\n type=\"text\"\r\n [value]=\"decimal ? value.toFixed(2) : value.toString()\"\r\n (input)=\"onInputChange($event)\"\r\n (keydown)=\"onKeydown($event)\"\r\n [disabled]=\"disabled\"\r\n />\r\n</div>\r\n\r\n<div class=\"SliderEntry\">\r\n <div class=\"RangeWrapper\" [class.Disabled]=\"disabled\">\r\n <div\r\n class=\"Track\"\r\n #trackRef\r\n (click)=\"onTrackClick($event)\"\r\n (touchstart)=\"onTrackTouchStart($event)\"\r\n >\r\n <div class=\"Fill\" [ngStyle]=\"fillStyle\"></div>\r\n </div>\r\n\r\n <!-- Thumb UI personalizado -->\r\n <div\r\n class=\"Thumb\"\r\n [style.left.%]=\"thumbPosition\"\r\n (mousedown)=\"onThumbMouseDown($event)\"\r\n (touchstart)=\"onThumbTouchStart($event)\"\r\n [class.Dragging]=\"isDragging\"\r\n ></div>\r\n\r\n <!-- Input range oculto (solo para sincronizaci\u00F3n) -->\r\n <input\r\n type=\"range\"\r\n class=\"HiddenRange\"\r\n [min]=\"min\"\r\n [max]=\"max\"\r\n [step]=\"calculatedStep\"\r\n [value]=\"value\"\r\n (input)=\"onSliderInput($event)\"\r\n (change)=\"onSliderChange()\"\r\n [disabled]=\"disabled\"\r\n tabindex=\"-1\"\r\n aria-hidden=\"true\"\r\n />\r\n </div>\r\n</div>\r\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex!important;flex-direction:column!important;width:100%;height:max-content;--radius-none: 0;--radius-xs: 2px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 16px;--radius-full: 9999px;--spacing-xxs: 2px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 16px;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);font-weight:400;width:100%;cursor:pointer;padding:0 3px;margin:0 0 4px;overflow:hidden;word-break:break-all}:host .Entry{display:flex!important;width:100%;height:32px;justify-content:flex-start;align-items:center;border:solid 0 var(--color-input-border, #d4d4d4);border-radius:12px!important;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px!important;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .ValuePrint{width:100%;display:flex;align-items:center;justify-content:space-between;gap:5px;overflow:hidden}:host .ValuePrint .Value{display:flex;flex:1;max-width:30%;height:36px;padding:0 4px;text-align:center;border:none;outline:none;text-align:left;caret-color:var(--color-fg-brand)}:host .ValuePrint .Value::-webkit-outer-spin-button,:host .ValuePrint .Value::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host .SliderEntry{display:flex;align-items:center;gap:5px;padding:0 12px}:host .SliderEntry .RangeWrapper{position:relative;width:100%}:host .SliderEntry .RangeWrapper.Disabled{opacity:.5;pointer-events:none}:host .SliderEntry .Track{position:relative;z-index:0;height:8px;background-color:var(--color-input-bg);border-radius:50px;overflow:visible;cursor:pointer;touch-action:none}:host .SliderEntry .Track .Fill{height:100%;background-color:var(--color-fg-brand);border-radius:50px}:host .SliderEntry .Thumb{position:absolute;top:50%;transform:translate(-50%,-50%);width:20px;height:20px;background-color:var(--color-input-bg);border:3px solid var(--color-fg-brand);border-radius:50%;cursor:grab;z-index:20;touch-action:none;transition:transform .1s ease;-webkit-user-select:none;user-select:none}:host .SliderEntry .Thumb:hover,:host .SliderEntry .Thumb.Dragging{transform:translate(-50%,-50%) scale(1.2);cursor:grabbing;box-shadow:0 2px 8px var(--color-scrim)}:host .SliderEntry .Thumb:active{cursor:grabbing}:host .SliderEntry .HiddenRange{position:absolute;top:0;left:0;width:100%;height:100%;background:transparent;pointer-events:none;opacity:0;appearance:none;-webkit-appearance:none;-moz-appearance:none;z-index:-1}:host .SliderEntry .HiddenRange::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:0;height:0}:host .SliderEntry .HiddenRange::-moz-range-thumb{width:0;height:0;border:none;background:transparent}:host .SliderEntry .HiddenRange::-webkit-slider-runnable-track{background:transparent}:host .SliderEntry .HiddenRange::-moz-range-track{background:transparent}\n"] }]
3076
3076
  }], propDecorators: { trackRef: [{
3077
3077
  type: ViewChild,
3078
3078
  args: ['trackRef', { static: false }]
@@ -3154,7 +3154,7 @@ class RatingEntryComponent {
3154
3154
  useExisting: forwardRef(() => RatingEntryComponent),
3155
3155
  multi: true,
3156
3156
  },
3157
- ], ngImport: i0, template: "<p\r\n *ngIf=\"label\"\r\n class=\"Label\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\r\n</p>\r\n\r\n<p\r\n *ngIf=\"description\"\r\n class=\"Description\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ description }}\r\n</p>\r\n\r\n<div\r\n class=\"RatingDisplay\"\r\n [class.Disabled]=\"isDisabled\"\r\n role=\"radiogroup\"\r\n [attr.aria-label]=\"label || 'Calificaci\u00F3n'\"\r\n>\r\n <button\r\n type=\"button\"\r\n class=\"StarButton\"\r\n *ngFor=\"let star of stars; let i = index\"\r\n [disabled]=\"isDisabled\"\r\n role=\"radio\"\r\n [attr.aria-checked]=\"value === i + 1\"\r\n [attr.aria-label]=\"'Calificar con ' + (i + 1) + ' estrellas'\"\r\n (click)=\"select(i + 1)\"\r\n >\r\n <lucide-icon\r\n class=\"Icon\"\r\n [class.Muted]=\"value === null || i >= value\"\r\n name=\"star\"\r\n [size]=\"14\"\r\n [filled]=\"value !== null && i < value\"\r\n ></lucide-icon>\r\n </button>\r\n</div>\r\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex;flex-direction:column;width:100%;height:max-content;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);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(--color-input-border, #d4d4d4);border-radius:12px;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .RatingDisplay{display:flex;width:100%;gap:5px;padding:0 4px;justify-content:flex-start;align-items:center;border:solid 0 var(--color-input-border);overflow:hidden}:host .RatingDisplay.Disabled{opacity:.6;pointer-events:none}:host .RatingDisplay .StarButton{display:flex;justify-content:center;align-items:center;padding:0;margin:0;border:none;background:transparent;cursor:pointer;line-height:0;border-radius:var(--radius-sm)}:host .RatingDisplay .StarButton:focus-visible{outline:2px solid var(--color-brand);outline-offset:2px}:host .RatingDisplay .StarButton:disabled{cursor:not-allowed}:host .RatingDisplay .StarButton .Icon{display:flex;justify-content:center;align-items:center;color:var(--color-warning-fg, var(--rating-fill))}:host .RatingDisplay .StarButton .Icon lucide-icon .lucide-svg{width:14px;height:14px;transition:fill .15s ease,color .15s ease,stroke .15s ease}:host .RatingDisplay .StarButton .Icon.Muted{color:var(--color-fg-muted)}:host .RatingDisplay .StarButton:hover:not(:disabled) .Icon.Muted{color:var(--color-warning-fg, var(--rating-fill-active))}\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: "component", type: LucideIconComponent, selector: "lucide-icon", inputs: ["name", "size", "spin", "filled"] }] });
3157
+ ], ngImport: i0, template: "<p\r\n *ngIf=\"label\"\r\n class=\"Label\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\r\n</p>\r\n\r\n<p\r\n *ngIf=\"description\"\r\n class=\"Description\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ description }}\r\n</p>\r\n\r\n<div\r\n class=\"RatingDisplay\"\r\n [class.Disabled]=\"isDisabled\"\r\n role=\"radiogroup\"\r\n [attr.aria-label]=\"label || 'Calificaci\u00F3n'\"\r\n>\r\n <button\r\n type=\"button\"\r\n class=\"StarButton\"\r\n *ngFor=\"let star of stars; let i = index\"\r\n [disabled]=\"isDisabled\"\r\n role=\"radio\"\r\n [attr.aria-checked]=\"value === i + 1\"\r\n [attr.aria-label]=\"'Calificar con ' + (i + 1) + ' estrellas'\"\r\n (click)=\"select(i + 1)\"\r\n >\r\n <lucide-icon\r\n class=\"Icon\"\r\n [class.Muted]=\"value === null || i >= value\"\r\n name=\"star\"\r\n [size]=\"14\"\r\n [filled]=\"value !== null && i < value\"\r\n ></lucide-icon>\r\n </button>\r\n</div>\r\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex!important;flex-direction:column!important;width:100%;height:max-content;--radius-none: 0;--radius-xs: 2px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 16px;--radius-full: 9999px;--spacing-xxs: 2px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 16px;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);font-weight:400;width:100%;cursor:pointer;padding:0 3px;margin:0 0 4px;overflow:hidden;word-break:break-all}:host .Entry{display:flex!important;width:100%;height:32px;justify-content:flex-start;align-items:center;border:solid 0 var(--color-input-border, #d4d4d4);border-radius:12px!important;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px!important;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .RatingDisplay{display:flex;width:100%;gap:5px;padding:0 4px;justify-content:flex-start;align-items:center;border:solid 0 var(--color-input-border);overflow:hidden}:host .RatingDisplay.Disabled{opacity:.6;pointer-events:none}:host .RatingDisplay .StarButton{display:flex;justify-content:center;align-items:center;padding:0;margin:0;border:none;background:transparent;cursor:pointer;line-height:0;border-radius:4px}:host .RatingDisplay .StarButton:focus-visible{outline:2px solid var(--color-brand);outline-offset:2px}:host .RatingDisplay .StarButton:disabled{cursor:not-allowed}:host .RatingDisplay .StarButton .Icon{display:flex;justify-content:center;align-items:center;color:var(--color-warning-fg, var(--rating-fill))}:host .RatingDisplay .StarButton .Icon lucide-icon .lucide-svg{width:14px;height:14px;transition:fill .15s ease,color .15s ease,stroke .15s ease}:host .RatingDisplay .StarButton .Icon.Muted{color:var(--color-fg-muted)}:host .RatingDisplay .StarButton:hover:not(:disabled) .Icon.Muted{color:var(--color-warning-fg, var(--rating-fill-active))}\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: "component", type: LucideIconComponent, selector: "lucide-icon", inputs: ["name", "size", "spin", "filled"] }] });
3158
3158
  }
3159
3159
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: RatingEntryComponent, decorators: [{
3160
3160
  type: Component,
@@ -3164,7 +3164,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
3164
3164
  useExisting: forwardRef(() => RatingEntryComponent),
3165
3165
  multi: true,
3166
3166
  },
3167
- ], template: "<p\r\n *ngIf=\"label\"\r\n class=\"Label\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\r\n</p>\r\n\r\n<p\r\n *ngIf=\"description\"\r\n class=\"Description\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ description }}\r\n</p>\r\n\r\n<div\r\n class=\"RatingDisplay\"\r\n [class.Disabled]=\"isDisabled\"\r\n role=\"radiogroup\"\r\n [attr.aria-label]=\"label || 'Calificaci\u00F3n'\"\r\n>\r\n <button\r\n type=\"button\"\r\n class=\"StarButton\"\r\n *ngFor=\"let star of stars; let i = index\"\r\n [disabled]=\"isDisabled\"\r\n role=\"radio\"\r\n [attr.aria-checked]=\"value === i + 1\"\r\n [attr.aria-label]=\"'Calificar con ' + (i + 1) + ' estrellas'\"\r\n (click)=\"select(i + 1)\"\r\n >\r\n <lucide-icon\r\n class=\"Icon\"\r\n [class.Muted]=\"value === null || i >= value\"\r\n name=\"star\"\r\n [size]=\"14\"\r\n [filled]=\"value !== null && i < value\"\r\n ></lucide-icon>\r\n </button>\r\n</div>\r\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex;flex-direction:column;width:100%;height:max-content;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);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(--color-input-border, #d4d4d4);border-radius:12px;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .RatingDisplay{display:flex;width:100%;gap:5px;padding:0 4px;justify-content:flex-start;align-items:center;border:solid 0 var(--color-input-border);overflow:hidden}:host .RatingDisplay.Disabled{opacity:.6;pointer-events:none}:host .RatingDisplay .StarButton{display:flex;justify-content:center;align-items:center;padding:0;margin:0;border:none;background:transparent;cursor:pointer;line-height:0;border-radius:var(--radius-sm)}:host .RatingDisplay .StarButton:focus-visible{outline:2px solid var(--color-brand);outline-offset:2px}:host .RatingDisplay .StarButton:disabled{cursor:not-allowed}:host .RatingDisplay .StarButton .Icon{display:flex;justify-content:center;align-items:center;color:var(--color-warning-fg, var(--rating-fill))}:host .RatingDisplay .StarButton .Icon lucide-icon .lucide-svg{width:14px;height:14px;transition:fill .15s ease,color .15s ease,stroke .15s ease}:host .RatingDisplay .StarButton .Icon.Muted{color:var(--color-fg-muted)}:host .RatingDisplay .StarButton:hover:not(:disabled) .Icon.Muted{color:var(--color-warning-fg, var(--rating-fill-active))}\n"] }]
3167
+ ], template: "<p\r\n *ngIf=\"label\"\r\n class=\"Label\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\r\n</p>\r\n\r\n<p\r\n *ngIf=\"description\"\r\n class=\"Description\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ description }}\r\n</p>\r\n\r\n<div\r\n class=\"RatingDisplay\"\r\n [class.Disabled]=\"isDisabled\"\r\n role=\"radiogroup\"\r\n [attr.aria-label]=\"label || 'Calificaci\u00F3n'\"\r\n>\r\n <button\r\n type=\"button\"\r\n class=\"StarButton\"\r\n *ngFor=\"let star of stars; let i = index\"\r\n [disabled]=\"isDisabled\"\r\n role=\"radio\"\r\n [attr.aria-checked]=\"value === i + 1\"\r\n [attr.aria-label]=\"'Calificar con ' + (i + 1) + ' estrellas'\"\r\n (click)=\"select(i + 1)\"\r\n >\r\n <lucide-icon\r\n class=\"Icon\"\r\n [class.Muted]=\"value === null || i >= value\"\r\n name=\"star\"\r\n [size]=\"14\"\r\n [filled]=\"value !== null && i < value\"\r\n ></lucide-icon>\r\n </button>\r\n</div>\r\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex!important;flex-direction:column!important;width:100%;height:max-content;--radius-none: 0;--radius-xs: 2px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 16px;--radius-full: 9999px;--spacing-xxs: 2px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 16px;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);font-weight:400;width:100%;cursor:pointer;padding:0 3px;margin:0 0 4px;overflow:hidden;word-break:break-all}:host .Entry{display:flex!important;width:100%;height:32px;justify-content:flex-start;align-items:center;border:solid 0 var(--color-input-border, #d4d4d4);border-radius:12px!important;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px!important;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .RatingDisplay{display:flex;width:100%;gap:5px;padding:0 4px;justify-content:flex-start;align-items:center;border:solid 0 var(--color-input-border);overflow:hidden}:host .RatingDisplay.Disabled{opacity:.6;pointer-events:none}:host .RatingDisplay .StarButton{display:flex;justify-content:center;align-items:center;padding:0;margin:0;border:none;background:transparent;cursor:pointer;line-height:0;border-radius:4px}:host .RatingDisplay .StarButton:focus-visible{outline:2px solid var(--color-brand);outline-offset:2px}:host .RatingDisplay .StarButton:disabled{cursor:not-allowed}:host .RatingDisplay .StarButton .Icon{display:flex;justify-content:center;align-items:center;color:var(--color-warning-fg, var(--rating-fill))}:host .RatingDisplay .StarButton .Icon lucide-icon .lucide-svg{width:14px;height:14px;transition:fill .15s ease,color .15s ease,stroke .15s ease}:host .RatingDisplay .StarButton .Icon.Muted{color:var(--color-fg-muted)}:host .RatingDisplay .StarButton:hover:not(:disabled) .Icon.Muted{color:var(--color-warning-fg, var(--rating-fill-active))}\n"] }]
3168
3168
  }], propDecorators: { label: [{
3169
3169
  type: Input
3170
3170
  }], opcional: [{
@@ -3741,7 +3741,7 @@ class DatePickerComponent {
3741
3741
  useExisting: forwardRef(() => DatePickerComponent),
3742
3742
  multi: true,
3743
3743
  },
3744
- ], ngImport: i0, template: "<p\n *ngIf=\"label\"\n class=\"Label\"\n [class.Disabled]=\"isDisabled\"\n (click)=\"manualClick($event); toggleShowPicker($event); $event.stopPropagation()\"\n>\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\n</p>\n\n<p\n *ngIf=\"description\"\n class=\"Description\"\n [class.Disabled]=\"isDisabled\"\n (click)=\"manualClick($event); toggleShowPicker($event); $event.stopPropagation()\"\n>\n {{ description }}\n</p>\n\n<div\n class=\"Entry\"\n (click)=\"toggleShowPicker($event)\"\n [class.focused]=\"isFocus\"\n [class.Disabled]=\"isDisabled\"\n tabindex=\"0\"\n (focus)=\"focus()\"\n (blur)=\"defocus()\"\n>\n <div class=\"Value\" *ngIf=\"selectedValue\">{{ formattedSelected }}</div>\n <div class=\"Placeholder\" *ngIf=\"!selectedValue\">{{ placeholder }}</div>\n <lucide-icon class=\"IconDate\" name=\"calendar\"></lucide-icon>\n</div>\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex;flex-direction:column;width:100%;height:max-content;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);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(--color-input-border, #d4d4d4);border-radius:12px;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .Entry{padding:0 8px}:host .Entry .Value{color:var(--color-input-fg)}:host .Entry .Placeholder{color:var(--color-input-placeholder)}:host .Entry .IconDate{margin-left:auto;color:var(--color-input-placeholder);padding-right:4px}\n"], dependencies: [{ kind: "component", type: LucideIconComponent, selector: "lucide-icon", inputs: ["name", "size", "spin", "filled"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
3744
+ ], ngImport: i0, template: "<p\n *ngIf=\"label\"\n class=\"Label\"\n [class.Disabled]=\"isDisabled\"\n (click)=\"manualClick($event); toggleShowPicker($event); $event.stopPropagation()\"\n>\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\n</p>\n\n<p\n *ngIf=\"description\"\n class=\"Description\"\n [class.Disabled]=\"isDisabled\"\n (click)=\"manualClick($event); toggleShowPicker($event); $event.stopPropagation()\"\n>\n {{ description }}\n</p>\n\n<div\n class=\"Entry\"\n (click)=\"toggleShowPicker($event)\"\n [class.focused]=\"isFocus\"\n [class.Disabled]=\"isDisabled\"\n tabindex=\"0\"\n (focus)=\"focus()\"\n (blur)=\"defocus()\"\n>\n <div class=\"Value\" *ngIf=\"selectedValue\">{{ formattedSelected }}</div>\n <div class=\"Placeholder\" *ngIf=\"!selectedValue\">{{ placeholder }}</div>\n <lucide-icon class=\"IconDate\" name=\"calendar\"></lucide-icon>\n</div>\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex!important;flex-direction:column!important;width:100%;height:max-content;--radius-none: 0;--radius-xs: 2px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 16px;--radius-full: 9999px;--spacing-xxs: 2px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 16px;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);font-weight:400;width:100%;cursor:pointer;padding:0 3px;margin:0 0 4px;overflow:hidden;word-break:break-all}:host .Entry{display:flex!important;width:100%;height:32px;justify-content:flex-start;align-items:center;border:solid 0 var(--color-input-border, #d4d4d4);border-radius:12px!important;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px!important;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .Entry{padding:0 8px}:host .Entry .Value{color:var(--color-input-fg)}:host .Entry .Placeholder{color:var(--color-input-placeholder)}:host .Entry .IconDate{margin-left:auto;color:var(--color-input-placeholder);padding-right:4px}\n"], dependencies: [{ kind: "component", type: LucideIconComponent, selector: "lucide-icon", inputs: ["name", "size", "spin", "filled"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
3745
3745
  }
3746
3746
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: DatePickerComponent, decorators: [{
3747
3747
  type: Component,
@@ -3753,7 +3753,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
3753
3753
  useExisting: forwardRef(() => DatePickerComponent),
3754
3754
  multi: true,
3755
3755
  },
3756
- ], template: "<p\n *ngIf=\"label\"\n class=\"Label\"\n [class.Disabled]=\"isDisabled\"\n (click)=\"manualClick($event); toggleShowPicker($event); $event.stopPropagation()\"\n>\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\n</p>\n\n<p\n *ngIf=\"description\"\n class=\"Description\"\n [class.Disabled]=\"isDisabled\"\n (click)=\"manualClick($event); toggleShowPicker($event); $event.stopPropagation()\"\n>\n {{ description }}\n</p>\n\n<div\n class=\"Entry\"\n (click)=\"toggleShowPicker($event)\"\n [class.focused]=\"isFocus\"\n [class.Disabled]=\"isDisabled\"\n tabindex=\"0\"\n (focus)=\"focus()\"\n (blur)=\"defocus()\"\n>\n <div class=\"Value\" *ngIf=\"selectedValue\">{{ formattedSelected }}</div>\n <div class=\"Placeholder\" *ngIf=\"!selectedValue\">{{ placeholder }}</div>\n <lucide-icon class=\"IconDate\" name=\"calendar\"></lucide-icon>\n</div>\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex;flex-direction:column;width:100%;height:max-content;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);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(--color-input-border, #d4d4d4);border-radius:12px;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .Entry{padding:0 8px}:host .Entry .Value{color:var(--color-input-fg)}:host .Entry .Placeholder{color:var(--color-input-placeholder)}:host .Entry .IconDate{margin-left:auto;color:var(--color-input-placeholder);padding-right:4px}\n"] }]
3756
+ ], template: "<p\n *ngIf=\"label\"\n class=\"Label\"\n [class.Disabled]=\"isDisabled\"\n (click)=\"manualClick($event); toggleShowPicker($event); $event.stopPropagation()\"\n>\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\n</p>\n\n<p\n *ngIf=\"description\"\n class=\"Description\"\n [class.Disabled]=\"isDisabled\"\n (click)=\"manualClick($event); toggleShowPicker($event); $event.stopPropagation()\"\n>\n {{ description }}\n</p>\n\n<div\n class=\"Entry\"\n (click)=\"toggleShowPicker($event)\"\n [class.focused]=\"isFocus\"\n [class.Disabled]=\"isDisabled\"\n tabindex=\"0\"\n (focus)=\"focus()\"\n (blur)=\"defocus()\"\n>\n <div class=\"Value\" *ngIf=\"selectedValue\">{{ formattedSelected }}</div>\n <div class=\"Placeholder\" *ngIf=\"!selectedValue\">{{ placeholder }}</div>\n <lucide-icon class=\"IconDate\" name=\"calendar\"></lucide-icon>\n</div>\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex!important;flex-direction:column!important;width:100%;height:max-content;--radius-none: 0;--radius-xs: 2px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 16px;--radius-full: 9999px;--spacing-xxs: 2px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 16px;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);font-weight:400;width:100%;cursor:pointer;padding:0 3px;margin:0 0 4px;overflow:hidden;word-break:break-all}:host .Entry{display:flex!important;width:100%;height:32px;justify-content:flex-start;align-items:center;border:solid 0 var(--color-input-border, #d4d4d4);border-radius:12px!important;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px!important;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .Entry{padding:0 8px}:host .Entry .Value{color:var(--color-input-fg)}:host .Entry .Placeholder{color:var(--color-input-placeholder)}:host .Entry .IconDate{margin-left:auto;color:var(--color-input-placeholder);padding-right:4px}\n"] }]
3757
3757
  }], propDecorators: { label: [{
3758
3758
  type: Input
3759
3759
  }], opcional: [{
@@ -4137,7 +4137,7 @@ class TimePickerComponent {
4137
4137
  useExisting: forwardRef(() => TimePickerComponent),
4138
4138
  multi: true,
4139
4139
  },
4140
- ], ngImport: i0, template: "<p\n *ngIf=\"label\"\n class=\"Label\"\n [class.Disabled]=\"isDisabled\"\n (click)=\"manualClick($event); toggleShowPicker($event); $event.stopPropagation()\"\n>\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\n</p>\n\n<p\n *ngIf=\"description\"\n class=\"Description\"\n [class.Disabled]=\"isDisabled\"\n (click)=\"manualClick($event); toggleShowPicker($event); $event.stopPropagation()\"\n>\n {{ description }}\n</p>\n\n<div\n class=\"Entry\"\n (click)=\"toggleShowPicker($event)\"\n [class.focused]=\"isFocus\"\n [class.Disabled]=\"isDisabled\"\n tabindex=\"0\"\n (focus)=\"focus()\"\n (blur)=\"defocus()\"\n>\n <div class=\"Value\" *ngIf=\"selectedValue\">{{ selectedDateExtended }}</div>\n <div class=\"Placeholder\" *ngIf=\"!selectedValue\">{{ placeholder }}</div>\n <lucide-icon class=\"IconDate\" name=\"clock\"></lucide-icon>\n</div>\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex;flex-direction:column;width:100%;height:max-content;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);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(--color-input-border, #d4d4d4);border-radius:12px;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .Entry{padding:0 8px}:host .Entry .Value{color:var(--color-input-fg)}:host .Entry .Placeholder{color:var(--color-input-placeholder)}:host .Entry .IconDate{margin-left:auto;color:var(--color-input-placeholder);padding-right:4px}\n"], dependencies: [{ kind: "component", type: LucideIconComponent, selector: "lucide-icon", inputs: ["name", "size", "spin", "filled"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
4140
+ ], ngImport: i0, template: "<p\n *ngIf=\"label\"\n class=\"Label\"\n [class.Disabled]=\"isDisabled\"\n (click)=\"manualClick($event); toggleShowPicker($event); $event.stopPropagation()\"\n>\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\n</p>\n\n<p\n *ngIf=\"description\"\n class=\"Description\"\n [class.Disabled]=\"isDisabled\"\n (click)=\"manualClick($event); toggleShowPicker($event); $event.stopPropagation()\"\n>\n {{ description }}\n</p>\n\n<div\n class=\"Entry\"\n (click)=\"toggleShowPicker($event)\"\n [class.focused]=\"isFocus\"\n [class.Disabled]=\"isDisabled\"\n tabindex=\"0\"\n (focus)=\"focus()\"\n (blur)=\"defocus()\"\n>\n <div class=\"Value\" *ngIf=\"selectedValue\">{{ selectedDateExtended }}</div>\n <div class=\"Placeholder\" *ngIf=\"!selectedValue\">{{ placeholder }}</div>\n <lucide-icon class=\"IconDate\" name=\"clock\"></lucide-icon>\n</div>\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex!important;flex-direction:column!important;width:100%;height:max-content;--radius-none: 0;--radius-xs: 2px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 16px;--radius-full: 9999px;--spacing-xxs: 2px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 16px;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);font-weight:400;width:100%;cursor:pointer;padding:0 3px;margin:0 0 4px;overflow:hidden;word-break:break-all}:host .Entry{display:flex!important;width:100%;height:32px;justify-content:flex-start;align-items:center;border:solid 0 var(--color-input-border, #d4d4d4);border-radius:12px!important;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px!important;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .Entry{padding:0 8px}:host .Entry .Value{color:var(--color-input-fg)}:host .Entry .Placeholder{color:var(--color-input-placeholder)}:host .Entry .IconDate{margin-left:auto;color:var(--color-input-placeholder);padding-right:4px}\n"], dependencies: [{ kind: "component", type: LucideIconComponent, selector: "lucide-icon", inputs: ["name", "size", "spin", "filled"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
4141
4141
  }
4142
4142
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TimePickerComponent, decorators: [{
4143
4143
  type: Component,
@@ -4149,7 +4149,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
4149
4149
  useExisting: forwardRef(() => TimePickerComponent),
4150
4150
  multi: true,
4151
4151
  },
4152
- ], template: "<p\n *ngIf=\"label\"\n class=\"Label\"\n [class.Disabled]=\"isDisabled\"\n (click)=\"manualClick($event); toggleShowPicker($event); $event.stopPropagation()\"\n>\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\n</p>\n\n<p\n *ngIf=\"description\"\n class=\"Description\"\n [class.Disabled]=\"isDisabled\"\n (click)=\"manualClick($event); toggleShowPicker($event); $event.stopPropagation()\"\n>\n {{ description }}\n</p>\n\n<div\n class=\"Entry\"\n (click)=\"toggleShowPicker($event)\"\n [class.focused]=\"isFocus\"\n [class.Disabled]=\"isDisabled\"\n tabindex=\"0\"\n (focus)=\"focus()\"\n (blur)=\"defocus()\"\n>\n <div class=\"Value\" *ngIf=\"selectedValue\">{{ selectedDateExtended }}</div>\n <div class=\"Placeholder\" *ngIf=\"!selectedValue\">{{ placeholder }}</div>\n <lucide-icon class=\"IconDate\" name=\"clock\"></lucide-icon>\n</div>\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex;flex-direction:column;width:100%;height:max-content;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);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(--color-input-border, #d4d4d4);border-radius:12px;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .Entry{padding:0 8px}:host .Entry .Value{color:var(--color-input-fg)}:host .Entry .Placeholder{color:var(--color-input-placeholder)}:host .Entry .IconDate{margin-left:auto;color:var(--color-input-placeholder);padding-right:4px}\n"] }]
4152
+ ], template: "<p\n *ngIf=\"label\"\n class=\"Label\"\n [class.Disabled]=\"isDisabled\"\n (click)=\"manualClick($event); toggleShowPicker($event); $event.stopPropagation()\"\n>\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\n</p>\n\n<p\n *ngIf=\"description\"\n class=\"Description\"\n [class.Disabled]=\"isDisabled\"\n (click)=\"manualClick($event); toggleShowPicker($event); $event.stopPropagation()\"\n>\n {{ description }}\n</p>\n\n<div\n class=\"Entry\"\n (click)=\"toggleShowPicker($event)\"\n [class.focused]=\"isFocus\"\n [class.Disabled]=\"isDisabled\"\n tabindex=\"0\"\n (focus)=\"focus()\"\n (blur)=\"defocus()\"\n>\n <div class=\"Value\" *ngIf=\"selectedValue\">{{ selectedDateExtended }}</div>\n <div class=\"Placeholder\" *ngIf=\"!selectedValue\">{{ placeholder }}</div>\n <lucide-icon class=\"IconDate\" name=\"clock\"></lucide-icon>\n</div>\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex!important;flex-direction:column!important;width:100%;height:max-content;--radius-none: 0;--radius-xs: 2px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 16px;--radius-full: 9999px;--spacing-xxs: 2px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 16px;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);font-weight:400;width:100%;cursor:pointer;padding:0 3px;margin:0 0 4px;overflow:hidden;word-break:break-all}:host .Entry{display:flex!important;width:100%;height:32px;justify-content:flex-start;align-items:center;border:solid 0 var(--color-input-border, #d4d4d4);border-radius:12px!important;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px!important;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .Entry{padding:0 8px}:host .Entry .Value{color:var(--color-input-fg)}:host .Entry .Placeholder{color:var(--color-input-placeholder)}:host .Entry .IconDate{margin-left:auto;color:var(--color-input-placeholder);padding-right:4px}\n"] }]
4153
4153
  }], propDecorators: { label: [{
4154
4154
  type: Input
4155
4155
  }], opcional: [{
@@ -4653,7 +4653,7 @@ class MonthPickerComponent {
4653
4653
  useExisting: forwardRef(() => MonthPickerComponent),
4654
4654
  multi: true,
4655
4655
  },
4656
- ], ngImport: i0, template: "<p\r\n *ngIf=\"label\"\r\n class=\"Label\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); toggleShowPicker($event); $event.stopPropagation()\"\r\n>\r\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\r\n</p>\r\n\r\n<p\r\n *ngIf=\"description\"\r\n class=\"Description\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); toggleShowPicker($event); $event.stopPropagation()\"\r\n>\r\n {{ description }}\r\n</p>\r\n\r\n<div\r\n class=\"Entry\"\r\n (click)=\"toggleShowPicker($event)\"\r\n [class.focused]=\"isFocus\"\r\n [class.Disabled]=\"isDisabled\"\r\n tabindex=\"0\"\r\n (focus)=\"focus()\"\r\n (blur)=\"defocus()\"\r\n>\r\n <div class=\"Value\" *ngIf=\"selectedValue\">{{ formattedSelected }}</div>\r\n <div class=\"Placeholder\" *ngIf=\"!selectedValue\">{{ placeholder }}</div>\r\n <lucide-icon class=\"IconDate\" name=\"calendar\"></lucide-icon>\r\n</div>\r\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex;flex-direction:column;width:100%;height:max-content;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);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(--color-input-border, #d4d4d4);border-radius:12px;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .Entry{padding:0 8px}:host .Entry .Value{color:var(--color-input-fg)}:host .Entry .Placeholder{color:var(--color-input-placeholder)}:host .Entry .IconDate{margin-left:auto;color:var(--color-input-placeholder);padding-right:4px}\n"], dependencies: [{ kind: "component", type: LucideIconComponent, selector: "lucide-icon", inputs: ["name", "size", "spin", "filled"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
4656
+ ], ngImport: i0, template: "<p\r\n *ngIf=\"label\"\r\n class=\"Label\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); toggleShowPicker($event); $event.stopPropagation()\"\r\n>\r\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\r\n</p>\r\n\r\n<p\r\n *ngIf=\"description\"\r\n class=\"Description\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); toggleShowPicker($event); $event.stopPropagation()\"\r\n>\r\n {{ description }}\r\n</p>\r\n\r\n<div\r\n class=\"Entry\"\r\n (click)=\"toggleShowPicker($event)\"\r\n [class.focused]=\"isFocus\"\r\n [class.Disabled]=\"isDisabled\"\r\n tabindex=\"0\"\r\n (focus)=\"focus()\"\r\n (blur)=\"defocus()\"\r\n>\r\n <div class=\"Value\" *ngIf=\"selectedValue\">{{ formattedSelected }}</div>\r\n <div class=\"Placeholder\" *ngIf=\"!selectedValue\">{{ placeholder }}</div>\r\n <lucide-icon class=\"IconDate\" name=\"calendar\"></lucide-icon>\r\n</div>\r\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex!important;flex-direction:column!important;width:100%;height:max-content;--radius-none: 0;--radius-xs: 2px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 16px;--radius-full: 9999px;--spacing-xxs: 2px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 16px;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);font-weight:400;width:100%;cursor:pointer;padding:0 3px;margin:0 0 4px;overflow:hidden;word-break:break-all}:host .Entry{display:flex!important;width:100%;height:32px;justify-content:flex-start;align-items:center;border:solid 0 var(--color-input-border, #d4d4d4);border-radius:12px!important;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px!important;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .Entry{padding:0 8px}:host .Entry .Value{color:var(--color-input-fg)}:host .Entry .Placeholder{color:var(--color-input-placeholder)}:host .Entry .IconDate{margin-left:auto;color:var(--color-input-placeholder);padding-right:4px}\n"], dependencies: [{ kind: "component", type: LucideIconComponent, selector: "lucide-icon", inputs: ["name", "size", "spin", "filled"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
4657
4657
  }
4658
4658
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: MonthPickerComponent, decorators: [{
4659
4659
  type: Component,
@@ -4665,7 +4665,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
4665
4665
  useExisting: forwardRef(() => MonthPickerComponent),
4666
4666
  multi: true,
4667
4667
  },
4668
- ], template: "<p\r\n *ngIf=\"label\"\r\n class=\"Label\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); toggleShowPicker($event); $event.stopPropagation()\"\r\n>\r\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\r\n</p>\r\n\r\n<p\r\n *ngIf=\"description\"\r\n class=\"Description\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); toggleShowPicker($event); $event.stopPropagation()\"\r\n>\r\n {{ description }}\r\n</p>\r\n\r\n<div\r\n class=\"Entry\"\r\n (click)=\"toggleShowPicker($event)\"\r\n [class.focused]=\"isFocus\"\r\n [class.Disabled]=\"isDisabled\"\r\n tabindex=\"0\"\r\n (focus)=\"focus()\"\r\n (blur)=\"defocus()\"\r\n>\r\n <div class=\"Value\" *ngIf=\"selectedValue\">{{ formattedSelected }}</div>\r\n <div class=\"Placeholder\" *ngIf=\"!selectedValue\">{{ placeholder }}</div>\r\n <lucide-icon class=\"IconDate\" name=\"calendar\"></lucide-icon>\r\n</div>\r\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex;flex-direction:column;width:100%;height:max-content;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);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(--color-input-border, #d4d4d4);border-radius:12px;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .Entry{padding:0 8px}:host .Entry .Value{color:var(--color-input-fg)}:host .Entry .Placeholder{color:var(--color-input-placeholder)}:host .Entry .IconDate{margin-left:auto;color:var(--color-input-placeholder);padding-right:4px}\n"] }]
4668
+ ], template: "<p\r\n *ngIf=\"label\"\r\n class=\"Label\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); toggleShowPicker($event); $event.stopPropagation()\"\r\n>\r\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\r\n</p>\r\n\r\n<p\r\n *ngIf=\"description\"\r\n class=\"Description\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); toggleShowPicker($event); $event.stopPropagation()\"\r\n>\r\n {{ description }}\r\n</p>\r\n\r\n<div\r\n class=\"Entry\"\r\n (click)=\"toggleShowPicker($event)\"\r\n [class.focused]=\"isFocus\"\r\n [class.Disabled]=\"isDisabled\"\r\n tabindex=\"0\"\r\n (focus)=\"focus()\"\r\n (blur)=\"defocus()\"\r\n>\r\n <div class=\"Value\" *ngIf=\"selectedValue\">{{ formattedSelected }}</div>\r\n <div class=\"Placeholder\" *ngIf=\"!selectedValue\">{{ placeholder }}</div>\r\n <lucide-icon class=\"IconDate\" name=\"calendar\"></lucide-icon>\r\n</div>\r\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex!important;flex-direction:column!important;width:100%;height:max-content;--radius-none: 0;--radius-xs: 2px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 16px;--radius-full: 9999px;--spacing-xxs: 2px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 16px;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);font-weight:400;width:100%;cursor:pointer;padding:0 3px;margin:0 0 4px;overflow:hidden;word-break:break-all}:host .Entry{display:flex!important;width:100%;height:32px;justify-content:flex-start;align-items:center;border:solid 0 var(--color-input-border, #d4d4d4);border-radius:12px!important;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px!important;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .Entry{padding:0 8px}:host .Entry .Value{color:var(--color-input-fg)}:host .Entry .Placeholder{color:var(--color-input-placeholder)}:host .Entry .IconDate{margin-left:auto;color:var(--color-input-placeholder);padding-right:4px}\n"] }]
4669
4669
  }], propDecorators: { label: [{
4670
4670
  type: Input
4671
4671
  }], opcional: [{
@@ -5307,7 +5307,7 @@ class DatetimePickerComponent {
5307
5307
  useExisting: forwardRef(() => DatetimePickerComponent),
5308
5308
  multi: true,
5309
5309
  },
5310
- ], ngImport: i0, template: "<p\n *ngIf=\"label\"\n class=\"Label\"\n [class.Disabled]=\"isDisabled\"\n (click)=\"manualClick($event); toggleShowPicker($event); $event.stopPropagation()\"\n>\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\n</p>\n\n<p\n *ngIf=\"description\"\n class=\"Description\"\n [class.Disabled]=\"isDisabled\"\n (click)=\"manualClick($event); toggleShowPicker($event); $event.stopPropagation()\"\n>\n {{ description }}\n</p>\n\n<div\n class=\"Entry\"\n (click)=\"toggleShowPicker($event)\"\n [class.focused]=\"isFocus\"\n [class.Disabled]=\"isDisabled\"\n tabindex=\"0\"\n (focus)=\"focus()\"\n (blur)=\"defocus()\"\n>\n <div class=\"Value\" *ngIf=\"selectedValue\">{{ formattedSelected }}</div>\n <div class=\"Placeholder\" *ngIf=\"!selectedValue\">{{ placeholder }}</div>\n <lucide-icon class=\"IconDate\" name=\"calendar\"></lucide-icon>\n</div>\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex;flex-direction:column;width:100%;height:max-content;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);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(--color-input-border, #d4d4d4);border-radius:12px;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .Entry{padding:0 8px}:host .Entry .Value{color:var(--color-input-fg)}:host .Entry .Placeholder{color:var(--color-input-placeholder)}:host .Entry .IconDate{margin-left:auto;color:var(--color-input-placeholder);padding-right:4px}\n"], dependencies: [{ kind: "component", type: LucideIconComponent, selector: "lucide-icon", inputs: ["name", "size", "spin", "filled"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
5310
+ ], ngImport: i0, template: "<p\n *ngIf=\"label\"\n class=\"Label\"\n [class.Disabled]=\"isDisabled\"\n (click)=\"manualClick($event); toggleShowPicker($event); $event.stopPropagation()\"\n>\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\n</p>\n\n<p\n *ngIf=\"description\"\n class=\"Description\"\n [class.Disabled]=\"isDisabled\"\n (click)=\"manualClick($event); toggleShowPicker($event); $event.stopPropagation()\"\n>\n {{ description }}\n</p>\n\n<div\n class=\"Entry\"\n (click)=\"toggleShowPicker($event)\"\n [class.focused]=\"isFocus\"\n [class.Disabled]=\"isDisabled\"\n tabindex=\"0\"\n (focus)=\"focus()\"\n (blur)=\"defocus()\"\n>\n <div class=\"Value\" *ngIf=\"selectedValue\">{{ formattedSelected }}</div>\n <div class=\"Placeholder\" *ngIf=\"!selectedValue\">{{ placeholder }}</div>\n <lucide-icon class=\"IconDate\" name=\"calendar\"></lucide-icon>\n</div>\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex!important;flex-direction:column!important;width:100%;height:max-content;--radius-none: 0;--radius-xs: 2px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 16px;--radius-full: 9999px;--spacing-xxs: 2px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 16px;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);font-weight:400;width:100%;cursor:pointer;padding:0 3px;margin:0 0 4px;overflow:hidden;word-break:break-all}:host .Entry{display:flex!important;width:100%;height:32px;justify-content:flex-start;align-items:center;border:solid 0 var(--color-input-border, #d4d4d4);border-radius:12px!important;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px!important;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .Entry{padding:0 8px}:host .Entry .Value{color:var(--color-input-fg)}:host .Entry .Placeholder{color:var(--color-input-placeholder)}:host .Entry .IconDate{margin-left:auto;color:var(--color-input-placeholder);padding-right:4px}\n"], dependencies: [{ kind: "component", type: LucideIconComponent, selector: "lucide-icon", inputs: ["name", "size", "spin", "filled"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
5311
5311
  }
5312
5312
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: DatetimePickerComponent, decorators: [{
5313
5313
  type: Component,
@@ -5319,7 +5319,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
5319
5319
  useExisting: forwardRef(() => DatetimePickerComponent),
5320
5320
  multi: true,
5321
5321
  },
5322
- ], template: "<p\n *ngIf=\"label\"\n class=\"Label\"\n [class.Disabled]=\"isDisabled\"\n (click)=\"manualClick($event); toggleShowPicker($event); $event.stopPropagation()\"\n>\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\n</p>\n\n<p\n *ngIf=\"description\"\n class=\"Description\"\n [class.Disabled]=\"isDisabled\"\n (click)=\"manualClick($event); toggleShowPicker($event); $event.stopPropagation()\"\n>\n {{ description }}\n</p>\n\n<div\n class=\"Entry\"\n (click)=\"toggleShowPicker($event)\"\n [class.focused]=\"isFocus\"\n [class.Disabled]=\"isDisabled\"\n tabindex=\"0\"\n (focus)=\"focus()\"\n (blur)=\"defocus()\"\n>\n <div class=\"Value\" *ngIf=\"selectedValue\">{{ formattedSelected }}</div>\n <div class=\"Placeholder\" *ngIf=\"!selectedValue\">{{ placeholder }}</div>\n <lucide-icon class=\"IconDate\" name=\"calendar\"></lucide-icon>\n</div>\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex;flex-direction:column;width:100%;height:max-content;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);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(--color-input-border, #d4d4d4);border-radius:12px;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .Entry{padding:0 8px}:host .Entry .Value{color:var(--color-input-fg)}:host .Entry .Placeholder{color:var(--color-input-placeholder)}:host .Entry .IconDate{margin-left:auto;color:var(--color-input-placeholder);padding-right:4px}\n"] }]
5322
+ ], template: "<p\n *ngIf=\"label\"\n class=\"Label\"\n [class.Disabled]=\"isDisabled\"\n (click)=\"manualClick($event); toggleShowPicker($event); $event.stopPropagation()\"\n>\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\n</p>\n\n<p\n *ngIf=\"description\"\n class=\"Description\"\n [class.Disabled]=\"isDisabled\"\n (click)=\"manualClick($event); toggleShowPicker($event); $event.stopPropagation()\"\n>\n {{ description }}\n</p>\n\n<div\n class=\"Entry\"\n (click)=\"toggleShowPicker($event)\"\n [class.focused]=\"isFocus\"\n [class.Disabled]=\"isDisabled\"\n tabindex=\"0\"\n (focus)=\"focus()\"\n (blur)=\"defocus()\"\n>\n <div class=\"Value\" *ngIf=\"selectedValue\">{{ formattedSelected }}</div>\n <div class=\"Placeholder\" *ngIf=\"!selectedValue\">{{ placeholder }}</div>\n <lucide-icon class=\"IconDate\" name=\"calendar\"></lucide-icon>\n</div>\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex!important;flex-direction:column!important;width:100%;height:max-content;--radius-none: 0;--radius-xs: 2px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 16px;--radius-full: 9999px;--spacing-xxs: 2px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 16px;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);font-weight:400;width:100%;cursor:pointer;padding:0 3px;margin:0 0 4px;overflow:hidden;word-break:break-all}:host .Entry{display:flex!important;width:100%;height:32px;justify-content:flex-start;align-items:center;border:solid 0 var(--color-input-border, #d4d4d4);border-radius:12px!important;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px!important;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .Entry{padding:0 8px}:host .Entry .Value{color:var(--color-input-fg)}:host .Entry .Placeholder{color:var(--color-input-placeholder)}:host .Entry .IconDate{margin-left:auto;color:var(--color-input-placeholder);padding-right:4px}\n"] }]
5323
5323
  }], propDecorators: { label: [{
5324
5324
  type: Input
5325
5325
  }], opcional: [{
@@ -5365,12 +5365,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
5365
5365
  args: [{ providedIn: 'root' }]
5366
5366
  }] });
5367
5367
 
5368
+ function foldSearchText(value) {
5369
+ return String(value ?? '')
5370
+ .normalize('NFD')
5371
+ .replace(/[\u0300-\u036f]/g, '')
5372
+ .toLowerCase()
5373
+ .trim();
5374
+ }
5375
+ function fieldScore(field, query, weights) {
5376
+ if (!field || !query)
5377
+ return 0;
5378
+ if (field === query)
5379
+ return weights[0];
5380
+ if (field.startsWith(query))
5381
+ return weights[1];
5382
+ if (field.includes(query)) {
5383
+ const wordHit = field.split(/\s+/).some((word) => word.startsWith(query));
5384
+ return wordHit ? weights[2] + 10 : weights[2];
5385
+ }
5386
+ return 0;
5387
+ }
5388
+ function scoreSelectOption(option, query) {
5389
+ const q = foldSearchText(query);
5390
+ if (!q)
5391
+ return 50;
5392
+ return Math.max(fieldScore(foldSearchText(option.name), q, [100, 80, 60]), fieldScore(foldSearchText(option.description), q, [55, 45, 40]), fieldScore(foldSearchText(option.symbol), q, [70, 55, 45]), fieldScore(foldSearchText(option.value), q, [50, 40, 30]));
5393
+ }
5394
+ function filterSelectOptions(options, query) {
5395
+ const q = foldSearchText(query);
5396
+ if (!q)
5397
+ return [...options];
5398
+ return options
5399
+ .map((option) => ({ option, score: scoreSelectOption(option, q) }))
5400
+ .filter((item) => item.score > 0)
5401
+ .sort((a, b) => b.score - a.score)
5402
+ .map((item) => item.option);
5403
+ }
5404
+
5368
5405
  class OnlySelectComponent {
5369
5406
  // ============================================================================
5370
5407
  // DEPENDENCIES (Injected Services)
5371
5408
  // ============================================================================
5372
5409
  cdr = inject(ChangeDetectorRef);
5373
- http = inject(HttpClient);
5410
+ http = inject(HttpClient, { optional: true });
5374
5411
  inputsConfig = inject(XOSUE_UTILS_INPUTS_CONFIG);
5375
5412
  onlySelectModal = inject(OnlySelectModalService);
5376
5413
  inputOverlayCoordinator = inject(InputOverlayCoordinatorService);
@@ -5473,48 +5510,27 @@ class OnlySelectComponent {
5473
5510
  // LIFE CYCLE HOOKS (Ciclo de vida del componente)
5474
5511
  // ============================================================================
5475
5512
  ngOnInit() {
5476
- // Configurar búsqueda con debounce para evitar sobrecarga
5477
- if (this.search) {
5478
- // Búsqueda con debounce (500ms) para API y local
5479
- this.searchSubscription = this.searchSubject
5480
- .pipe(debounceTime(500), // Aumentado a 500ms para dar tiempo de escribir
5481
- distinctUntilChanged(), switchMap((query) => {
5482
- this.isSearching = true;
5483
- this.syncModalView();
5484
- this.cdr.markForCheck();
5485
- if (this.api) {
5486
- // Búsqueda con API
5487
- return this.http
5488
- .get(`${this.inputsConfig.apiUrl}${this.api}?search=${encodeURIComponent(query)}`, { headers: this.getAuthHeaders() })
5489
- .pipe(catchError((err) => {
5490
- console.error('API search error:', err);
5491
- this.isSearching = false;
5492
- this.syncModalView();
5493
- this.cdr.markForCheck();
5494
- return of([]);
5495
- }));
5496
- }
5497
- else {
5498
- // Búsqueda local (simulamos delay mínimo para consistencia)
5499
- return new Promise((resolve) => {
5500
- setTimeout(() => {
5501
- resolve(this.filterLocalOptions(query));
5502
- }, 100);
5503
- }).then((results) => {
5504
- this.isSearching = false;
5505
- this.cdr.markForCheck();
5506
- return results;
5507
- });
5508
- }
5509
- }))
5510
- .subscribe((results) => {
5511
- this.filteredOptions = results;
5512
- this.isSearching = false;
5513
- this.syncModalView();
5514
- this.cdr.markForCheck();
5515
- });
5516
- }
5517
- // Cargar datos iniciales
5513
+ this.searchSubscription = this.searchSubject
5514
+ .pipe(debounceTime(300), distinctUntilChanged(), switchMap((query) => {
5515
+ if (!this.search || !this.api || !this.http) {
5516
+ return of(this.filterLocalOptions(query));
5517
+ }
5518
+ this.isSearching = true;
5519
+ this.syncModalView();
5520
+ this.cdr.markForCheck();
5521
+ return this.http
5522
+ .get(`${this.inputsConfig.apiUrl}${this.api}?search=${encodeURIComponent(query)}`, { headers: this.getAuthHeaders() })
5523
+ .pipe(catchError((err) => {
5524
+ console.error('API search error:', err);
5525
+ return of([]);
5526
+ }));
5527
+ }))
5528
+ .subscribe((results) => {
5529
+ this.filteredOptions = results;
5530
+ this.isSearching = false;
5531
+ this.syncModalView();
5532
+ this.cdr.markForCheck();
5533
+ });
5518
5534
  if (this.api) {
5519
5535
  this.fetchFromApi('');
5520
5536
  }
@@ -5554,70 +5570,22 @@ class OnlySelectComponent {
5554
5570
  onSearchChange(e) {
5555
5571
  const query = e.target?.value ?? '';
5556
5572
  this.searchQuery = query;
5557
- if (!this.search)
5573
+ if (!this.search) {
5574
+ this.syncModalView();
5558
5575
  return;
5559
- this.searchSubject.next(query);
5576
+ }
5577
+ if (this.api) {
5578
+ this.searchSubject.next(query);
5579
+ this.syncModalView();
5580
+ return;
5581
+ }
5582
+ this.filteredOptions = this.filterLocalOptions(query);
5583
+ this.isSearching = false;
5560
5584
  this.syncModalView();
5585
+ this.cdr.markForCheck();
5561
5586
  }
5562
- /**
5563
- * Filtra opciones locales (método auxiliar para búsqueda con debounce)
5564
- */
5565
5587
  filterLocalOptions(query) {
5566
- const normalizedQuery = query.trim().toLowerCase();
5567
- if (!normalizedQuery) {
5568
- return [...this.internalOptions];
5569
- }
5570
- // Reordenar por relevancia
5571
- return [...this.internalOptions]
5572
- .map((option) => ({
5573
- option,
5574
- score: this.calculateRelevanceScore(option, normalizedQuery),
5575
- }))
5576
- .sort((a, b) => b.score - a.score)
5577
- .map((item) => item.option);
5578
- }
5579
- /**
5580
- * Calcula un score de relevancia para una opción basado en la búsqueda.
5581
- * - Score más alto = mejor coincidencia
5582
- * - Coincidencia exacta: 100
5583
- * - Comienza con la búsqueda: 80
5584
- * - Contiene la búsqueda: 60
5585
- * - Coincidencia en descripción: 40
5586
- * - Sin coincidencia: 0
5587
- */
5588
- calculateRelevanceScore(option, query) {
5589
- const normalizedQuery = query.toLowerCase().trim();
5590
- if (!normalizedQuery)
5591
- return 50; // Sin búsqueda, score neutral
5592
- const name = option.name.toLowerCase();
5593
- const description = (option.description || '').toLowerCase();
5594
- let score = 0;
5595
- // Coincidencia exacta (mayor prioridad)
5596
- if (name === normalizedQuery) {
5597
- score = 100;
5598
- }
5599
- // Comienza con la búsqueda (alta prioridad)
5600
- else if (name.startsWith(normalizedQuery)) {
5601
- score = 80;
5602
- }
5603
- // Contiene la búsqueda en el nombre (media prioridad)
5604
- else if (name.includes(normalizedQuery)) {
5605
- score = 60;
5606
- // Bonificación si está al principio de una palabra
5607
- const words = name.split(/\s+/);
5608
- if (words.some(word => word.startsWith(normalizedQuery))) {
5609
- score += 10;
5610
- }
5611
- }
5612
- // Coincidencia en descripción (baja prioridad)
5613
- else if (description.includes(normalizedQuery)) {
5614
- score = 40;
5615
- }
5616
- // Sin coincidencia
5617
- else {
5618
- score = 0;
5619
- }
5620
- return score;
5588
+ return filterSelectOptions(this.internalOptions, query);
5621
5589
  }
5622
5590
  // ============================================================================
5623
5591
  // API HANDLERS (Manejadores de API)
@@ -5630,6 +5598,11 @@ class OnlySelectComponent {
5630
5598
  const url = query
5631
5599
  ? `${this.inputsConfig.apiUrl}${this.api}?search=${encodedQuery}`
5632
5600
  : `${this.inputsConfig.apiUrl}${this.api}`;
5601
+ if (!this.http) {
5602
+ this.isLoading = false;
5603
+ this.cdr.markForCheck();
5604
+ return;
5605
+ }
5633
5606
  this.http
5634
5607
  .get(url, { headers: this.getAuthHeaders() })
5635
5608
  .pipe(catchError((err) => {
@@ -5800,7 +5773,7 @@ class OnlySelectComponent {
5800
5773
  useExisting: forwardRef(() => OnlySelectComponent), // Utilizamos forwardRef para evitar problemas con el ciclo de vida de Angular
5801
5774
  multi: true, // Necesario para que se pueda usar con múltiples componentes
5802
5775
  },
5803
- ], usesOnChanges: true, ngImport: i0, template: "<div\n *ngIf=\"label\"\n class=\"LabelRow\"\n [class.Disabled]=\"isDisabled\"\n (click)=\"toggleOpenOptions($event); $event.stopPropagation()\"\n>\n <p class=\"Label\">\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\n </p>\n <field-help-tooltip\n *ngIf=\"fieldHelp\"\n [title]=\"label\"\n [text]=\"fieldHelp\"\n ></field-help-tooltip>\n</div>\n\n<p\n *ngIf=\"description\"\n class=\"Description\"\n [class.Disabled]=\"isDisabled\"\n (click)=\"toggleOpenOptions($event); $event.stopPropagation()\"\n>\n {{ description }}\n</p>\n\n<div\n class=\"Entry\"\n (click)=\"toggleOpenOptions($event)\"\n [class.IsFocus]=\"isFocus\"\n [class.Disabled]=\"isDisabled\"\n (focus)=\"focus()\"\n (blur)=\"defocus()\"\n>\n <div class=\"SelectedOptions\" *ngIf=\"selectedOption\">\n <div class=\"SelectedOption\">\n <div\n class=\"Color\"\n *ngIf=\"selectedOption.color\"\n [style.backgroundColor]=\"selectedOption.color\"\n ></div>\n <span class=\"Text\">{{ selectedOption.name }}</span>\n <lucide-icon class=\"RemoveIcon\" name=\"x\" (click)=\"removeSelected()\"></lucide-icon>\n </div>\n </div>\n <div class=\"Placeholder\" *ngIf=\"!selectedOption\">\n {{ placeholder }}\n </div>\n\n <lucide-icon class=\"IconSort\" name=\"arrow-down-wide-narrow\"></lucide-icon>\n</div>\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex;flex-direction:column;width:100%;height:max-content;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);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(--color-input-border, #d4d4d4);border-radius:12px;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .Entry{padding:0 8px;gap:4px}:host .Entry .SelectedOptions{display:flex;align-items:center;gap:4px;width:100%;height:100%}:host .Entry .SelectedOptions .SelectedOption{width:100%;height:100%;display:flex;align-items:center;gap:4px;overflow:hidden}:host .Entry .SelectedOptions .SelectedOption .Color{width:20px;min-width:20px;height:20px;min-height:20px;border-radius:100px;overflow:hidden}:host .Entry .SelectedOptions .SelectedOption .Text{width:100%;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;word-break:break-all}:host .Entry .SelectedOptions .SelectedOption .RemoveIcon{cursor:pointer;width:40px;height:100%;display:flex;justify-content:center;align-items:center;font-size:14px}:host .Entry .SelectedOptions .SelectedOption .RemoveIcon lucide-icon .lucide-svg{width:14px;height:14px}:host .Entry .SelectedOptions .SelectedOption .RemoveIcon:hover{color:var(--color-danger-fg);background-color:var(--color-input-addon-bg)}:host .Entry .Value{color:var(--color-input-fg, #171717)}:host .Entry .Placeholder{color:var(--color-input-placeholder, #a3a3a3)}:host .Entry .IconSort{display:flex;justify-content:center;align-items:center;margin-left:auto;color:var(--color-input-placeholder)}\n"], dependencies: [{ kind: "component", type: LucideIconComponent, selector: "lucide-icon", inputs: ["name", "size", "spin", "filled"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: FieldHelpTooltipComponent, selector: "field-help-tooltip", inputs: ["text", "title"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
5776
+ ], usesOnChanges: true, ngImport: i0, template: "<div\n *ngIf=\"label\"\n class=\"LabelRow\"\n [class.Disabled]=\"isDisabled\"\n (click)=\"toggleOpenOptions($event); $event.stopPropagation()\"\n>\n <p class=\"Label\">\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\n </p>\n <field-help-tooltip\n *ngIf=\"fieldHelp\"\n [title]=\"label\"\n [text]=\"fieldHelp\"\n ></field-help-tooltip>\n</div>\n\n<p\n *ngIf=\"description\"\n class=\"Description\"\n [class.Disabled]=\"isDisabled\"\n (click)=\"toggleOpenOptions($event); $event.stopPropagation()\"\n>\n {{ description }}\n</p>\n\n<div\n class=\"Entry\"\n (click)=\"toggleOpenOptions($event)\"\n [class.IsFocus]=\"isFocus\"\n [class.Disabled]=\"isDisabled\"\n (focus)=\"focus()\"\n (blur)=\"defocus()\"\n>\n <div class=\"SelectedOptions\" *ngIf=\"selectedOption\">\n <div class=\"SelectedOption\">\n <div\n class=\"Color\"\n *ngIf=\"selectedOption.color\"\n [style.backgroundColor]=\"selectedOption.color\"\n ></div>\n <span class=\"Text\">{{ selectedOption.name }}</span>\n <lucide-icon class=\"RemoveIcon\" name=\"x\" (click)=\"removeSelected()\"></lucide-icon>\n </div>\n </div>\n <div class=\"Placeholder\" *ngIf=\"!selectedOption\">\n {{ placeholder }}\n </div>\n\n <lucide-icon class=\"IconSort\" name=\"arrow-down-wide-narrow\"></lucide-icon>\n</div>\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex!important;flex-direction:column!important;width:100%;height:max-content;--radius-none: 0;--radius-xs: 2px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 16px;--radius-full: 9999px;--spacing-xxs: 2px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 16px;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);font-weight:400;width:100%;cursor:pointer;padding:0 3px;margin:0 0 4px;overflow:hidden;word-break:break-all}:host .Entry{display:flex!important;width:100%;height:32px;justify-content:flex-start;align-items:center;border:solid 0 var(--color-input-border, #d4d4d4);border-radius:12px!important;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px!important;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .Entry{padding:0 8px;gap:4px}:host .Entry .SelectedOptions{display:flex;align-items:center;gap:4px;width:100%;height:100%}:host .Entry .SelectedOptions .SelectedOption{width:100%;height:100%;display:flex;align-items:center;gap:4px;overflow:hidden}:host .Entry .SelectedOptions .SelectedOption .Color{width:20px;min-width:20px;height:20px;min-height:20px;border-radius:100px;overflow:hidden}:host .Entry .SelectedOptions .SelectedOption .Text{width:100%;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;word-break:break-all}:host .Entry .SelectedOptions .SelectedOption .RemoveIcon{cursor:pointer;width:40px;height:100%;display:flex;justify-content:center;align-items:center;font-size:14px}:host .Entry .SelectedOptions .SelectedOption .RemoveIcon lucide-icon .lucide-svg{width:14px;height:14px}:host .Entry .SelectedOptions .SelectedOption .RemoveIcon:hover{color:var(--color-danger-fg);background-color:var(--color-input-addon-bg)}:host .Entry .Value{color:var(--color-input-fg, #171717)}:host .Entry .Placeholder{color:var(--color-input-placeholder, #a3a3a3)}:host .Entry .IconSort{display:flex;justify-content:center;align-items:center;margin-left:auto;color:var(--color-input-placeholder)}\n"], dependencies: [{ kind: "component", type: LucideIconComponent, selector: "lucide-icon", inputs: ["name", "size", "spin", "filled"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: FieldHelpTooltipComponent, selector: "field-help-tooltip", inputs: ["text", "title"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
5804
5777
  }
5805
5778
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: OnlySelectComponent, decorators: [{
5806
5779
  type: Component,
@@ -5815,7 +5788,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
5815
5788
  useExisting: forwardRef(() => OnlySelectComponent), // Utilizamos forwardRef para evitar problemas con el ciclo de vida de Angular
5816
5789
  multi: true, // Necesario para que se pueda usar con múltiples componentes
5817
5790
  },
5818
- ], template: "<div\n *ngIf=\"label\"\n class=\"LabelRow\"\n [class.Disabled]=\"isDisabled\"\n (click)=\"toggleOpenOptions($event); $event.stopPropagation()\"\n>\n <p class=\"Label\">\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\n </p>\n <field-help-tooltip\n *ngIf=\"fieldHelp\"\n [title]=\"label\"\n [text]=\"fieldHelp\"\n ></field-help-tooltip>\n</div>\n\n<p\n *ngIf=\"description\"\n class=\"Description\"\n [class.Disabled]=\"isDisabled\"\n (click)=\"toggleOpenOptions($event); $event.stopPropagation()\"\n>\n {{ description }}\n</p>\n\n<div\n class=\"Entry\"\n (click)=\"toggleOpenOptions($event)\"\n [class.IsFocus]=\"isFocus\"\n [class.Disabled]=\"isDisabled\"\n (focus)=\"focus()\"\n (blur)=\"defocus()\"\n>\n <div class=\"SelectedOptions\" *ngIf=\"selectedOption\">\n <div class=\"SelectedOption\">\n <div\n class=\"Color\"\n *ngIf=\"selectedOption.color\"\n [style.backgroundColor]=\"selectedOption.color\"\n ></div>\n <span class=\"Text\">{{ selectedOption.name }}</span>\n <lucide-icon class=\"RemoveIcon\" name=\"x\" (click)=\"removeSelected()\"></lucide-icon>\n </div>\n </div>\n <div class=\"Placeholder\" *ngIf=\"!selectedOption\">\n {{ placeholder }}\n </div>\n\n <lucide-icon class=\"IconSort\" name=\"arrow-down-wide-narrow\"></lucide-icon>\n</div>\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex;flex-direction:column;width:100%;height:max-content;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);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(--color-input-border, #d4d4d4);border-radius:12px;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .Entry{padding:0 8px;gap:4px}:host .Entry .SelectedOptions{display:flex;align-items:center;gap:4px;width:100%;height:100%}:host .Entry .SelectedOptions .SelectedOption{width:100%;height:100%;display:flex;align-items:center;gap:4px;overflow:hidden}:host .Entry .SelectedOptions .SelectedOption .Color{width:20px;min-width:20px;height:20px;min-height:20px;border-radius:100px;overflow:hidden}:host .Entry .SelectedOptions .SelectedOption .Text{width:100%;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;word-break:break-all}:host .Entry .SelectedOptions .SelectedOption .RemoveIcon{cursor:pointer;width:40px;height:100%;display:flex;justify-content:center;align-items:center;font-size:14px}:host .Entry .SelectedOptions .SelectedOption .RemoveIcon lucide-icon .lucide-svg{width:14px;height:14px}:host .Entry .SelectedOptions .SelectedOption .RemoveIcon:hover{color:var(--color-danger-fg);background-color:var(--color-input-addon-bg)}:host .Entry .Value{color:var(--color-input-fg, #171717)}:host .Entry .Placeholder{color:var(--color-input-placeholder, #a3a3a3)}:host .Entry .IconSort{display:flex;justify-content:center;align-items:center;margin-left:auto;color:var(--color-input-placeholder)}\n"] }]
5791
+ ], template: "<div\n *ngIf=\"label\"\n class=\"LabelRow\"\n [class.Disabled]=\"isDisabled\"\n (click)=\"toggleOpenOptions($event); $event.stopPropagation()\"\n>\n <p class=\"Label\">\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\n </p>\n <field-help-tooltip\n *ngIf=\"fieldHelp\"\n [title]=\"label\"\n [text]=\"fieldHelp\"\n ></field-help-tooltip>\n</div>\n\n<p\n *ngIf=\"description\"\n class=\"Description\"\n [class.Disabled]=\"isDisabled\"\n (click)=\"toggleOpenOptions($event); $event.stopPropagation()\"\n>\n {{ description }}\n</p>\n\n<div\n class=\"Entry\"\n (click)=\"toggleOpenOptions($event)\"\n [class.IsFocus]=\"isFocus\"\n [class.Disabled]=\"isDisabled\"\n (focus)=\"focus()\"\n (blur)=\"defocus()\"\n>\n <div class=\"SelectedOptions\" *ngIf=\"selectedOption\">\n <div class=\"SelectedOption\">\n <div\n class=\"Color\"\n *ngIf=\"selectedOption.color\"\n [style.backgroundColor]=\"selectedOption.color\"\n ></div>\n <span class=\"Text\">{{ selectedOption.name }}</span>\n <lucide-icon class=\"RemoveIcon\" name=\"x\" (click)=\"removeSelected()\"></lucide-icon>\n </div>\n </div>\n <div class=\"Placeholder\" *ngIf=\"!selectedOption\">\n {{ placeholder }}\n </div>\n\n <lucide-icon class=\"IconSort\" name=\"arrow-down-wide-narrow\"></lucide-icon>\n</div>\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex!important;flex-direction:column!important;width:100%;height:max-content;--radius-none: 0;--radius-xs: 2px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 16px;--radius-full: 9999px;--spacing-xxs: 2px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 16px;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);font-weight:400;width:100%;cursor:pointer;padding:0 3px;margin:0 0 4px;overflow:hidden;word-break:break-all}:host .Entry{display:flex!important;width:100%;height:32px;justify-content:flex-start;align-items:center;border:solid 0 var(--color-input-border, #d4d4d4);border-radius:12px!important;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px!important;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .Entry{padding:0 8px;gap:4px}:host .Entry .SelectedOptions{display:flex;align-items:center;gap:4px;width:100%;height:100%}:host .Entry .SelectedOptions .SelectedOption{width:100%;height:100%;display:flex;align-items:center;gap:4px;overflow:hidden}:host .Entry .SelectedOptions .SelectedOption .Color{width:20px;min-width:20px;height:20px;min-height:20px;border-radius:100px;overflow:hidden}:host .Entry .SelectedOptions .SelectedOption .Text{width:100%;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;word-break:break-all}:host .Entry .SelectedOptions .SelectedOption .RemoveIcon{cursor:pointer;width:40px;height:100%;display:flex;justify-content:center;align-items:center;font-size:14px}:host .Entry .SelectedOptions .SelectedOption .RemoveIcon lucide-icon .lucide-svg{width:14px;height:14px}:host .Entry .SelectedOptions .SelectedOption .RemoveIcon:hover{color:var(--color-danger-fg);background-color:var(--color-input-addon-bg)}:host .Entry .Value{color:var(--color-input-fg, #171717)}:host .Entry .Placeholder{color:var(--color-input-placeholder, #a3a3a3)}:host .Entry .IconSort{display:flex;justify-content:center;align-items:center;margin-left:auto;color:var(--color-input-placeholder)}\n"] }]
5819
5792
  }], propDecorators: { label: [{
5820
5793
  type: Input
5821
5794
  }], description: [{
@@ -5876,7 +5849,7 @@ class MultiselectComboboxComponent {
5876
5849
  // DEPENDENCIES (Injected Services)
5877
5850
  // ============================================================================
5878
5851
  cdr = inject(ChangeDetectorRef);
5879
- http = inject(HttpClient);
5852
+ http = inject(HttpClient, { optional: true });
5880
5853
  inputsConfig = inject(XOSUE_UTILS_INPUTS_CONFIG);
5881
5854
  multiselectModal = inject(MultiselectComboboxModalService);
5882
5855
  inputOverlayCoordinator = inject(InputOverlayCoordinatorService);
@@ -6053,7 +6026,7 @@ class MultiselectComboboxComponent {
6053
6026
  this.isSearching = !!normalizedQuery;
6054
6027
  this.syncModalView();
6055
6028
  this.cdr.markForCheck();
6056
- if (shouldSkipBrowseLoad) {
6029
+ if (shouldSkipBrowseLoad || !this.http) {
6057
6030
  return of([]);
6058
6031
  }
6059
6032
  return this.http
@@ -6074,37 +6047,44 @@ class MultiselectComboboxComponent {
6074
6047
  this.cdr.markForCheck();
6075
6048
  });
6076
6049
  }
6077
- if (this.api && this.search) {
6078
- this.searchSubscription = this.searchSubject
6079
- .pipe(debounceTime(300), distinctUntilChanged(), switchMap((query) => {
6080
- const normalizedQuery = query.trim();
6081
- if (this.minSearch > 0 && normalizedQuery.length < this.minSearch) {
6082
- this.isSearching = false;
6083
- this.filteredOptions = [];
6084
- this.syncModalView();
6085
- this.cdr.markForCheck();
6086
- return of([]);
6087
- }
6088
- this.isSearching = true;
6089
- this.syncModalView();
6090
- this.cdr.markForCheck();
6091
- return this.http
6092
- .get(this.buildApiUrl(normalizedQuery), {
6093
- headers: this.getAuthHeaders(),
6094
- })
6095
- .pipe(catchError((err) => {
6096
- console.error('API search error:', err);
6097
- return of([]);
6098
- }));
6099
- }))
6100
- .subscribe((results) => {
6101
- this.filteredOptions = results;
6102
- this.resolvePendingSelection();
6050
+ this.searchSubscription = this.searchSubject
6051
+ .pipe(debounceTime(300), distinctUntilChanged(), switchMap((query) => {
6052
+ if (!this.search) {
6053
+ return of(this.filterLocalOptions(query));
6054
+ }
6055
+ if (!this.api) {
6056
+ return of(this.filterLocalOptions(query));
6057
+ }
6058
+ const normalizedQuery = query.trim();
6059
+ if (this.minSearch > 0 && normalizedQuery.length < this.minSearch) {
6103
6060
  this.isSearching = false;
6061
+ this.filteredOptions = [];
6104
6062
  this.syncModalView();
6105
6063
  this.cdr.markForCheck();
6106
- });
6107
- }
6064
+ return of([]);
6065
+ }
6066
+ this.isSearching = true;
6067
+ this.syncModalView();
6068
+ this.cdr.markForCheck();
6069
+ if (!this.http) {
6070
+ return of([]);
6071
+ }
6072
+ return this.http
6073
+ .get(this.buildApiUrl(normalizedQuery), {
6074
+ headers: this.getAuthHeaders(),
6075
+ })
6076
+ .pipe(catchError((err) => {
6077
+ console.error('API search error:', err);
6078
+ return of([]);
6079
+ }));
6080
+ }))
6081
+ .subscribe((results) => {
6082
+ this.filteredOptions = results;
6083
+ this.resolvePendingSelection();
6084
+ this.isSearching = false;
6085
+ this.syncModalView();
6086
+ this.cdr.markForCheck();
6087
+ });
6108
6088
  if (this.api) {
6109
6089
  this.apiReady = true;
6110
6090
  if (this.pendingValues?.length) {
@@ -6143,70 +6123,22 @@ class MultiselectComboboxComponent {
6143
6123
  onSearchChange(e) {
6144
6124
  const query = e.target?.value ?? '';
6145
6125
  this.searchQuery = query;
6146
- if (!this.search)
6126
+ if (!this.search) {
6127
+ this.syncModalView();
6128
+ return;
6129
+ }
6130
+ if (this.api) {
6131
+ this.searchSubject.next(query);
6132
+ this.syncModalView();
6147
6133
  return;
6148
- this.searchSubject.next(query);
6134
+ }
6135
+ this.filteredOptions = this.filterLocalOptions(query);
6136
+ this.isSearching = false;
6149
6137
  this.syncModalView();
6138
+ this.cdr.markForCheck();
6150
6139
  }
6151
- /**
6152
- * Filtra opciones locales (método auxiliar para búsqueda con debounce)
6153
- */
6154
6140
  filterLocalOptions(query) {
6155
- const normalizedQuery = query.trim().toLowerCase();
6156
- if (!normalizedQuery) {
6157
- return [...this.internalOptions];
6158
- }
6159
- // Reordenar por relevancia
6160
- return [...this.internalOptions]
6161
- .map((option) => ({
6162
- option,
6163
- score: this.calculateRelevanceScore(option, normalizedQuery),
6164
- }))
6165
- .sort((a, b) => b.score - a.score)
6166
- .map((item) => item.option);
6167
- }
6168
- /**
6169
- * Calcula un score de relevancia para una opción basado en la búsqueda.
6170
- * - Score más alto = mejor coincidencia
6171
- * - Coincidencia exacta: 100
6172
- * - Comienza con la búsqueda: 80
6173
- * - Contiene la búsqueda: 60
6174
- * - Coincidencia en descripción: 40
6175
- * - Sin coincidencia: 0
6176
- */
6177
- calculateRelevanceScore(option, query) {
6178
- const normalizedQuery = query.toLowerCase().trim();
6179
- if (!normalizedQuery)
6180
- return 50; // Sin búsqueda, score neutral
6181
- const name = option.name.toLowerCase();
6182
- const description = (option.description || '').toLowerCase();
6183
- let score = 0;
6184
- // Coincidencia exacta (mayor prioridad)
6185
- if (name === normalizedQuery) {
6186
- score = 100;
6187
- }
6188
- // Comienza con la búsqueda (alta prioridad)
6189
- else if (name.startsWith(normalizedQuery)) {
6190
- score = 80;
6191
- }
6192
- // Contiene la búsqueda en el nombre (media prioridad)
6193
- else if (name.includes(normalizedQuery)) {
6194
- score = 60;
6195
- // Bonificación si está al principio de una palabra
6196
- const words = name.split(/\s+/);
6197
- if (words.some((word) => word.startsWith(normalizedQuery))) {
6198
- score += 10;
6199
- }
6200
- }
6201
- // Coincidencia en descripción (baja prioridad)
6202
- else if (description.includes(normalizedQuery)) {
6203
- score = 40;
6204
- }
6205
- // Sin coincidencia
6206
- else {
6207
- score = 0;
6208
- }
6209
- return score;
6141
+ return filterSelectOptions(this.internalOptions, query);
6210
6142
  }
6211
6143
  // ============================================================================
6212
6144
  // API HANDLERS (Manejadores de API)
@@ -6357,12 +6289,26 @@ class MultiselectComboboxComponent {
6357
6289
  * @param event Evento del mouse (opcional).
6358
6290
  */
6359
6291
  manualClick(event) {
6360
- event?.stopPropagation(); // evita interferir con otros componentes
6292
+ event?.stopPropagation();
6361
6293
  if (this.isDisabled)
6362
6294
  return;
6363
- // Si el dropdown está cerrado, abrirlo
6364
6295
  if (!this.isOpenOptions) {
6365
6296
  this.isOpenOptions = true;
6297
+ this.searchQuery = '';
6298
+ this.isSearching = false;
6299
+ if (this.api) {
6300
+ if (this.deferInitialLoad && this.minSearch > 0) {
6301
+ this.filteredOptions = [];
6302
+ }
6303
+ else if (this.filteredOptions.length === 0) {
6304
+ this.fetchFromApi('');
6305
+ }
6306
+ }
6307
+ else {
6308
+ this.filteredOptions = [...this.internalOptions];
6309
+ }
6310
+ this.openModalPortal();
6311
+ this.syncModalView();
6366
6312
  this.cdr.markForCheck();
6367
6313
  }
6368
6314
  }
@@ -6373,7 +6319,7 @@ class MultiselectComboboxComponent {
6373
6319
  useExisting: forwardRef(() => MultiselectComboboxComponent),
6374
6320
  multi: true,
6375
6321
  },
6376
- ], usesOnChanges: true, ngImport: i0, template: "<p\n *ngIf=\"label\"\n class=\"Label\"\n [class.Disabled]=\"isDisabled\"\n (click)=\"toggleOpenOptions($event); $event.stopPropagation()\"\n>\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\n</p>\n\n<p\n *ngIf=\"description\"\n class=\"Description\"\n [class.Disabled]=\"isDisabled\"\n (click)=\"toggleOpenOptions($event); $event.stopPropagation()\"\n>\n {{ description }}\n</p>\n\n<div\n class=\"Entry\"\n (click)=\"toggleOpenOptions($event)\"\n [class.focused]=\"isFocus\"\n [class.disabled]=\"isDisabled\"\n tabindex=\"0\"\n (focus)=\"focus()\"\n (blur)=\"defocus()\"\n>\n <div class=\"SelectedOptions\" *ngIf=\"selectedOptions.length > 0\">\n <ng-container *ngIf=\"selectedOptions.length > 1\">\n <span class=\"SelectedCount\">\n +{{ selectedOptions.length - 1 }} items\n </span>\n\n <span class=\"SelectedOption\">\n <span class=\"Text\">{{ selectedOptions[selectedOptions.length - 1].name }}</span>\n <lucide-icon class=\"RemoveIcon\" name=\"x\" (click)=\"removeSelected(selectedOptions[selectedOptions.length - 1])\"></lucide-icon>\n </span>\n </ng-container>\n\n <ng-container *ngIf=\"selectedOptions.length === 1\">\n <span class=\"SelectedOption\">\n <p class=\"Text\">{{ selectedOptions[0].name }}</p>\n\n <lucide-icon\n class=\"RemoveIcon\"\n name=\"x\"\n (click)=\"removeSelected(selectedOptions[0])\"\n ></lucide-icon>\n </span>\n </ng-container>\n </div>\n\n <div\n class=\"Placeholder\"\n *ngIf=\"!selectedOptions || selectedOptions.length === 0\"\n >\n {{ placeholder }}\n </div>\n <lucide-icon class=\"IconSort\" name=\"arrow-down-wide-narrow\"></lucide-icon>\n</div>\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex;flex-direction:column;width:100%;height:max-content;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);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(--color-input-border, #d4d4d4);border-radius:12px;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .Entry{padding:0 8px;gap:4px}:host .Entry .SelectedOptions{width:100%;height:100%;display:flex;gap:3px;overflow:hidden}:host .Entry .SelectedOptions .SelectedCount{min-width:max-content;height:max-content;margin:auto 0;padding:0 5px;border-radius:50px;display:flex;align-items:center;overflow:hidden;white-space:nowrap;background-color:var(--color-input-addon-bg)}:host .Entry .SelectedOptions .SelectedOption{width:100%;height:100%;display:flex;align-items:center;gap:4px;overflow:hidden}:host .Entry .SelectedOptions .SelectedOption .Text{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .Entry .SelectedOptions .SelectedOption .RemoveIcon{cursor:pointer;width:40px;height:100%;display:flex;justify-content:center;align-items:center;font-size:14px}:host .Entry .SelectedOptions .SelectedOption .RemoveIcon lucide-icon .lucide-svg{width:14px;height:14px}:host .Entry .SelectedOptions .SelectedOption .RemoveIcon:hover{color:var(--color-danger-fg);background-color:var(--color-input-addon-bg)}:host .Entry .Value{color:var(--color-input-fg)}:host .Entry .Placeholder{color:var(--color-input-placeholder);width:100%}:host .Entry .IconSort{display:flex;justify-content:center;align-items:center;margin-left:auto;color:var(--color-input-placeholder)}\n"], dependencies: [{ kind: "component", type: LucideIconComponent, selector: "lucide-icon", inputs: ["name", "size", "spin", "filled"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
6322
+ ], usesOnChanges: true, ngImport: i0, template: "<p\n *ngIf=\"label\"\n class=\"Label\"\n [class.Disabled]=\"isDisabled\"\n (click)=\"toggleOpenOptions($event); $event.stopPropagation()\"\n>\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\n</p>\n\n<p\n *ngIf=\"description\"\n class=\"Description\"\n [class.Disabled]=\"isDisabled\"\n (click)=\"toggleOpenOptions($event); $event.stopPropagation()\"\n>\n {{ description }}\n</p>\n\n<div\n class=\"Entry\"\n (click)=\"toggleOpenOptions($event)\"\n [class.focused]=\"isFocus\"\n [class.disabled]=\"isDisabled\"\n tabindex=\"0\"\n (focus)=\"focus()\"\n (blur)=\"defocus()\"\n>\n <div class=\"SelectedOptions\" *ngIf=\"selectedOptions.length > 0\">\n <ng-container *ngIf=\"selectedOptions.length > 1\">\n <span class=\"SelectedCount\">\n +{{ selectedOptions.length - 1 }} items\n </span>\n\n <span class=\"SelectedOption\">\n <span class=\"Text\">{{ selectedOptions[selectedOptions.length - 1].name }}</span>\n <lucide-icon class=\"RemoveIcon\" name=\"x\" (click)=\"removeSelected(selectedOptions[selectedOptions.length - 1])\"></lucide-icon>\n </span>\n </ng-container>\n\n <ng-container *ngIf=\"selectedOptions.length === 1\">\n <span class=\"SelectedOption\">\n <p class=\"Text\">{{ selectedOptions[0].name }}</p>\n\n <lucide-icon\n class=\"RemoveIcon\"\n name=\"x\"\n (click)=\"removeSelected(selectedOptions[0])\"\n ></lucide-icon>\n </span>\n </ng-container>\n </div>\n\n <div\n class=\"Placeholder\"\n *ngIf=\"!selectedOptions || selectedOptions.length === 0\"\n >\n {{ placeholder }}\n </div>\n <lucide-icon class=\"IconSort\" name=\"arrow-down-wide-narrow\"></lucide-icon>\n</div>\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex!important;flex-direction:column!important;width:100%;height:max-content;--radius-none: 0;--radius-xs: 2px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 16px;--radius-full: 9999px;--spacing-xxs: 2px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 16px;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);font-weight:400;width:100%;cursor:pointer;padding:0 3px;margin:0 0 4px;overflow:hidden;word-break:break-all}:host .Entry{display:flex!important;width:100%;height:32px;justify-content:flex-start;align-items:center;border:solid 0 var(--color-input-border, #d4d4d4);border-radius:12px!important;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px!important;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .Entry{padding:0 8px;gap:4px}:host .Entry .SelectedOptions{width:100%;height:100%;display:flex;gap:3px;overflow:hidden}:host .Entry .SelectedOptions .SelectedCount{min-width:max-content;height:max-content;margin:auto 0;padding:0 5px;border-radius:50px;display:flex;align-items:center;overflow:hidden;white-space:nowrap;background-color:var(--color-input-addon-bg)}:host .Entry .SelectedOptions .SelectedOption{width:100%;height:100%;display:flex;align-items:center;gap:4px;overflow:hidden}:host .Entry .SelectedOptions .SelectedOption .Text{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .Entry .SelectedOptions .SelectedOption .RemoveIcon{cursor:pointer;width:40px;height:100%;display:flex;justify-content:center;align-items:center;font-size:14px}:host .Entry .SelectedOptions .SelectedOption .RemoveIcon lucide-icon .lucide-svg{width:14px;height:14px}:host .Entry .SelectedOptions .SelectedOption .RemoveIcon:hover{color:var(--color-danger-fg);background-color:var(--color-input-addon-bg)}:host .Entry .Value{color:var(--color-input-fg)}:host .Entry .Placeholder{color:var(--color-input-placeholder);width:100%}:host .Entry .IconSort{display:flex;justify-content:center;align-items:center;margin-left:auto;color:var(--color-input-placeholder)}\n"], dependencies: [{ kind: "component", type: LucideIconComponent, selector: "lucide-icon", inputs: ["name", "size", "spin", "filled"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
6377
6323
  }
6378
6324
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: MultiselectComboboxComponent, decorators: [{
6379
6325
  type: Component,
@@ -6385,7 +6331,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
6385
6331
  useExisting: forwardRef(() => MultiselectComboboxComponent),
6386
6332
  multi: true,
6387
6333
  },
6388
- ], template: "<p\n *ngIf=\"label\"\n class=\"Label\"\n [class.Disabled]=\"isDisabled\"\n (click)=\"toggleOpenOptions($event); $event.stopPropagation()\"\n>\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\n</p>\n\n<p\n *ngIf=\"description\"\n class=\"Description\"\n [class.Disabled]=\"isDisabled\"\n (click)=\"toggleOpenOptions($event); $event.stopPropagation()\"\n>\n {{ description }}\n</p>\n\n<div\n class=\"Entry\"\n (click)=\"toggleOpenOptions($event)\"\n [class.focused]=\"isFocus\"\n [class.disabled]=\"isDisabled\"\n tabindex=\"0\"\n (focus)=\"focus()\"\n (blur)=\"defocus()\"\n>\n <div class=\"SelectedOptions\" *ngIf=\"selectedOptions.length > 0\">\n <ng-container *ngIf=\"selectedOptions.length > 1\">\n <span class=\"SelectedCount\">\n +{{ selectedOptions.length - 1 }} items\n </span>\n\n <span class=\"SelectedOption\">\n <span class=\"Text\">{{ selectedOptions[selectedOptions.length - 1].name }}</span>\n <lucide-icon class=\"RemoveIcon\" name=\"x\" (click)=\"removeSelected(selectedOptions[selectedOptions.length - 1])\"></lucide-icon>\n </span>\n </ng-container>\n\n <ng-container *ngIf=\"selectedOptions.length === 1\">\n <span class=\"SelectedOption\">\n <p class=\"Text\">{{ selectedOptions[0].name }}</p>\n\n <lucide-icon\n class=\"RemoveIcon\"\n name=\"x\"\n (click)=\"removeSelected(selectedOptions[0])\"\n ></lucide-icon>\n </span>\n </ng-container>\n </div>\n\n <div\n class=\"Placeholder\"\n *ngIf=\"!selectedOptions || selectedOptions.length === 0\"\n >\n {{ placeholder }}\n </div>\n <lucide-icon class=\"IconSort\" name=\"arrow-down-wide-narrow\"></lucide-icon>\n</div>\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex;flex-direction:column;width:100%;height:max-content;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);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(--color-input-border, #d4d4d4);border-radius:12px;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .Entry{padding:0 8px;gap:4px}:host .Entry .SelectedOptions{width:100%;height:100%;display:flex;gap:3px;overflow:hidden}:host .Entry .SelectedOptions .SelectedCount{min-width:max-content;height:max-content;margin:auto 0;padding:0 5px;border-radius:50px;display:flex;align-items:center;overflow:hidden;white-space:nowrap;background-color:var(--color-input-addon-bg)}:host .Entry .SelectedOptions .SelectedOption{width:100%;height:100%;display:flex;align-items:center;gap:4px;overflow:hidden}:host .Entry .SelectedOptions .SelectedOption .Text{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .Entry .SelectedOptions .SelectedOption .RemoveIcon{cursor:pointer;width:40px;height:100%;display:flex;justify-content:center;align-items:center;font-size:14px}:host .Entry .SelectedOptions .SelectedOption .RemoveIcon lucide-icon .lucide-svg{width:14px;height:14px}:host .Entry .SelectedOptions .SelectedOption .RemoveIcon:hover{color:var(--color-danger-fg);background-color:var(--color-input-addon-bg)}:host .Entry .Value{color:var(--color-input-fg)}:host .Entry .Placeholder{color:var(--color-input-placeholder);width:100%}:host .Entry .IconSort{display:flex;justify-content:center;align-items:center;margin-left:auto;color:var(--color-input-placeholder)}\n"] }]
6334
+ ], template: "<p\n *ngIf=\"label\"\n class=\"Label\"\n [class.Disabled]=\"isDisabled\"\n (click)=\"toggleOpenOptions($event); $event.stopPropagation()\"\n>\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\n</p>\n\n<p\n *ngIf=\"description\"\n class=\"Description\"\n [class.Disabled]=\"isDisabled\"\n (click)=\"toggleOpenOptions($event); $event.stopPropagation()\"\n>\n {{ description }}\n</p>\n\n<div\n class=\"Entry\"\n (click)=\"toggleOpenOptions($event)\"\n [class.focused]=\"isFocus\"\n [class.disabled]=\"isDisabled\"\n tabindex=\"0\"\n (focus)=\"focus()\"\n (blur)=\"defocus()\"\n>\n <div class=\"SelectedOptions\" *ngIf=\"selectedOptions.length > 0\">\n <ng-container *ngIf=\"selectedOptions.length > 1\">\n <span class=\"SelectedCount\">\n +{{ selectedOptions.length - 1 }} items\n </span>\n\n <span class=\"SelectedOption\">\n <span class=\"Text\">{{ selectedOptions[selectedOptions.length - 1].name }}</span>\n <lucide-icon class=\"RemoveIcon\" name=\"x\" (click)=\"removeSelected(selectedOptions[selectedOptions.length - 1])\"></lucide-icon>\n </span>\n </ng-container>\n\n <ng-container *ngIf=\"selectedOptions.length === 1\">\n <span class=\"SelectedOption\">\n <p class=\"Text\">{{ selectedOptions[0].name }}</p>\n\n <lucide-icon\n class=\"RemoveIcon\"\n name=\"x\"\n (click)=\"removeSelected(selectedOptions[0])\"\n ></lucide-icon>\n </span>\n </ng-container>\n </div>\n\n <div\n class=\"Placeholder\"\n *ngIf=\"!selectedOptions || selectedOptions.length === 0\"\n >\n {{ placeholder }}\n </div>\n <lucide-icon class=\"IconSort\" name=\"arrow-down-wide-narrow\"></lucide-icon>\n</div>\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex!important;flex-direction:column!important;width:100%;height:max-content;--radius-none: 0;--radius-xs: 2px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 16px;--radius-full: 9999px;--spacing-xxs: 2px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 16px;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);font-weight:400;width:100%;cursor:pointer;padding:0 3px;margin:0 0 4px;overflow:hidden;word-break:break-all}:host .Entry{display:flex!important;width:100%;height:32px;justify-content:flex-start;align-items:center;border:solid 0 var(--color-input-border, #d4d4d4);border-radius:12px!important;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px!important;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .Entry{padding:0 8px;gap:4px}:host .Entry .SelectedOptions{width:100%;height:100%;display:flex;gap:3px;overflow:hidden}:host .Entry .SelectedOptions .SelectedCount{min-width:max-content;height:max-content;margin:auto 0;padding:0 5px;border-radius:50px;display:flex;align-items:center;overflow:hidden;white-space:nowrap;background-color:var(--color-input-addon-bg)}:host .Entry .SelectedOptions .SelectedOption{width:100%;height:100%;display:flex;align-items:center;gap:4px;overflow:hidden}:host .Entry .SelectedOptions .SelectedOption .Text{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .Entry .SelectedOptions .SelectedOption .RemoveIcon{cursor:pointer;width:40px;height:100%;display:flex;justify-content:center;align-items:center;font-size:14px}:host .Entry .SelectedOptions .SelectedOption .RemoveIcon lucide-icon .lucide-svg{width:14px;height:14px}:host .Entry .SelectedOptions .SelectedOption .RemoveIcon:hover{color:var(--color-danger-fg);background-color:var(--color-input-addon-bg)}:host .Entry .Value{color:var(--color-input-fg)}:host .Entry .Placeholder{color:var(--color-input-placeholder);width:100%}:host .Entry .IconSort{display:flex;justify-content:center;align-items:center;margin-left:auto;color:var(--color-input-placeholder)}\n"] }]
6389
6335
  }], propDecorators: { label: [{
6390
6336
  type: Input
6391
6337
  }], description: [{
@@ -6538,7 +6484,7 @@ class BooleanEntryComponent {
6538
6484
  useExisting: forwardRef(() => BooleanEntryComponent),
6539
6485
  multi: true,
6540
6486
  },
6541
- ], ngImport: i0, template: "<p\r\n *ngIf=\"label\"\r\n class=\"Label\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\r\n</p>\r\n\r\n<p\r\n *ngIf=\"description\"\r\n class=\"Description\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ description }}\r\n</p>\r\n\r\n<div class=\"Entry NotHover\" [class.Disabled]=\"isDisabled\">\r\n <lucide-icon\r\n class=\"Icon\"\r\n [name]=\"iconName\"\r\n [size]=\"16\"\r\n [class.Icon--true]=\"value === true\"\r\n [class.Icon--false]=\"value === false\"\r\n [class.Icon--null]=\"value === null\"\r\n ></lucide-icon>\r\n <span class=\"Text\" *ngIf=\"displayValueText\">{{ displayValueText }}</span>\r\n</div>\r\n\r\n<input type=\"checkbox\" [checked]=\"value\" hidden />\r\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex;flex-direction:column;width:100%;height:max-content;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);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(--color-input-border, #d4d4d4);border-radius:12px;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .Description{margin-bottom:0}:host .Entry{background-color:transparent;gap:4px;height:max-content;border-radius:0;padding:0 4px}:host .Entry .Icon{display:flex;justify-content:center;align-items:center;flex-shrink:0;box-sizing:border-box;width:24px;height:24px;padding:0;border-radius:var(--radius-sm);color:var(--color-fg-on-brand, var(--color-fg-inverse, #fafafa))}:host .Entry .Icon .lucide-svg{width:16px;height:16px}:host .Entry .Icon.Icon--null{background-color:var(--color-fg-muted)}:host .Entry .Icon.Icon--true{background-color:var(--color-brand, #22c55e)}:host .Entry .Icon.Icon--false{background-color:var(--color-fg-muted)}:host .Entry .Opcional{color:var(--color-fg-muted)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LucideIconComponent, selector: "lucide-icon", inputs: ["name", "size", "spin", "filled"] }] });
6487
+ ], ngImport: i0, template: "<p\r\n *ngIf=\"label\"\r\n class=\"Label\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\r\n</p>\r\n\r\n<p\r\n *ngIf=\"description\"\r\n class=\"Description\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ description }}\r\n</p>\r\n\r\n<div class=\"Entry NotHover\" [class.Disabled]=\"isDisabled\">\r\n <lucide-icon\r\n class=\"Icon\"\r\n [name]=\"iconName\"\r\n [size]=\"16\"\r\n [class.Icon--true]=\"value === true\"\r\n [class.Icon--false]=\"value === false\"\r\n [class.Icon--null]=\"value === null\"\r\n ></lucide-icon>\r\n <span class=\"Text\" *ngIf=\"displayValueText\">{{ displayValueText }}</span>\r\n</div>\r\n\r\n<input type=\"checkbox\" [checked]=\"value\" hidden />\r\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex!important;flex-direction:column!important;width:100%;height:max-content;--radius-none: 0;--radius-xs: 2px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 16px;--radius-full: 9999px;--spacing-xxs: 2px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 16px;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);font-weight:400;width:100%;cursor:pointer;padding:0 3px;margin:0 0 4px;overflow:hidden;word-break:break-all}:host .Entry{display:flex!important;width:100%;height:32px;justify-content:flex-start;align-items:center;border:solid 0 var(--color-input-border, #d4d4d4);border-radius:12px!important;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px!important;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .Description{margin-bottom:0}:host .Entry{background-color:transparent;gap:4px;height:max-content;border-radius:0;padding:0 4px}:host .Entry .Icon{display:flex;justify-content:center;align-items:center;flex-shrink:0;box-sizing:border-box;width:24px;height:24px;padding:0;border-radius:4px;color:var(--color-fg-on-brand, var(--color-fg-inverse, #fafafa))}:host .Entry .Icon .lucide-svg{width:16px;height:16px}:host .Entry .Icon.Icon--null{background-color:var(--color-fg-muted)}:host .Entry .Icon.Icon--true{background-color:var(--color-brand, #22c55e)}:host .Entry .Icon.Icon--false{background-color:var(--color-fg-muted)}:host .Entry .Opcional{color:var(--color-fg-muted)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LucideIconComponent, selector: "lucide-icon", inputs: ["name", "size", "spin", "filled"] }] });
6542
6488
  }
6543
6489
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: BooleanEntryComponent, decorators: [{
6544
6490
  type: Component,
@@ -6548,7 +6494,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
6548
6494
  useExisting: forwardRef(() => BooleanEntryComponent),
6549
6495
  multi: true,
6550
6496
  },
6551
- ], template: "<p\r\n *ngIf=\"label\"\r\n class=\"Label\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\r\n</p>\r\n\r\n<p\r\n *ngIf=\"description\"\r\n class=\"Description\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ description }}\r\n</p>\r\n\r\n<div class=\"Entry NotHover\" [class.Disabled]=\"isDisabled\">\r\n <lucide-icon\r\n class=\"Icon\"\r\n [name]=\"iconName\"\r\n [size]=\"16\"\r\n [class.Icon--true]=\"value === true\"\r\n [class.Icon--false]=\"value === false\"\r\n [class.Icon--null]=\"value === null\"\r\n ></lucide-icon>\r\n <span class=\"Text\" *ngIf=\"displayValueText\">{{ displayValueText }}</span>\r\n</div>\r\n\r\n<input type=\"checkbox\" [checked]=\"value\" hidden />\r\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex;flex-direction:column;width:100%;height:max-content;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);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(--color-input-border, #d4d4d4);border-radius:12px;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .Description{margin-bottom:0}:host .Entry{background-color:transparent;gap:4px;height:max-content;border-radius:0;padding:0 4px}:host .Entry .Icon{display:flex;justify-content:center;align-items:center;flex-shrink:0;box-sizing:border-box;width:24px;height:24px;padding:0;border-radius:var(--radius-sm);color:var(--color-fg-on-brand, var(--color-fg-inverse, #fafafa))}:host .Entry .Icon .lucide-svg{width:16px;height:16px}:host .Entry .Icon.Icon--null{background-color:var(--color-fg-muted)}:host .Entry .Icon.Icon--true{background-color:var(--color-brand, #22c55e)}:host .Entry .Icon.Icon--false{background-color:var(--color-fg-muted)}:host .Entry .Opcional{color:var(--color-fg-muted)}\n"] }]
6497
+ ], template: "<p\r\n *ngIf=\"label\"\r\n class=\"Label\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\r\n</p>\r\n\r\n<p\r\n *ngIf=\"description\"\r\n class=\"Description\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ description }}\r\n</p>\r\n\r\n<div class=\"Entry NotHover\" [class.Disabled]=\"isDisabled\">\r\n <lucide-icon\r\n class=\"Icon\"\r\n [name]=\"iconName\"\r\n [size]=\"16\"\r\n [class.Icon--true]=\"value === true\"\r\n [class.Icon--false]=\"value === false\"\r\n [class.Icon--null]=\"value === null\"\r\n ></lucide-icon>\r\n <span class=\"Text\" *ngIf=\"displayValueText\">{{ displayValueText }}</span>\r\n</div>\r\n\r\n<input type=\"checkbox\" [checked]=\"value\" hidden />\r\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex!important;flex-direction:column!important;width:100%;height:max-content;--radius-none: 0;--radius-xs: 2px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 16px;--radius-full: 9999px;--spacing-xxs: 2px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 16px;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);font-weight:400;width:100%;cursor:pointer;padding:0 3px;margin:0 0 4px;overflow:hidden;word-break:break-all}:host .Entry{display:flex!important;width:100%;height:32px;justify-content:flex-start;align-items:center;border:solid 0 var(--color-input-border, #d4d4d4);border-radius:12px!important;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px!important;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .Description{margin-bottom:0}:host .Entry{background-color:transparent;gap:4px;height:max-content;border-radius:0;padding:0 4px}:host .Entry .Icon{display:flex;justify-content:center;align-items:center;flex-shrink:0;box-sizing:border-box;width:24px;height:24px;padding:0;border-radius:4px;color:var(--color-fg-on-brand, var(--color-fg-inverse, #fafafa))}:host .Entry .Icon .lucide-svg{width:16px;height:16px}:host .Entry .Icon.Icon--null{background-color:var(--color-fg-muted)}:host .Entry .Icon.Icon--true{background-color:var(--color-brand, #22c55e)}:host .Entry .Icon.Icon--false{background-color:var(--color-fg-muted)}:host .Entry .Opcional{color:var(--color-fg-muted)}\n"] }]
6552
6498
  }], propDecorators: { label: [{
6553
6499
  type: Input
6554
6500
  }], description: [{
@@ -6658,7 +6604,7 @@ class MultichoiceEntryComponent {
6658
6604
  useExisting: forwardRef(() => MultichoiceEntryComponent),
6659
6605
  multi: true,
6660
6606
  },
6661
- ], ngImport: i0, template: "<p\r\n *ngIf=\"label\"\r\n class=\"Label\"\r\n [class.Disabled]=\"isDisabled\"\r\n>\r\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\r\n</p>\r\n\r\n<p\r\n *ngIf=\"description\"\r\n class=\"Description\"\r\n [class.Disabled]=\"isDisabled\"\r\n>\r\n {{ description }}\r\n</p>\r\n\r\n<div class=\"Options\">\r\n <div\r\n class=\"BooleanEntry\"\r\n *ngFor=\"let opt of options\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"toggle(opt.value)\"\r\n >\r\n <i class=\"Icon fa-solid\" [ngClass]=\"iconClass(opt.value)\"></i>\r\n <span class=\"Text\" *ngIf=\"opt.text\">{{ opt.text }}</span>\r\n <input type=\"checkbox\" [checked]=\"isChecked(opt.value)\" hidden />\r\n </div>\r\n</div>\r\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex;flex-direction:column;width:100%;height:max-content;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);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(--color-input-border, #d4d4d4);border-radius:12px;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .Description{margin-bottom:2px}:host .Options{display:flex;gap:4px;flex-direction:column;padding:0 4px}:host .Options .BooleanEntry{display:flex;width:100%;gap:4px;height:max-content;justify-content:flex-start;align-items:center;border:solid 0 var(--color-input-border);cursor:pointer;overflow:hidden}:host .Options .BooleanEntry .Icon{display:flex;justify-content:center;align-items:center;box-sizing:border-box;width:24px;height:24px;padding:0;font-size:16px;line-height:1;border-radius:var(--radius-sm);color:var(--color-fg-on-brand, var(--color-fg-inverse, #fafafa))}:host .Options .BooleanEntry .Icon .lucide-svg{width:16px;height:16px}:host .Options .BooleanEntry .fa-minus{background-color:var(--color-fg-muted)}:host .Options .BooleanEntry .fa-check{background-color:var(--color-info-fg)}:host .Options .BooleanEntry .fa-xmark{background-color:var(--color-fg-muted)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }] });
6607
+ ], ngImport: i0, template: "<p\r\n *ngIf=\"label\"\r\n class=\"Label\"\r\n [class.Disabled]=\"isDisabled\"\r\n>\r\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\r\n</p>\r\n\r\n<p\r\n *ngIf=\"description\"\r\n class=\"Description\"\r\n [class.Disabled]=\"isDisabled\"\r\n>\r\n {{ description }}\r\n</p>\r\n\r\n<div class=\"Options\">\r\n <div\r\n class=\"BooleanEntry\"\r\n *ngFor=\"let opt of options\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"toggle(opt.value)\"\r\n >\r\n <i class=\"Icon fa-solid\" [ngClass]=\"iconClass(opt.value)\"></i>\r\n <span class=\"Text\" *ngIf=\"opt.text\">{{ opt.text }}</span>\r\n <input type=\"checkbox\" [checked]=\"isChecked(opt.value)\" hidden />\r\n </div>\r\n</div>\r\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex!important;flex-direction:column!important;width:100%;height:max-content;--radius-none: 0;--radius-xs: 2px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 16px;--radius-full: 9999px;--spacing-xxs: 2px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 16px;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);font-weight:400;width:100%;cursor:pointer;padding:0 3px;margin:0 0 4px;overflow:hidden;word-break:break-all}:host .Entry{display:flex!important;width:100%;height:32px;justify-content:flex-start;align-items:center;border:solid 0 var(--color-input-border, #d4d4d4);border-radius:12px!important;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px!important;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .Description{margin-bottom:2px}:host .Options{display:flex;gap:4px;flex-direction:column;padding:0 4px}:host .Options .BooleanEntry{display:flex;width:100%;gap:4px;height:max-content;justify-content:flex-start;align-items:center;border:solid 0 var(--color-input-border);cursor:pointer;overflow:hidden}:host .Options .BooleanEntry .Icon{display:flex;justify-content:center;align-items:center;box-sizing:border-box;width:24px;height:24px;padding:0;font-size:16px;line-height:1;border-radius:4px;color:var(--color-fg-on-brand, var(--color-fg-inverse, #fafafa))}:host .Options .BooleanEntry .Icon .lucide-svg{width:16px;height:16px}:host .Options .BooleanEntry .fa-minus{background-color:var(--color-fg-muted)}:host .Options .BooleanEntry .fa-check{background-color:var(--color-info-fg)}:host .Options .BooleanEntry .fa-xmark{background-color:var(--color-fg-muted)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }] });
6662
6608
  }
6663
6609
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: MultichoiceEntryComponent, decorators: [{
6664
6610
  type: Component,
@@ -6668,7 +6614,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
6668
6614
  useExisting: forwardRef(() => MultichoiceEntryComponent),
6669
6615
  multi: true,
6670
6616
  },
6671
- ], template: "<p\r\n *ngIf=\"label\"\r\n class=\"Label\"\r\n [class.Disabled]=\"isDisabled\"\r\n>\r\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\r\n</p>\r\n\r\n<p\r\n *ngIf=\"description\"\r\n class=\"Description\"\r\n [class.Disabled]=\"isDisabled\"\r\n>\r\n {{ description }}\r\n</p>\r\n\r\n<div class=\"Options\">\r\n <div\r\n class=\"BooleanEntry\"\r\n *ngFor=\"let opt of options\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"toggle(opt.value)\"\r\n >\r\n <i class=\"Icon fa-solid\" [ngClass]=\"iconClass(opt.value)\"></i>\r\n <span class=\"Text\" *ngIf=\"opt.text\">{{ opt.text }}</span>\r\n <input type=\"checkbox\" [checked]=\"isChecked(opt.value)\" hidden />\r\n </div>\r\n</div>\r\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex;flex-direction:column;width:100%;height:max-content;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);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(--color-input-border, #d4d4d4);border-radius:12px;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .Description{margin-bottom:2px}:host .Options{display:flex;gap:4px;flex-direction:column;padding:0 4px}:host .Options .BooleanEntry{display:flex;width:100%;gap:4px;height:max-content;justify-content:flex-start;align-items:center;border:solid 0 var(--color-input-border);cursor:pointer;overflow:hidden}:host .Options .BooleanEntry .Icon{display:flex;justify-content:center;align-items:center;box-sizing:border-box;width:24px;height:24px;padding:0;font-size:16px;line-height:1;border-radius:var(--radius-sm);color:var(--color-fg-on-brand, var(--color-fg-inverse, #fafafa))}:host .Options .BooleanEntry .Icon .lucide-svg{width:16px;height:16px}:host .Options .BooleanEntry .fa-minus{background-color:var(--color-fg-muted)}:host .Options .BooleanEntry .fa-check{background-color:var(--color-info-fg)}:host .Options .BooleanEntry .fa-xmark{background-color:var(--color-fg-muted)}\n"] }]
6617
+ ], template: "<p\r\n *ngIf=\"label\"\r\n class=\"Label\"\r\n [class.Disabled]=\"isDisabled\"\r\n>\r\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\r\n</p>\r\n\r\n<p\r\n *ngIf=\"description\"\r\n class=\"Description\"\r\n [class.Disabled]=\"isDisabled\"\r\n>\r\n {{ description }}\r\n</p>\r\n\r\n<div class=\"Options\">\r\n <div\r\n class=\"BooleanEntry\"\r\n *ngFor=\"let opt of options\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"toggle(opt.value)\"\r\n >\r\n <i class=\"Icon fa-solid\" [ngClass]=\"iconClass(opt.value)\"></i>\r\n <span class=\"Text\" *ngIf=\"opt.text\">{{ opt.text }}</span>\r\n <input type=\"checkbox\" [checked]=\"isChecked(opt.value)\" hidden />\r\n </div>\r\n</div>\r\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex!important;flex-direction:column!important;width:100%;height:max-content;--radius-none: 0;--radius-xs: 2px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 16px;--radius-full: 9999px;--spacing-xxs: 2px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 16px;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);font-weight:400;width:100%;cursor:pointer;padding:0 3px;margin:0 0 4px;overflow:hidden;word-break:break-all}:host .Entry{display:flex!important;width:100%;height:32px;justify-content:flex-start;align-items:center;border:solid 0 var(--color-input-border, #d4d4d4);border-radius:12px!important;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px!important;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .Description{margin-bottom:2px}:host .Options{display:flex;gap:4px;flex-direction:column;padding:0 4px}:host .Options .BooleanEntry{display:flex;width:100%;gap:4px;height:max-content;justify-content:flex-start;align-items:center;border:solid 0 var(--color-input-border);cursor:pointer;overflow:hidden}:host .Options .BooleanEntry .Icon{display:flex;justify-content:center;align-items:center;box-sizing:border-box;width:24px;height:24px;padding:0;font-size:16px;line-height:1;border-radius:4px;color:var(--color-fg-on-brand, var(--color-fg-inverse, #fafafa))}:host .Options .BooleanEntry .Icon .lucide-svg{width:16px;height:16px}:host .Options .BooleanEntry .fa-minus{background-color:var(--color-fg-muted)}:host .Options .BooleanEntry .fa-check{background-color:var(--color-info-fg)}:host .Options .BooleanEntry .fa-xmark{background-color:var(--color-fg-muted)}\n"] }]
6672
6618
  }], propDecorators: { label: [{
6673
6619
  type: Input
6674
6620
  }], description: [{
@@ -6760,7 +6706,7 @@ class OnlychoiceEntryComponent {
6760
6706
  useExisting: forwardRef(() => OnlychoiceEntryComponent),
6761
6707
  multi: true,
6762
6708
  },
6763
- ], ngImport: i0, template: "<p\r\n *ngIf=\"label\"\r\n class=\"Label\"\r\n [class.Disabled]=\"isDisabled\"\r\n>\r\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\r\n</p>\r\n\r\n<p\r\n *ngIf=\"description\"\r\n class=\"Description\"\r\n [class.Disabled]=\"isDisabled\"\r\n>\r\n {{ description }}\r\n</p>\r\n\r\n<div class=\"Options\" [class.Disabled]=\"isDisabled\">\r\n <div\r\n class=\"BooleanEntry\"\r\n *ngFor=\"let opt of options\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"toggle(opt.value)\"\r\n >\r\n <i class=\"Icon fa-solid\" [ngClass]=\"iconClass(opt.value)\"></i>\r\n <span class=\"Text\" *ngIf=\"opt.text\">{{ opt.text }}</span>\r\n <input\r\n type=\"radio\"\r\n [checked]=\"isChecked(opt.value)\"\r\n [value]=\"opt.value\"\r\n hidden\r\n />\r\n </div>\r\n</div>\r\n\r\n<!-- SI es opcional te permite deselccionar todos pero si no es opcional no te -->\r\n<!-- permite deselccionar todos una vez que ya hay un valor -->\r\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex;flex-direction:column;width:100%;height:max-content;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);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(--color-input-border, #d4d4d4);border-radius:12px;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .Description{margin-bottom:2px}:host .Options{display:flex;gap:4px;flex-direction:column;padding:0 4px}:host .Options .BooleanEntry{display:flex;width:100%;gap:4px;height:max-content;justify-content:flex-start;align-items:center;border:solid 0 var(--color-input-border);cursor:pointer;overflow:hidden}:host .Options .BooleanEntry .Icon{display:flex;justify-content:center;align-items:center;box-sizing:border-box;width:24px;height:24px;padding:0;font-size:16px;line-height:1;border-radius:100px;color:var(--color-fg-on-brand, var(--color-fg-inverse, #fafafa))}:host .Options .BooleanEntry .Icon .lucide-svg{width:16px;height:16px}:host .Options .BooleanEntry .fa-minus{background-color:var(--color-fg-muted)}:host .Options .BooleanEntry .fa-check{background-color:var(--color-info-fg)}:host .Options .BooleanEntry .fa-xmark{background-color:var(--color-danger-fg)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }] });
6709
+ ], ngImport: i0, template: "<p\r\n *ngIf=\"label\"\r\n class=\"Label\"\r\n [class.Disabled]=\"isDisabled\"\r\n>\r\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\r\n</p>\r\n\r\n<p\r\n *ngIf=\"description\"\r\n class=\"Description\"\r\n [class.Disabled]=\"isDisabled\"\r\n>\r\n {{ description }}\r\n</p>\r\n\r\n<div class=\"Options\" [class.Disabled]=\"isDisabled\">\r\n <div\r\n class=\"BooleanEntry\"\r\n *ngFor=\"let opt of options\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"toggle(opt.value)\"\r\n >\r\n <i class=\"Icon fa-solid\" [ngClass]=\"iconClass(opt.value)\"></i>\r\n <span class=\"Text\" *ngIf=\"opt.text\">{{ opt.text }}</span>\r\n <input\r\n type=\"radio\"\r\n [checked]=\"isChecked(opt.value)\"\r\n [value]=\"opt.value\"\r\n hidden\r\n />\r\n </div>\r\n</div>\r\n\r\n<!-- SI es opcional te permite deselccionar todos pero si no es opcional no te -->\r\n<!-- permite deselccionar todos una vez que ya hay un valor -->\r\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex!important;flex-direction:column!important;width:100%;height:max-content;--radius-none: 0;--radius-xs: 2px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 16px;--radius-full: 9999px;--spacing-xxs: 2px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 16px;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);font-weight:400;width:100%;cursor:pointer;padding:0 3px;margin:0 0 4px;overflow:hidden;word-break:break-all}:host .Entry{display:flex!important;width:100%;height:32px;justify-content:flex-start;align-items:center;border:solid 0 var(--color-input-border, #d4d4d4);border-radius:12px!important;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px!important;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .Description{margin-bottom:2px}:host .Options{display:flex;gap:4px;flex-direction:column;padding:0 4px}:host .Options .BooleanEntry{display:flex;width:100%;gap:4px;height:max-content;justify-content:flex-start;align-items:center;border:solid 0 var(--color-input-border);cursor:pointer;overflow:hidden}:host .Options .BooleanEntry .Icon{display:flex;justify-content:center;align-items:center;box-sizing:border-box;width:24px;height:24px;padding:0;font-size:16px;line-height:1;border-radius:100px;color:var(--color-fg-on-brand, var(--color-fg-inverse, #fafafa))}:host .Options .BooleanEntry .Icon .lucide-svg{width:16px;height:16px}:host .Options .BooleanEntry .fa-minus{background-color:var(--color-fg-muted)}:host .Options .BooleanEntry .fa-check{background-color:var(--color-info-fg)}:host .Options .BooleanEntry .fa-xmark{background-color:var(--color-danger-fg)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }] });
6764
6710
  }
6765
6711
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: OnlychoiceEntryComponent, decorators: [{
6766
6712
  type: Component,
@@ -6770,7 +6716,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
6770
6716
  useExisting: forwardRef(() => OnlychoiceEntryComponent),
6771
6717
  multi: true,
6772
6718
  },
6773
- ], template: "<p\r\n *ngIf=\"label\"\r\n class=\"Label\"\r\n [class.Disabled]=\"isDisabled\"\r\n>\r\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\r\n</p>\r\n\r\n<p\r\n *ngIf=\"description\"\r\n class=\"Description\"\r\n [class.Disabled]=\"isDisabled\"\r\n>\r\n {{ description }}\r\n</p>\r\n\r\n<div class=\"Options\" [class.Disabled]=\"isDisabled\">\r\n <div\r\n class=\"BooleanEntry\"\r\n *ngFor=\"let opt of options\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"toggle(opt.value)\"\r\n >\r\n <i class=\"Icon fa-solid\" [ngClass]=\"iconClass(opt.value)\"></i>\r\n <span class=\"Text\" *ngIf=\"opt.text\">{{ opt.text }}</span>\r\n <input\r\n type=\"radio\"\r\n [checked]=\"isChecked(opt.value)\"\r\n [value]=\"opt.value\"\r\n hidden\r\n />\r\n </div>\r\n</div>\r\n\r\n<!-- SI es opcional te permite deselccionar todos pero si no es opcional no te -->\r\n<!-- permite deselccionar todos una vez que ya hay un valor -->\r\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex;flex-direction:column;width:100%;height:max-content;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);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(--color-input-border, #d4d4d4);border-radius:12px;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .Description{margin-bottom:2px}:host .Options{display:flex;gap:4px;flex-direction:column;padding:0 4px}:host .Options .BooleanEntry{display:flex;width:100%;gap:4px;height:max-content;justify-content:flex-start;align-items:center;border:solid 0 var(--color-input-border);cursor:pointer;overflow:hidden}:host .Options .BooleanEntry .Icon{display:flex;justify-content:center;align-items:center;box-sizing:border-box;width:24px;height:24px;padding:0;font-size:16px;line-height:1;border-radius:100px;color:var(--color-fg-on-brand, var(--color-fg-inverse, #fafafa))}:host .Options .BooleanEntry .Icon .lucide-svg{width:16px;height:16px}:host .Options .BooleanEntry .fa-minus{background-color:var(--color-fg-muted)}:host .Options .BooleanEntry .fa-check{background-color:var(--color-info-fg)}:host .Options .BooleanEntry .fa-xmark{background-color:var(--color-danger-fg)}\n"] }]
6719
+ ], template: "<p\r\n *ngIf=\"label\"\r\n class=\"Label\"\r\n [class.Disabled]=\"isDisabled\"\r\n>\r\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\r\n</p>\r\n\r\n<p\r\n *ngIf=\"description\"\r\n class=\"Description\"\r\n [class.Disabled]=\"isDisabled\"\r\n>\r\n {{ description }}\r\n</p>\r\n\r\n<div class=\"Options\" [class.Disabled]=\"isDisabled\">\r\n <div\r\n class=\"BooleanEntry\"\r\n *ngFor=\"let opt of options\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"toggle(opt.value)\"\r\n >\r\n <i class=\"Icon fa-solid\" [ngClass]=\"iconClass(opt.value)\"></i>\r\n <span class=\"Text\" *ngIf=\"opt.text\">{{ opt.text }}</span>\r\n <input\r\n type=\"radio\"\r\n [checked]=\"isChecked(opt.value)\"\r\n [value]=\"opt.value\"\r\n hidden\r\n />\r\n </div>\r\n</div>\r\n\r\n<!-- SI es opcional te permite deselccionar todos pero si no es opcional no te -->\r\n<!-- permite deselccionar todos una vez que ya hay un valor -->\r\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex!important;flex-direction:column!important;width:100%;height:max-content;--radius-none: 0;--radius-xs: 2px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 16px;--radius-full: 9999px;--spacing-xxs: 2px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 16px;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);font-weight:400;width:100%;cursor:pointer;padding:0 3px;margin:0 0 4px;overflow:hidden;word-break:break-all}:host .Entry{display:flex!important;width:100%;height:32px;justify-content:flex-start;align-items:center;border:solid 0 var(--color-input-border, #d4d4d4);border-radius:12px!important;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px!important;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .Description{margin-bottom:2px}:host .Options{display:flex;gap:4px;flex-direction:column;padding:0 4px}:host .Options .BooleanEntry{display:flex;width:100%;gap:4px;height:max-content;justify-content:flex-start;align-items:center;border:solid 0 var(--color-input-border);cursor:pointer;overflow:hidden}:host .Options .BooleanEntry .Icon{display:flex;justify-content:center;align-items:center;box-sizing:border-box;width:24px;height:24px;padding:0;font-size:16px;line-height:1;border-radius:100px;color:var(--color-fg-on-brand, var(--color-fg-inverse, #fafafa))}:host .Options .BooleanEntry .Icon .lucide-svg{width:16px;height:16px}:host .Options .BooleanEntry .fa-minus{background-color:var(--color-fg-muted)}:host .Options .BooleanEntry .fa-check{background-color:var(--color-info-fg)}:host .Options .BooleanEntry .fa-xmark{background-color:var(--color-danger-fg)}\n"] }]
6774
6720
  }], propDecorators: { label: [{
6775
6721
  type: Input
6776
6722
  }], description: [{
@@ -7062,7 +7008,7 @@ class SwitchEntryComponent {
7062
7008
  useExisting: SwitchEntryComponent,
7063
7009
  multi: true,
7064
7010
  },
7065
- ], usesOnChanges: true, ngImport: i0, template: "<p *ngIf=\"label\" class=\"Label\" [class.Disabled]=\"isDisabled\">\r\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\r\n</p>\r\n\r\n<p *ngIf=\"description\" class=\"Description\" [class.Disabled]=\"isDisabled\">\r\n {{ description }}\r\n</p>\r\n\r\n<div class=\"Entry NotHover\" [class.Disabled]=\"isDisabled\">\r\n <div\r\n class=\"Switch\"\r\n role=\"switch\"\r\n [class.Switch--on]=\"isOn\"\r\n [class.Switch--dragging]=\"isDragging\"\r\n [attr.aria-checked]=\"ariaChecked\"\r\n [attr.aria-disabled]=\"isDisabled ? 'true' : 'false'\"\r\n (click)=\"onTrackClick($event)\"\r\n >\r\n <div\r\n class=\"SwitchTrack\"\r\n tabindex=\"0\"\r\n (pointerdown)=\"onPointerDown($event)\"\r\n (pointermove)=\"onPointerMove($event)\"\r\n (pointerup)=\"onPointerUp($event)\"\r\n (pointercancel)=\"onPointerCancel($event)\"\r\n >\r\n <div class=\"SwitchTrackFill\" [style.width]=\"trackFillWidth\"></div>\r\n <div class=\"SwitchThumb\" [style.transform]=\"'translateX(' + thumbLeftPx + 'px)'\"></div>\r\n </div>\r\n <span class=\"SwitchText\" *ngIf=\"displayText\">{{ displayText }}</span>\r\n </div>\r\n</div>\r\n\r\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex;flex-direction:column;width:100%;height:max-content;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);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(--color-input-border, #d4d4d4);border-radius:12px;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .Entry{height:auto;background:transparent;padding:0}:host .Switch{display:inline-flex;align-items:center;gap:10px;-webkit-user-select:none;user-select:none;padding:2px 4px;border-radius:9999px;transition:background-color .15s ease}:host .SwitchTrack{width:50px;height:24px;border-radius:9999px;background:var(--color-fg-muted, #a3a3a3);position:relative;padding:0;cursor:pointer;touch-action:pan-y;transition:background-color .15s ease,border-color .15s ease;display:flex;align-items:center;overflow:hidden}:host .SwitchTrackFill{position:absolute;left:0;top:0;bottom:0;width:0%;background:var(--color-action-primary-bg, #22c55e);transition:width .12s ease,background-color .15s ease}:host .Switch.Switch--dragging .SwitchTrackFill{transition:none}:host :host(.IsDisable) .SwitchTrack{cursor:not-allowed;background:var(--color-input-bg-disabled, #fafafa)}:host .SwitchThumb{width:20px;height:20px;margin:2px;border-radius:9999px;background:var(--color-surface, #ffffff);will-change:transform;transition:transform .12s ease;position:relative;z-index:1}:host .Switch.Switch--dragging .SwitchThumb{transition:none}:host .Switch.Switch--on .SwitchTrack{background:var(--color-action-primary-bg, #22c55e)}:host .SwitchTrack:focus-visible{outline:none}:host .SwitchText{font-size:14px;color:var(--color-fg, #171717)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
7011
+ ], usesOnChanges: true, ngImport: i0, template: "<p *ngIf=\"label\" class=\"Label\" [class.Disabled]=\"isDisabled\">\r\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\r\n</p>\r\n\r\n<p *ngIf=\"description\" class=\"Description\" [class.Disabled]=\"isDisabled\">\r\n {{ description }}\r\n</p>\r\n\r\n<div class=\"Entry NotHover\" [class.Disabled]=\"isDisabled\">\r\n <div\r\n class=\"Switch\"\r\n role=\"switch\"\r\n [class.Switch--on]=\"isOn\"\r\n [class.Switch--dragging]=\"isDragging\"\r\n [attr.aria-checked]=\"ariaChecked\"\r\n [attr.aria-disabled]=\"isDisabled ? 'true' : 'false'\"\r\n (click)=\"onTrackClick($event)\"\r\n >\r\n <div\r\n class=\"SwitchTrack\"\r\n tabindex=\"0\"\r\n (pointerdown)=\"onPointerDown($event)\"\r\n (pointermove)=\"onPointerMove($event)\"\r\n (pointerup)=\"onPointerUp($event)\"\r\n (pointercancel)=\"onPointerCancel($event)\"\r\n >\r\n <div class=\"SwitchTrackFill\" [style.width]=\"trackFillWidth\"></div>\r\n <div class=\"SwitchThumb\" [style.transform]=\"'translateX(' + thumbLeftPx + 'px)'\"></div>\r\n </div>\r\n <span class=\"SwitchText\" *ngIf=\"displayText\">{{ displayText }}</span>\r\n </div>\r\n</div>\r\n\r\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex!important;flex-direction:column!important;width:100%;height:max-content;--radius-none: 0;--radius-xs: 2px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 16px;--radius-full: 9999px;--spacing-xxs: 2px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 16px;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);font-weight:400;width:100%;cursor:pointer;padding:0 3px;margin:0 0 4px;overflow:hidden;word-break:break-all}:host .Entry{display:flex!important;width:100%;height:32px;justify-content:flex-start;align-items:center;border:solid 0 var(--color-input-border, #d4d4d4);border-radius:12px!important;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px!important;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .Entry{height:auto;background:transparent;padding:0}:host .Switch{display:inline-flex;align-items:center;gap:10px;-webkit-user-select:none;user-select:none;padding:2px 4px;border-radius:9999px;transition:background-color .15s ease}:host .SwitchTrack{width:50px;height:24px;border-radius:9999px;background:var(--color-fg-muted, #a3a3a3);position:relative;padding:0;cursor:pointer;touch-action:pan-y;transition:background-color .15s ease,border-color .15s ease;display:flex;align-items:center;overflow:hidden}:host .SwitchTrackFill{position:absolute;left:0;top:0;bottom:0;width:0%;background:var(--color-action-primary-bg, #22c55e);transition:width .12s ease,background-color .15s ease}:host .Switch.Switch--dragging .SwitchTrackFill{transition:none}:host :host(.IsDisable) .SwitchTrack{cursor:not-allowed;background:var(--color-input-bg-disabled, #fafafa)}:host .SwitchThumb{width:20px;height:20px;margin:2px;border-radius:9999px;background:var(--color-surface, #ffffff);will-change:transform;transition:transform .12s ease;position:relative;z-index:1}:host .Switch.Switch--dragging .SwitchThumb{transition:none}:host .Switch.Switch--on .SwitchTrack{background:var(--color-action-primary-bg, #22c55e)}:host .SwitchTrack:focus-visible{outline:none}:host .SwitchText{font-size:14px;color:var(--color-fg, #171717)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
7066
7012
  }
7067
7013
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SwitchEntryComponent, decorators: [{
7068
7014
  type: Component,
@@ -7072,7 +7018,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
7072
7018
  useExisting: SwitchEntryComponent,
7073
7019
  multi: true,
7074
7020
  },
7075
- ], template: "<p *ngIf=\"label\" class=\"Label\" [class.Disabled]=\"isDisabled\">\r\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\r\n</p>\r\n\r\n<p *ngIf=\"description\" class=\"Description\" [class.Disabled]=\"isDisabled\">\r\n {{ description }}\r\n</p>\r\n\r\n<div class=\"Entry NotHover\" [class.Disabled]=\"isDisabled\">\r\n <div\r\n class=\"Switch\"\r\n role=\"switch\"\r\n [class.Switch--on]=\"isOn\"\r\n [class.Switch--dragging]=\"isDragging\"\r\n [attr.aria-checked]=\"ariaChecked\"\r\n [attr.aria-disabled]=\"isDisabled ? 'true' : 'false'\"\r\n (click)=\"onTrackClick($event)\"\r\n >\r\n <div\r\n class=\"SwitchTrack\"\r\n tabindex=\"0\"\r\n (pointerdown)=\"onPointerDown($event)\"\r\n (pointermove)=\"onPointerMove($event)\"\r\n (pointerup)=\"onPointerUp($event)\"\r\n (pointercancel)=\"onPointerCancel($event)\"\r\n >\r\n <div class=\"SwitchTrackFill\" [style.width]=\"trackFillWidth\"></div>\r\n <div class=\"SwitchThumb\" [style.transform]=\"'translateX(' + thumbLeftPx + 'px)'\"></div>\r\n </div>\r\n <span class=\"SwitchText\" *ngIf=\"displayText\">{{ displayText }}</span>\r\n </div>\r\n</div>\r\n\r\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex;flex-direction:column;width:100%;height:max-content;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);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(--color-input-border, #d4d4d4);border-radius:12px;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .Entry{height:auto;background:transparent;padding:0}:host .Switch{display:inline-flex;align-items:center;gap:10px;-webkit-user-select:none;user-select:none;padding:2px 4px;border-radius:9999px;transition:background-color .15s ease}:host .SwitchTrack{width:50px;height:24px;border-radius:9999px;background:var(--color-fg-muted, #a3a3a3);position:relative;padding:0;cursor:pointer;touch-action:pan-y;transition:background-color .15s ease,border-color .15s ease;display:flex;align-items:center;overflow:hidden}:host .SwitchTrackFill{position:absolute;left:0;top:0;bottom:0;width:0%;background:var(--color-action-primary-bg, #22c55e);transition:width .12s ease,background-color .15s ease}:host .Switch.Switch--dragging .SwitchTrackFill{transition:none}:host :host(.IsDisable) .SwitchTrack{cursor:not-allowed;background:var(--color-input-bg-disabled, #fafafa)}:host .SwitchThumb{width:20px;height:20px;margin:2px;border-radius:9999px;background:var(--color-surface, #ffffff);will-change:transform;transition:transform .12s ease;position:relative;z-index:1}:host .Switch.Switch--dragging .SwitchThumb{transition:none}:host .Switch.Switch--on .SwitchTrack{background:var(--color-action-primary-bg, #22c55e)}:host .SwitchTrack:focus-visible{outline:none}:host .SwitchText{font-size:14px;color:var(--color-fg, #171717)}\n"] }]
7021
+ ], template: "<p *ngIf=\"label\" class=\"Label\" [class.Disabled]=\"isDisabled\">\r\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\r\n</p>\r\n\r\n<p *ngIf=\"description\" class=\"Description\" [class.Disabled]=\"isDisabled\">\r\n {{ description }}\r\n</p>\r\n\r\n<div class=\"Entry NotHover\" [class.Disabled]=\"isDisabled\">\r\n <div\r\n class=\"Switch\"\r\n role=\"switch\"\r\n [class.Switch--on]=\"isOn\"\r\n [class.Switch--dragging]=\"isDragging\"\r\n [attr.aria-checked]=\"ariaChecked\"\r\n [attr.aria-disabled]=\"isDisabled ? 'true' : 'false'\"\r\n (click)=\"onTrackClick($event)\"\r\n >\r\n <div\r\n class=\"SwitchTrack\"\r\n tabindex=\"0\"\r\n (pointerdown)=\"onPointerDown($event)\"\r\n (pointermove)=\"onPointerMove($event)\"\r\n (pointerup)=\"onPointerUp($event)\"\r\n (pointercancel)=\"onPointerCancel($event)\"\r\n >\r\n <div class=\"SwitchTrackFill\" [style.width]=\"trackFillWidth\"></div>\r\n <div class=\"SwitchThumb\" [style.transform]=\"'translateX(' + thumbLeftPx + 'px)'\"></div>\r\n </div>\r\n <span class=\"SwitchText\" *ngIf=\"displayText\">{{ displayText }}</span>\r\n </div>\r\n</div>\r\n\r\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex!important;flex-direction:column!important;width:100%;height:max-content;--radius-none: 0;--radius-xs: 2px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 16px;--radius-full: 9999px;--spacing-xxs: 2px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 16px;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);font-weight:400;width:100%;cursor:pointer;padding:0 3px;margin:0 0 4px;overflow:hidden;word-break:break-all}:host .Entry{display:flex!important;width:100%;height:32px;justify-content:flex-start;align-items:center;border:solid 0 var(--color-input-border, #d4d4d4);border-radius:12px!important;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px!important;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .Entry{height:auto;background:transparent;padding:0}:host .Switch{display:inline-flex;align-items:center;gap:10px;-webkit-user-select:none;user-select:none;padding:2px 4px;border-radius:9999px;transition:background-color .15s ease}:host .SwitchTrack{width:50px;height:24px;border-radius:9999px;background:var(--color-fg-muted, #a3a3a3);position:relative;padding:0;cursor:pointer;touch-action:pan-y;transition:background-color .15s ease,border-color .15s ease;display:flex;align-items:center;overflow:hidden}:host .SwitchTrackFill{position:absolute;left:0;top:0;bottom:0;width:0%;background:var(--color-action-primary-bg, #22c55e);transition:width .12s ease,background-color .15s ease}:host .Switch.Switch--dragging .SwitchTrackFill{transition:none}:host :host(.IsDisable) .SwitchTrack{cursor:not-allowed;background:var(--color-input-bg-disabled, #fafafa)}:host .SwitchThumb{width:20px;height:20px;margin:2px;border-radius:9999px;background:var(--color-surface, #ffffff);will-change:transform;transition:transform .12s ease;position:relative;z-index:1}:host .Switch.Switch--dragging .SwitchThumb{transition:none}:host .Switch.Switch--on .SwitchTrack{background:var(--color-action-primary-bg, #22c55e)}:host .SwitchTrack:focus-visible{outline:none}:host .SwitchText{font-size:14px;color:var(--color-fg, #171717)}\n"] }]
7076
7022
  }], propDecorators: { label: [{
7077
7023
  type: Input
7078
7024
  }], description: [{
@@ -7705,7 +7651,7 @@ class PhoneEntryComponent {
7705
7651
  * @param query Texto de búsqueda.
7706
7652
  */
7707
7653
  applySearch(query) {
7708
- const normalizedQuery = query.trim().toLowerCase();
7654
+ const normalizedQuery = foldSearchText(query);
7709
7655
  if (!normalizedQuery) {
7710
7656
  // Sin búsqueda: mostrar todos ordenados por número (menor a mayor)
7711
7657
  this.filteredCountries = [...this.countries].sort((a, b) => {
@@ -7716,12 +7662,12 @@ class PhoneEntryComponent {
7716
7662
  this.syncModalView();
7717
7663
  return;
7718
7664
  }
7719
- // Con búsqueda: reordenar por relevancia
7720
7665
  this.filteredCountries = [...this.countries]
7721
7666
  .map((country) => ({
7722
7667
  country,
7723
7668
  score: this.calculateRelevanceScore(country, normalizedQuery),
7724
7669
  }))
7670
+ .filter((item) => item.score > 0)
7725
7671
  .sort((a, b) => b.score - a.score)
7726
7672
  .map((item) => item.country);
7727
7673
  this.syncModalView();
@@ -7735,9 +7681,9 @@ class PhoneEntryComponent {
7735
7681
  */
7736
7682
  calculateRelevanceScore(country, query) {
7737
7683
  let score = 0;
7738
- const lowerCaseName = country.name.toLowerCase();
7684
+ const lowerCaseName = foldSearchText(country.name);
7739
7685
  const prefixNumber = country.prefix.replace('+', '');
7740
- const lowerCasePrefix = country.prefix.toLowerCase();
7686
+ const lowerCasePrefix = foldSearchText(country.prefix);
7741
7687
  // Coincidencia exacta en nombre
7742
7688
  if (lowerCaseName === query) {
7743
7689
  score += 100;
@@ -7864,7 +7810,7 @@ class PhoneEntryComponent {
7864
7810
  useExisting: forwardRef(() => PhoneEntryComponent),
7865
7811
  multi: true,
7866
7812
  },
7867
- ], ngImport: i0, template: "<p\n *ngIf=\"label\"\n class=\"Label\"\n [class.Disabled]=\"isDisabled\"\n (click)=\"manualClick($event); $event.stopPropagation()\"\n>\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\n</p>\n\n<p\n *ngIf=\"description\"\n class=\"Description\"\n [class.Disabled]=\"isDisabled\"\n (click)=\"manualClick($event); $event.stopPropagation()\"\n>\n {{ description }}\n</p>\n\n<div class=\"Entry\" [class.IsFocus]=\"isFocus\" [class.Error]=\"error\">\n <div class=\"CodePicker\" (click)=\"!isEditingPrefix && togglePicker()\">\n <img \n *ngIf=\"selectedCountry.img && selectedCountry.code !== 'CUSTOM'\" \n class=\"Icon\" \n [src]=\"selectedCountry.img\" \n draggable=\"false\" \n />\n <lucide-icon class=\"Icon\" name=\"globe\" *ngIf=\"!selectedCountry.img || selectedCountry.code === 'CUSTOM'\"></lucide-icon>\n <input\n *ngIf=\"isEditingPrefix\"\n type=\"text\"\n class=\"PrefixInput\"\n [value]=\"customPrefix\"\n (input)=\"onPrefixInput($event)\"\n (focus)=\"onPrefixFocus()\"\n (blur)=\"onPrefixBlur()\"\n (keydown)=\"onPrefixKeyDown($event)\"\n (click)=\"$event.stopPropagation()\"\n placeholder=\"+XX\"\n maxlength=\"5\"\n />\n <span *ngIf=\"!isEditingPrefix\" class=\"PrefixText\" (dblclick)=\"onPrefixFocus(); $event.stopPropagation()\">\n {{ customPrefix || selectedCountry.prefix }}\n </span>\n </div>\n\n <input\n type=\"text\"\n class=\"Input\"\n [class.Disabled]=\"isDisabled\"\n [placeholder]=\"placeholder\"\n [value]=\"textValue\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (keydown)=\"onKeyDown($event)\"\n (paste)=\"onPaste($event)\"\n inputmode=\"tel\"\n pattern=\"[0-9]*\"\n />\n</div>\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex;flex-direction:column;width:100%;height:max-content;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);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(--color-input-border, #d4d4d4);border-radius:12px;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .Entry .CodePicker{height:100%;display:flex;justify-content:center;align-items:center;gap:5px;width:max-content;padding:0 var(--spacing-sm);background-color:var(--color-input-addon-bg);cursor:pointer;position:relative}:host .Entry .CodePicker .Icon{width:20px;height:20px;object-fit:contain;flex-shrink:0}:host .Entry .CodePicker .PrefixText{-webkit-user-select:none;user-select:none;white-space:nowrap}:host .Entry .CodePicker .PrefixInput{background:transparent;border:none;outline:none;color:var(--color-input-fg);font-size:14px;font-family:inherit;width:50px;padding:0;text-align:center;caret-color:var(--color-brand)}:host .Entry .CodePicker .PrefixInput::placeholder{color:var(--color-input-placeholder);opacity:.6}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border);padding:0 var(--spacing-md);padding-left:var(--spacing-sm);color:var(--color-input-fg);caret-color:var(--color-brand);caret-shape:block;text-align:start}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder)}\n"], dependencies: [{ kind: "component", type: LucideIconComponent, selector: "lucide-icon", inputs: ["name", "size", "spin", "filled"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
7813
+ ], ngImport: i0, template: "<p\n *ngIf=\"label\"\n class=\"Label\"\n [class.Disabled]=\"isDisabled\"\n (click)=\"manualClick($event); $event.stopPropagation()\"\n>\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\n</p>\n\n<p\n *ngIf=\"description\"\n class=\"Description\"\n [class.Disabled]=\"isDisabled\"\n (click)=\"manualClick($event); $event.stopPropagation()\"\n>\n {{ description }}\n</p>\n\n<div class=\"Entry\" [class.IsFocus]=\"isFocus\" [class.Error]=\"error\">\n <div class=\"CodePicker\" (click)=\"!isEditingPrefix && togglePicker()\">\n <img \n *ngIf=\"selectedCountry.img && selectedCountry.code !== 'CUSTOM'\" \n class=\"Icon\" \n [src]=\"selectedCountry.img\" \n draggable=\"false\" \n />\n <lucide-icon class=\"Icon\" name=\"globe\" *ngIf=\"!selectedCountry.img || selectedCountry.code === 'CUSTOM'\"></lucide-icon>\n <input\n *ngIf=\"isEditingPrefix\"\n type=\"text\"\n class=\"PrefixInput\"\n [value]=\"customPrefix\"\n (input)=\"onPrefixInput($event)\"\n (focus)=\"onPrefixFocus()\"\n (blur)=\"onPrefixBlur()\"\n (keydown)=\"onPrefixKeyDown($event)\"\n (click)=\"$event.stopPropagation()\"\n placeholder=\"+XX\"\n maxlength=\"5\"\n />\n <span *ngIf=\"!isEditingPrefix\" class=\"PrefixText\" (dblclick)=\"onPrefixFocus(); $event.stopPropagation()\">\n {{ customPrefix || selectedCountry.prefix }}\n </span>\n </div>\n\n <input\n type=\"text\"\n class=\"Input\"\n [class.Disabled]=\"isDisabled\"\n [placeholder]=\"placeholder\"\n [value]=\"textValue\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (keydown)=\"onKeyDown($event)\"\n (paste)=\"onPaste($event)\"\n inputmode=\"tel\"\n pattern=\"[0-9]*\"\n />\n</div>\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex!important;flex-direction:column!important;width:100%;height:max-content;--radius-none: 0;--radius-xs: 2px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 16px;--radius-full: 9999px;--spacing-xxs: 2px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 16px;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);font-weight:400;width:100%;cursor:pointer;padding:0 3px;margin:0 0 4px;overflow:hidden;word-break:break-all}:host .Entry{display:flex!important;width:100%;height:32px;justify-content:flex-start;align-items:center;border:solid 0 var(--color-input-border, #d4d4d4);border-radius:12px!important;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px!important;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .Entry .CodePicker{height:100%;display:flex;justify-content:center;align-items:center;gap:5px;width:max-content;padding:0 8px;background-color:var(--color-input-addon-bg);cursor:pointer;position:relative}:host .Entry .CodePicker .Icon{width:20px;height:20px;object-fit:contain;flex-shrink:0}:host .Entry .CodePicker .PrefixText{-webkit-user-select:none;user-select:none;white-space:nowrap}:host .Entry .CodePicker .PrefixInput{background:transparent;border:none;outline:none;color:var(--color-input-fg);font-size:14px;font-family:inherit;width:50px;padding:0;text-align:center;caret-color:var(--color-brand)}:host .Entry .CodePicker .PrefixInput::placeholder{color:var(--color-input-placeholder);opacity:.6}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border);padding:0 12px 0 8px;color:var(--color-input-fg);caret-color:var(--color-brand);caret-shape:block;text-align:start}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder)}\n"], dependencies: [{ kind: "component", type: LucideIconComponent, selector: "lucide-icon", inputs: ["name", "size", "spin", "filled"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
7868
7814
  }
7869
7815
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: PhoneEntryComponent, decorators: [{
7870
7816
  type: Component,
@@ -7876,7 +7822,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
7876
7822
  useExisting: forwardRef(() => PhoneEntryComponent),
7877
7823
  multi: true,
7878
7824
  },
7879
- ], template: "<p\n *ngIf=\"label\"\n class=\"Label\"\n [class.Disabled]=\"isDisabled\"\n (click)=\"manualClick($event); $event.stopPropagation()\"\n>\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\n</p>\n\n<p\n *ngIf=\"description\"\n class=\"Description\"\n [class.Disabled]=\"isDisabled\"\n (click)=\"manualClick($event); $event.stopPropagation()\"\n>\n {{ description }}\n</p>\n\n<div class=\"Entry\" [class.IsFocus]=\"isFocus\" [class.Error]=\"error\">\n <div class=\"CodePicker\" (click)=\"!isEditingPrefix && togglePicker()\">\n <img \n *ngIf=\"selectedCountry.img && selectedCountry.code !== 'CUSTOM'\" \n class=\"Icon\" \n [src]=\"selectedCountry.img\" \n draggable=\"false\" \n />\n <lucide-icon class=\"Icon\" name=\"globe\" *ngIf=\"!selectedCountry.img || selectedCountry.code === 'CUSTOM'\"></lucide-icon>\n <input\n *ngIf=\"isEditingPrefix\"\n type=\"text\"\n class=\"PrefixInput\"\n [value]=\"customPrefix\"\n (input)=\"onPrefixInput($event)\"\n (focus)=\"onPrefixFocus()\"\n (blur)=\"onPrefixBlur()\"\n (keydown)=\"onPrefixKeyDown($event)\"\n (click)=\"$event.stopPropagation()\"\n placeholder=\"+XX\"\n maxlength=\"5\"\n />\n <span *ngIf=\"!isEditingPrefix\" class=\"PrefixText\" (dblclick)=\"onPrefixFocus(); $event.stopPropagation()\">\n {{ customPrefix || selectedCountry.prefix }}\n </span>\n </div>\n\n <input\n type=\"text\"\n class=\"Input\"\n [class.Disabled]=\"isDisabled\"\n [placeholder]=\"placeholder\"\n [value]=\"textValue\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (keydown)=\"onKeyDown($event)\"\n (paste)=\"onPaste($event)\"\n inputmode=\"tel\"\n pattern=\"[0-9]*\"\n />\n</div>\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex;flex-direction:column;width:100%;height:max-content;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);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(--color-input-border, #d4d4d4);border-radius:12px;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .Entry .CodePicker{height:100%;display:flex;justify-content:center;align-items:center;gap:5px;width:max-content;padding:0 var(--spacing-sm);background-color:var(--color-input-addon-bg);cursor:pointer;position:relative}:host .Entry .CodePicker .Icon{width:20px;height:20px;object-fit:contain;flex-shrink:0}:host .Entry .CodePicker .PrefixText{-webkit-user-select:none;user-select:none;white-space:nowrap}:host .Entry .CodePicker .PrefixInput{background:transparent;border:none;outline:none;color:var(--color-input-fg);font-size:14px;font-family:inherit;width:50px;padding:0;text-align:center;caret-color:var(--color-brand)}:host .Entry .CodePicker .PrefixInput::placeholder{color:var(--color-input-placeholder);opacity:.6}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border);padding:0 var(--spacing-md);padding-left:var(--spacing-sm);color:var(--color-input-fg);caret-color:var(--color-brand);caret-shape:block;text-align:start}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder)}\n"] }]
7825
+ ], template: "<p\n *ngIf=\"label\"\n class=\"Label\"\n [class.Disabled]=\"isDisabled\"\n (click)=\"manualClick($event); $event.stopPropagation()\"\n>\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\n</p>\n\n<p\n *ngIf=\"description\"\n class=\"Description\"\n [class.Disabled]=\"isDisabled\"\n (click)=\"manualClick($event); $event.stopPropagation()\"\n>\n {{ description }}\n</p>\n\n<div class=\"Entry\" [class.IsFocus]=\"isFocus\" [class.Error]=\"error\">\n <div class=\"CodePicker\" (click)=\"!isEditingPrefix && togglePicker()\">\n <img \n *ngIf=\"selectedCountry.img && selectedCountry.code !== 'CUSTOM'\" \n class=\"Icon\" \n [src]=\"selectedCountry.img\" \n draggable=\"false\" \n />\n <lucide-icon class=\"Icon\" name=\"globe\" *ngIf=\"!selectedCountry.img || selectedCountry.code === 'CUSTOM'\"></lucide-icon>\n <input\n *ngIf=\"isEditingPrefix\"\n type=\"text\"\n class=\"PrefixInput\"\n [value]=\"customPrefix\"\n (input)=\"onPrefixInput($event)\"\n (focus)=\"onPrefixFocus()\"\n (blur)=\"onPrefixBlur()\"\n (keydown)=\"onPrefixKeyDown($event)\"\n (click)=\"$event.stopPropagation()\"\n placeholder=\"+XX\"\n maxlength=\"5\"\n />\n <span *ngIf=\"!isEditingPrefix\" class=\"PrefixText\" (dblclick)=\"onPrefixFocus(); $event.stopPropagation()\">\n {{ customPrefix || selectedCountry.prefix }}\n </span>\n </div>\n\n <input\n type=\"text\"\n class=\"Input\"\n [class.Disabled]=\"isDisabled\"\n [placeholder]=\"placeholder\"\n [value]=\"textValue\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (keydown)=\"onKeyDown($event)\"\n (paste)=\"onPaste($event)\"\n inputmode=\"tel\"\n pattern=\"[0-9]*\"\n />\n</div>\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex!important;flex-direction:column!important;width:100%;height:max-content;--radius-none: 0;--radius-xs: 2px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 16px;--radius-full: 9999px;--spacing-xxs: 2px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 16px;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);font-weight:400;width:100%;cursor:pointer;padding:0 3px;margin:0 0 4px;overflow:hidden;word-break:break-all}:host .Entry{display:flex!important;width:100%;height:32px;justify-content:flex-start;align-items:center;border:solid 0 var(--color-input-border, #d4d4d4);border-radius:12px!important;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px!important;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .Entry .CodePicker{height:100%;display:flex;justify-content:center;align-items:center;gap:5px;width:max-content;padding:0 8px;background-color:var(--color-input-addon-bg);cursor:pointer;position:relative}:host .Entry .CodePicker .Icon{width:20px;height:20px;object-fit:contain;flex-shrink:0}:host .Entry .CodePicker .PrefixText{-webkit-user-select:none;user-select:none;white-space:nowrap}:host .Entry .CodePicker .PrefixInput{background:transparent;border:none;outline:none;color:var(--color-input-fg);font-size:14px;font-family:inherit;width:50px;padding:0;text-align:center;caret-color:var(--color-brand)}:host .Entry .CodePicker .PrefixInput::placeholder{color:var(--color-input-placeholder);opacity:.6}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border);padding:0 12px 0 8px;color:var(--color-input-fg);caret-color:var(--color-brand);caret-shape:block;text-align:start}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder)}\n"] }]
7880
7826
  }], ctorParameters: () => [], propDecorators: { label: [{
7881
7827
  type: Input
7882
7828
  }], opcional: [{
@@ -8129,7 +8075,7 @@ class ColorPickerComponent {
8129
8075
  useExisting: forwardRef(() => ColorPickerComponent),
8130
8076
  multi: true,
8131
8077
  },
8132
- ], ngImport: i0, template: "<p\n *ngIf=\"label\"\n class=\"Label\"\n [class.Disabled]=\"isDisabled\"\n (click)=\"manualClick($event); $event.stopPropagation()\"\n>\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\n</p>\n\n<p\n *ngIf=\"description\"\n class=\"Description\"\n [class.Disabled]=\"isDisabled\"\n (click)=\"manualClick($event); $event.stopPropagation()\"\n>\n {{ description }}\n</p>\n\n<div class=\"Entry\" [class.IsFocus]=\"isFocus\" [class.Error]=\"error\">\n <div\n class=\"Preview\"\n [style.background-color]=\"textValue || null\"\n (click)=\"togglePicker()\"\n role=\"button\"\n tabindex=\"-1\"\n aria-label=\"Abrir selector de color\"\n ></div>\n\n <input\n type=\"text\"\n class=\"Input\"\n [class.Disabled]=\"isDisabled\"\n [placeholder]=\"placeholder\"\n [value]=\"textValue\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (keydown)=\"onKeyDown($event)\"\n />\n</div>\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex;flex-direction:column;width:100%;height:max-content;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);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(--color-input-border, #d4d4d4);border-radius:12px;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .Entry .Preview{flex-shrink:0;width:25px;height:25px;min-width:25px;border-radius:100px;display:flex;justify-content:center;align-items:center;gap:5px;margin:4px 0 4px 4px;background-color:var(--color-input-addon-bg);border:1px solid var(--color-input-border);cursor:pointer;box-sizing:border-box}:host .Entry .Input{flex:1;min-width:0;width:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
8078
+ ], ngImport: i0, template: "<p\n *ngIf=\"label\"\n class=\"Label\"\n [class.Disabled]=\"isDisabled\"\n (click)=\"manualClick($event); $event.stopPropagation()\"\n>\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\n</p>\n\n<p\n *ngIf=\"description\"\n class=\"Description\"\n [class.Disabled]=\"isDisabled\"\n (click)=\"manualClick($event); $event.stopPropagation()\"\n>\n {{ description }}\n</p>\n\n<div class=\"Entry\" [class.IsFocus]=\"isFocus\" [class.Error]=\"error\">\n <div\n class=\"Preview\"\n [style.background-color]=\"textValue || null\"\n (click)=\"togglePicker()\"\n role=\"button\"\n tabindex=\"-1\"\n aria-label=\"Abrir selector de color\"\n ></div>\n\n <input\n type=\"text\"\n class=\"Input\"\n [class.Disabled]=\"isDisabled\"\n [placeholder]=\"placeholder\"\n [value]=\"textValue\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (keydown)=\"onKeyDown($event)\"\n />\n</div>\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex!important;flex-direction:column!important;width:100%;height:max-content;--radius-none: 0;--radius-xs: 2px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 16px;--radius-full: 9999px;--spacing-xxs: 2px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 16px;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);font-weight:400;width:100%;cursor:pointer;padding:0 3px;margin:0 0 4px;overflow:hidden;word-break:break-all}:host .Entry{display:flex!important;width:100%;height:32px;justify-content:flex-start;align-items:center;border:solid 0 var(--color-input-border, #d4d4d4);border-radius:12px!important;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px!important;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .Entry .Preview{flex-shrink:0;width:25px;height:25px;min-width:25px;border-radius:100px;display:flex;justify-content:center;align-items:center;gap:5px;margin:4px 0 4px 4px;background-color:var(--color-input-addon-bg);border:1px solid var(--color-input-border);cursor:pointer;box-sizing:border-box}:host .Entry .Input{flex:1;min-width:0;width:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
8133
8079
  }
8134
8080
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ColorPickerComponent, decorators: [{
8135
8081
  type: Component,
@@ -8139,7 +8085,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
8139
8085
  useExisting: forwardRef(() => ColorPickerComponent),
8140
8086
  multi: true,
8141
8087
  },
8142
- ], template: "<p\n *ngIf=\"label\"\n class=\"Label\"\n [class.Disabled]=\"isDisabled\"\n (click)=\"manualClick($event); $event.stopPropagation()\"\n>\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\n</p>\n\n<p\n *ngIf=\"description\"\n class=\"Description\"\n [class.Disabled]=\"isDisabled\"\n (click)=\"manualClick($event); $event.stopPropagation()\"\n>\n {{ description }}\n</p>\n\n<div class=\"Entry\" [class.IsFocus]=\"isFocus\" [class.Error]=\"error\">\n <div\n class=\"Preview\"\n [style.background-color]=\"textValue || null\"\n (click)=\"togglePicker()\"\n role=\"button\"\n tabindex=\"-1\"\n aria-label=\"Abrir selector de color\"\n ></div>\n\n <input\n type=\"text\"\n class=\"Input\"\n [class.Disabled]=\"isDisabled\"\n [placeholder]=\"placeholder\"\n [value]=\"textValue\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (keydown)=\"onKeyDown($event)\"\n />\n</div>\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex;flex-direction:column;width:100%;height:max-content;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);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(--color-input-border, #d4d4d4);border-radius:12px;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .Entry .Preview{flex-shrink:0;width:25px;height:25px;min-width:25px;border-radius:100px;display:flex;justify-content:center;align-items:center;gap:5px;margin:4px 0 4px 4px;background-color:var(--color-input-addon-bg);border:1px solid var(--color-input-border);cursor:pointer;box-sizing:border-box}:host .Entry .Input{flex:1;min-width:0;width:auto}\n"] }]
8088
+ ], template: "<p\n *ngIf=\"label\"\n class=\"Label\"\n [class.Disabled]=\"isDisabled\"\n (click)=\"manualClick($event); $event.stopPropagation()\"\n>\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\n</p>\n\n<p\n *ngIf=\"description\"\n class=\"Description\"\n [class.Disabled]=\"isDisabled\"\n (click)=\"manualClick($event); $event.stopPropagation()\"\n>\n {{ description }}\n</p>\n\n<div class=\"Entry\" [class.IsFocus]=\"isFocus\" [class.Error]=\"error\">\n <div\n class=\"Preview\"\n [style.background-color]=\"textValue || null\"\n (click)=\"togglePicker()\"\n role=\"button\"\n tabindex=\"-1\"\n aria-label=\"Abrir selector de color\"\n ></div>\n\n <input\n type=\"text\"\n class=\"Input\"\n [class.Disabled]=\"isDisabled\"\n [placeholder]=\"placeholder\"\n [value]=\"textValue\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (keydown)=\"onKeyDown($event)\"\n />\n</div>\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex!important;flex-direction:column!important;width:100%;height:max-content;--radius-none: 0;--radius-xs: 2px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 16px;--radius-full: 9999px;--spacing-xxs: 2px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 16px;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);font-weight:400;width:100%;cursor:pointer;padding:0 3px;margin:0 0 4px;overflow:hidden;word-break:break-all}:host .Entry{display:flex!important;width:100%;height:32px;justify-content:flex-start;align-items:center;border:solid 0 var(--color-input-border, #d4d4d4);border-radius:12px!important;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px!important;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .Entry .Preview{flex-shrink:0;width:25px;height:25px;min-width:25px;border-radius:100px;display:flex;justify-content:center;align-items:center;gap:5px;margin:4px 0 4px 4px;background-color:var(--color-input-addon-bg);border:1px solid var(--color-input-border);cursor:pointer;box-sizing:border-box}:host .Entry .Input{flex:1;min-width:0;width:auto}\n"] }]
8143
8089
  }], propDecorators: { label: [{
8144
8090
  type: Input
8145
8091
  }], description: [{
@@ -8316,7 +8262,7 @@ class OtpEntryComponent {
8316
8262
  useExisting: forwardRef(() => OtpEntryComponent),
8317
8263
  multi: true,
8318
8264
  },
8319
- ], viewQueries: [{ propertyName: "inputs", predicate: ["inputRef"], descendants: true }], ngImport: i0, template: "<p\r\n *ngIf=\"label\"\r\n class=\"Label\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\r\n</p>\r\n\r\n<p\r\n *ngIf=\"description\"\r\n class=\"Description\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ description }}\r\n</p>\r\n\r\n\r\n<div class=\"OtpWrapper\" [class.Disabled]=\"isDisabled\">\r\n <input\r\n *ngFor=\"let i of [].constructor(length); let index = index\"\r\n #inputRef\r\n class=\"OtpInput\"\r\n type=\"text\"\r\n maxlength=\"1\"\r\n [disabled]=\"isDisabled\"\r\n placeholder=\"0\"\r\n (input)=\"onInput($event, index)\"\r\n (keydown)=\"onKeyDown($event, index)\"\r\n (paste)=\"$event.preventDefault(); handlePaste($event)\"\r\n />\r\n</div>\r\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex;flex-direction:column;width:100%;height:max-content;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);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(--color-input-border, #d4d4d4);border-radius:12px;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .OtpWrapper{display:flex;gap:4px;width:100%;height:max-content;justify-content:flex-start;align-items:center;cursor:pointer}:host .OtpWrapper .OtpInput{background-color:var(--color-input-bg);min-height:40px;height:auto;width:max-content;min-width:40px;border:solid 0 var(--color-input-border);border-radius:var(--radius-lg);text-align:center;font-size:14px;font-weight:400;color:var(--color-input-fg);caret-color:var(--color-brand);caret-shape:block;resize:vertical}:host .OtpWrapper .OtpInput:hover{border:none;outline:solid 1px var(--color-input-border-hover)}:host .OtpWrapper .OtpInput:focus{border:none;outline:solid 1px var(--color-input-border-focus)}:host .OtpWrapper .OtpInput::placeholder{color:var(--color-input-placeholder)}\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: "ngmodule", type: FormsModule }] });
8265
+ ], viewQueries: [{ propertyName: "inputs", predicate: ["inputRef"], descendants: true }], ngImport: i0, template: "<p\r\n *ngIf=\"label\"\r\n class=\"Label\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\r\n</p>\r\n\r\n<p\r\n *ngIf=\"description\"\r\n class=\"Description\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ description }}\r\n</p>\r\n\r\n\r\n<div class=\"OtpWrapper\" [class.Disabled]=\"isDisabled\">\r\n <input\r\n *ngFor=\"let i of [].constructor(length); let index = index\"\r\n #inputRef\r\n class=\"OtpInput\"\r\n type=\"text\"\r\n maxlength=\"1\"\r\n [disabled]=\"isDisabled\"\r\n placeholder=\"0\"\r\n (input)=\"onInput($event, index)\"\r\n (keydown)=\"onKeyDown($event, index)\"\r\n (paste)=\"$event.preventDefault(); handlePaste($event)\"\r\n />\r\n</div>\r\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex!important;flex-direction:column!important;width:100%;height:max-content;--radius-none: 0;--radius-xs: 2px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 16px;--radius-full: 9999px;--spacing-xxs: 2px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 16px;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);font-weight:400;width:100%;cursor:pointer;padding:0 3px;margin:0 0 4px;overflow:hidden;word-break:break-all}:host .Entry{display:flex!important;width:100%;height:32px;justify-content:flex-start;align-items:center;border:solid 0 var(--color-input-border, #d4d4d4);border-radius:12px!important;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px!important;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .OtpWrapper{display:flex;gap:4px;width:100%;height:max-content;justify-content:flex-start;align-items:center;cursor:pointer}:host .OtpWrapper .OtpInput{background-color:var(--color-input-bg);min-height:40px;height:auto;width:max-content;min-width:40px;border:solid 0 var(--color-input-border);border-radius:12px;text-align:center;font-size:14px;font-weight:400;color:var(--color-input-fg);caret-color:var(--color-brand);caret-shape:block;resize:vertical}:host .OtpWrapper .OtpInput:hover{border:none;outline:solid 1px var(--color-input-border-hover)}:host .OtpWrapper .OtpInput:focus{border:none;outline:solid 1px var(--color-input-border-focus)}:host .OtpWrapper .OtpInput::placeholder{color:var(--color-input-placeholder)}\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: "ngmodule", type: FormsModule }] });
8320
8266
  }
8321
8267
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: OtpEntryComponent, decorators: [{
8322
8268
  type: Component,
@@ -8326,7 +8272,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
8326
8272
  useExisting: forwardRef(() => OtpEntryComponent),
8327
8273
  multi: true,
8328
8274
  },
8329
- ], template: "<p\r\n *ngIf=\"label\"\r\n class=\"Label\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\r\n</p>\r\n\r\n<p\r\n *ngIf=\"description\"\r\n class=\"Description\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ description }}\r\n</p>\r\n\r\n\r\n<div class=\"OtpWrapper\" [class.Disabled]=\"isDisabled\">\r\n <input\r\n *ngFor=\"let i of [].constructor(length); let index = index\"\r\n #inputRef\r\n class=\"OtpInput\"\r\n type=\"text\"\r\n maxlength=\"1\"\r\n [disabled]=\"isDisabled\"\r\n placeholder=\"0\"\r\n (input)=\"onInput($event, index)\"\r\n (keydown)=\"onKeyDown($event, index)\"\r\n (paste)=\"$event.preventDefault(); handlePaste($event)\"\r\n />\r\n</div>\r\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex;flex-direction:column;width:100%;height:max-content;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);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(--color-input-border, #d4d4d4);border-radius:12px;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .OtpWrapper{display:flex;gap:4px;width:100%;height:max-content;justify-content:flex-start;align-items:center;cursor:pointer}:host .OtpWrapper .OtpInput{background-color:var(--color-input-bg);min-height:40px;height:auto;width:max-content;min-width:40px;border:solid 0 var(--color-input-border);border-radius:var(--radius-lg);text-align:center;font-size:14px;font-weight:400;color:var(--color-input-fg);caret-color:var(--color-brand);caret-shape:block;resize:vertical}:host .OtpWrapper .OtpInput:hover{border:none;outline:solid 1px var(--color-input-border-hover)}:host .OtpWrapper .OtpInput:focus{border:none;outline:solid 1px var(--color-input-border-focus)}:host .OtpWrapper .OtpInput::placeholder{color:var(--color-input-placeholder)}\n"] }]
8275
+ ], template: "<p\r\n *ngIf=\"label\"\r\n class=\"Label\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\r\n</p>\r\n\r\n<p\r\n *ngIf=\"description\"\r\n class=\"Description\"\r\n [class.Disabled]=\"isDisabled\"\r\n (click)=\"manualClick($event); $event.stopPropagation()\"\r\n>\r\n {{ description }}\r\n</p>\r\n\r\n\r\n<div class=\"OtpWrapper\" [class.Disabled]=\"isDisabled\">\r\n <input\r\n *ngFor=\"let i of [].constructor(length); let index = index\"\r\n #inputRef\r\n class=\"OtpInput\"\r\n type=\"text\"\r\n maxlength=\"1\"\r\n [disabled]=\"isDisabled\"\r\n placeholder=\"0\"\r\n (input)=\"onInput($event, index)\"\r\n (keydown)=\"onKeyDown($event, index)\"\r\n (paste)=\"$event.preventDefault(); handlePaste($event)\"\r\n />\r\n</div>\r\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex!important;flex-direction:column!important;width:100%;height:max-content;--radius-none: 0;--radius-xs: 2px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 16px;--radius-full: 9999px;--spacing-xxs: 2px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 16px;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);font-weight:400;width:100%;cursor:pointer;padding:0 3px;margin:0 0 4px;overflow:hidden;word-break:break-all}:host .Entry{display:flex!important;width:100%;height:32px;justify-content:flex-start;align-items:center;border:solid 0 var(--color-input-border, #d4d4d4);border-radius:12px!important;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px!important;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .OtpWrapper{display:flex;gap:4px;width:100%;height:max-content;justify-content:flex-start;align-items:center;cursor:pointer}:host .OtpWrapper .OtpInput{background-color:var(--color-input-bg);min-height:40px;height:auto;width:max-content;min-width:40px;border:solid 0 var(--color-input-border);border-radius:12px;text-align:center;font-size:14px;font-weight:400;color:var(--color-input-fg);caret-color:var(--color-brand);caret-shape:block;resize:vertical}:host .OtpWrapper .OtpInput:hover{border:none;outline:solid 1px var(--color-input-border-hover)}:host .OtpWrapper .OtpInput:focus{border:none;outline:solid 1px var(--color-input-border-focus)}:host .OtpWrapper .OtpInput::placeholder{color:var(--color-input-placeholder)}\n"] }]
8330
8276
  }], propDecorators: { length: [{
8331
8277
  type: Input
8332
8278
  }], label: [{
@@ -9546,7 +9492,7 @@ class RichTextEntryComponent {
9546
9492
  useExisting: forwardRef(() => RichTextEntryComponent),
9547
9493
  multi: true,
9548
9494
  },
9549
- ], viewQueries: [{ propertyName: "contentEditable", first: true, predicate: ["contentEditable"], descendants: true }, { propertyName: "imageInput", first: true, predicate: ["imageInput"], descendants: true }, { propertyName: "imageOverlay", first: true, predicate: ["imageOverlay"], descendants: true }, { propertyName: "tableOverlay", first: true, predicate: ["tableOverlay"], descendants: true }], ngImport: i0, template: "<p\n *ngIf=\"label\"\n class=\"Label\"\n [class.Disabled]=\"isDisabled\"\n (click)=\"manualClick($event); $event.stopPropagation()\"\n>\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\n</p>\n\n<p\n *ngIf=\"description\"\n class=\"Description\"\n [class.Disabled]=\"isDisabled\"\n (click)=\"manualClick($event); $event.stopPropagation()\"\n>\n {{ description }}\n</p>\n\n<div class=\"EditorWrapper\" [class.Disabled]=\"isDisabled\">\n <!-- Solo en el navegador: Lexical (en SSR no se crea editor para evitar \"document is not defined\") -->\n <ng-container *ngIf=\"isBrowser\">\n <div class=\"Toolbar\" [class.Disabled]=\"isDisabled\" (click)=\"$event.stopPropagation()\" dragScroll=\"horizontal\">\n <button\n type=\"button\"\n class=\"ToolBtn ToolBtn--undo\"\n (mousedown)=\"onToolbarMouseDown($event)\"\n (click)=\"exec('undo'); $event.preventDefault()\"\n [disabled]=\"isDisabled || !canUndo\"\n aria-label=\"Deshacer\"\n >\n <lucide-icon name=\"rotate-ccw\" aria-hidden=\"true\"></lucide-icon>\n </button>\n <button\n type=\"button\"\n class=\"ToolBtn ToolBtn--color-danger-fgo\"\n (mousedown)=\"onToolbarMouseDown($event)\"\n (click)=\"exec('redo'); $event.preventDefault()\"\n [disabled]=\"isDisabled || !canRedo\"\n aria-label=\"Rehacer\"\n >\n <lucide-icon name=\"rotate-cw\" aria-hidden=\"true\"></lucide-icon>\n </button>\n <span class=\"ToolSep\"></span>\n\n <button\n type=\"button\"\n class=\"ToolBtn ToolBtn--bold\"\n (mousedown)=\"onToolbarMouseDown($event)\"\n [class.Active]=\"isBold\"\n (click)=\"exec('bold'); $event.preventDefault()\"\n [disabled]=\"isDisabled\"\n aria-label=\"Negrita\"\n >\n <lucide-icon name=\"bold\" aria-hidden=\"true\"></lucide-icon>\n </button>\n <button\n type=\"button\"\n class=\"ToolBtn ToolBtn--italic\"\n (mousedown)=\"onToolbarMouseDown($event)\"\n [class.Active]=\"isItalic\"\n (click)=\"exec('italic'); $event.preventDefault()\"\n [disabled]=\"isDisabled\"\n aria-label=\"Cursiva\"\n >\n <lucide-icon name=\"italic\" aria-hidden=\"true\"></lucide-icon>\n </button>\n <button\n type=\"button\"\n class=\"ToolBtn ToolBtn--underline\"\n (mousedown)=\"onToolbarMouseDown($event)\"\n [class.Active]=\"isUnderline\"\n (click)=\"exec('underline'); $event.preventDefault()\"\n [disabled]=\"isDisabled\"\n aria-label=\"Subrayado\"\n >\n <lucide-icon name=\"underline\" aria-hidden=\"true\"></lucide-icon>\n </button>\n <button\n type=\"button\"\n class=\"ToolBtn ToolBtn--strike\"\n (mousedown)=\"onToolbarMouseDown($event)\"\n [class.Active]=\"isStrikethrough\"\n (click)=\"exec('strikethrough'); $event.preventDefault()\"\n [disabled]=\"isDisabled\"\n aria-label=\"Tachado\"\n >\n <lucide-icon name=\"strikethrough\" aria-hidden=\"true\"></lucide-icon>\n </button>\n <span class=\"ToolSep\"></span>\n\n <button\n type=\"button\"\n class=\"ToolBtn ToolBtn--h1\"\n (mousedown)=\"onToolbarMouseDown($event)\"\n [class.Active]=\"isH1\"\n (click)=\"exec('h1'); $event.preventDefault()\"\n [disabled]=\"isDisabled\"\n aria-label=\"T\u00EDtulo H1\"\n >\n H1\n </button>\n <button\n type=\"button\"\n class=\"ToolBtn ToolBtn--link\"\n (mousedown)=\"onToolbarMouseDown($event)\"\n [class.Active]=\"isLink\"\n (click)=\"exec('link'); $event.preventDefault()\"\n [disabled]=\"isDisabled\"\n aria-label=\"Insertar o quitar link\"\n >\n <lucide-icon name=\"link\" aria-hidden=\"true\"></lucide-icon>\n </button>\n <button\n type=\"button\"\n class=\"ToolBtn ToolBtn--image\"\n (mousedown)=\"onToolbarMouseDown($event)\"\n (click)=\"exec('image'); $event.preventDefault()\"\n [disabled]=\"isDisabled\"\n aria-label=\"Insertar imagen\"\n >\n <lucide-icon name=\"image\" aria-hidden=\"true\"></lucide-icon>\n </button>\n <button\n type=\"button\"\n class=\"ToolBtn ToolBtn--table\"\n (mousedown)=\"onToolbarMouseDown($event)\"\n (click)=\"exec('table'); $event.preventDefault()\"\n [disabled]=\"isDisabled\"\n aria-label=\"Insertar tabla\"\n >\n <lucide-icon name=\"table\" aria-hidden=\"true\"></lucide-icon>\n </button>\n <span class=\"ToolSep\"></span>\n <button\n type=\"button\"\n class=\"ToolBtn ToolBtn--ol\"\n (mousedown)=\"onToolbarMouseDown($event)\"\n (click)=\"exec('ol'); $event.preventDefault()\"\n [disabled]=\"isDisabled\"\n aria-label=\"Lista numerada\"\n >\n <lucide-icon name=\"list-ordered\" aria-hidden=\"true\"></lucide-icon>\n </button>\n <button\n type=\"button\"\n class=\"ToolBtn ToolBtn--ul\"\n (mousedown)=\"onToolbarMouseDown($event)\"\n (click)=\"exec('ul'); $event.preventDefault()\"\n [disabled]=\"isDisabled\"\n aria-label=\"Lista con vi\u00F1etas\"\n >\n <lucide-icon name=\"list\" aria-hidden=\"true\"></lucide-icon>\n </button>\n <span class=\"ToolSep\"></span>\n <button\n type=\"button\"\n class=\"ToolBtn ToolBtn--align\"\n (mousedown)=\"onToolbarMouseDown($event)\"\n [class.Active]=\"isAlignLeft\"\n (click)=\"exec('align-left'); $event.preventDefault()\"\n [disabled]=\"isDisabled\"\n aria-label=\"Alinear a la izquierda\"\n >\n <lucide-icon name=\"text-align-start\" aria-hidden=\"true\"></lucide-icon>\n </button>\n <button\n type=\"button\"\n class=\"ToolBtn ToolBtn--align\"\n (mousedown)=\"onToolbarMouseDown($event)\"\n [class.Active]=\"isAlignCenter\"\n (click)=\"exec('align-center'); $event.preventDefault()\"\n [disabled]=\"isDisabled\"\n aria-label=\"Centrar\"\n >\n <lucide-icon name=\"text-align-center\" aria-hidden=\"true\"></lucide-icon>\n </button>\n <button\n type=\"button\"\n class=\"ToolBtn ToolBtn--align\"\n (mousedown)=\"onToolbarMouseDown($event)\"\n [class.Active]=\"isAlignRight\"\n (click)=\"exec('align-right'); $event.preventDefault()\"\n [disabled]=\"isDisabled\"\n aria-label=\"Alinear a la derecha\"\n >\n <lucide-icon name=\"text-align-end\" aria-hidden=\"true\"></lucide-icon>\n </button>\n <button\n type=\"button\"\n class=\"ToolBtn ToolBtn--align\"\n (mousedown)=\"onToolbarMouseDown($event)\"\n [class.Active]=\"isAlignJustify\"\n (click)=\"exec('align-justify'); $event.preventDefault()\"\n [disabled]=\"isDisabled\"\n aria-label=\"Justificar\"\n >\n <lucide-icon name=\"text-align-justify\" aria-hidden=\"true\"></lucide-icon>\n </button>\n </div>\n <input #imageInput type=\"file\" accept=\"image/*\" hidden (change)=\"onImageSelected($event)\" />\n\n <div\n class=\"LexicalRoot\"\n [class.Disabled]=\"isDisabled\"\n (click)=\"manualClick($event)\"\n >\n <!-- Overlays flotantes (NO se guardan en el HTML del editor) -->\n <div\n *ngIf=\"imageOverlayVisible\"\n #imageOverlay\n class=\"FloatingOverlay FloatingOverlay--image\"\n [style.top.px]=\"imageOverlayTop\"\n [style.left.px]=\"imageOverlayLeft\"\n (pointerdown)=\"$event.stopPropagation()\"\n (click)=\"$event.stopPropagation()\"\n >\n <button\n type=\"button\"\n class=\"FloatingBtn\"\n (mousedown)=\"onToolbarMouseDown($event)\"\n (click)=\"exec('image-move-up'); $event.preventDefault()\"\n [disabled]=\"isDisabled\"\n aria-label=\"Mover imagen arriba\"\n >\n <lucide-icon name=\"arrow-up\" aria-hidden=\"true\"></lucide-icon>\n </button>\n <button\n type=\"button\"\n class=\"FloatingBtn\"\n (mousedown)=\"onToolbarMouseDown($event)\"\n (click)=\"exec('image-move-down'); $event.preventDefault()\"\n [disabled]=\"isDisabled\"\n aria-label=\"Mover imagen abajo\"\n >\n <lucide-icon name=\"arrow-down\" aria-hidden=\"true\"></lucide-icon>\n </button>\n <span class=\"FloatingHandle\" (pointerdown)=\"onImageResizeStart($event)\" aria-label=\"Resize imagen\"></span>\n </div>\n\n <div\n *ngIf=\"tableOverlayVisible\"\n #tableOverlay\n class=\"FloatingOverlay FloatingOverlay--table\"\n [style.top.px]=\"tableOverlayTop\"\n [style.left.px]=\"tableOverlayLeft\"\n [style.maxHeight.px]=\"tableOverlayMaxHeight\"\n (pointerdown)=\"$event.stopPropagation()\"\n (click)=\"$event.stopPropagation()\"\n >\n <div class=\"ContextMenu\">\n <div class=\"ContextMenuTitle\">Tabla</div>\n\n <div class=\"ContextMenuSection\">\n <div class=\"ContextMenuLabel\">Insertar</div>\n <button\n type=\"button\"\n class=\"ContextMenuItem\"\n (mousedown)=\"onToolbarMouseDown($event)\"\n (click)=\"exec('table-row-before'); $event.preventDefault()\"\n [disabled]=\"isDisabled\"\n >\n <lucide-icon name=\"arrow-up\" aria-hidden=\"true\"></lucide-icon>\n <span>Fila arriba</span>\n </button>\n <button\n type=\"button\"\n class=\"ContextMenuItem\"\n (mousedown)=\"onToolbarMouseDown($event)\"\n (click)=\"exec('table-row-after'); $event.preventDefault()\"\n [disabled]=\"isDisabled\"\n >\n <lucide-icon name=\"arrow-down\" aria-hidden=\"true\"></lucide-icon>\n <span>Fila abajo</span>\n </button>\n <button\n type=\"button\"\n class=\"ContextMenuItem\"\n (mousedown)=\"onToolbarMouseDown($event)\"\n (click)=\"exec('table-col-before'); $event.preventDefault()\"\n [disabled]=\"isDisabled\"\n >\n <lucide-icon name=\"arrow-left\" aria-hidden=\"true\"></lucide-icon>\n <span>Columna izquierda</span>\n </button>\n <button\n type=\"button\"\n class=\"ContextMenuItem\"\n (mousedown)=\"onToolbarMouseDown($event)\"\n (click)=\"exec('table-col-after'); $event.preventDefault()\"\n [disabled]=\"isDisabled\"\n >\n <lucide-icon name=\"arrow-right\" aria-hidden=\"true\"></lucide-icon>\n <span>Columna derecha</span>\n </button>\n </div>\n\n <div class=\"ContextMenuDivider\"></div>\n\n <div class=\"ContextMenuSection\">\n <div class=\"ContextMenuLabel\">Eliminar</div>\n <button\n type=\"button\"\n class=\"ContextMenuItem ContextMenuItem--danger\"\n (mousedown)=\"onToolbarMouseDown($event)\"\n (click)=\"exec('table-row-delete'); $event.preventDefault()\"\n [disabled]=\"isDisabled\"\n >\n <lucide-icon name=\"minus\" aria-hidden=\"true\"></lucide-icon>\n <span>Eliminar fila</span>\n </button>\n <button\n type=\"button\"\n class=\"ContextMenuItem ContextMenuItem--danger\"\n (mousedown)=\"onToolbarMouseDown($event)\"\n (click)=\"exec('table-col-delete'); $event.preventDefault()\"\n [disabled]=\"isDisabled\"\n >\n <lucide-icon name=\"minus\" aria-hidden=\"true\"></lucide-icon>\n <span>Eliminar columna</span>\n </button>\n <button\n type=\"button\"\n class=\"ContextMenuItem ContextMenuItem--danger\"\n (mousedown)=\"onToolbarMouseDown($event)\"\n (click)=\"exec('table-delete'); $event.preventDefault()\"\n [disabled]=\"isDisabled\"\n >\n <lucide-icon class=\"Icon--trash\" name=\"trash\" aria-hidden=\"true\"></lucide-icon>\n <span>Eliminar tabla</span>\n </button>\n </div>\n </div>\n </div>\n\n <div class=\"LexicalPlaceholder\" *ngIf=\"showPlaceholder\">{{ placeholder }}</div>\n <div\n #contentEditable\n class=\"LexicalContent\"\n contenteditable=\"true\"\n spellcheck=\"true\"\n (blur)=\"onEditorBlur($event)\"\n (input)=\"onInput()\"\n ></div>\n </div>\n </ng-container>\n\n <!-- En SSR: placeholder para mantener el layout (el campo no afecta SEO) -->\n <div *ngIf=\"!isBrowser\" class=\"EditorPlaceholder\" [class.Disabled]=\"isDisabled\">\n <span class=\"EditorPlaceholderText\">Editor de texto enriquecido (carga en el navegador)</span>\n </div>\n</div>\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex;flex-direction:column;width:100%;height:max-content;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);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(--color-input-border, #d4d4d4);border-radius:12px;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .EditorWrapper{min-height:150px;border-radius:var(--radius-md);border:solid 1px transparent;background-color:var(--color-input-bg);border-radius:var(--radius-lg);display:flex;flex-direction:column;gap:0;padding:4px;user-select:text!important;-webkit-user-select:text!important;-moz-user-select:text!important;-ms-user-select:text!important}:host .EditorWrapper:focus-within{border:solid 1px var(--color-input-border-focus)}:host .EditorWrapper.Disabled{pointer-events:none;opacity:.5;-webkit-user-select:none!important;user-select:none!important}:host .EditorWrapper .Toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:0;padding-bottom:8px;width:100%;overflow:hidden;overflow-x:auto;-webkit-user-select:none;user-select:none}:host .EditorWrapper .Toolbar.Disabled{opacity:.7}:host .EditorWrapper .Toolbar .ToolSep{width:1px;height:20px;background:var(--color-input-border);margin:0 4px}:host .EditorWrapper .Toolbar .ToolBtn{border:none;border-radius:var(--radius-lg);background:transparent;color:var(--color-fg);padding:6px 10px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;min-width:36px;transition:background-color .12s ease,transform .12s ease,box-shadow .12s ease,color .12s ease}:host .EditorWrapper .Toolbar .ToolBtn:hover{background-color:var(--color-surface);transform:translateY(-1px);box-shadow:0 6px 14px var(--color-shadow)}:host .EditorWrapper .Toolbar .ToolBtn.Active{background:linear-gradient(135deg,var(--color-brand-soft, var(--color-info-bg)),var(--color-info-bg));color:var(--color-fg-brand);box-shadow:0 6px 14px var(--color-shadow)}:host .EditorWrapper .Toolbar .ToolBtn:disabled{cursor:not-allowed;opacity:.6}:host .EditorWrapper .Toolbar .ToolBtn i,:host .EditorWrapper .Toolbar .ToolBtn lucide-icon{font-size:14px;line-height:1}:host .EditorWrapper .Toolbar .ToolBtn i lucide-icon .lucide-svg,:host .EditorWrapper .Toolbar .ToolBtn lucide-icon lucide-icon .lucide-svg{width:14px;height:14px}:host .EditorWrapper .Toolbar .ToolBtn--undo{color:var(--color-brand)}:host .EditorWrapper .Toolbar .ToolBtn--undo:hover{color:var(--color-brand)}:host .EditorWrapper .Toolbar .ToolBtn--undo.Active{background:linear-gradient(135deg,color-mix(in srgb,var(--color-brand) 22%,transparent),color-mix(in srgb,var(--color-info-fg, var(--color-brand)) 16%,transparent));color:var(--color-brand)}:host .EditorWrapper .Toolbar .ToolBtn--color-danger-fgo{color:var(--color-brand)}:host .EditorWrapper .Toolbar .ToolBtn--color-danger-fgo:hover{color:var(--color-brand)}:host .EditorWrapper .Toolbar .ToolBtn--color-danger-fgo.Active{background:linear-gradient(135deg,color-mix(in srgb,var(--color-brand) 22%,transparent),color-mix(in srgb,var(--color-brand-strong, var(--color-brand)) 16%,transparent));color:var(--color-brand)}:host .EditorWrapper .Toolbar .ToolBtn--bold{color:var(--color-brand-strong, var(--color-brand))}:host .EditorWrapper .Toolbar .ToolBtn--bold:hover{color:var(--color-brand-strong, var(--color-brand))}:host .EditorWrapper .Toolbar .ToolBtn--bold.Active{background:linear-gradient(135deg,color-mix(in srgb,var(--color-brand-strong, var(--color-brand)) 22%,transparent),color-mix(in srgb,var(--color-brand) 16%,transparent));color:var(--color-brand-strong, var(--color-brand))}:host .EditorWrapper .Toolbar .ToolBtn--italic{color:var(--color-accent, var(--color-brand))}:host .EditorWrapper .Toolbar .ToolBtn--italic:hover{color:var(--color-accent, var(--color-brand))}:host .EditorWrapper .Toolbar .ToolBtn--italic.Active{background:linear-gradient(135deg,color-mix(in srgb,var(--color-accent, var(--color-brand)) 22%,transparent),color-mix(in srgb,var(--color-brand-strong, var(--color-brand)) 16%,transparent));color:var(--color-accent, var(--color-brand))}:host .EditorWrapper .Toolbar .ToolBtn--underline{color:var(--color-info-fg, var(--color-brand))}:host .EditorWrapper .Toolbar .ToolBtn--underline:hover{color:var(--color-info-fg, var(--color-brand))}:host .EditorWrapper .Toolbar .ToolBtn--underline.Active{background:linear-gradient(135deg,color-mix(in srgb,var(--color-info-fg, var(--color-brand)) 22%,transparent),color-mix(in srgb,var(--color-brand) 16%,transparent));color:var(--color-info-fg, var(--color-brand))}:host .EditorWrapper .Toolbar .ToolBtn--strike{color:var(--color-danger-fg)}:host .EditorWrapper .Toolbar .ToolBtn--strike:hover{color:var(--color-danger-fg)}:host .EditorWrapper .Toolbar .ToolBtn--strike.Active{background:linear-gradient(135deg,color-mix(in srgb,var(--color-danger-fg) 22%,transparent),color-mix(in srgb,var(--color-warning-fg) 16%,transparent));color:var(--color-danger-fg)}:host .EditorWrapper .Toolbar .ToolBtn--h1{color:var(--color-warning-fg)}:host .EditorWrapper .Toolbar .ToolBtn--h1:hover{color:var(--color-warning-fg)}:host .EditorWrapper .Toolbar .ToolBtn--h1.Active{background:linear-gradient(135deg,color-mix(in srgb,var(--color-warning-fg) 22%,transparent),color-mix(in srgb,var(--color-warning-fg) 16%,transparent));color:var(--color-warning-fg)}:host .EditorWrapper .Toolbar .ToolBtn--link{color:var(--color-brand)}:host .EditorWrapper .Toolbar .ToolBtn--link:hover{color:var(--color-brand)}:host .EditorWrapper .Toolbar .ToolBtn--link.Active{background:linear-gradient(135deg,color-mix(in srgb,var(--color-brand) 22%,transparent),color-mix(in srgb,var(--color-info-fg, var(--color-brand)) 16%,transparent));color:var(--color-brand)}:host .EditorWrapper .Toolbar .ToolBtn--image{color:var(--color-success-fg)}:host .EditorWrapper .Toolbar .ToolBtn--image:hover{color:var(--color-success-fg)}:host .EditorWrapper .Toolbar .ToolBtn--image.Active{background:linear-gradient(135deg,color-mix(in srgb,var(--color-success-fg) 22%,transparent),color-mix(in srgb,var(--color-info-fg, var(--color-brand)) 16%,transparent));color:var(--color-success-fg)}:host .EditorWrapper .Toolbar .ToolBtn--table{color:var(--color-warning-fg)}:host .EditorWrapper .Toolbar .ToolBtn--table:hover{color:var(--color-warning-fg)}:host .EditorWrapper .Toolbar .ToolBtn--table.Active{background:linear-gradient(135deg,color-mix(in srgb,var(--color-warning-fg) 22%,transparent),color-mix(in srgb,var(--color-warning-fg) 16%,transparent));color:var(--color-warning-fg)}:host .EditorWrapper .Toolbar .ToolBtn--ol{color:var(--color-brand)}:host .EditorWrapper .Toolbar .ToolBtn--ol:hover{color:var(--color-brand)}:host .EditorWrapper .Toolbar .ToolBtn--ol.Active{background:linear-gradient(135deg,color-mix(in srgb,var(--color-brand) 22%,transparent),color-mix(in srgb,var(--color-brand-strong, var(--color-brand)) 16%,transparent));color:var(--color-brand)}:host .EditorWrapper .Toolbar .ToolBtn--ul{color:var(--color-brand)}:host .EditorWrapper .Toolbar .ToolBtn--ul:hover{color:var(--color-brand)}:host .EditorWrapper .Toolbar .ToolBtn--ul.Active{background:linear-gradient(135deg,color-mix(in srgb,var(--color-brand) 22%,transparent),color-mix(in srgb,var(--color-brand-strong, var(--color-brand)) 16%,transparent));color:var(--color-brand)}:host .EditorWrapper .Toolbar .ToolBtn--align{color:var(--color-info-fg, var(--color-brand))}:host .EditorWrapper .Toolbar .ToolBtn--align:hover{color:var(--color-info-fg, var(--color-brand))}:host .EditorWrapper .Toolbar .ToolBtn--align.Active{background:linear-gradient(135deg,color-mix(in srgb,var(--color-info-fg, var(--color-brand)) 22%,transparent),color-mix(in srgb,var(--color-brand) 16%,transparent));color:var(--color-info-fg, var(--color-brand))}:host .EditorWrapper .Toolbar .ToolLabel{font-weight:400}:host .EditorWrapper .EditorPlaceholder{width:100%;min-height:140px;padding:.75rem 1rem;border-radius:var(--radius-lg);background:transparent;display:flex;align-items:center;justify-content:center}:host .EditorWrapper .EditorPlaceholder.Disabled{opacity:.6}:host .EditorWrapper .EditorPlaceholder .EditorPlaceholderText{font-size:14px;color:var(--color-fg-muted)}:host .EditorWrapper .LexicalRoot{position:relative;border-radius:var(--radius-lg);background-color:var(--color-surface);min-height:200px;overflow:hidden}:host .EditorWrapper .LexicalRoot.Disabled{opacity:.95}:host .EditorWrapper .LexicalRoot .LexicalPlaceholder{position:absolute;top:12px;left:16px;right:16px;color:var(--color-fg-muted);pointer-events:none;font-size:14px}:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent{background-color:transparent;min-height:200px;outline:none;font-size:14px;line-height:1.5;padding:.75rem 1rem;color:var(--color-fg);font-family:Inter,sans-serif;user-select:text!important;-webkit-user-select:text!important;-moz-user-select:text!important;-ms-user-select:text!important;pointer-events:auto!important;cursor:text!important}:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-paragraph{margin:.5em 0;font-size:14px}:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-heading-h1,:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-heading-h2,:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-heading-h3,:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-heading-h4,:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-heading-h5,:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-heading-h6{font-weight:700;display:block}:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-heading-h1{font-size:1.4rem!important;text-transform:uppercase}:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-heading-h2{font-size:1.5rem!important}:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-heading-h3{font-size:1.5rem}:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-heading-h4{font-size:1.25rem}:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-heading-h5{font-size:1.125rem}:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-heading-h6{font-size:1rem}:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-text-bold{font-weight:700}:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-text-italic{font-style:italic}:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-text-underline{text-decoration:underline;text-underline-offset:2px}:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-text-strikethrough{text-decoration:line-through}:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-text-underlineStrikethrough{text-decoration:underline line-through;text-underline-offset:2px}:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-list-ol,:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-list-ul{margin:.5em 0 .5em 1.5em;padding-left:1.25rem;list-style-position:outside}:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-list-ol{list-style-type:decimal}:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-list-ul{list-style-type:disc}:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-listitem{margin:.25em 0}:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-link{color:var(--color-fg-link);text-decoration:underline}:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-image{display:inline-block;position:relative;max-width:100%;border-radius:var(--radius-lg);outline:1px solid var(--color-shadow);background:var(--color-surface);padding:6px;margin:.5rem 0}:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-image img{display:block;max-width:100%;height:auto;border-radius:var(--radius-md)}:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-table{border-collapse:collapse;width:100%;margin:.75rem 0;table-layout:fixed}:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-table-cell,:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-table-cell-header{border:1px solid var(--color-border);padding:.5rem;vertical-align:top}:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-table-cell-header{background:var(--color-surface-muted, var(--color-shadow));font-weight:700}:host .EditorWrapper .LexicalRoot .FloatingOverlay{position:absolute;z-index:50;display:flex;flex-direction:column;align-items:center;gap:6px;padding:6px;border-radius:var(--radius-lg);background:var(--color-surface);border:1px solid var(--color-border);pointer-events:auto;overflow:hidden;overflow-y:auto}:host .EditorWrapper .LexicalRoot .FloatingBtn{border:none;border-radius:var(--radius-lg);background:transparent;cursor:pointer;padding:6px 10px;color:var(--color-brand);transition:background-color .12s ease,transform .12s ease}:host .EditorWrapper .LexicalRoot .FloatingBtn:hover{background:var(--color-brand-soft, var(--color-info-bg));transform:translateY(-1px)}:host .EditorWrapper .LexicalRoot .FloatingBtn:disabled{opacity:.6;cursor:not-allowed}:host .EditorWrapper .LexicalRoot .FloatingBtn i,:host .EditorWrapper .LexicalRoot .FloatingBtn lucide-icon{font-size:14px}:host .EditorWrapper .LexicalRoot .FloatingBtn i lucide-icon .lucide-svg,:host .EditorWrapper .LexicalRoot .FloatingBtn lucide-icon lucide-icon .lucide-svg{width:14px;height:14px}:host .EditorWrapper .LexicalRoot .FloatingHandle{width:14px;height:14px;border-radius:var(--radius-md);background:linear-gradient(135deg,var(--color-brand),var(--color-info-fg, var(--color-brand)));box-shadow:0 6px 16px var(--color-shadow);border:2px solid var(--color-fg-on-brand, var(--color-surface));cursor:nwse-resize;-webkit-user-select:none;user-select:none;touch-action:none}:host .EditorWrapper .LexicalRoot .ContextMenu{display:flex;flex-direction:column;gap:8px;min-width:220px;padding:6px;max-height:100%;overflow-y:auto;overscroll-behavior:contain}:host .EditorWrapper .LexicalRoot .ContextMenuTitle{font-weight:400;color:var(--color-fg)}:host .EditorWrapper .LexicalRoot .ContextMenuSection{display:flex;flex-direction:column}:host .EditorWrapper .LexicalRoot .ContextMenuLabel{font-size:14px;text-transform:uppercase;letter-spacing:.04em;color:var(--color-fg-muted);padding:0 2px}:host .EditorWrapper .LexicalRoot .ContextMenuDivider{height:1px;background:var(--color-shadow);margin:2px}:host .EditorWrapper .LexicalRoot .ContextMenuItem{display:flex;align-items:center;gap:10px;width:100%;border:none;background:transparent;border-radius:var(--radius-lg);padding:2px;cursor:pointer;color:var(--color-fg)}:host .EditorWrapper .LexicalRoot .ContextMenuItem:hover{background:var(--color-brand-soft, var(--color-info-bg))}:host .EditorWrapper .LexicalRoot .ContextMenuItem:disabled{opacity:.55;cursor:not-allowed}:host .EditorWrapper .LexicalRoot .ContextMenuItem i{width:18px;text-align:center;color:var(--color-brand)}:host .EditorWrapper .LexicalRoot .ContextMenuItem span{font-weight:400}:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger:hover{background:var(--color-danger-bg)}:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger i{color:var(--color-danger-fg)}:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger *{user-select:text!important;-webkit-user-select:text!important;-moz-user-select:text!important;-ms-user-select:text!important}:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger img{user-select:none!important;-webkit-user-select:none!important;cursor:default!important}:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger h1,:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger h2,:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger h3,:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger h4,:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger h5,:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger h6{margin:.5em 0 .25em;font-weight:700;line-height:1.2;display:block}:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger h1{font-size:2rem!important;line-height:1.15!important;text-transform:uppercase}:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger h2{font-size:1.5rem!important}:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger h3{font-size:1.5rem}:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger h4{font-size:1.25rem}:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger h5{font-size:1.125rem}:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger h6{font-size:1rem}:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger p{margin:.5em 0;font-size:14px}:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger ul,:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger ol{margin:.5em 0 .5em 1.5em;padding-left:1.25rem;list-style-type:initial;list-style-position:outside}:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger li{margin:.25em 0}:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger blockquote{margin:1em 0;padding-left:1rem;border-left:4px solid var(--color-border);font-style:italic;color:var(--color-fg-muted)}:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger pre{background:var(--color-surface-muted, var(--color-surface));padding:1rem;border-radius:var(--radius-md);font-family:Courier New,monospace;overflow-x:auto;font-size:14px}:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger code{font-family:Courier New,monospace;background:var(--color-surface-muted, var(--color-surface));padding:.2em .4em;border-radius:var(--radius-sm);font-size:14px}:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger a{color:var(--color-fg-link);text-decoration:underline}:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger strong{font-weight:600}:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger em{font-style:italic}:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger u{text-decoration:underline;text-underline-offset:2px}:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger span[style*=\"text-decoration: underline\"],:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger span[style*=\"text-decoration:underline\"]{text-decoration:underline!important;text-underline-offset:2px}:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger span[style*=\"text-decoration: line-through\"],:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger span[style*=\"text-decoration:line-through\"]{text-decoration:line-through!important}:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger s,:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger strike,:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger del{text-decoration:line-through;text-decoration-thickness:from-font}:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger img{max-width:100%;height:auto}:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger hr{border:none;border-top:1px solid var(--color-border);margin:1.5em 0}\n"], dependencies: [{ kind: "component", type: LucideIconComponent, selector: "lucide-icon", inputs: ["name", "size", "spin", "filled"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: DragScrollDirective, selector: "[dragScroll]", inputs: ["dragScroll"] }] });
9495
+ ], viewQueries: [{ propertyName: "contentEditable", first: true, predicate: ["contentEditable"], descendants: true }, { propertyName: "imageInput", first: true, predicate: ["imageInput"], descendants: true }, { propertyName: "imageOverlay", first: true, predicate: ["imageOverlay"], descendants: true }, { propertyName: "tableOverlay", first: true, predicate: ["tableOverlay"], descendants: true }], ngImport: i0, template: "<p\n *ngIf=\"label\"\n class=\"Label\"\n [class.Disabled]=\"isDisabled\"\n (click)=\"manualClick($event); $event.stopPropagation()\"\n>\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\n</p>\n\n<p\n *ngIf=\"description\"\n class=\"Description\"\n [class.Disabled]=\"isDisabled\"\n (click)=\"manualClick($event); $event.stopPropagation()\"\n>\n {{ description }}\n</p>\n\n<div class=\"EditorWrapper\" [class.Disabled]=\"isDisabled\">\n <!-- Solo en el navegador: Lexical (en SSR no se crea editor para evitar \"document is not defined\") -->\n <ng-container *ngIf=\"isBrowser\">\n <div class=\"Toolbar\" [class.Disabled]=\"isDisabled\" (click)=\"$event.stopPropagation()\" dragScroll=\"horizontal\">\n <button\n type=\"button\"\n class=\"ToolBtn ToolBtn--undo\"\n (mousedown)=\"onToolbarMouseDown($event)\"\n (click)=\"exec('undo'); $event.preventDefault()\"\n [disabled]=\"isDisabled || !canUndo\"\n aria-label=\"Deshacer\"\n >\n <lucide-icon name=\"rotate-ccw\" aria-hidden=\"true\"></lucide-icon>\n </button>\n <button\n type=\"button\"\n class=\"ToolBtn ToolBtn--color-danger-fgo\"\n (mousedown)=\"onToolbarMouseDown($event)\"\n (click)=\"exec('redo'); $event.preventDefault()\"\n [disabled]=\"isDisabled || !canRedo\"\n aria-label=\"Rehacer\"\n >\n <lucide-icon name=\"rotate-cw\" aria-hidden=\"true\"></lucide-icon>\n </button>\n <span class=\"ToolSep\"></span>\n\n <button\n type=\"button\"\n class=\"ToolBtn ToolBtn--bold\"\n (mousedown)=\"onToolbarMouseDown($event)\"\n [class.Active]=\"isBold\"\n (click)=\"exec('bold'); $event.preventDefault()\"\n [disabled]=\"isDisabled\"\n aria-label=\"Negrita\"\n >\n <lucide-icon name=\"bold\" aria-hidden=\"true\"></lucide-icon>\n </button>\n <button\n type=\"button\"\n class=\"ToolBtn ToolBtn--italic\"\n (mousedown)=\"onToolbarMouseDown($event)\"\n [class.Active]=\"isItalic\"\n (click)=\"exec('italic'); $event.preventDefault()\"\n [disabled]=\"isDisabled\"\n aria-label=\"Cursiva\"\n >\n <lucide-icon name=\"italic\" aria-hidden=\"true\"></lucide-icon>\n </button>\n <button\n type=\"button\"\n class=\"ToolBtn ToolBtn--underline\"\n (mousedown)=\"onToolbarMouseDown($event)\"\n [class.Active]=\"isUnderline\"\n (click)=\"exec('underline'); $event.preventDefault()\"\n [disabled]=\"isDisabled\"\n aria-label=\"Subrayado\"\n >\n <lucide-icon name=\"underline\" aria-hidden=\"true\"></lucide-icon>\n </button>\n <button\n type=\"button\"\n class=\"ToolBtn ToolBtn--strike\"\n (mousedown)=\"onToolbarMouseDown($event)\"\n [class.Active]=\"isStrikethrough\"\n (click)=\"exec('strikethrough'); $event.preventDefault()\"\n [disabled]=\"isDisabled\"\n aria-label=\"Tachado\"\n >\n <lucide-icon name=\"strikethrough\" aria-hidden=\"true\"></lucide-icon>\n </button>\n <span class=\"ToolSep\"></span>\n\n <button\n type=\"button\"\n class=\"ToolBtn ToolBtn--h1\"\n (mousedown)=\"onToolbarMouseDown($event)\"\n [class.Active]=\"isH1\"\n (click)=\"exec('h1'); $event.preventDefault()\"\n [disabled]=\"isDisabled\"\n aria-label=\"T\u00EDtulo H1\"\n >\n H1\n </button>\n <button\n type=\"button\"\n class=\"ToolBtn ToolBtn--link\"\n (mousedown)=\"onToolbarMouseDown($event)\"\n [class.Active]=\"isLink\"\n (click)=\"exec('link'); $event.preventDefault()\"\n [disabled]=\"isDisabled\"\n aria-label=\"Insertar o quitar link\"\n >\n <lucide-icon name=\"link\" aria-hidden=\"true\"></lucide-icon>\n </button>\n <button\n type=\"button\"\n class=\"ToolBtn ToolBtn--image\"\n (mousedown)=\"onToolbarMouseDown($event)\"\n (click)=\"exec('image'); $event.preventDefault()\"\n [disabled]=\"isDisabled\"\n aria-label=\"Insertar imagen\"\n >\n <lucide-icon name=\"image\" aria-hidden=\"true\"></lucide-icon>\n </button>\n <button\n type=\"button\"\n class=\"ToolBtn ToolBtn--table\"\n (mousedown)=\"onToolbarMouseDown($event)\"\n (click)=\"exec('table'); $event.preventDefault()\"\n [disabled]=\"isDisabled\"\n aria-label=\"Insertar tabla\"\n >\n <lucide-icon name=\"table\" aria-hidden=\"true\"></lucide-icon>\n </button>\n <span class=\"ToolSep\"></span>\n <button\n type=\"button\"\n class=\"ToolBtn ToolBtn--ol\"\n (mousedown)=\"onToolbarMouseDown($event)\"\n (click)=\"exec('ol'); $event.preventDefault()\"\n [disabled]=\"isDisabled\"\n aria-label=\"Lista numerada\"\n >\n <lucide-icon name=\"list-ordered\" aria-hidden=\"true\"></lucide-icon>\n </button>\n <button\n type=\"button\"\n class=\"ToolBtn ToolBtn--ul\"\n (mousedown)=\"onToolbarMouseDown($event)\"\n (click)=\"exec('ul'); $event.preventDefault()\"\n [disabled]=\"isDisabled\"\n aria-label=\"Lista con vi\u00F1etas\"\n >\n <lucide-icon name=\"list\" aria-hidden=\"true\"></lucide-icon>\n </button>\n <span class=\"ToolSep\"></span>\n <button\n type=\"button\"\n class=\"ToolBtn ToolBtn--align\"\n (mousedown)=\"onToolbarMouseDown($event)\"\n [class.Active]=\"isAlignLeft\"\n (click)=\"exec('align-left'); $event.preventDefault()\"\n [disabled]=\"isDisabled\"\n aria-label=\"Alinear a la izquierda\"\n >\n <lucide-icon name=\"text-align-start\" aria-hidden=\"true\"></lucide-icon>\n </button>\n <button\n type=\"button\"\n class=\"ToolBtn ToolBtn--align\"\n (mousedown)=\"onToolbarMouseDown($event)\"\n [class.Active]=\"isAlignCenter\"\n (click)=\"exec('align-center'); $event.preventDefault()\"\n [disabled]=\"isDisabled\"\n aria-label=\"Centrar\"\n >\n <lucide-icon name=\"text-align-center\" aria-hidden=\"true\"></lucide-icon>\n </button>\n <button\n type=\"button\"\n class=\"ToolBtn ToolBtn--align\"\n (mousedown)=\"onToolbarMouseDown($event)\"\n [class.Active]=\"isAlignRight\"\n (click)=\"exec('align-right'); $event.preventDefault()\"\n [disabled]=\"isDisabled\"\n aria-label=\"Alinear a la derecha\"\n >\n <lucide-icon name=\"text-align-end\" aria-hidden=\"true\"></lucide-icon>\n </button>\n <button\n type=\"button\"\n class=\"ToolBtn ToolBtn--align\"\n (mousedown)=\"onToolbarMouseDown($event)\"\n [class.Active]=\"isAlignJustify\"\n (click)=\"exec('align-justify'); $event.preventDefault()\"\n [disabled]=\"isDisabled\"\n aria-label=\"Justificar\"\n >\n <lucide-icon name=\"text-align-justify\" aria-hidden=\"true\"></lucide-icon>\n </button>\n </div>\n <input #imageInput type=\"file\" accept=\"image/*\" hidden (change)=\"onImageSelected($event)\" />\n\n <div\n class=\"LexicalRoot\"\n [class.Disabled]=\"isDisabled\"\n (click)=\"manualClick($event)\"\n >\n <!-- Overlays flotantes (NO se guardan en el HTML del editor) -->\n <div\n *ngIf=\"imageOverlayVisible\"\n #imageOverlay\n class=\"FloatingOverlay FloatingOverlay--image\"\n [style.top.px]=\"imageOverlayTop\"\n [style.left.px]=\"imageOverlayLeft\"\n (pointerdown)=\"$event.stopPropagation()\"\n (click)=\"$event.stopPropagation()\"\n >\n <button\n type=\"button\"\n class=\"FloatingBtn\"\n (mousedown)=\"onToolbarMouseDown($event)\"\n (click)=\"exec('image-move-up'); $event.preventDefault()\"\n [disabled]=\"isDisabled\"\n aria-label=\"Mover imagen arriba\"\n >\n <lucide-icon name=\"arrow-up\" aria-hidden=\"true\"></lucide-icon>\n </button>\n <button\n type=\"button\"\n class=\"FloatingBtn\"\n (mousedown)=\"onToolbarMouseDown($event)\"\n (click)=\"exec('image-move-down'); $event.preventDefault()\"\n [disabled]=\"isDisabled\"\n aria-label=\"Mover imagen abajo\"\n >\n <lucide-icon name=\"arrow-down\" aria-hidden=\"true\"></lucide-icon>\n </button>\n <span class=\"FloatingHandle\" (pointerdown)=\"onImageResizeStart($event)\" aria-label=\"Resize imagen\"></span>\n </div>\n\n <div\n *ngIf=\"tableOverlayVisible\"\n #tableOverlay\n class=\"FloatingOverlay FloatingOverlay--table\"\n [style.top.px]=\"tableOverlayTop\"\n [style.left.px]=\"tableOverlayLeft\"\n [style.maxHeight.px]=\"tableOverlayMaxHeight\"\n (pointerdown)=\"$event.stopPropagation()\"\n (click)=\"$event.stopPropagation()\"\n >\n <div class=\"ContextMenu\">\n <div class=\"ContextMenuTitle\">Tabla</div>\n\n <div class=\"ContextMenuSection\">\n <div class=\"ContextMenuLabel\">Insertar</div>\n <button\n type=\"button\"\n class=\"ContextMenuItem\"\n (mousedown)=\"onToolbarMouseDown($event)\"\n (click)=\"exec('table-row-before'); $event.preventDefault()\"\n [disabled]=\"isDisabled\"\n >\n <lucide-icon name=\"arrow-up\" aria-hidden=\"true\"></lucide-icon>\n <span>Fila arriba</span>\n </button>\n <button\n type=\"button\"\n class=\"ContextMenuItem\"\n (mousedown)=\"onToolbarMouseDown($event)\"\n (click)=\"exec('table-row-after'); $event.preventDefault()\"\n [disabled]=\"isDisabled\"\n >\n <lucide-icon name=\"arrow-down\" aria-hidden=\"true\"></lucide-icon>\n <span>Fila abajo</span>\n </button>\n <button\n type=\"button\"\n class=\"ContextMenuItem\"\n (mousedown)=\"onToolbarMouseDown($event)\"\n (click)=\"exec('table-col-before'); $event.preventDefault()\"\n [disabled]=\"isDisabled\"\n >\n <lucide-icon name=\"arrow-left\" aria-hidden=\"true\"></lucide-icon>\n <span>Columna izquierda</span>\n </button>\n <button\n type=\"button\"\n class=\"ContextMenuItem\"\n (mousedown)=\"onToolbarMouseDown($event)\"\n (click)=\"exec('table-col-after'); $event.preventDefault()\"\n [disabled]=\"isDisabled\"\n >\n <lucide-icon name=\"arrow-right\" aria-hidden=\"true\"></lucide-icon>\n <span>Columna derecha</span>\n </button>\n </div>\n\n <div class=\"ContextMenuDivider\"></div>\n\n <div class=\"ContextMenuSection\">\n <div class=\"ContextMenuLabel\">Eliminar</div>\n <button\n type=\"button\"\n class=\"ContextMenuItem ContextMenuItem--danger\"\n (mousedown)=\"onToolbarMouseDown($event)\"\n (click)=\"exec('table-row-delete'); $event.preventDefault()\"\n [disabled]=\"isDisabled\"\n >\n <lucide-icon name=\"minus\" aria-hidden=\"true\"></lucide-icon>\n <span>Eliminar fila</span>\n </button>\n <button\n type=\"button\"\n class=\"ContextMenuItem ContextMenuItem--danger\"\n (mousedown)=\"onToolbarMouseDown($event)\"\n (click)=\"exec('table-col-delete'); $event.preventDefault()\"\n [disabled]=\"isDisabled\"\n >\n <lucide-icon name=\"minus\" aria-hidden=\"true\"></lucide-icon>\n <span>Eliminar columna</span>\n </button>\n <button\n type=\"button\"\n class=\"ContextMenuItem ContextMenuItem--danger\"\n (mousedown)=\"onToolbarMouseDown($event)\"\n (click)=\"exec('table-delete'); $event.preventDefault()\"\n [disabled]=\"isDisabled\"\n >\n <lucide-icon class=\"Icon--trash\" name=\"trash\" aria-hidden=\"true\"></lucide-icon>\n <span>Eliminar tabla</span>\n </button>\n </div>\n </div>\n </div>\n\n <div class=\"LexicalPlaceholder\" *ngIf=\"showPlaceholder\">{{ placeholder }}</div>\n <div\n #contentEditable\n class=\"LexicalContent\"\n contenteditable=\"true\"\n spellcheck=\"true\"\n (blur)=\"onEditorBlur($event)\"\n (input)=\"onInput()\"\n ></div>\n </div>\n </ng-container>\n\n <!-- En SSR: placeholder para mantener el layout (el campo no afecta SEO) -->\n <div *ngIf=\"!isBrowser\" class=\"EditorPlaceholder\" [class.Disabled]=\"isDisabled\">\n <span class=\"EditorPlaceholderText\">Editor de texto enriquecido (carga en el navegador)</span>\n </div>\n</div>\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex!important;flex-direction:column!important;width:100%;height:max-content;--radius-none: 0;--radius-xs: 2px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 16px;--radius-full: 9999px;--spacing-xxs: 2px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 16px;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);font-weight:400;width:100%;cursor:pointer;padding:0 3px;margin:0 0 4px;overflow:hidden;word-break:break-all}:host .Entry{display:flex!important;width:100%;height:32px;justify-content:flex-start;align-items:center;border:solid 0 var(--color-input-border, #d4d4d4);border-radius:12px!important;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px!important;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .EditorWrapper{min-height:150px;border:solid 1px transparent;background-color:var(--color-input-bg);border-radius:12px;display:flex;flex-direction:column;gap:0;padding:4px;user-select:text!important;-webkit-user-select:text!important;-moz-user-select:text!important;-ms-user-select:text!important}:host .EditorWrapper:focus-within{border:solid 1px var(--color-input-border-focus)}:host .EditorWrapper.Disabled{pointer-events:none;opacity:.5;-webkit-user-select:none!important;user-select:none!important}:host .EditorWrapper .Toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:0;padding-bottom:8px;width:100%;overflow:hidden;overflow-x:auto;-webkit-user-select:none;user-select:none}:host .EditorWrapper .Toolbar.Disabled{opacity:.7}:host .EditorWrapper .Toolbar .ToolSep{width:1px;height:20px;background:var(--color-input-border);margin:0 4px}:host .EditorWrapper .Toolbar .ToolBtn{border:none;border-radius:12px;background:transparent;color:var(--color-fg);padding:6px 10px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;min-width:36px;transition:background-color .12s ease,transform .12s ease,box-shadow .12s ease,color .12s ease}:host .EditorWrapper .Toolbar .ToolBtn:hover{background-color:var(--color-surface);transform:translateY(-1px);box-shadow:0 6px 14px var(--color-shadow)}:host .EditorWrapper .Toolbar .ToolBtn.Active{background:linear-gradient(135deg,var(--color-brand-soft, var(--color-info-bg)),var(--color-info-bg));color:var(--color-fg-brand);box-shadow:0 6px 14px var(--color-shadow)}:host .EditorWrapper .Toolbar .ToolBtn:disabled{cursor:not-allowed;opacity:.6}:host .EditorWrapper .Toolbar .ToolBtn i,:host .EditorWrapper .Toolbar .ToolBtn lucide-icon{font-size:14px;line-height:1}:host .EditorWrapper .Toolbar .ToolBtn i lucide-icon .lucide-svg,:host .EditorWrapper .Toolbar .ToolBtn lucide-icon lucide-icon .lucide-svg{width:14px;height:14px}:host .EditorWrapper .Toolbar .ToolBtn--undo{color:var(--color-brand)}:host .EditorWrapper .Toolbar .ToolBtn--undo:hover{color:var(--color-brand)}:host .EditorWrapper .Toolbar .ToolBtn--undo.Active{background:linear-gradient(135deg,color-mix(in srgb,var(--color-brand) 22%,transparent),color-mix(in srgb,var(--color-info-fg, var(--color-brand)) 16%,transparent));color:var(--color-brand)}:host .EditorWrapper .Toolbar .ToolBtn--color-danger-fgo{color:var(--color-brand)}:host .EditorWrapper .Toolbar .ToolBtn--color-danger-fgo:hover{color:var(--color-brand)}:host .EditorWrapper .Toolbar .ToolBtn--color-danger-fgo.Active{background:linear-gradient(135deg,color-mix(in srgb,var(--color-brand) 22%,transparent),color-mix(in srgb,var(--color-brand-strong, var(--color-brand)) 16%,transparent));color:var(--color-brand)}:host .EditorWrapper .Toolbar .ToolBtn--bold{color:var(--color-brand-strong, var(--color-brand))}:host .EditorWrapper .Toolbar .ToolBtn--bold:hover{color:var(--color-brand-strong, var(--color-brand))}:host .EditorWrapper .Toolbar .ToolBtn--bold.Active{background:linear-gradient(135deg,color-mix(in srgb,var(--color-brand-strong, var(--color-brand)) 22%,transparent),color-mix(in srgb,var(--color-brand) 16%,transparent));color:var(--color-brand-strong, var(--color-brand))}:host .EditorWrapper .Toolbar .ToolBtn--italic{color:var(--color-accent, var(--color-brand))}:host .EditorWrapper .Toolbar .ToolBtn--italic:hover{color:var(--color-accent, var(--color-brand))}:host .EditorWrapper .Toolbar .ToolBtn--italic.Active{background:linear-gradient(135deg,color-mix(in srgb,var(--color-accent, var(--color-brand)) 22%,transparent),color-mix(in srgb,var(--color-brand-strong, var(--color-brand)) 16%,transparent));color:var(--color-accent, var(--color-brand))}:host .EditorWrapper .Toolbar .ToolBtn--underline{color:var(--color-info-fg, var(--color-brand))}:host .EditorWrapper .Toolbar .ToolBtn--underline:hover{color:var(--color-info-fg, var(--color-brand))}:host .EditorWrapper .Toolbar .ToolBtn--underline.Active{background:linear-gradient(135deg,color-mix(in srgb,var(--color-info-fg, var(--color-brand)) 22%,transparent),color-mix(in srgb,var(--color-brand) 16%,transparent));color:var(--color-info-fg, var(--color-brand))}:host .EditorWrapper .Toolbar .ToolBtn--strike{color:var(--color-danger-fg)}:host .EditorWrapper .Toolbar .ToolBtn--strike:hover{color:var(--color-danger-fg)}:host .EditorWrapper .Toolbar .ToolBtn--strike.Active{background:linear-gradient(135deg,color-mix(in srgb,var(--color-danger-fg) 22%,transparent),color-mix(in srgb,var(--color-warning-fg) 16%,transparent));color:var(--color-danger-fg)}:host .EditorWrapper .Toolbar .ToolBtn--h1{color:var(--color-warning-fg)}:host .EditorWrapper .Toolbar .ToolBtn--h1:hover{color:var(--color-warning-fg)}:host .EditorWrapper .Toolbar .ToolBtn--h1.Active{background:linear-gradient(135deg,color-mix(in srgb,var(--color-warning-fg) 22%,transparent),color-mix(in srgb,var(--color-warning-fg) 16%,transparent));color:var(--color-warning-fg)}:host .EditorWrapper .Toolbar .ToolBtn--link{color:var(--color-brand)}:host .EditorWrapper .Toolbar .ToolBtn--link:hover{color:var(--color-brand)}:host .EditorWrapper .Toolbar .ToolBtn--link.Active{background:linear-gradient(135deg,color-mix(in srgb,var(--color-brand) 22%,transparent),color-mix(in srgb,var(--color-info-fg, var(--color-brand)) 16%,transparent));color:var(--color-brand)}:host .EditorWrapper .Toolbar .ToolBtn--image{color:var(--color-success-fg)}:host .EditorWrapper .Toolbar .ToolBtn--image:hover{color:var(--color-success-fg)}:host .EditorWrapper .Toolbar .ToolBtn--image.Active{background:linear-gradient(135deg,color-mix(in srgb,var(--color-success-fg) 22%,transparent),color-mix(in srgb,var(--color-info-fg, var(--color-brand)) 16%,transparent));color:var(--color-success-fg)}:host .EditorWrapper .Toolbar .ToolBtn--table{color:var(--color-warning-fg)}:host .EditorWrapper .Toolbar .ToolBtn--table:hover{color:var(--color-warning-fg)}:host .EditorWrapper .Toolbar .ToolBtn--table.Active{background:linear-gradient(135deg,color-mix(in srgb,var(--color-warning-fg) 22%,transparent),color-mix(in srgb,var(--color-warning-fg) 16%,transparent));color:var(--color-warning-fg)}:host .EditorWrapper .Toolbar .ToolBtn--ol{color:var(--color-brand)}:host .EditorWrapper .Toolbar .ToolBtn--ol:hover{color:var(--color-brand)}:host .EditorWrapper .Toolbar .ToolBtn--ol.Active{background:linear-gradient(135deg,color-mix(in srgb,var(--color-brand) 22%,transparent),color-mix(in srgb,var(--color-brand-strong, var(--color-brand)) 16%,transparent));color:var(--color-brand)}:host .EditorWrapper .Toolbar .ToolBtn--ul{color:var(--color-brand)}:host .EditorWrapper .Toolbar .ToolBtn--ul:hover{color:var(--color-brand)}:host .EditorWrapper .Toolbar .ToolBtn--ul.Active{background:linear-gradient(135deg,color-mix(in srgb,var(--color-brand) 22%,transparent),color-mix(in srgb,var(--color-brand-strong, var(--color-brand)) 16%,transparent));color:var(--color-brand)}:host .EditorWrapper .Toolbar .ToolBtn--align{color:var(--color-info-fg, var(--color-brand))}:host .EditorWrapper .Toolbar .ToolBtn--align:hover{color:var(--color-info-fg, var(--color-brand))}:host .EditorWrapper .Toolbar .ToolBtn--align.Active{background:linear-gradient(135deg,color-mix(in srgb,var(--color-info-fg, var(--color-brand)) 22%,transparent),color-mix(in srgb,var(--color-brand) 16%,transparent));color:var(--color-info-fg, var(--color-brand))}:host .EditorWrapper .Toolbar .ToolLabel{font-weight:400}:host .EditorWrapper .EditorPlaceholder{width:100%;min-height:140px;padding:.75rem 1rem;border-radius:12px;background:transparent;display:flex;align-items:center;justify-content:center}:host .EditorWrapper .EditorPlaceholder.Disabled{opacity:.6}:host .EditorWrapper .EditorPlaceholder .EditorPlaceholderText{font-size:14px;color:var(--color-fg-muted)}:host .EditorWrapper .LexicalRoot{position:relative;border-radius:12px;background-color:var(--color-surface);min-height:200px;overflow:hidden}:host .EditorWrapper .LexicalRoot.Disabled{opacity:.95}:host .EditorWrapper .LexicalRoot .LexicalPlaceholder{position:absolute;top:12px;left:16px;right:16px;color:var(--color-fg-muted);pointer-events:none;font-size:14px}:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent{background-color:transparent;min-height:200px;outline:none;font-size:14px;line-height:1.5;padding:.75rem 1rem;color:var(--color-fg);font-family:Inter,sans-serif;user-select:text!important;-webkit-user-select:text!important;-moz-user-select:text!important;-ms-user-select:text!important;pointer-events:auto!important;cursor:text!important}:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-paragraph{margin:.5em 0;font-size:14px}:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-heading-h1,:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-heading-h2,:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-heading-h3,:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-heading-h4,:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-heading-h5,:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-heading-h6{font-weight:700;display:block}:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-heading-h1{font-size:1.4rem!important;text-transform:uppercase}:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-heading-h2{font-size:1.5rem!important}:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-heading-h3{font-size:1.5rem}:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-heading-h4{font-size:1.25rem}:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-heading-h5{font-size:1.125rem}:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-heading-h6{font-size:1rem}:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-text-bold{font-weight:700}:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-text-italic{font-style:italic}:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-text-underline{text-decoration:underline;text-underline-offset:2px}:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-text-strikethrough{text-decoration:line-through}:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-text-underlineStrikethrough{text-decoration:underline line-through;text-underline-offset:2px}:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-list-ol,:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-list-ul{margin:.5em 0 .5em 1.5em;padding-left:1.25rem;list-style-position:outside}:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-list-ol{list-style-type:decimal}:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-list-ul{list-style-type:disc}:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-listitem{margin:.25em 0}:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-link{color:var(--color-fg-link);text-decoration:underline}:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-image{display:inline-block;position:relative;max-width:100%;border-radius:12px;outline:1px solid var(--color-shadow);background:var(--color-surface);padding:6px;margin:.5rem 0}:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-image img{display:block;max-width:100%;height:auto;border-radius:8px}:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-table{border-collapse:collapse;width:100%;margin:.75rem 0;table-layout:fixed}:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-table-cell,:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-table-cell-header{border:1px solid var(--color-border);padding:.5rem;vertical-align:top}:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-table-cell-header{background:var(--color-surface-muted, var(--color-shadow));font-weight:700}:host .EditorWrapper .LexicalRoot .FloatingOverlay{position:absolute;z-index:50;display:flex;flex-direction:column;align-items:center;gap:6px;padding:6px;border-radius:12px;background:var(--color-surface);border:1px solid var(--color-border);pointer-events:auto;overflow:hidden;overflow-y:auto}:host .EditorWrapper .LexicalRoot .FloatingBtn{border:none;border-radius:12px;background:transparent;cursor:pointer;padding:6px 10px;color:var(--color-brand);transition:background-color .12s ease,transform .12s ease}:host .EditorWrapper .LexicalRoot .FloatingBtn:hover{background:var(--color-brand-soft, var(--color-info-bg));transform:translateY(-1px)}:host .EditorWrapper .LexicalRoot .FloatingBtn:disabled{opacity:.6;cursor:not-allowed}:host .EditorWrapper .LexicalRoot .FloatingBtn i,:host .EditorWrapper .LexicalRoot .FloatingBtn lucide-icon{font-size:14px}:host .EditorWrapper .LexicalRoot .FloatingBtn i lucide-icon .lucide-svg,:host .EditorWrapper .LexicalRoot .FloatingBtn lucide-icon lucide-icon .lucide-svg{width:14px;height:14px}:host .EditorWrapper .LexicalRoot .FloatingHandle{width:14px;height:14px;border-radius:8px;background:linear-gradient(135deg,var(--color-brand),var(--color-info-fg, var(--color-brand)));box-shadow:0 6px 16px var(--color-shadow);border:2px solid var(--color-fg-on-brand, var(--color-surface));cursor:nwse-resize;-webkit-user-select:none;user-select:none;touch-action:none}:host .EditorWrapper .LexicalRoot .ContextMenu{display:flex;flex-direction:column;gap:8px;min-width:220px;padding:6px;max-height:100%;overflow-y:auto;overscroll-behavior:contain}:host .EditorWrapper .LexicalRoot .ContextMenuTitle{font-weight:400;color:var(--color-fg)}:host .EditorWrapper .LexicalRoot .ContextMenuSection{display:flex;flex-direction:column}:host .EditorWrapper .LexicalRoot .ContextMenuLabel{font-size:14px;text-transform:uppercase;letter-spacing:.04em;color:var(--color-fg-muted);padding:0 2px}:host .EditorWrapper .LexicalRoot .ContextMenuDivider{height:1px;background:var(--color-shadow);margin:2px}:host .EditorWrapper .LexicalRoot .ContextMenuItem{display:flex;align-items:center;gap:10px;width:100%;border:none;background:transparent;border-radius:12px;padding:2px;cursor:pointer;color:var(--color-fg)}:host .EditorWrapper .LexicalRoot .ContextMenuItem:hover{background:var(--color-brand-soft, var(--color-info-bg))}:host .EditorWrapper .LexicalRoot .ContextMenuItem:disabled{opacity:.55;cursor:not-allowed}:host .EditorWrapper .LexicalRoot .ContextMenuItem i{width:18px;text-align:center;color:var(--color-brand)}:host .EditorWrapper .LexicalRoot .ContextMenuItem span{font-weight:400}:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger:hover{background:var(--color-danger-bg)}:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger i{color:var(--color-danger-fg)}:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger *{user-select:text!important;-webkit-user-select:text!important;-moz-user-select:text!important;-ms-user-select:text!important}:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger img{user-select:none!important;-webkit-user-select:none!important;cursor:default!important}:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger h1,:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger h2,:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger h3,:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger h4,:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger h5,:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger h6{margin:.5em 0 .25em;font-weight:700;line-height:1.2;display:block}:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger h1{font-size:2rem!important;line-height:1.15!important;text-transform:uppercase}:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger h2{font-size:1.5rem!important}:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger h3{font-size:1.5rem}:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger h4{font-size:1.25rem}:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger h5{font-size:1.125rem}:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger h6{font-size:1rem}:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger p{margin:.5em 0;font-size:14px}:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger ul,:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger ol{margin:.5em 0 .5em 1.5em;padding-left:1.25rem;list-style-type:initial;list-style-position:outside}:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger li{margin:.25em 0}:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger blockquote{margin:1em 0;padding-left:1rem;border-left:4px solid var(--color-border);font-style:italic;color:var(--color-fg-muted)}:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger pre{background:var(--color-surface-muted, var(--color-surface));padding:1rem;border-radius:8px;font-family:Courier New,monospace;overflow-x:auto;font-size:14px}:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger code{font-family:Courier New,monospace;background:var(--color-surface-muted, var(--color-surface));padding:.2em .4em;border-radius:4px;font-size:14px}:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger a{color:var(--color-fg-link);text-decoration:underline}:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger strong{font-weight:600}:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger em{font-style:italic}:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger u{text-decoration:underline;text-underline-offset:2px}:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger span[style*=\"text-decoration: underline\"],:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger span[style*=\"text-decoration:underline\"]{text-decoration:underline!important;text-underline-offset:2px}:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger span[style*=\"text-decoration: line-through\"],:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger span[style*=\"text-decoration:line-through\"]{text-decoration:line-through!important}:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger s,:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger strike,:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger del{text-decoration:line-through;text-decoration-thickness:from-font}:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger img{max-width:100%;height:auto}:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger hr{border:none;border-top:1px solid var(--color-border);margin:1.5em 0}\n"], dependencies: [{ kind: "component", type: LucideIconComponent, selector: "lucide-icon", inputs: ["name", "size", "spin", "filled"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: DragScrollDirective, selector: "[dragScroll]", inputs: ["dragScroll"] }] });
9550
9496
  }
9551
9497
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: RichTextEntryComponent, decorators: [{
9552
9498
  type: Component,
@@ -9558,7 +9504,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
9558
9504
  useExisting: forwardRef(() => RichTextEntryComponent),
9559
9505
  multi: true,
9560
9506
  },
9561
- ], template: "<p\n *ngIf=\"label\"\n class=\"Label\"\n [class.Disabled]=\"isDisabled\"\n (click)=\"manualClick($event); $event.stopPropagation()\"\n>\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\n</p>\n\n<p\n *ngIf=\"description\"\n class=\"Description\"\n [class.Disabled]=\"isDisabled\"\n (click)=\"manualClick($event); $event.stopPropagation()\"\n>\n {{ description }}\n</p>\n\n<div class=\"EditorWrapper\" [class.Disabled]=\"isDisabled\">\n <!-- Solo en el navegador: Lexical (en SSR no se crea editor para evitar \"document is not defined\") -->\n <ng-container *ngIf=\"isBrowser\">\n <div class=\"Toolbar\" [class.Disabled]=\"isDisabled\" (click)=\"$event.stopPropagation()\" dragScroll=\"horizontal\">\n <button\n type=\"button\"\n class=\"ToolBtn ToolBtn--undo\"\n (mousedown)=\"onToolbarMouseDown($event)\"\n (click)=\"exec('undo'); $event.preventDefault()\"\n [disabled]=\"isDisabled || !canUndo\"\n aria-label=\"Deshacer\"\n >\n <lucide-icon name=\"rotate-ccw\" aria-hidden=\"true\"></lucide-icon>\n </button>\n <button\n type=\"button\"\n class=\"ToolBtn ToolBtn--color-danger-fgo\"\n (mousedown)=\"onToolbarMouseDown($event)\"\n (click)=\"exec('redo'); $event.preventDefault()\"\n [disabled]=\"isDisabled || !canRedo\"\n aria-label=\"Rehacer\"\n >\n <lucide-icon name=\"rotate-cw\" aria-hidden=\"true\"></lucide-icon>\n </button>\n <span class=\"ToolSep\"></span>\n\n <button\n type=\"button\"\n class=\"ToolBtn ToolBtn--bold\"\n (mousedown)=\"onToolbarMouseDown($event)\"\n [class.Active]=\"isBold\"\n (click)=\"exec('bold'); $event.preventDefault()\"\n [disabled]=\"isDisabled\"\n aria-label=\"Negrita\"\n >\n <lucide-icon name=\"bold\" aria-hidden=\"true\"></lucide-icon>\n </button>\n <button\n type=\"button\"\n class=\"ToolBtn ToolBtn--italic\"\n (mousedown)=\"onToolbarMouseDown($event)\"\n [class.Active]=\"isItalic\"\n (click)=\"exec('italic'); $event.preventDefault()\"\n [disabled]=\"isDisabled\"\n aria-label=\"Cursiva\"\n >\n <lucide-icon name=\"italic\" aria-hidden=\"true\"></lucide-icon>\n </button>\n <button\n type=\"button\"\n class=\"ToolBtn ToolBtn--underline\"\n (mousedown)=\"onToolbarMouseDown($event)\"\n [class.Active]=\"isUnderline\"\n (click)=\"exec('underline'); $event.preventDefault()\"\n [disabled]=\"isDisabled\"\n aria-label=\"Subrayado\"\n >\n <lucide-icon name=\"underline\" aria-hidden=\"true\"></lucide-icon>\n </button>\n <button\n type=\"button\"\n class=\"ToolBtn ToolBtn--strike\"\n (mousedown)=\"onToolbarMouseDown($event)\"\n [class.Active]=\"isStrikethrough\"\n (click)=\"exec('strikethrough'); $event.preventDefault()\"\n [disabled]=\"isDisabled\"\n aria-label=\"Tachado\"\n >\n <lucide-icon name=\"strikethrough\" aria-hidden=\"true\"></lucide-icon>\n </button>\n <span class=\"ToolSep\"></span>\n\n <button\n type=\"button\"\n class=\"ToolBtn ToolBtn--h1\"\n (mousedown)=\"onToolbarMouseDown($event)\"\n [class.Active]=\"isH1\"\n (click)=\"exec('h1'); $event.preventDefault()\"\n [disabled]=\"isDisabled\"\n aria-label=\"T\u00EDtulo H1\"\n >\n H1\n </button>\n <button\n type=\"button\"\n class=\"ToolBtn ToolBtn--link\"\n (mousedown)=\"onToolbarMouseDown($event)\"\n [class.Active]=\"isLink\"\n (click)=\"exec('link'); $event.preventDefault()\"\n [disabled]=\"isDisabled\"\n aria-label=\"Insertar o quitar link\"\n >\n <lucide-icon name=\"link\" aria-hidden=\"true\"></lucide-icon>\n </button>\n <button\n type=\"button\"\n class=\"ToolBtn ToolBtn--image\"\n (mousedown)=\"onToolbarMouseDown($event)\"\n (click)=\"exec('image'); $event.preventDefault()\"\n [disabled]=\"isDisabled\"\n aria-label=\"Insertar imagen\"\n >\n <lucide-icon name=\"image\" aria-hidden=\"true\"></lucide-icon>\n </button>\n <button\n type=\"button\"\n class=\"ToolBtn ToolBtn--table\"\n (mousedown)=\"onToolbarMouseDown($event)\"\n (click)=\"exec('table'); $event.preventDefault()\"\n [disabled]=\"isDisabled\"\n aria-label=\"Insertar tabla\"\n >\n <lucide-icon name=\"table\" aria-hidden=\"true\"></lucide-icon>\n </button>\n <span class=\"ToolSep\"></span>\n <button\n type=\"button\"\n class=\"ToolBtn ToolBtn--ol\"\n (mousedown)=\"onToolbarMouseDown($event)\"\n (click)=\"exec('ol'); $event.preventDefault()\"\n [disabled]=\"isDisabled\"\n aria-label=\"Lista numerada\"\n >\n <lucide-icon name=\"list-ordered\" aria-hidden=\"true\"></lucide-icon>\n </button>\n <button\n type=\"button\"\n class=\"ToolBtn ToolBtn--ul\"\n (mousedown)=\"onToolbarMouseDown($event)\"\n (click)=\"exec('ul'); $event.preventDefault()\"\n [disabled]=\"isDisabled\"\n aria-label=\"Lista con vi\u00F1etas\"\n >\n <lucide-icon name=\"list\" aria-hidden=\"true\"></lucide-icon>\n </button>\n <span class=\"ToolSep\"></span>\n <button\n type=\"button\"\n class=\"ToolBtn ToolBtn--align\"\n (mousedown)=\"onToolbarMouseDown($event)\"\n [class.Active]=\"isAlignLeft\"\n (click)=\"exec('align-left'); $event.preventDefault()\"\n [disabled]=\"isDisabled\"\n aria-label=\"Alinear a la izquierda\"\n >\n <lucide-icon name=\"text-align-start\" aria-hidden=\"true\"></lucide-icon>\n </button>\n <button\n type=\"button\"\n class=\"ToolBtn ToolBtn--align\"\n (mousedown)=\"onToolbarMouseDown($event)\"\n [class.Active]=\"isAlignCenter\"\n (click)=\"exec('align-center'); $event.preventDefault()\"\n [disabled]=\"isDisabled\"\n aria-label=\"Centrar\"\n >\n <lucide-icon name=\"text-align-center\" aria-hidden=\"true\"></lucide-icon>\n </button>\n <button\n type=\"button\"\n class=\"ToolBtn ToolBtn--align\"\n (mousedown)=\"onToolbarMouseDown($event)\"\n [class.Active]=\"isAlignRight\"\n (click)=\"exec('align-right'); $event.preventDefault()\"\n [disabled]=\"isDisabled\"\n aria-label=\"Alinear a la derecha\"\n >\n <lucide-icon name=\"text-align-end\" aria-hidden=\"true\"></lucide-icon>\n </button>\n <button\n type=\"button\"\n class=\"ToolBtn ToolBtn--align\"\n (mousedown)=\"onToolbarMouseDown($event)\"\n [class.Active]=\"isAlignJustify\"\n (click)=\"exec('align-justify'); $event.preventDefault()\"\n [disabled]=\"isDisabled\"\n aria-label=\"Justificar\"\n >\n <lucide-icon name=\"text-align-justify\" aria-hidden=\"true\"></lucide-icon>\n </button>\n </div>\n <input #imageInput type=\"file\" accept=\"image/*\" hidden (change)=\"onImageSelected($event)\" />\n\n <div\n class=\"LexicalRoot\"\n [class.Disabled]=\"isDisabled\"\n (click)=\"manualClick($event)\"\n >\n <!-- Overlays flotantes (NO se guardan en el HTML del editor) -->\n <div\n *ngIf=\"imageOverlayVisible\"\n #imageOverlay\n class=\"FloatingOverlay FloatingOverlay--image\"\n [style.top.px]=\"imageOverlayTop\"\n [style.left.px]=\"imageOverlayLeft\"\n (pointerdown)=\"$event.stopPropagation()\"\n (click)=\"$event.stopPropagation()\"\n >\n <button\n type=\"button\"\n class=\"FloatingBtn\"\n (mousedown)=\"onToolbarMouseDown($event)\"\n (click)=\"exec('image-move-up'); $event.preventDefault()\"\n [disabled]=\"isDisabled\"\n aria-label=\"Mover imagen arriba\"\n >\n <lucide-icon name=\"arrow-up\" aria-hidden=\"true\"></lucide-icon>\n </button>\n <button\n type=\"button\"\n class=\"FloatingBtn\"\n (mousedown)=\"onToolbarMouseDown($event)\"\n (click)=\"exec('image-move-down'); $event.preventDefault()\"\n [disabled]=\"isDisabled\"\n aria-label=\"Mover imagen abajo\"\n >\n <lucide-icon name=\"arrow-down\" aria-hidden=\"true\"></lucide-icon>\n </button>\n <span class=\"FloatingHandle\" (pointerdown)=\"onImageResizeStart($event)\" aria-label=\"Resize imagen\"></span>\n </div>\n\n <div\n *ngIf=\"tableOverlayVisible\"\n #tableOverlay\n class=\"FloatingOverlay FloatingOverlay--table\"\n [style.top.px]=\"tableOverlayTop\"\n [style.left.px]=\"tableOverlayLeft\"\n [style.maxHeight.px]=\"tableOverlayMaxHeight\"\n (pointerdown)=\"$event.stopPropagation()\"\n (click)=\"$event.stopPropagation()\"\n >\n <div class=\"ContextMenu\">\n <div class=\"ContextMenuTitle\">Tabla</div>\n\n <div class=\"ContextMenuSection\">\n <div class=\"ContextMenuLabel\">Insertar</div>\n <button\n type=\"button\"\n class=\"ContextMenuItem\"\n (mousedown)=\"onToolbarMouseDown($event)\"\n (click)=\"exec('table-row-before'); $event.preventDefault()\"\n [disabled]=\"isDisabled\"\n >\n <lucide-icon name=\"arrow-up\" aria-hidden=\"true\"></lucide-icon>\n <span>Fila arriba</span>\n </button>\n <button\n type=\"button\"\n class=\"ContextMenuItem\"\n (mousedown)=\"onToolbarMouseDown($event)\"\n (click)=\"exec('table-row-after'); $event.preventDefault()\"\n [disabled]=\"isDisabled\"\n >\n <lucide-icon name=\"arrow-down\" aria-hidden=\"true\"></lucide-icon>\n <span>Fila abajo</span>\n </button>\n <button\n type=\"button\"\n class=\"ContextMenuItem\"\n (mousedown)=\"onToolbarMouseDown($event)\"\n (click)=\"exec('table-col-before'); $event.preventDefault()\"\n [disabled]=\"isDisabled\"\n >\n <lucide-icon name=\"arrow-left\" aria-hidden=\"true\"></lucide-icon>\n <span>Columna izquierda</span>\n </button>\n <button\n type=\"button\"\n class=\"ContextMenuItem\"\n (mousedown)=\"onToolbarMouseDown($event)\"\n (click)=\"exec('table-col-after'); $event.preventDefault()\"\n [disabled]=\"isDisabled\"\n >\n <lucide-icon name=\"arrow-right\" aria-hidden=\"true\"></lucide-icon>\n <span>Columna derecha</span>\n </button>\n </div>\n\n <div class=\"ContextMenuDivider\"></div>\n\n <div class=\"ContextMenuSection\">\n <div class=\"ContextMenuLabel\">Eliminar</div>\n <button\n type=\"button\"\n class=\"ContextMenuItem ContextMenuItem--danger\"\n (mousedown)=\"onToolbarMouseDown($event)\"\n (click)=\"exec('table-row-delete'); $event.preventDefault()\"\n [disabled]=\"isDisabled\"\n >\n <lucide-icon name=\"minus\" aria-hidden=\"true\"></lucide-icon>\n <span>Eliminar fila</span>\n </button>\n <button\n type=\"button\"\n class=\"ContextMenuItem ContextMenuItem--danger\"\n (mousedown)=\"onToolbarMouseDown($event)\"\n (click)=\"exec('table-col-delete'); $event.preventDefault()\"\n [disabled]=\"isDisabled\"\n >\n <lucide-icon name=\"minus\" aria-hidden=\"true\"></lucide-icon>\n <span>Eliminar columna</span>\n </button>\n <button\n type=\"button\"\n class=\"ContextMenuItem ContextMenuItem--danger\"\n (mousedown)=\"onToolbarMouseDown($event)\"\n (click)=\"exec('table-delete'); $event.preventDefault()\"\n [disabled]=\"isDisabled\"\n >\n <lucide-icon class=\"Icon--trash\" name=\"trash\" aria-hidden=\"true\"></lucide-icon>\n <span>Eliminar tabla</span>\n </button>\n </div>\n </div>\n </div>\n\n <div class=\"LexicalPlaceholder\" *ngIf=\"showPlaceholder\">{{ placeholder }}</div>\n <div\n #contentEditable\n class=\"LexicalContent\"\n contenteditable=\"true\"\n spellcheck=\"true\"\n (blur)=\"onEditorBlur($event)\"\n (input)=\"onInput()\"\n ></div>\n </div>\n </ng-container>\n\n <!-- En SSR: placeholder para mantener el layout (el campo no afecta SEO) -->\n <div *ngIf=\"!isBrowser\" class=\"EditorPlaceholder\" [class.Disabled]=\"isDisabled\">\n <span class=\"EditorPlaceholderText\">Editor de texto enriquecido (carga en el navegador)</span>\n </div>\n</div>\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex;flex-direction:column;width:100%;height:max-content;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);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(--color-input-border, #d4d4d4);border-radius:12px;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .EditorWrapper{min-height:150px;border-radius:var(--radius-md);border:solid 1px transparent;background-color:var(--color-input-bg);border-radius:var(--radius-lg);display:flex;flex-direction:column;gap:0;padding:4px;user-select:text!important;-webkit-user-select:text!important;-moz-user-select:text!important;-ms-user-select:text!important}:host .EditorWrapper:focus-within{border:solid 1px var(--color-input-border-focus)}:host .EditorWrapper.Disabled{pointer-events:none;opacity:.5;-webkit-user-select:none!important;user-select:none!important}:host .EditorWrapper .Toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:0;padding-bottom:8px;width:100%;overflow:hidden;overflow-x:auto;-webkit-user-select:none;user-select:none}:host .EditorWrapper .Toolbar.Disabled{opacity:.7}:host .EditorWrapper .Toolbar .ToolSep{width:1px;height:20px;background:var(--color-input-border);margin:0 4px}:host .EditorWrapper .Toolbar .ToolBtn{border:none;border-radius:var(--radius-lg);background:transparent;color:var(--color-fg);padding:6px 10px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;min-width:36px;transition:background-color .12s ease,transform .12s ease,box-shadow .12s ease,color .12s ease}:host .EditorWrapper .Toolbar .ToolBtn:hover{background-color:var(--color-surface);transform:translateY(-1px);box-shadow:0 6px 14px var(--color-shadow)}:host .EditorWrapper .Toolbar .ToolBtn.Active{background:linear-gradient(135deg,var(--color-brand-soft, var(--color-info-bg)),var(--color-info-bg));color:var(--color-fg-brand);box-shadow:0 6px 14px var(--color-shadow)}:host .EditorWrapper .Toolbar .ToolBtn:disabled{cursor:not-allowed;opacity:.6}:host .EditorWrapper .Toolbar .ToolBtn i,:host .EditorWrapper .Toolbar .ToolBtn lucide-icon{font-size:14px;line-height:1}:host .EditorWrapper .Toolbar .ToolBtn i lucide-icon .lucide-svg,:host .EditorWrapper .Toolbar .ToolBtn lucide-icon lucide-icon .lucide-svg{width:14px;height:14px}:host .EditorWrapper .Toolbar .ToolBtn--undo{color:var(--color-brand)}:host .EditorWrapper .Toolbar .ToolBtn--undo:hover{color:var(--color-brand)}:host .EditorWrapper .Toolbar .ToolBtn--undo.Active{background:linear-gradient(135deg,color-mix(in srgb,var(--color-brand) 22%,transparent),color-mix(in srgb,var(--color-info-fg, var(--color-brand)) 16%,transparent));color:var(--color-brand)}:host .EditorWrapper .Toolbar .ToolBtn--color-danger-fgo{color:var(--color-brand)}:host .EditorWrapper .Toolbar .ToolBtn--color-danger-fgo:hover{color:var(--color-brand)}:host .EditorWrapper .Toolbar .ToolBtn--color-danger-fgo.Active{background:linear-gradient(135deg,color-mix(in srgb,var(--color-brand) 22%,transparent),color-mix(in srgb,var(--color-brand-strong, var(--color-brand)) 16%,transparent));color:var(--color-brand)}:host .EditorWrapper .Toolbar .ToolBtn--bold{color:var(--color-brand-strong, var(--color-brand))}:host .EditorWrapper .Toolbar .ToolBtn--bold:hover{color:var(--color-brand-strong, var(--color-brand))}:host .EditorWrapper .Toolbar .ToolBtn--bold.Active{background:linear-gradient(135deg,color-mix(in srgb,var(--color-brand-strong, var(--color-brand)) 22%,transparent),color-mix(in srgb,var(--color-brand) 16%,transparent));color:var(--color-brand-strong, var(--color-brand))}:host .EditorWrapper .Toolbar .ToolBtn--italic{color:var(--color-accent, var(--color-brand))}:host .EditorWrapper .Toolbar .ToolBtn--italic:hover{color:var(--color-accent, var(--color-brand))}:host .EditorWrapper .Toolbar .ToolBtn--italic.Active{background:linear-gradient(135deg,color-mix(in srgb,var(--color-accent, var(--color-brand)) 22%,transparent),color-mix(in srgb,var(--color-brand-strong, var(--color-brand)) 16%,transparent));color:var(--color-accent, var(--color-brand))}:host .EditorWrapper .Toolbar .ToolBtn--underline{color:var(--color-info-fg, var(--color-brand))}:host .EditorWrapper .Toolbar .ToolBtn--underline:hover{color:var(--color-info-fg, var(--color-brand))}:host .EditorWrapper .Toolbar .ToolBtn--underline.Active{background:linear-gradient(135deg,color-mix(in srgb,var(--color-info-fg, var(--color-brand)) 22%,transparent),color-mix(in srgb,var(--color-brand) 16%,transparent));color:var(--color-info-fg, var(--color-brand))}:host .EditorWrapper .Toolbar .ToolBtn--strike{color:var(--color-danger-fg)}:host .EditorWrapper .Toolbar .ToolBtn--strike:hover{color:var(--color-danger-fg)}:host .EditorWrapper .Toolbar .ToolBtn--strike.Active{background:linear-gradient(135deg,color-mix(in srgb,var(--color-danger-fg) 22%,transparent),color-mix(in srgb,var(--color-warning-fg) 16%,transparent));color:var(--color-danger-fg)}:host .EditorWrapper .Toolbar .ToolBtn--h1{color:var(--color-warning-fg)}:host .EditorWrapper .Toolbar .ToolBtn--h1:hover{color:var(--color-warning-fg)}:host .EditorWrapper .Toolbar .ToolBtn--h1.Active{background:linear-gradient(135deg,color-mix(in srgb,var(--color-warning-fg) 22%,transparent),color-mix(in srgb,var(--color-warning-fg) 16%,transparent));color:var(--color-warning-fg)}:host .EditorWrapper .Toolbar .ToolBtn--link{color:var(--color-brand)}:host .EditorWrapper .Toolbar .ToolBtn--link:hover{color:var(--color-brand)}:host .EditorWrapper .Toolbar .ToolBtn--link.Active{background:linear-gradient(135deg,color-mix(in srgb,var(--color-brand) 22%,transparent),color-mix(in srgb,var(--color-info-fg, var(--color-brand)) 16%,transparent));color:var(--color-brand)}:host .EditorWrapper .Toolbar .ToolBtn--image{color:var(--color-success-fg)}:host .EditorWrapper .Toolbar .ToolBtn--image:hover{color:var(--color-success-fg)}:host .EditorWrapper .Toolbar .ToolBtn--image.Active{background:linear-gradient(135deg,color-mix(in srgb,var(--color-success-fg) 22%,transparent),color-mix(in srgb,var(--color-info-fg, var(--color-brand)) 16%,transparent));color:var(--color-success-fg)}:host .EditorWrapper .Toolbar .ToolBtn--table{color:var(--color-warning-fg)}:host .EditorWrapper .Toolbar .ToolBtn--table:hover{color:var(--color-warning-fg)}:host .EditorWrapper .Toolbar .ToolBtn--table.Active{background:linear-gradient(135deg,color-mix(in srgb,var(--color-warning-fg) 22%,transparent),color-mix(in srgb,var(--color-warning-fg) 16%,transparent));color:var(--color-warning-fg)}:host .EditorWrapper .Toolbar .ToolBtn--ol{color:var(--color-brand)}:host .EditorWrapper .Toolbar .ToolBtn--ol:hover{color:var(--color-brand)}:host .EditorWrapper .Toolbar .ToolBtn--ol.Active{background:linear-gradient(135deg,color-mix(in srgb,var(--color-brand) 22%,transparent),color-mix(in srgb,var(--color-brand-strong, var(--color-brand)) 16%,transparent));color:var(--color-brand)}:host .EditorWrapper .Toolbar .ToolBtn--ul{color:var(--color-brand)}:host .EditorWrapper .Toolbar .ToolBtn--ul:hover{color:var(--color-brand)}:host .EditorWrapper .Toolbar .ToolBtn--ul.Active{background:linear-gradient(135deg,color-mix(in srgb,var(--color-brand) 22%,transparent),color-mix(in srgb,var(--color-brand-strong, var(--color-brand)) 16%,transparent));color:var(--color-brand)}:host .EditorWrapper .Toolbar .ToolBtn--align{color:var(--color-info-fg, var(--color-brand))}:host .EditorWrapper .Toolbar .ToolBtn--align:hover{color:var(--color-info-fg, var(--color-brand))}:host .EditorWrapper .Toolbar .ToolBtn--align.Active{background:linear-gradient(135deg,color-mix(in srgb,var(--color-info-fg, var(--color-brand)) 22%,transparent),color-mix(in srgb,var(--color-brand) 16%,transparent));color:var(--color-info-fg, var(--color-brand))}:host .EditorWrapper .Toolbar .ToolLabel{font-weight:400}:host .EditorWrapper .EditorPlaceholder{width:100%;min-height:140px;padding:.75rem 1rem;border-radius:var(--radius-lg);background:transparent;display:flex;align-items:center;justify-content:center}:host .EditorWrapper .EditorPlaceholder.Disabled{opacity:.6}:host .EditorWrapper .EditorPlaceholder .EditorPlaceholderText{font-size:14px;color:var(--color-fg-muted)}:host .EditorWrapper .LexicalRoot{position:relative;border-radius:var(--radius-lg);background-color:var(--color-surface);min-height:200px;overflow:hidden}:host .EditorWrapper .LexicalRoot.Disabled{opacity:.95}:host .EditorWrapper .LexicalRoot .LexicalPlaceholder{position:absolute;top:12px;left:16px;right:16px;color:var(--color-fg-muted);pointer-events:none;font-size:14px}:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent{background-color:transparent;min-height:200px;outline:none;font-size:14px;line-height:1.5;padding:.75rem 1rem;color:var(--color-fg);font-family:Inter,sans-serif;user-select:text!important;-webkit-user-select:text!important;-moz-user-select:text!important;-ms-user-select:text!important;pointer-events:auto!important;cursor:text!important}:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-paragraph{margin:.5em 0;font-size:14px}:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-heading-h1,:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-heading-h2,:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-heading-h3,:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-heading-h4,:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-heading-h5,:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-heading-h6{font-weight:700;display:block}:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-heading-h1{font-size:1.4rem!important;text-transform:uppercase}:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-heading-h2{font-size:1.5rem!important}:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-heading-h3{font-size:1.5rem}:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-heading-h4{font-size:1.25rem}:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-heading-h5{font-size:1.125rem}:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-heading-h6{font-size:1rem}:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-text-bold{font-weight:700}:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-text-italic{font-style:italic}:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-text-underline{text-decoration:underline;text-underline-offset:2px}:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-text-strikethrough{text-decoration:line-through}:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-text-underlineStrikethrough{text-decoration:underline line-through;text-underline-offset:2px}:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-list-ol,:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-list-ul{margin:.5em 0 .5em 1.5em;padding-left:1.25rem;list-style-position:outside}:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-list-ol{list-style-type:decimal}:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-list-ul{list-style-type:disc}:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-listitem{margin:.25em 0}:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-link{color:var(--color-fg-link);text-decoration:underline}:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-image{display:inline-block;position:relative;max-width:100%;border-radius:var(--radius-lg);outline:1px solid var(--color-shadow);background:var(--color-surface);padding:6px;margin:.5rem 0}:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-image img{display:block;max-width:100%;height:auto;border-radius:var(--radius-md)}:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-table{border-collapse:collapse;width:100%;margin:.75rem 0;table-layout:fixed}:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-table-cell,:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-table-cell-header{border:1px solid var(--color-border);padding:.5rem;vertical-align:top}:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-table-cell-header{background:var(--color-surface-muted, var(--color-shadow));font-weight:700}:host .EditorWrapper .LexicalRoot .FloatingOverlay{position:absolute;z-index:50;display:flex;flex-direction:column;align-items:center;gap:6px;padding:6px;border-radius:var(--radius-lg);background:var(--color-surface);border:1px solid var(--color-border);pointer-events:auto;overflow:hidden;overflow-y:auto}:host .EditorWrapper .LexicalRoot .FloatingBtn{border:none;border-radius:var(--radius-lg);background:transparent;cursor:pointer;padding:6px 10px;color:var(--color-brand);transition:background-color .12s ease,transform .12s ease}:host .EditorWrapper .LexicalRoot .FloatingBtn:hover{background:var(--color-brand-soft, var(--color-info-bg));transform:translateY(-1px)}:host .EditorWrapper .LexicalRoot .FloatingBtn:disabled{opacity:.6;cursor:not-allowed}:host .EditorWrapper .LexicalRoot .FloatingBtn i,:host .EditorWrapper .LexicalRoot .FloatingBtn lucide-icon{font-size:14px}:host .EditorWrapper .LexicalRoot .FloatingBtn i lucide-icon .lucide-svg,:host .EditorWrapper .LexicalRoot .FloatingBtn lucide-icon lucide-icon .lucide-svg{width:14px;height:14px}:host .EditorWrapper .LexicalRoot .FloatingHandle{width:14px;height:14px;border-radius:var(--radius-md);background:linear-gradient(135deg,var(--color-brand),var(--color-info-fg, var(--color-brand)));box-shadow:0 6px 16px var(--color-shadow);border:2px solid var(--color-fg-on-brand, var(--color-surface));cursor:nwse-resize;-webkit-user-select:none;user-select:none;touch-action:none}:host .EditorWrapper .LexicalRoot .ContextMenu{display:flex;flex-direction:column;gap:8px;min-width:220px;padding:6px;max-height:100%;overflow-y:auto;overscroll-behavior:contain}:host .EditorWrapper .LexicalRoot .ContextMenuTitle{font-weight:400;color:var(--color-fg)}:host .EditorWrapper .LexicalRoot .ContextMenuSection{display:flex;flex-direction:column}:host .EditorWrapper .LexicalRoot .ContextMenuLabel{font-size:14px;text-transform:uppercase;letter-spacing:.04em;color:var(--color-fg-muted);padding:0 2px}:host .EditorWrapper .LexicalRoot .ContextMenuDivider{height:1px;background:var(--color-shadow);margin:2px}:host .EditorWrapper .LexicalRoot .ContextMenuItem{display:flex;align-items:center;gap:10px;width:100%;border:none;background:transparent;border-radius:var(--radius-lg);padding:2px;cursor:pointer;color:var(--color-fg)}:host .EditorWrapper .LexicalRoot .ContextMenuItem:hover{background:var(--color-brand-soft, var(--color-info-bg))}:host .EditorWrapper .LexicalRoot .ContextMenuItem:disabled{opacity:.55;cursor:not-allowed}:host .EditorWrapper .LexicalRoot .ContextMenuItem i{width:18px;text-align:center;color:var(--color-brand)}:host .EditorWrapper .LexicalRoot .ContextMenuItem span{font-weight:400}:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger:hover{background:var(--color-danger-bg)}:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger i{color:var(--color-danger-fg)}:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger *{user-select:text!important;-webkit-user-select:text!important;-moz-user-select:text!important;-ms-user-select:text!important}:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger img{user-select:none!important;-webkit-user-select:none!important;cursor:default!important}:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger h1,:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger h2,:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger h3,:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger h4,:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger h5,:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger h6{margin:.5em 0 .25em;font-weight:700;line-height:1.2;display:block}:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger h1{font-size:2rem!important;line-height:1.15!important;text-transform:uppercase}:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger h2{font-size:1.5rem!important}:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger h3{font-size:1.5rem}:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger h4{font-size:1.25rem}:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger h5{font-size:1.125rem}:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger h6{font-size:1rem}:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger p{margin:.5em 0;font-size:14px}:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger ul,:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger ol{margin:.5em 0 .5em 1.5em;padding-left:1.25rem;list-style-type:initial;list-style-position:outside}:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger li{margin:.25em 0}:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger blockquote{margin:1em 0;padding-left:1rem;border-left:4px solid var(--color-border);font-style:italic;color:var(--color-fg-muted)}:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger pre{background:var(--color-surface-muted, var(--color-surface));padding:1rem;border-radius:var(--radius-md);font-family:Courier New,monospace;overflow-x:auto;font-size:14px}:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger code{font-family:Courier New,monospace;background:var(--color-surface-muted, var(--color-surface));padding:.2em .4em;border-radius:var(--radius-sm);font-size:14px}:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger a{color:var(--color-fg-link);text-decoration:underline}:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger strong{font-weight:600}:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger em{font-style:italic}:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger u{text-decoration:underline;text-underline-offset:2px}:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger span[style*=\"text-decoration: underline\"],:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger span[style*=\"text-decoration:underline\"]{text-decoration:underline!important;text-underline-offset:2px}:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger span[style*=\"text-decoration: line-through\"],:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger span[style*=\"text-decoration:line-through\"]{text-decoration:line-through!important}:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger s,:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger strike,:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger del{text-decoration:line-through;text-decoration-thickness:from-font}:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger img{max-width:100%;height:auto}:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger hr{border:none;border-top:1px solid var(--color-border);margin:1.5em 0}\n"] }]
9507
+ ], template: "<p\n *ngIf=\"label\"\n class=\"Label\"\n [class.Disabled]=\"isDisabled\"\n (click)=\"manualClick($event); $event.stopPropagation()\"\n>\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\n</p>\n\n<p\n *ngIf=\"description\"\n class=\"Description\"\n [class.Disabled]=\"isDisabled\"\n (click)=\"manualClick($event); $event.stopPropagation()\"\n>\n {{ description }}\n</p>\n\n<div class=\"EditorWrapper\" [class.Disabled]=\"isDisabled\">\n <!-- Solo en el navegador: Lexical (en SSR no se crea editor para evitar \"document is not defined\") -->\n <ng-container *ngIf=\"isBrowser\">\n <div class=\"Toolbar\" [class.Disabled]=\"isDisabled\" (click)=\"$event.stopPropagation()\" dragScroll=\"horizontal\">\n <button\n type=\"button\"\n class=\"ToolBtn ToolBtn--undo\"\n (mousedown)=\"onToolbarMouseDown($event)\"\n (click)=\"exec('undo'); $event.preventDefault()\"\n [disabled]=\"isDisabled || !canUndo\"\n aria-label=\"Deshacer\"\n >\n <lucide-icon name=\"rotate-ccw\" aria-hidden=\"true\"></lucide-icon>\n </button>\n <button\n type=\"button\"\n class=\"ToolBtn ToolBtn--color-danger-fgo\"\n (mousedown)=\"onToolbarMouseDown($event)\"\n (click)=\"exec('redo'); $event.preventDefault()\"\n [disabled]=\"isDisabled || !canRedo\"\n aria-label=\"Rehacer\"\n >\n <lucide-icon name=\"rotate-cw\" aria-hidden=\"true\"></lucide-icon>\n </button>\n <span class=\"ToolSep\"></span>\n\n <button\n type=\"button\"\n class=\"ToolBtn ToolBtn--bold\"\n (mousedown)=\"onToolbarMouseDown($event)\"\n [class.Active]=\"isBold\"\n (click)=\"exec('bold'); $event.preventDefault()\"\n [disabled]=\"isDisabled\"\n aria-label=\"Negrita\"\n >\n <lucide-icon name=\"bold\" aria-hidden=\"true\"></lucide-icon>\n </button>\n <button\n type=\"button\"\n class=\"ToolBtn ToolBtn--italic\"\n (mousedown)=\"onToolbarMouseDown($event)\"\n [class.Active]=\"isItalic\"\n (click)=\"exec('italic'); $event.preventDefault()\"\n [disabled]=\"isDisabled\"\n aria-label=\"Cursiva\"\n >\n <lucide-icon name=\"italic\" aria-hidden=\"true\"></lucide-icon>\n </button>\n <button\n type=\"button\"\n class=\"ToolBtn ToolBtn--underline\"\n (mousedown)=\"onToolbarMouseDown($event)\"\n [class.Active]=\"isUnderline\"\n (click)=\"exec('underline'); $event.preventDefault()\"\n [disabled]=\"isDisabled\"\n aria-label=\"Subrayado\"\n >\n <lucide-icon name=\"underline\" aria-hidden=\"true\"></lucide-icon>\n </button>\n <button\n type=\"button\"\n class=\"ToolBtn ToolBtn--strike\"\n (mousedown)=\"onToolbarMouseDown($event)\"\n [class.Active]=\"isStrikethrough\"\n (click)=\"exec('strikethrough'); $event.preventDefault()\"\n [disabled]=\"isDisabled\"\n aria-label=\"Tachado\"\n >\n <lucide-icon name=\"strikethrough\" aria-hidden=\"true\"></lucide-icon>\n </button>\n <span class=\"ToolSep\"></span>\n\n <button\n type=\"button\"\n class=\"ToolBtn ToolBtn--h1\"\n (mousedown)=\"onToolbarMouseDown($event)\"\n [class.Active]=\"isH1\"\n (click)=\"exec('h1'); $event.preventDefault()\"\n [disabled]=\"isDisabled\"\n aria-label=\"T\u00EDtulo H1\"\n >\n H1\n </button>\n <button\n type=\"button\"\n class=\"ToolBtn ToolBtn--link\"\n (mousedown)=\"onToolbarMouseDown($event)\"\n [class.Active]=\"isLink\"\n (click)=\"exec('link'); $event.preventDefault()\"\n [disabled]=\"isDisabled\"\n aria-label=\"Insertar o quitar link\"\n >\n <lucide-icon name=\"link\" aria-hidden=\"true\"></lucide-icon>\n </button>\n <button\n type=\"button\"\n class=\"ToolBtn ToolBtn--image\"\n (mousedown)=\"onToolbarMouseDown($event)\"\n (click)=\"exec('image'); $event.preventDefault()\"\n [disabled]=\"isDisabled\"\n aria-label=\"Insertar imagen\"\n >\n <lucide-icon name=\"image\" aria-hidden=\"true\"></lucide-icon>\n </button>\n <button\n type=\"button\"\n class=\"ToolBtn ToolBtn--table\"\n (mousedown)=\"onToolbarMouseDown($event)\"\n (click)=\"exec('table'); $event.preventDefault()\"\n [disabled]=\"isDisabled\"\n aria-label=\"Insertar tabla\"\n >\n <lucide-icon name=\"table\" aria-hidden=\"true\"></lucide-icon>\n </button>\n <span class=\"ToolSep\"></span>\n <button\n type=\"button\"\n class=\"ToolBtn ToolBtn--ol\"\n (mousedown)=\"onToolbarMouseDown($event)\"\n (click)=\"exec('ol'); $event.preventDefault()\"\n [disabled]=\"isDisabled\"\n aria-label=\"Lista numerada\"\n >\n <lucide-icon name=\"list-ordered\" aria-hidden=\"true\"></lucide-icon>\n </button>\n <button\n type=\"button\"\n class=\"ToolBtn ToolBtn--ul\"\n (mousedown)=\"onToolbarMouseDown($event)\"\n (click)=\"exec('ul'); $event.preventDefault()\"\n [disabled]=\"isDisabled\"\n aria-label=\"Lista con vi\u00F1etas\"\n >\n <lucide-icon name=\"list\" aria-hidden=\"true\"></lucide-icon>\n </button>\n <span class=\"ToolSep\"></span>\n <button\n type=\"button\"\n class=\"ToolBtn ToolBtn--align\"\n (mousedown)=\"onToolbarMouseDown($event)\"\n [class.Active]=\"isAlignLeft\"\n (click)=\"exec('align-left'); $event.preventDefault()\"\n [disabled]=\"isDisabled\"\n aria-label=\"Alinear a la izquierda\"\n >\n <lucide-icon name=\"text-align-start\" aria-hidden=\"true\"></lucide-icon>\n </button>\n <button\n type=\"button\"\n class=\"ToolBtn ToolBtn--align\"\n (mousedown)=\"onToolbarMouseDown($event)\"\n [class.Active]=\"isAlignCenter\"\n (click)=\"exec('align-center'); $event.preventDefault()\"\n [disabled]=\"isDisabled\"\n aria-label=\"Centrar\"\n >\n <lucide-icon name=\"text-align-center\" aria-hidden=\"true\"></lucide-icon>\n </button>\n <button\n type=\"button\"\n class=\"ToolBtn ToolBtn--align\"\n (mousedown)=\"onToolbarMouseDown($event)\"\n [class.Active]=\"isAlignRight\"\n (click)=\"exec('align-right'); $event.preventDefault()\"\n [disabled]=\"isDisabled\"\n aria-label=\"Alinear a la derecha\"\n >\n <lucide-icon name=\"text-align-end\" aria-hidden=\"true\"></lucide-icon>\n </button>\n <button\n type=\"button\"\n class=\"ToolBtn ToolBtn--align\"\n (mousedown)=\"onToolbarMouseDown($event)\"\n [class.Active]=\"isAlignJustify\"\n (click)=\"exec('align-justify'); $event.preventDefault()\"\n [disabled]=\"isDisabled\"\n aria-label=\"Justificar\"\n >\n <lucide-icon name=\"text-align-justify\" aria-hidden=\"true\"></lucide-icon>\n </button>\n </div>\n <input #imageInput type=\"file\" accept=\"image/*\" hidden (change)=\"onImageSelected($event)\" />\n\n <div\n class=\"LexicalRoot\"\n [class.Disabled]=\"isDisabled\"\n (click)=\"manualClick($event)\"\n >\n <!-- Overlays flotantes (NO se guardan en el HTML del editor) -->\n <div\n *ngIf=\"imageOverlayVisible\"\n #imageOverlay\n class=\"FloatingOverlay FloatingOverlay--image\"\n [style.top.px]=\"imageOverlayTop\"\n [style.left.px]=\"imageOverlayLeft\"\n (pointerdown)=\"$event.stopPropagation()\"\n (click)=\"$event.stopPropagation()\"\n >\n <button\n type=\"button\"\n class=\"FloatingBtn\"\n (mousedown)=\"onToolbarMouseDown($event)\"\n (click)=\"exec('image-move-up'); $event.preventDefault()\"\n [disabled]=\"isDisabled\"\n aria-label=\"Mover imagen arriba\"\n >\n <lucide-icon name=\"arrow-up\" aria-hidden=\"true\"></lucide-icon>\n </button>\n <button\n type=\"button\"\n class=\"FloatingBtn\"\n (mousedown)=\"onToolbarMouseDown($event)\"\n (click)=\"exec('image-move-down'); $event.preventDefault()\"\n [disabled]=\"isDisabled\"\n aria-label=\"Mover imagen abajo\"\n >\n <lucide-icon name=\"arrow-down\" aria-hidden=\"true\"></lucide-icon>\n </button>\n <span class=\"FloatingHandle\" (pointerdown)=\"onImageResizeStart($event)\" aria-label=\"Resize imagen\"></span>\n </div>\n\n <div\n *ngIf=\"tableOverlayVisible\"\n #tableOverlay\n class=\"FloatingOverlay FloatingOverlay--table\"\n [style.top.px]=\"tableOverlayTop\"\n [style.left.px]=\"tableOverlayLeft\"\n [style.maxHeight.px]=\"tableOverlayMaxHeight\"\n (pointerdown)=\"$event.stopPropagation()\"\n (click)=\"$event.stopPropagation()\"\n >\n <div class=\"ContextMenu\">\n <div class=\"ContextMenuTitle\">Tabla</div>\n\n <div class=\"ContextMenuSection\">\n <div class=\"ContextMenuLabel\">Insertar</div>\n <button\n type=\"button\"\n class=\"ContextMenuItem\"\n (mousedown)=\"onToolbarMouseDown($event)\"\n (click)=\"exec('table-row-before'); $event.preventDefault()\"\n [disabled]=\"isDisabled\"\n >\n <lucide-icon name=\"arrow-up\" aria-hidden=\"true\"></lucide-icon>\n <span>Fila arriba</span>\n </button>\n <button\n type=\"button\"\n class=\"ContextMenuItem\"\n (mousedown)=\"onToolbarMouseDown($event)\"\n (click)=\"exec('table-row-after'); $event.preventDefault()\"\n [disabled]=\"isDisabled\"\n >\n <lucide-icon name=\"arrow-down\" aria-hidden=\"true\"></lucide-icon>\n <span>Fila abajo</span>\n </button>\n <button\n type=\"button\"\n class=\"ContextMenuItem\"\n (mousedown)=\"onToolbarMouseDown($event)\"\n (click)=\"exec('table-col-before'); $event.preventDefault()\"\n [disabled]=\"isDisabled\"\n >\n <lucide-icon name=\"arrow-left\" aria-hidden=\"true\"></lucide-icon>\n <span>Columna izquierda</span>\n </button>\n <button\n type=\"button\"\n class=\"ContextMenuItem\"\n (mousedown)=\"onToolbarMouseDown($event)\"\n (click)=\"exec('table-col-after'); $event.preventDefault()\"\n [disabled]=\"isDisabled\"\n >\n <lucide-icon name=\"arrow-right\" aria-hidden=\"true\"></lucide-icon>\n <span>Columna derecha</span>\n </button>\n </div>\n\n <div class=\"ContextMenuDivider\"></div>\n\n <div class=\"ContextMenuSection\">\n <div class=\"ContextMenuLabel\">Eliminar</div>\n <button\n type=\"button\"\n class=\"ContextMenuItem ContextMenuItem--danger\"\n (mousedown)=\"onToolbarMouseDown($event)\"\n (click)=\"exec('table-row-delete'); $event.preventDefault()\"\n [disabled]=\"isDisabled\"\n >\n <lucide-icon name=\"minus\" aria-hidden=\"true\"></lucide-icon>\n <span>Eliminar fila</span>\n </button>\n <button\n type=\"button\"\n class=\"ContextMenuItem ContextMenuItem--danger\"\n (mousedown)=\"onToolbarMouseDown($event)\"\n (click)=\"exec('table-col-delete'); $event.preventDefault()\"\n [disabled]=\"isDisabled\"\n >\n <lucide-icon name=\"minus\" aria-hidden=\"true\"></lucide-icon>\n <span>Eliminar columna</span>\n </button>\n <button\n type=\"button\"\n class=\"ContextMenuItem ContextMenuItem--danger\"\n (mousedown)=\"onToolbarMouseDown($event)\"\n (click)=\"exec('table-delete'); $event.preventDefault()\"\n [disabled]=\"isDisabled\"\n >\n <lucide-icon class=\"Icon--trash\" name=\"trash\" aria-hidden=\"true\"></lucide-icon>\n <span>Eliminar tabla</span>\n </button>\n </div>\n </div>\n </div>\n\n <div class=\"LexicalPlaceholder\" *ngIf=\"showPlaceholder\">{{ placeholder }}</div>\n <div\n #contentEditable\n class=\"LexicalContent\"\n contenteditable=\"true\"\n spellcheck=\"true\"\n (blur)=\"onEditorBlur($event)\"\n (input)=\"onInput()\"\n ></div>\n </div>\n </ng-container>\n\n <!-- En SSR: placeholder para mantener el layout (el campo no afecta SEO) -->\n <div *ngIf=\"!isBrowser\" class=\"EditorPlaceholder\" [class.Disabled]=\"isDisabled\">\n <span class=\"EditorPlaceholderText\">Editor de texto enriquecido (carga en el navegador)</span>\n </div>\n</div>\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex!important;flex-direction:column!important;width:100%;height:max-content;--radius-none: 0;--radius-xs: 2px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 16px;--radius-full: 9999px;--spacing-xxs: 2px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 16px;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);font-weight:400;width:100%;cursor:pointer;padding:0 3px;margin:0 0 4px;overflow:hidden;word-break:break-all}:host .Entry{display:flex!important;width:100%;height:32px;justify-content:flex-start;align-items:center;border:solid 0 var(--color-input-border, #d4d4d4);border-radius:12px!important;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px!important;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .EditorWrapper{min-height:150px;border:solid 1px transparent;background-color:var(--color-input-bg);border-radius:12px;display:flex;flex-direction:column;gap:0;padding:4px;user-select:text!important;-webkit-user-select:text!important;-moz-user-select:text!important;-ms-user-select:text!important}:host .EditorWrapper:focus-within{border:solid 1px var(--color-input-border-focus)}:host .EditorWrapper.Disabled{pointer-events:none;opacity:.5;-webkit-user-select:none!important;user-select:none!important}:host .EditorWrapper .Toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:0;padding-bottom:8px;width:100%;overflow:hidden;overflow-x:auto;-webkit-user-select:none;user-select:none}:host .EditorWrapper .Toolbar.Disabled{opacity:.7}:host .EditorWrapper .Toolbar .ToolSep{width:1px;height:20px;background:var(--color-input-border);margin:0 4px}:host .EditorWrapper .Toolbar .ToolBtn{border:none;border-radius:12px;background:transparent;color:var(--color-fg);padding:6px 10px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;min-width:36px;transition:background-color .12s ease,transform .12s ease,box-shadow .12s ease,color .12s ease}:host .EditorWrapper .Toolbar .ToolBtn:hover{background-color:var(--color-surface);transform:translateY(-1px);box-shadow:0 6px 14px var(--color-shadow)}:host .EditorWrapper .Toolbar .ToolBtn.Active{background:linear-gradient(135deg,var(--color-brand-soft, var(--color-info-bg)),var(--color-info-bg));color:var(--color-fg-brand);box-shadow:0 6px 14px var(--color-shadow)}:host .EditorWrapper .Toolbar .ToolBtn:disabled{cursor:not-allowed;opacity:.6}:host .EditorWrapper .Toolbar .ToolBtn i,:host .EditorWrapper .Toolbar .ToolBtn lucide-icon{font-size:14px;line-height:1}:host .EditorWrapper .Toolbar .ToolBtn i lucide-icon .lucide-svg,:host .EditorWrapper .Toolbar .ToolBtn lucide-icon lucide-icon .lucide-svg{width:14px;height:14px}:host .EditorWrapper .Toolbar .ToolBtn--undo{color:var(--color-brand)}:host .EditorWrapper .Toolbar .ToolBtn--undo:hover{color:var(--color-brand)}:host .EditorWrapper .Toolbar .ToolBtn--undo.Active{background:linear-gradient(135deg,color-mix(in srgb,var(--color-brand) 22%,transparent),color-mix(in srgb,var(--color-info-fg, var(--color-brand)) 16%,transparent));color:var(--color-brand)}:host .EditorWrapper .Toolbar .ToolBtn--color-danger-fgo{color:var(--color-brand)}:host .EditorWrapper .Toolbar .ToolBtn--color-danger-fgo:hover{color:var(--color-brand)}:host .EditorWrapper .Toolbar .ToolBtn--color-danger-fgo.Active{background:linear-gradient(135deg,color-mix(in srgb,var(--color-brand) 22%,transparent),color-mix(in srgb,var(--color-brand-strong, var(--color-brand)) 16%,transparent));color:var(--color-brand)}:host .EditorWrapper .Toolbar .ToolBtn--bold{color:var(--color-brand-strong, var(--color-brand))}:host .EditorWrapper .Toolbar .ToolBtn--bold:hover{color:var(--color-brand-strong, var(--color-brand))}:host .EditorWrapper .Toolbar .ToolBtn--bold.Active{background:linear-gradient(135deg,color-mix(in srgb,var(--color-brand-strong, var(--color-brand)) 22%,transparent),color-mix(in srgb,var(--color-brand) 16%,transparent));color:var(--color-brand-strong, var(--color-brand))}:host .EditorWrapper .Toolbar .ToolBtn--italic{color:var(--color-accent, var(--color-brand))}:host .EditorWrapper .Toolbar .ToolBtn--italic:hover{color:var(--color-accent, var(--color-brand))}:host .EditorWrapper .Toolbar .ToolBtn--italic.Active{background:linear-gradient(135deg,color-mix(in srgb,var(--color-accent, var(--color-brand)) 22%,transparent),color-mix(in srgb,var(--color-brand-strong, var(--color-brand)) 16%,transparent));color:var(--color-accent, var(--color-brand))}:host .EditorWrapper .Toolbar .ToolBtn--underline{color:var(--color-info-fg, var(--color-brand))}:host .EditorWrapper .Toolbar .ToolBtn--underline:hover{color:var(--color-info-fg, var(--color-brand))}:host .EditorWrapper .Toolbar .ToolBtn--underline.Active{background:linear-gradient(135deg,color-mix(in srgb,var(--color-info-fg, var(--color-brand)) 22%,transparent),color-mix(in srgb,var(--color-brand) 16%,transparent));color:var(--color-info-fg, var(--color-brand))}:host .EditorWrapper .Toolbar .ToolBtn--strike{color:var(--color-danger-fg)}:host .EditorWrapper .Toolbar .ToolBtn--strike:hover{color:var(--color-danger-fg)}:host .EditorWrapper .Toolbar .ToolBtn--strike.Active{background:linear-gradient(135deg,color-mix(in srgb,var(--color-danger-fg) 22%,transparent),color-mix(in srgb,var(--color-warning-fg) 16%,transparent));color:var(--color-danger-fg)}:host .EditorWrapper .Toolbar .ToolBtn--h1{color:var(--color-warning-fg)}:host .EditorWrapper .Toolbar .ToolBtn--h1:hover{color:var(--color-warning-fg)}:host .EditorWrapper .Toolbar .ToolBtn--h1.Active{background:linear-gradient(135deg,color-mix(in srgb,var(--color-warning-fg) 22%,transparent),color-mix(in srgb,var(--color-warning-fg) 16%,transparent));color:var(--color-warning-fg)}:host .EditorWrapper .Toolbar .ToolBtn--link{color:var(--color-brand)}:host .EditorWrapper .Toolbar .ToolBtn--link:hover{color:var(--color-brand)}:host .EditorWrapper .Toolbar .ToolBtn--link.Active{background:linear-gradient(135deg,color-mix(in srgb,var(--color-brand) 22%,transparent),color-mix(in srgb,var(--color-info-fg, var(--color-brand)) 16%,transparent));color:var(--color-brand)}:host .EditorWrapper .Toolbar .ToolBtn--image{color:var(--color-success-fg)}:host .EditorWrapper .Toolbar .ToolBtn--image:hover{color:var(--color-success-fg)}:host .EditorWrapper .Toolbar .ToolBtn--image.Active{background:linear-gradient(135deg,color-mix(in srgb,var(--color-success-fg) 22%,transparent),color-mix(in srgb,var(--color-info-fg, var(--color-brand)) 16%,transparent));color:var(--color-success-fg)}:host .EditorWrapper .Toolbar .ToolBtn--table{color:var(--color-warning-fg)}:host .EditorWrapper .Toolbar .ToolBtn--table:hover{color:var(--color-warning-fg)}:host .EditorWrapper .Toolbar .ToolBtn--table.Active{background:linear-gradient(135deg,color-mix(in srgb,var(--color-warning-fg) 22%,transparent),color-mix(in srgb,var(--color-warning-fg) 16%,transparent));color:var(--color-warning-fg)}:host .EditorWrapper .Toolbar .ToolBtn--ol{color:var(--color-brand)}:host .EditorWrapper .Toolbar .ToolBtn--ol:hover{color:var(--color-brand)}:host .EditorWrapper .Toolbar .ToolBtn--ol.Active{background:linear-gradient(135deg,color-mix(in srgb,var(--color-brand) 22%,transparent),color-mix(in srgb,var(--color-brand-strong, var(--color-brand)) 16%,transparent));color:var(--color-brand)}:host .EditorWrapper .Toolbar .ToolBtn--ul{color:var(--color-brand)}:host .EditorWrapper .Toolbar .ToolBtn--ul:hover{color:var(--color-brand)}:host .EditorWrapper .Toolbar .ToolBtn--ul.Active{background:linear-gradient(135deg,color-mix(in srgb,var(--color-brand) 22%,transparent),color-mix(in srgb,var(--color-brand-strong, var(--color-brand)) 16%,transparent));color:var(--color-brand)}:host .EditorWrapper .Toolbar .ToolBtn--align{color:var(--color-info-fg, var(--color-brand))}:host .EditorWrapper .Toolbar .ToolBtn--align:hover{color:var(--color-info-fg, var(--color-brand))}:host .EditorWrapper .Toolbar .ToolBtn--align.Active{background:linear-gradient(135deg,color-mix(in srgb,var(--color-info-fg, var(--color-brand)) 22%,transparent),color-mix(in srgb,var(--color-brand) 16%,transparent));color:var(--color-info-fg, var(--color-brand))}:host .EditorWrapper .Toolbar .ToolLabel{font-weight:400}:host .EditorWrapper .EditorPlaceholder{width:100%;min-height:140px;padding:.75rem 1rem;border-radius:12px;background:transparent;display:flex;align-items:center;justify-content:center}:host .EditorWrapper .EditorPlaceholder.Disabled{opacity:.6}:host .EditorWrapper .EditorPlaceholder .EditorPlaceholderText{font-size:14px;color:var(--color-fg-muted)}:host .EditorWrapper .LexicalRoot{position:relative;border-radius:12px;background-color:var(--color-surface);min-height:200px;overflow:hidden}:host .EditorWrapper .LexicalRoot.Disabled{opacity:.95}:host .EditorWrapper .LexicalRoot .LexicalPlaceholder{position:absolute;top:12px;left:16px;right:16px;color:var(--color-fg-muted);pointer-events:none;font-size:14px}:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent{background-color:transparent;min-height:200px;outline:none;font-size:14px;line-height:1.5;padding:.75rem 1rem;color:var(--color-fg);font-family:Inter,sans-serif;user-select:text!important;-webkit-user-select:text!important;-moz-user-select:text!important;-ms-user-select:text!important;pointer-events:auto!important;cursor:text!important}:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-paragraph{margin:.5em 0;font-size:14px}:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-heading-h1,:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-heading-h2,:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-heading-h3,:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-heading-h4,:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-heading-h5,:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-heading-h6{font-weight:700;display:block}:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-heading-h1{font-size:1.4rem!important;text-transform:uppercase}:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-heading-h2{font-size:1.5rem!important}:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-heading-h3{font-size:1.5rem}:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-heading-h4{font-size:1.25rem}:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-heading-h5{font-size:1.125rem}:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-heading-h6{font-size:1rem}:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-text-bold{font-weight:700}:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-text-italic{font-style:italic}:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-text-underline{text-decoration:underline;text-underline-offset:2px}:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-text-strikethrough{text-decoration:line-through}:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-text-underlineStrikethrough{text-decoration:underline line-through;text-underline-offset:2px}:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-list-ol,:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-list-ul{margin:.5em 0 .5em 1.5em;padding-left:1.25rem;list-style-position:outside}:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-list-ol{list-style-type:decimal}:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-list-ul{list-style-type:disc}:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-listitem{margin:.25em 0}:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-link{color:var(--color-fg-link);text-decoration:underline}:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-image{display:inline-block;position:relative;max-width:100%;border-radius:12px;outline:1px solid var(--color-shadow);background:var(--color-surface);padding:6px;margin:.5rem 0}:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-image img{display:block;max-width:100%;height:auto;border-radius:8px}:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-table{border-collapse:collapse;width:100%;margin:.75rem 0;table-layout:fixed}:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-table-cell,:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-table-cell-header{border:1px solid var(--color-border);padding:.5rem;vertical-align:top}:host .EditorWrapper .LexicalRoot ::ng-deep .LexicalContent .editor-table-cell-header{background:var(--color-surface-muted, var(--color-shadow));font-weight:700}:host .EditorWrapper .LexicalRoot .FloatingOverlay{position:absolute;z-index:50;display:flex;flex-direction:column;align-items:center;gap:6px;padding:6px;border-radius:12px;background:var(--color-surface);border:1px solid var(--color-border);pointer-events:auto;overflow:hidden;overflow-y:auto}:host .EditorWrapper .LexicalRoot .FloatingBtn{border:none;border-radius:12px;background:transparent;cursor:pointer;padding:6px 10px;color:var(--color-brand);transition:background-color .12s ease,transform .12s ease}:host .EditorWrapper .LexicalRoot .FloatingBtn:hover{background:var(--color-brand-soft, var(--color-info-bg));transform:translateY(-1px)}:host .EditorWrapper .LexicalRoot .FloatingBtn:disabled{opacity:.6;cursor:not-allowed}:host .EditorWrapper .LexicalRoot .FloatingBtn i,:host .EditorWrapper .LexicalRoot .FloatingBtn lucide-icon{font-size:14px}:host .EditorWrapper .LexicalRoot .FloatingBtn i lucide-icon .lucide-svg,:host .EditorWrapper .LexicalRoot .FloatingBtn lucide-icon lucide-icon .lucide-svg{width:14px;height:14px}:host .EditorWrapper .LexicalRoot .FloatingHandle{width:14px;height:14px;border-radius:8px;background:linear-gradient(135deg,var(--color-brand),var(--color-info-fg, var(--color-brand)));box-shadow:0 6px 16px var(--color-shadow);border:2px solid var(--color-fg-on-brand, var(--color-surface));cursor:nwse-resize;-webkit-user-select:none;user-select:none;touch-action:none}:host .EditorWrapper .LexicalRoot .ContextMenu{display:flex;flex-direction:column;gap:8px;min-width:220px;padding:6px;max-height:100%;overflow-y:auto;overscroll-behavior:contain}:host .EditorWrapper .LexicalRoot .ContextMenuTitle{font-weight:400;color:var(--color-fg)}:host .EditorWrapper .LexicalRoot .ContextMenuSection{display:flex;flex-direction:column}:host .EditorWrapper .LexicalRoot .ContextMenuLabel{font-size:14px;text-transform:uppercase;letter-spacing:.04em;color:var(--color-fg-muted);padding:0 2px}:host .EditorWrapper .LexicalRoot .ContextMenuDivider{height:1px;background:var(--color-shadow);margin:2px}:host .EditorWrapper .LexicalRoot .ContextMenuItem{display:flex;align-items:center;gap:10px;width:100%;border:none;background:transparent;border-radius:12px;padding:2px;cursor:pointer;color:var(--color-fg)}:host .EditorWrapper .LexicalRoot .ContextMenuItem:hover{background:var(--color-brand-soft, var(--color-info-bg))}:host .EditorWrapper .LexicalRoot .ContextMenuItem:disabled{opacity:.55;cursor:not-allowed}:host .EditorWrapper .LexicalRoot .ContextMenuItem i{width:18px;text-align:center;color:var(--color-brand)}:host .EditorWrapper .LexicalRoot .ContextMenuItem span{font-weight:400}:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger:hover{background:var(--color-danger-bg)}:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger i{color:var(--color-danger-fg)}:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger *{user-select:text!important;-webkit-user-select:text!important;-moz-user-select:text!important;-ms-user-select:text!important}:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger img{user-select:none!important;-webkit-user-select:none!important;cursor:default!important}:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger h1,:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger h2,:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger h3,:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger h4,:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger h5,:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger h6{margin:.5em 0 .25em;font-weight:700;line-height:1.2;display:block}:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger h1{font-size:2rem!important;line-height:1.15!important;text-transform:uppercase}:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger h2{font-size:1.5rem!important}:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger h3{font-size:1.5rem}:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger h4{font-size:1.25rem}:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger h5{font-size:1.125rem}:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger h6{font-size:1rem}:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger p{margin:.5em 0;font-size:14px}:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger ul,:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger ol{margin:.5em 0 .5em 1.5em;padding-left:1.25rem;list-style-type:initial;list-style-position:outside}:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger li{margin:.25em 0}:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger blockquote{margin:1em 0;padding-left:1rem;border-left:4px solid var(--color-border);font-style:italic;color:var(--color-fg-muted)}:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger pre{background:var(--color-surface-muted, var(--color-surface));padding:1rem;border-radius:8px;font-family:Courier New,monospace;overflow-x:auto;font-size:14px}:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger code{font-family:Courier New,monospace;background:var(--color-surface-muted, var(--color-surface));padding:.2em .4em;border-radius:4px;font-size:14px}:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger a{color:var(--color-fg-link);text-decoration:underline}:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger strong{font-weight:600}:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger em{font-style:italic}:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger u{text-decoration:underline;text-underline-offset:2px}:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger span[style*=\"text-decoration: underline\"],:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger span[style*=\"text-decoration:underline\"]{text-decoration:underline!important;text-underline-offset:2px}:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger span[style*=\"text-decoration: line-through\"],:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger span[style*=\"text-decoration:line-through\"]{text-decoration:line-through!important}:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger s,:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger strike,:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger del{text-decoration:line-through;text-decoration-thickness:from-font}:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger img{max-width:100%;height:auto}:host .EditorWrapper .LexicalRoot .ContextMenuItem--danger hr{border:none;border-top:1px solid var(--color-border);margin:1.5em 0}\n"] }]
9562
9508
  }], propDecorators: { label: [{
9563
9509
  type: Input
9564
9510
  }], opcional: [{
@@ -9828,7 +9774,7 @@ class SignatureEntryComponent {
9828
9774
  useExisting: forwardRef(() => SignatureEntryComponent),
9829
9775
  multi: true,
9830
9776
  },
9831
- ], viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true }], ngImport: i0, template: "<p\r\n *ngIf=\"label\"\r\n class=\"Label\"\r\n [class.Disabled]=\"isDisabled\"\r\n>\r\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\r\n</p>\r\n\r\n<p\r\n *ngIf=\"description\"\r\n class=\"Description\"\r\n [class.Disabled]=\"isDisabled\"\r\n>\r\n {{ description }}\r\n</p>\r\n\r\n<div class=\"SignatureBox\">\r\n <canvas #canvas width=\"400\" height=\"150\" class=\"SignatureCanvas\"></canvas>\r\n <button class=\"Clear\" type=\"button\" (click)=\"clearCanvas()\"><lucide-icon name=\"brush-cleaning\"></lucide-icon> limpiar firma</button>\r\n</div>\r\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex;flex-direction:column;width:100%;height:max-content;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);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(--color-input-border, #d4d4d4);border-radius:12px;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .SignatureBox{width:max-content;display:flex;flex-direction:column;gap:5px;align-items:flex-start}:host .SignatureBox .SignatureCanvas{width:180px;max-width:180px;height:101.25px;border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface);touch-action:none}:host .Clear{padding:var(--spacing-sm, 8px) var(--spacing-md, 12px);border-radius:var(--radius-lg, 12px);color:var(--color-action-neutral-fg, #525252);border-color:var(--color-action-neutral-border, #d4d4d4);background-color:var(--color-action-neutral-bg, #e5e5e5);cursor:pointer;width:100%}:host .Clear:hover{color:var(--color-action-neutral-fg-hover, #404040);border-color:var(--color-action-neutral-border-hover, #a3a3a3);background-color:var(--color-action-neutral-bg-hover, #d4d4d4)}:host .Clear:active{color:var(--color-action-neutral-fg-active, #171717);border-color:var(--color-action-neutral-border-active, #737373);background-color:var(--color-action-neutral-bg-active, #a3a3a3)}:host .Clear:disabled{opacity:.6;cursor:not-allowed}\n"], dependencies: [{ kind: "component", type: LucideIconComponent, selector: "lucide-icon", inputs: ["name", "size", "spin", "filled"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
9777
+ ], viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true }], ngImport: i0, template: "<p\r\n *ngIf=\"label\"\r\n class=\"Label\"\r\n [class.Disabled]=\"isDisabled\"\r\n>\r\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\r\n</p>\r\n\r\n<p\r\n *ngIf=\"description\"\r\n class=\"Description\"\r\n [class.Disabled]=\"isDisabled\"\r\n>\r\n {{ description }}\r\n</p>\r\n\r\n<div class=\"SignatureBox\">\r\n <canvas #canvas width=\"400\" height=\"150\" class=\"SignatureCanvas\"></canvas>\r\n <button class=\"Clear\" type=\"button\" (click)=\"clearCanvas()\"><lucide-icon name=\"brush-cleaning\"></lucide-icon> limpiar firma</button>\r\n</div>\r\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex!important;flex-direction:column!important;width:100%;height:max-content;--radius-none: 0;--radius-xs: 2px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 16px;--radius-full: 9999px;--spacing-xxs: 2px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 16px;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);font-weight:400;width:100%;cursor:pointer;padding:0 3px;margin:0 0 4px;overflow:hidden;word-break:break-all}:host .Entry{display:flex!important;width:100%;height:32px;justify-content:flex-start;align-items:center;border:solid 0 var(--color-input-border, #d4d4d4);border-radius:12px!important;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px!important;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .SignatureBox{width:max-content;display:flex;flex-direction:column;gap:5px;align-items:flex-start}:host .SignatureBox .SignatureCanvas{width:180px;max-width:180px;height:101.25px;border:1px solid var(--color-border);border-radius:12px;background:var(--color-surface);touch-action:none}:host .Clear{padding:8px 12px;border-radius:12px;color:var(--color-action-neutral-fg, #525252);border-color:var(--color-action-neutral-border, #d4d4d4);background-color:var(--color-action-neutral-bg, #e5e5e5);cursor:pointer;width:100%}:host .Clear:hover{color:var(--color-action-neutral-fg-hover, #404040);border-color:var(--color-action-neutral-border-hover, #a3a3a3);background-color:var(--color-action-neutral-bg-hover, #d4d4d4)}:host .Clear:active{color:var(--color-action-neutral-fg-active, #171717);border-color:var(--color-action-neutral-border-active, #737373);background-color:var(--color-action-neutral-bg-active, #a3a3a3)}:host .Clear:disabled{opacity:.6;cursor:not-allowed}\n"], dependencies: [{ kind: "component", type: LucideIconComponent, selector: "lucide-icon", inputs: ["name", "size", "spin", "filled"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
9832
9778
  }
9833
9779
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SignatureEntryComponent, decorators: [{
9834
9780
  type: Component,
@@ -9840,7 +9786,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
9840
9786
  useExisting: forwardRef(() => SignatureEntryComponent),
9841
9787
  multi: true,
9842
9788
  },
9843
- ], template: "<p\r\n *ngIf=\"label\"\r\n class=\"Label\"\r\n [class.Disabled]=\"isDisabled\"\r\n>\r\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\r\n</p>\r\n\r\n<p\r\n *ngIf=\"description\"\r\n class=\"Description\"\r\n [class.Disabled]=\"isDisabled\"\r\n>\r\n {{ description }}\r\n</p>\r\n\r\n<div class=\"SignatureBox\">\r\n <canvas #canvas width=\"400\" height=\"150\" class=\"SignatureCanvas\"></canvas>\r\n <button class=\"Clear\" type=\"button\" (click)=\"clearCanvas()\"><lucide-icon name=\"brush-cleaning\"></lucide-icon> limpiar firma</button>\r\n</div>\r\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex;flex-direction:column;width:100%;height:max-content;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);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(--color-input-border, #d4d4d4);border-radius:12px;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .SignatureBox{width:max-content;display:flex;flex-direction:column;gap:5px;align-items:flex-start}:host .SignatureBox .SignatureCanvas{width:180px;max-width:180px;height:101.25px;border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface);touch-action:none}:host .Clear{padding:var(--spacing-sm, 8px) var(--spacing-md, 12px);border-radius:var(--radius-lg, 12px);color:var(--color-action-neutral-fg, #525252);border-color:var(--color-action-neutral-border, #d4d4d4);background-color:var(--color-action-neutral-bg, #e5e5e5);cursor:pointer;width:100%}:host .Clear:hover{color:var(--color-action-neutral-fg-hover, #404040);border-color:var(--color-action-neutral-border-hover, #a3a3a3);background-color:var(--color-action-neutral-bg-hover, #d4d4d4)}:host .Clear:active{color:var(--color-action-neutral-fg-active, #171717);border-color:var(--color-action-neutral-border-active, #737373);background-color:var(--color-action-neutral-bg-active, #a3a3a3)}:host .Clear:disabled{opacity:.6;cursor:not-allowed}\n"] }]
9789
+ ], template: "<p\r\n *ngIf=\"label\"\r\n class=\"Label\"\r\n [class.Disabled]=\"isDisabled\"\r\n>\r\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\r\n</p>\r\n\r\n<p\r\n *ngIf=\"description\"\r\n class=\"Description\"\r\n [class.Disabled]=\"isDisabled\"\r\n>\r\n {{ description }}\r\n</p>\r\n\r\n<div class=\"SignatureBox\">\r\n <canvas #canvas width=\"400\" height=\"150\" class=\"SignatureCanvas\"></canvas>\r\n <button class=\"Clear\" type=\"button\" (click)=\"clearCanvas()\"><lucide-icon name=\"brush-cleaning\"></lucide-icon> limpiar firma</button>\r\n</div>\r\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex!important;flex-direction:column!important;width:100%;height:max-content;--radius-none: 0;--radius-xs: 2px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 16px;--radius-full: 9999px;--spacing-xxs: 2px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 16px;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);font-weight:400;width:100%;cursor:pointer;padding:0 3px;margin:0 0 4px;overflow:hidden;word-break:break-all}:host .Entry{display:flex!important;width:100%;height:32px;justify-content:flex-start;align-items:center;border:solid 0 var(--color-input-border, #d4d4d4);border-radius:12px!important;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px!important;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .SignatureBox{width:max-content;display:flex;flex-direction:column;gap:5px;align-items:flex-start}:host .SignatureBox .SignatureCanvas{width:180px;max-width:180px;height:101.25px;border:1px solid var(--color-border);border-radius:12px;background:var(--color-surface);touch-action:none}:host .Clear{padding:8px 12px;border-radius:12px;color:var(--color-action-neutral-fg, #525252);border-color:var(--color-action-neutral-border, #d4d4d4);background-color:var(--color-action-neutral-bg, #e5e5e5);cursor:pointer;width:100%}:host .Clear:hover{color:var(--color-action-neutral-fg-hover, #404040);border-color:var(--color-action-neutral-border-hover, #a3a3a3);background-color:var(--color-action-neutral-bg-hover, #d4d4d4)}:host .Clear:active{color:var(--color-action-neutral-fg-active, #171717);border-color:var(--color-action-neutral-border-active, #737373);background-color:var(--color-action-neutral-bg-active, #a3a3a3)}:host .Clear:disabled{opacity:.6;cursor:not-allowed}\n"] }]
9844
9790
  }], propDecorators: { label: [{
9845
9791
  type: Input
9846
9792
  }], opcional: [{
@@ -11645,7 +11591,7 @@ class MediaEntryComponent {
11645
11591
  useExisting: forwardRef(() => MediaEntryComponent),
11646
11592
  multi: true,
11647
11593
  },
11648
- ], viewQueries: [{ propertyName: "uploadFormRef", first: true, predicate: ["uploadForm"], descendants: true }, { propertyName: "sortableContainer", first: true, predicate: ["sortableContainer"], descendants: true }], ngImport: i0, template: "<p\n *ngIf=\"label\"\n class=\"Label\"\n [class.Disabled]=\"isDisabled\"\n>\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\n</p>\n\n<p\n *ngIf=\"description\"\n class=\"Description\"\n [class.Disabled]=\"isDisabled\"\n>\n {{ description }}\n</p>\n<p *ngIf=\"allowedTypesText\" class=\"Types\" [class.Disabled]=\"isDisabled\">\n Tipos: {{ allowedTypesText }}\n</p>\n\n<!-- ESTRUCTURA UNIFICADA -->\n<ng-container>\n <!-- Upload Box -->\n <form\n #uploadForm\n (change)=\"onFileInput($event)\"\n (dragover)=\"onDragOver($event)\"\n (dragenter)=\"onDragEnter($event)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event)\"\n >\n <div\n class=\"UploadBox\"\n [class.Disabled]=\"loading\"\n [class.Dragging]=\"isDragging\"\n [class.Single]=\"!multiple\"\n [class.Multiple]=\"multiple\"\n >\n <label class=\"DropLabel\">\n <input type=\"file\" [multiple]=\"multiple\" [accept]=\"effectiveTypes.join(',')\" hidden />\n <div class=\"Texts\">\n <lucide-icon class=\"UploadIcon\" name=\"cloud-upload\" [size]=\"28\"></lucide-icon>\n <span class=\"Insentivo\">\n {{\n isDragging\n ? (isImageMode ? \"\u00A1Suelta las im\u00E1genes aqu\u00ED!\" : \"\u00A1Suelta los archivos aqu\u00ED!\")\n : multiple\n ? (isImageMode ? \"Arrastra varias im\u00E1genes aqu\u00ED\" : \"Arrastra varios archivos aqu\u00ED\")\n : (isImageMode ? \"Arrastra una imagen aqu\u00ED\" : \"Arrastra un archivo aqu\u00ED\")\n }}\n </span>\n <span class=\"Or\">O</span>\n <span class=\"Clicked\">haz clic para seleccionar</span>\n <span class=\"Info\">\n M\u00E1x: {{ maxItems }} item{{ maxItems > 1 ? \"s\" : \"\" }}<span *ngIf=\"maxSize\"> \u00B7 {{ (maxSize * 1024 * 1024) | fileSize }}</span>\n </span>\n </div>\n </label>\n </div>\n </form>\n\n <div *ngIf=\"statusMessage\" class=\"StatusMessage\">\n {{ statusMessage }}\n </div>\n \n <!-- Lista de items en proceso -->\n <div \n class=\"MediaSection\" \n *ngIf=\"pending.length\"\n [class.CardsDisplay]=\"isCardsDisplay\"\n >\n <h4 class=\"Title\">\n <span>Pendientes</span>\n </h4>\n <ul \n class=\"MediaList\"\n [class.CardsDisplay]=\"isCardsDisplay\"\n [class.ItemsDisplay]=\"isItemsDisplay\"\n >\n <li \n class=\"MediaItem\" \n *ngFor=\"let item of pending\"\n [class.FileItem]=\"isFileMode\"\n [class.ImageItem]=\"isImageMode\"\n >\n <div class=\"Thumbnail\" *ngIf=\"isFileMode\">\n <lucide-icon\n class=\"FileIcon\"\n [name]=\"getFileIconName(item.type)\"\n [size]=\"28\"\n />\n </div>\n <div class=\"FileInfo\">\n <span class=\"Name\">{{ item.name }}</span>\n <span class=\"Size\">{{ item.size | fileSize }}</span>\n <div class=\"Progress\">\n <div class=\"Bar\" [style.width.%]=\"item.progress\"></div>\n </div>\n <span class=\"ProgressLabel\">{{ item.phase === 'processing' ? 'Procesando...' : (item.progress + '%') }}</span>\n </div>\n </li>\n </ul>\n </div>\n\n <!-- Lista de items subidos correctamente -->\n <div \n class=\"MediaSection\" \n *ngIf=\"uploaded.length\"\n [class.CardsDisplay]=\"isCardsDisplay\"\n >\n <h4 class=\"Title\">\n <span>{{ isImageMode ? \"Im\u00E1genes Cargadas\" : \"Archivos Cargados\" }}</span>\n <button type=\"button\" (click)=\"clearAllUploaded()\" class=\"ClearAll\">\n <lucide-icon name=\"brush-cleaning\"></lucide-icon>\n </button>\n </h4>\n\n <ul \n class=\"MediaList\"\n [class.CardsDisplay]=\"isCardsDisplay\"\n [class.ItemsDisplay]=\"isItemsDisplay\"\n [class.IsSortable]=\"sortable && !isDisabled && uploaded.length > 1\"\n #sortableContainer\n >\n <li\n class=\"MediaItem MediaItemDraggable\"\n [class.FileItem]=\"isFileMode\"\n [class.ImageItem]=\"isImageMode\"\n *ngFor=\"let item of uploaded; let i = index; trackBy: trackUploaded\"\n [attr.data-index]=\"i\"\n >\n\n <div class=\"Thumbnail\">\n <img\n *ngIf=\"isImageMode\"\n [src]=\"getPreviewUrl(item.urlEncrypted || item.url) || undefined\"\n alt=\"Imagen cargada\"\n draggable=\"false\"\n />\n <lucide-icon\n *ngIf=\"isFileMode\"\n class=\"FileIcon\"\n [name]=\"getFileIconName(item.type)\"\n [size]=\"28\"\n />\n </div>\n\n <div class=\"FileInfo\">\n <span class=\"Name\">{{ item.name }}</span>\n <p class=\"Tags\">\n <span class=\"Size\">{{ item.size | fileSize }}</span>\n <span *ngIf=\"isPrimary(i)\" class=\"PrimaryTag\">\n {{ isImageMode ? \"Primaria\" : \"Primario\" }}\n </span>\n </p>\n </div>\n <!-- Preview: MediaViewerService (singleton); UI global en media-viewer-service -->\n <div class=\"Actions\">\n <button\n *ngIf=\"canPreviewInBrowser(item)\"\n type=\"button\"\n class=\"Open\"\n (click)=\"openGeneralMediaPreview(item)\"\n title=\"Ver\"\n >\n <lucide-icon class=\"Icon--eye\" name=\"eye\"></lucide-icon>\n </button>\n <button\n *ngIf=\"!canPreviewInBrowser(item)\"\n type=\"button\"\n class=\"Open\"\n (click)=\"downloadUploaded(item)\"\n title=\"Descargar\"\n >\n <lucide-icon class=\"Icon--download\" name=\"download\"></lucide-icon>\n </button>\n <button type=\"button\" class=\"Cancel\" (click)=\"removeUploaded(i)\" title=\"Eliminar\">\n <lucide-icon class=\"Icon--trash\" name=\"trash\"></lucide-icon>\n </button>\n </div>\n </li>\n </ul>\n </div>\n\n <!-- Lista de errores -->\n <div \n class=\"MediaSection Error\" \n *ngIf=\"failed.length\"\n [class.CardsDisplay]=\"isCardsDisplay\"\n >\n <h4 class=\"Title\">\n <span>Errores</span>\n <button type=\"button\" (click)=\"clearAllFailed()\" class=\"ClearAll\">\n <lucide-icon name=\"brush-cleaning\"></lucide-icon>\n </button>\n </h4>\n <ul \n class=\"MediaList\"\n [class.CardsDisplay]=\"isCardsDisplay\"\n [class.ItemsDisplay]=\"isItemsDisplay\"\n >\n <li \n class=\"MediaItem\"\n [class.FileItem]=\"isFileMode\"\n [class.ImageItem]=\"isImageMode\"\n *ngFor=\"let item of failed; let i = index\"\n >\n <div class=\"FileInfo\">\n <span class=\"Name\">{{ item.name }}</span>\n <span class=\"ErrorMsg\">{{ item.error }}</span>\n </div>\n <button type=\"button\" class=\"Cancel\" (click)=\"removeFailed(i)\" title=\"Eliminar\">\n <lucide-icon class=\"Icon--trash\" name=\"trash\"></lucide-icon>\n </button>\n </li>\n </ul>\n </div>\n</ng-container>\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex;flex-direction:column;width:100%;height:max-content;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);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(--color-input-border, #d4d4d4);border-radius:12px;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .Types{margin:0 0 4px;padding:0 3px;font-size:14px;font-weight:400;color:var(--color-fg-muted);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}:host form{width:100%;height:max-content;-webkit-user-select:none;user-select:none}:host form.InCardMode{flex-grow:1;height:max-content;overflow:hidden}:host form .UploadBox{display:flex;justify-content:center;align-items:center;width:100%;min-height:120px;padding:16px;background-color:var(--color-input-bg);border:1px dashed var(--color-input-border);border-radius:16px}:host form .UploadBox[class~=Disabled]{filter:saturate(0%)}:host form .UploadBox[class~=Dragging]{border-color:var(--color-input-border-focus);background-color:var(--color-input-bg-drag)}:host form .UploadBox[class~=Dragging] .UploadIcon{color:var(--color-fg-brand)}:host form .UploadBox .DropLabel{display:flex;width:100%;height:100%;cursor:pointer}:host form .UploadBox .Texts{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}:host form .UploadBox .Texts .UploadIcon{display:flex;align-items:center;justify-content:center;width:48px;height:48px;margin-bottom:4px;border-radius:50%;background:var(--color-surface);color:var(--color-fg-brand)}:host form .UploadBox .Texts .Insentivo{text-align:center;color:var(--color-fg)}@media (width <= 768px){:host form .UploadBox .Texts .Insentivo{display:none}}:host form .UploadBox .Texts .Or{color:var(--color-fg-muted)}@media (width <= 768px){:host form .UploadBox .Texts .Or{display:none}}:host form .UploadBox .Texts .Clicked{width:max-content;padding:8px 16px;border-radius:16px;background-color:var(--color-brand-soft);color:var(--color-fg-brand);cursor:pointer}:host form .UploadBox .Texts .Info{margin-top:4px;max-width:220px;text-align:center;color:var(--color-fg-muted)}:host .StatusMessage{position:relative;margin-top:8px;padding:8px 12px;border-radius:12px;background:var(--color-danger-bg);color:var(--color-danger-fg);font-size:14px;animation:fade-in-out .3s ease}@keyframes fade-in-out{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}:host .MediaSection{display:flex;flex-direction:column;gap:4px;width:100%;margin-top:8px;padding:4px;border-radius:16px;background:var(--color-input-bg)}:host .MediaSection.Error{background:var(--color-danger-bg)}:host .MediaSection .Title{display:flex;align-items:center;justify-content:space-between;gap:4px;width:100%;margin:0;padding:4px 8px;font-size:14px;font-weight:400;color:var(--color-fg-muted);overflow:hidden}:host .MediaSection .Title .ClearAll{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:32px;height:32px;padding:4px 8px;border:none;border-radius:50%;background:transparent;color:var(--color-fg-muted);cursor:pointer;font:inherit;color:var(--color-danger-fg)}:host .MediaSection .Title .ClearAll:hover{background:var(--color-surface-muted);color:var(--color-fg)}:host .MediaSection .Title .ClearAll:active{transform:scale(.98)}:host .MediaSection .Title .ClearAll:hover{color:var(--color-danger-fg);background:var(--color-danger-bg)}:host .MediaList{display:flex;flex-direction:column;gap:4px;margin:0;padding:0;list-style:none}:host .MediaList.IsSortable .MediaItemDraggable{cursor:grab;touch-action:none}:host .MediaList.is-reordering .MediaItemDraggable{cursor:grabbing}:host .MediaList.is-reordering .MediaItemDraggable[class~=ActiveDragItem]{background:var(--color-surface-muted);box-shadow:none}:host .MediaList.is-reordering .MediaItemDraggable[class~=ActiveDragItem] .Thumbnail,:host .MediaList.is-reordering .MediaItemDraggable[class~=ActiveDragItem] .FileInfo,:host .MediaList.is-reordering .MediaItemDraggable[class~=ActiveDragItem] .Actions{opacity:0}:host .MediaList .MediaItem{display:flex;align-items:center;gap:8px;width:100%;min-height:44px;padding:8px;border-radius:12px;position:relative;background:transparent}:host .MediaList .MediaItem:hover{background:var(--color-surface)}:host .MediaList .MediaItem[class~=ActiveDragItem]{background:var(--color-surface-muted);cursor:grabbing}:host .MediaList .MediaItem[class~=xu-list-reorder-ghost]{background:var(--color-surface);cursor:grabbing}:host .MediaList .MediaItem .Thumbnail{display:flex;align-items:center;justify-content:center;width:36px;min-width:36px;height:36px;overflow:hidden;border-radius:10px;background:var(--color-surface);cursor:default}:host .MediaList .MediaItem .Thumbnail.Clickable{cursor:pointer}:host .MediaList .MediaItem .Thumbnail img{width:100%;height:100%;object-fit:cover}:host .MediaList .MediaItem .Thumbnail lucide-icon.FileIcon{color:var(--color-icon)}:host .MediaList .MediaItem .FileInfo{display:flex;flex-direction:column;gap:4px;min-width:0;width:100%;overflow:hidden}:host .MediaList .MediaItem .FileInfo .Name{width:100%;font-size:14px;font-weight:400;color:var(--color-fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .MediaList .MediaItem .FileInfo .Tags{display:flex;align-items:center;flex-wrap:wrap;gap:4px;margin:0}:host .MediaList .MediaItem .FileInfo .Tags .Size{width:max-content;font-size:14px;color:var(--color-fg-muted)}:host .MediaList .MediaItem .FileInfo .Tags .PrimaryTag{width:max-content;padding:2px 4px;border-radius:8px;font-size:14px;background-color:var(--color-success-bg);color:var(--color-success-fg)}:host .MediaList .MediaItem .FileInfo .ErrorMsg{width:auto;font-size:14px;color:var(--color-danger-fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .MediaList .MediaItem .FileInfo .Progress{width:100%;height:4px;overflow:hidden;border-radius:4px;background-color:var(--color-surface-muted)}:host .MediaList .MediaItem .FileInfo .Progress .Bar{height:100%;background-color:var(--color-brand)}:host .MediaList .MediaItem .FileInfo .ProgressLabel{font-size:14px;color:var(--color-fg-muted)}:host .MediaList .MediaItem .Actions{display:flex;align-items:center;gap:4px;width:max-content;flex-shrink:0;z-index:10}:host .MediaList .MediaItem .Open,:host .MediaList .MediaItem .Cancel{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:32px;height:32px;padding:4px 8px;border:none;border-radius:50%;background:transparent;color:var(--color-fg-muted);cursor:pointer;font:inherit}:host .MediaList .MediaItem .Open:hover,:host .MediaList .MediaItem .Cancel:hover{background:var(--color-surface-muted);color:var(--color-fg)}:host .MediaList .MediaItem .Open:active,:host .MediaList .MediaItem .Cancel:active{transform:scale(.98)}:host .MediaList .MediaItem .Open{color:var(--color-fg-brand)}:host .MediaList .MediaItem .Open:hover{color:var(--color-fg-brand);background:var(--color-brand-soft)}:host .MediaList .MediaItem .Cancel{color:var(--color-danger-fg)}:host .MediaList .MediaItem .Cancel:hover{color:var(--color-danger-fg);background:var(--color-danger-bg)}:host .MediaList.ItemsDisplay .MediaItem .Thumbnail{width:36px;min-width:36px;height:36px}:host .MediaList.CardsDisplay{display:grid;gap:4px;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));grid-auto-rows:max-content}:host .MediaList.CardsDisplay .MediaItem{flex-direction:column;align-items:stretch;min-height:0;padding:8px;background:var(--color-surface)}:host .MediaList.CardsDisplay .MediaItem .Thumbnail{width:100%;min-width:0;height:72px;border-radius:12px}:host .MediaList.CardsDisplay .MediaItem .FileInfo .Tags{flex-direction:row;flex-wrap:wrap;align-items:center}:host .MediaList.CardsDisplay .MediaItem .FileInfo .Tags .Size{width:max-content;white-space:nowrap}:host .MediaList.CardsDisplay .MediaItem .FileInfo .ErrorMsg{width:100%}:host .MediaList.CardsDisplay .MediaItem .Actions{width:100%;justify-content:center}.ExpandImage{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:var(--color-scrim-strong, var(--color-scrim));z-index:1000;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(5px);overflow:hidden;touch-action:none}.ExpandImage .CloseExpandImage{position:absolute;top:10px;right:10px;z-index:10;width:40px;height:40px;display:flex;align-items:center;justify-content:center;background-color:var(--danger);color:#fff;border-radius:var(--radius-md);cursor:pointer;transition:all .2s ease}.ExpandImage .CloseExpandImage:hover{background-color:var(--danger-hover);transform:scale(1.1)}.ExpandImage .CloseExpandImage:active{transform:scale(.95)}.ExpandImage .CloseExpandImage i,.ExpandImage .CloseExpandImage lucide-icon{pointer-events:none;font-size:14px}.ExpandImage .CloseExpandImage i lucide-icon .lucide-svg,.ExpandImage .CloseExpandImage lucide-icon lucide-icon .lucide-svg{width:14px;height:14px}.ExpandImage .Image{height:100%;width:100%;display:flex;align-items:center;justify-content:center;position:relative}.ExpandImage .Image img{position:absolute;top:0;left:0;transform-origin:center center;width:100%;height:100%;object-fit:contain;touch-action:none;-webkit-user-select:none;user-select:none;pointer-events:none}.ExpandImage .Prev,.ExpandImage .Next{background-color:var(--color-scrim);padding:1.5rem;color:var(--color-fg-muted, var(--color-fg-muted));z-index:200;position:absolute;top:45%;pointer-events:auto;cursor:pointer;transition:all .2s ease;border-radius:var(--radius-md)}.ExpandImage .Prev:hover,.ExpandImage .Next:hover,.ExpandImage .Prev:active,.ExpandImage .Next:active{background-color:var(--color-scrim);color:#fff}.ExpandImage .Prev i,.ExpandImage .Prev lucide-icon,.ExpandImage .Next i,.ExpandImage .Next lucide-icon{pointer-events:none;font-size:14px}.ExpandImage .Prev i lucide-icon .lucide-svg,.ExpandImage .Prev lucide-icon lucide-icon .lucide-svg,.ExpandImage .Next i lucide-icon .lucide-svg,.ExpandImage .Next lucide-icon lucide-icon .lucide-svg{width:14px;height:14px}.ExpandImage .Prev{left:0;border-radius:0 var(--radius-lg) var(--radius-lg) 0}.ExpandImage .Next{right:0;border-radius:var(--radius-lg) 0 0 var(--radius-lg)}\n"], dependencies: [{ kind: "component", type: LucideIconComponent, selector: "lucide-icon", inputs: ["name", "size", "spin", "filled"] }, { 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: FileSizePipe, name: "fileSize" }] });
11594
+ ], viewQueries: [{ propertyName: "uploadFormRef", first: true, predicate: ["uploadForm"], descendants: true }, { propertyName: "sortableContainer", first: true, predicate: ["sortableContainer"], descendants: true }], ngImport: i0, template: "<p\n *ngIf=\"label\"\n class=\"Label\"\n [class.Disabled]=\"isDisabled\"\n>\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\n</p>\n\n<p\n *ngIf=\"description\"\n class=\"Description\"\n [class.Disabled]=\"isDisabled\"\n>\n {{ description }}\n</p>\n<p *ngIf=\"allowedTypesText\" class=\"Types\" [class.Disabled]=\"isDisabled\">\n Tipos: {{ allowedTypesText }}\n</p>\n\n<!-- ESTRUCTURA UNIFICADA -->\n<ng-container>\n <!-- Upload Box -->\n <form\n #uploadForm\n (change)=\"onFileInput($event)\"\n (dragover)=\"onDragOver($event)\"\n (dragenter)=\"onDragEnter($event)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event)\"\n >\n <div\n class=\"UploadBox\"\n [class.Disabled]=\"loading\"\n [class.Dragging]=\"isDragging\"\n [class.Single]=\"!multiple\"\n [class.Multiple]=\"multiple\"\n >\n <label class=\"DropLabel\">\n <input type=\"file\" [multiple]=\"multiple\" [accept]=\"effectiveTypes.join(',')\" hidden />\n <div class=\"Texts\">\n <lucide-icon class=\"UploadIcon\" name=\"cloud-upload\" [size]=\"28\"></lucide-icon>\n <span class=\"Insentivo\">\n {{\n isDragging\n ? (isImageMode ? \"\u00A1Suelta las im\u00E1genes aqu\u00ED!\" : \"\u00A1Suelta los archivos aqu\u00ED!\")\n : multiple\n ? (isImageMode ? \"Arrastra varias im\u00E1genes aqu\u00ED\" : \"Arrastra varios archivos aqu\u00ED\")\n : (isImageMode ? \"Arrastra una imagen aqu\u00ED\" : \"Arrastra un archivo aqu\u00ED\")\n }}\n </span>\n <span class=\"Or\">O</span>\n <span class=\"Clicked\">haz clic para seleccionar</span>\n <span class=\"Info\">\n M\u00E1x: {{ maxItems }} item{{ maxItems > 1 ? \"s\" : \"\" }}<span *ngIf=\"maxSize\"> \u00B7 {{ (maxSize * 1024 * 1024) | fileSize }}</span>\n </span>\n </div>\n </label>\n </div>\n </form>\n\n <div *ngIf=\"statusMessage\" class=\"StatusMessage\">\n {{ statusMessage }}\n </div>\n \n <!-- Lista de items en proceso -->\n <div \n class=\"MediaSection\" \n *ngIf=\"pending.length\"\n [class.CardsDisplay]=\"isCardsDisplay\"\n >\n <h4 class=\"Title\">\n <span>Pendientes</span>\n </h4>\n <ul \n class=\"MediaList\"\n [class.CardsDisplay]=\"isCardsDisplay\"\n [class.ItemsDisplay]=\"isItemsDisplay\"\n >\n <li \n class=\"MediaItem\" \n *ngFor=\"let item of pending\"\n [class.FileItem]=\"isFileMode\"\n [class.ImageItem]=\"isImageMode\"\n >\n <div class=\"Thumbnail\" *ngIf=\"isFileMode\">\n <lucide-icon\n class=\"FileIcon\"\n [name]=\"getFileIconName(item.type)\"\n [size]=\"28\"\n />\n </div>\n <div class=\"FileInfo\">\n <span class=\"Name\">{{ item.name }}</span>\n <span class=\"Size\">{{ item.size | fileSize }}</span>\n <div class=\"Progress\">\n <div class=\"Bar\" [style.width.%]=\"item.progress\"></div>\n </div>\n <span class=\"ProgressLabel\">{{ item.phase === 'processing' ? 'Procesando...' : (item.progress + '%') }}</span>\n </div>\n </li>\n </ul>\n </div>\n\n <!-- Lista de items subidos correctamente -->\n <div \n class=\"MediaSection\" \n *ngIf=\"uploaded.length\"\n [class.CardsDisplay]=\"isCardsDisplay\"\n >\n <h4 class=\"Title\">\n <span>{{ isImageMode ? \"Im\u00E1genes Cargadas\" : \"Archivos Cargados\" }}</span>\n <button type=\"button\" (click)=\"clearAllUploaded()\" class=\"ClearAll\">\n <lucide-icon name=\"brush-cleaning\"></lucide-icon>\n </button>\n </h4>\n\n <ul \n class=\"MediaList\"\n [class.CardsDisplay]=\"isCardsDisplay\"\n [class.ItemsDisplay]=\"isItemsDisplay\"\n [class.IsSortable]=\"sortable && !isDisabled && uploaded.length > 1\"\n #sortableContainer\n >\n <li\n class=\"MediaItem MediaItemDraggable\"\n [class.FileItem]=\"isFileMode\"\n [class.ImageItem]=\"isImageMode\"\n *ngFor=\"let item of uploaded; let i = index; trackBy: trackUploaded\"\n [attr.data-index]=\"i\"\n >\n\n <div class=\"Thumbnail\">\n <img\n *ngIf=\"isImageMode\"\n [src]=\"getPreviewUrl(item.urlEncrypted || item.url) || undefined\"\n alt=\"Imagen cargada\"\n draggable=\"false\"\n />\n <lucide-icon\n *ngIf=\"isFileMode\"\n class=\"FileIcon\"\n [name]=\"getFileIconName(item.type)\"\n [size]=\"28\"\n />\n </div>\n\n <div class=\"FileInfo\">\n <span class=\"Name\">{{ item.name }}</span>\n <p class=\"Tags\">\n <span class=\"Size\">{{ item.size | fileSize }}</span>\n <span *ngIf=\"isPrimary(i)\" class=\"PrimaryTag\">\n {{ isImageMode ? \"Primaria\" : \"Primario\" }}\n </span>\n </p>\n </div>\n <!-- Preview: MediaViewerService (singleton); UI global en media-viewer-service -->\n <div class=\"Actions\">\n <button\n *ngIf=\"canPreviewInBrowser(item)\"\n type=\"button\"\n class=\"Open\"\n (click)=\"openGeneralMediaPreview(item)\"\n title=\"Ver\"\n >\n <lucide-icon class=\"Icon--eye\" name=\"eye\"></lucide-icon>\n </button>\n <button\n *ngIf=\"!canPreviewInBrowser(item)\"\n type=\"button\"\n class=\"Open\"\n (click)=\"downloadUploaded(item)\"\n title=\"Descargar\"\n >\n <lucide-icon class=\"Icon--download\" name=\"download\"></lucide-icon>\n </button>\n <button type=\"button\" class=\"Cancel\" (click)=\"removeUploaded(i)\" title=\"Eliminar\">\n <lucide-icon class=\"Icon--trash\" name=\"trash\"></lucide-icon>\n </button>\n </div>\n </li>\n </ul>\n </div>\n\n <!-- Lista de errores -->\n <div \n class=\"MediaSection Error\" \n *ngIf=\"failed.length\"\n [class.CardsDisplay]=\"isCardsDisplay\"\n >\n <h4 class=\"Title\">\n <span>Errores</span>\n <button type=\"button\" (click)=\"clearAllFailed()\" class=\"ClearAll\">\n <lucide-icon name=\"brush-cleaning\"></lucide-icon>\n </button>\n </h4>\n <ul \n class=\"MediaList\"\n [class.CardsDisplay]=\"isCardsDisplay\"\n [class.ItemsDisplay]=\"isItemsDisplay\"\n >\n <li \n class=\"MediaItem\"\n [class.FileItem]=\"isFileMode\"\n [class.ImageItem]=\"isImageMode\"\n *ngFor=\"let item of failed; let i = index\"\n >\n <div class=\"FileInfo\">\n <span class=\"Name\">{{ item.name }}</span>\n <span class=\"ErrorMsg\">{{ item.error }}</span>\n </div>\n <button type=\"button\" class=\"Cancel\" (click)=\"removeFailed(i)\" title=\"Eliminar\">\n <lucide-icon class=\"Icon--trash\" name=\"trash\"></lucide-icon>\n </button>\n </li>\n </ul>\n </div>\n</ng-container>\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex!important;flex-direction:column!important;width:100%;height:max-content;--radius-none: 0;--radius-xs: 2px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 16px;--radius-full: 9999px;--spacing-xxs: 2px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 16px;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);font-weight:400;width:100%;cursor:pointer;padding:0 3px;margin:0 0 4px;overflow:hidden;word-break:break-all}:host .Entry{display:flex!important;width:100%;height:32px;justify-content:flex-start;align-items:center;border:solid 0 var(--color-input-border, #d4d4d4);border-radius:12px!important;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px!important;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .Types{margin:0 0 4px;padding:0 3px;font-size:14px;font-weight:400;color:var(--color-fg-muted);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}:host form{width:100%;height:max-content;-webkit-user-select:none;user-select:none}:host form.InCardMode{flex-grow:1;height:max-content;overflow:hidden}:host form .UploadBox{display:flex;justify-content:center;align-items:center;width:100%;min-height:120px;padding:16px;background-color:var(--color-input-bg);border:1px dashed var(--color-input-border);border-radius:16px}:host form .UploadBox[class~=Disabled]{filter:saturate(0%)}:host form .UploadBox[class~=Dragging]{border-color:var(--color-input-border-focus);background-color:var(--color-input-bg-drag)}:host form .UploadBox[class~=Dragging] .UploadIcon{color:var(--color-fg-brand)}:host form .UploadBox .DropLabel{display:flex;width:100%;height:100%;cursor:pointer}:host form .UploadBox .Texts{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}:host form .UploadBox .Texts .UploadIcon{display:flex;align-items:center;justify-content:center;width:48px;height:48px;margin-bottom:4px;border-radius:50%;background:var(--color-surface);color:var(--color-fg-brand)}:host form .UploadBox .Texts .Insentivo{text-align:center;color:var(--color-fg)}@media (width <= 768px){:host form .UploadBox .Texts .Insentivo{display:none}}:host form .UploadBox .Texts .Or{color:var(--color-fg-muted)}@media (width <= 768px){:host form .UploadBox .Texts .Or{display:none}}:host form .UploadBox .Texts .Clicked{width:max-content;padding:8px 16px;border-radius:16px;background-color:var(--color-brand-soft);color:var(--color-fg-brand);cursor:pointer}:host form .UploadBox .Texts .Info{margin-top:4px;max-width:220px;text-align:center;color:var(--color-fg-muted)}:host .StatusMessage{position:relative;margin-top:8px;padding:8px 12px;border-radius:12px;background:var(--color-danger-bg);color:var(--color-danger-fg);font-size:14px;animation:fade-in-out .3s ease}@keyframes fade-in-out{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}:host .MediaSection{display:flex;flex-direction:column;gap:4px;width:100%;margin-top:8px;padding:4px;border-radius:16px;background:var(--color-input-bg)}:host .MediaSection.Error{background:var(--color-danger-bg)}:host .MediaSection .Title{display:flex;align-items:center;justify-content:space-between;gap:4px;width:100%;margin:0;padding:4px 8px;font-size:14px;font-weight:400;color:var(--color-fg-muted);overflow:hidden}:host .MediaSection .Title .ClearAll{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:32px;height:32px;padding:4px 8px;border:none;border-radius:50%;background:transparent;color:var(--color-fg-muted);cursor:pointer;font:inherit;color:var(--color-danger-fg)}:host .MediaSection .Title .ClearAll:hover{background:var(--color-surface-muted);color:var(--color-fg)}:host .MediaSection .Title .ClearAll:active{transform:scale(.98)}:host .MediaSection .Title .ClearAll:hover{color:var(--color-danger-fg);background:var(--color-danger-bg)}:host .MediaList{display:flex;flex-direction:column;gap:4px;margin:0;padding:0;list-style:none}:host .MediaList.IsSortable .MediaItemDraggable{cursor:grab;touch-action:none}:host .MediaList.is-reordering .MediaItemDraggable{cursor:grabbing}:host .MediaList.is-reordering .MediaItemDraggable[class~=ActiveDragItem]{background:var(--color-surface-muted);box-shadow:none}:host .MediaList.is-reordering .MediaItemDraggable[class~=ActiveDragItem] .Thumbnail,:host .MediaList.is-reordering .MediaItemDraggable[class~=ActiveDragItem] .FileInfo,:host .MediaList.is-reordering .MediaItemDraggable[class~=ActiveDragItem] .Actions{opacity:0}:host .MediaList .MediaItem{display:flex;align-items:center;gap:8px;width:100%;min-height:44px;padding:8px;border-radius:12px;position:relative;background:transparent}:host .MediaList .MediaItem:hover{background:var(--color-surface)}:host .MediaList .MediaItem[class~=ActiveDragItem]{background:var(--color-surface-muted);cursor:grabbing}:host .MediaList .MediaItem[class~=xu-list-reorder-ghost]{background:var(--color-surface);cursor:grabbing}:host .MediaList .MediaItem .Thumbnail{display:flex;align-items:center;justify-content:center;width:36px;min-width:36px;height:36px;overflow:hidden;border-radius:10px;background:var(--color-surface);cursor:default}:host .MediaList .MediaItem .Thumbnail.Clickable{cursor:pointer}:host .MediaList .MediaItem .Thumbnail img{width:100%;height:100%;object-fit:cover}:host .MediaList .MediaItem .Thumbnail lucide-icon.FileIcon{color:var(--color-icon)}:host .MediaList .MediaItem .FileInfo{display:flex;flex-direction:column;gap:4px;min-width:0;width:100%;overflow:hidden}:host .MediaList .MediaItem .FileInfo .Name{width:100%;font-size:14px;font-weight:400;color:var(--color-fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .MediaList .MediaItem .FileInfo .Tags{display:flex;align-items:center;flex-wrap:wrap;gap:4px;margin:0}:host .MediaList .MediaItem .FileInfo .Tags .Size{width:max-content;font-size:14px;color:var(--color-fg-muted)}:host .MediaList .MediaItem .FileInfo .Tags .PrimaryTag{width:max-content;padding:2px 4px;border-radius:8px;font-size:14px;background-color:var(--color-success-bg);color:var(--color-success-fg)}:host .MediaList .MediaItem .FileInfo .ErrorMsg{width:auto;font-size:14px;color:var(--color-danger-fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .MediaList .MediaItem .FileInfo .Progress{width:100%;height:4px;overflow:hidden;border-radius:4px;background-color:var(--color-surface-muted)}:host .MediaList .MediaItem .FileInfo .Progress .Bar{height:100%;background-color:var(--color-brand)}:host .MediaList .MediaItem .FileInfo .ProgressLabel{font-size:14px;color:var(--color-fg-muted)}:host .MediaList .MediaItem .Actions{display:flex;align-items:center;gap:4px;width:max-content;flex-shrink:0;z-index:10}:host .MediaList .MediaItem .Open,:host .MediaList .MediaItem .Cancel{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:32px;height:32px;padding:4px 8px;border:none;border-radius:50%;background:transparent;color:var(--color-fg-muted);cursor:pointer;font:inherit}:host .MediaList .MediaItem .Open:hover,:host .MediaList .MediaItem .Cancel:hover{background:var(--color-surface-muted);color:var(--color-fg)}:host .MediaList .MediaItem .Open:active,:host .MediaList .MediaItem .Cancel:active{transform:scale(.98)}:host .MediaList .MediaItem .Open{color:var(--color-fg-brand)}:host .MediaList .MediaItem .Open:hover{color:var(--color-fg-brand);background:var(--color-brand-soft)}:host .MediaList .MediaItem .Cancel{color:var(--color-danger-fg)}:host .MediaList .MediaItem .Cancel:hover{color:var(--color-danger-fg);background:var(--color-danger-bg)}:host .MediaList.ItemsDisplay .MediaItem .Thumbnail{width:36px;min-width:36px;height:36px}:host .MediaList.CardsDisplay{display:grid;gap:4px;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));grid-auto-rows:max-content}:host .MediaList.CardsDisplay .MediaItem{flex-direction:column;align-items:stretch;min-height:0;padding:8px;background:var(--color-surface)}:host .MediaList.CardsDisplay .MediaItem .Thumbnail{width:100%;min-width:0;height:72px;border-radius:12px}:host .MediaList.CardsDisplay .MediaItem .FileInfo .Tags{flex-direction:row;flex-wrap:wrap;align-items:center}:host .MediaList.CardsDisplay .MediaItem .FileInfo .Tags .Size{width:max-content;white-space:nowrap}:host .MediaList.CardsDisplay .MediaItem .FileInfo .ErrorMsg{width:100%}:host .MediaList.CardsDisplay .MediaItem .Actions{width:100%;justify-content:center}.ExpandImage{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:var(--color-scrim-strong, var(--color-scrim));z-index:1000;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(5px);overflow:hidden;touch-action:none}.ExpandImage .CloseExpandImage{position:absolute;top:10px;right:10px;z-index:10;width:40px;height:40px;display:flex;align-items:center;justify-content:center;background-color:var(--danger);color:#fff;border-radius:8px;cursor:pointer;transition:all .2s ease}.ExpandImage .CloseExpandImage:hover{background-color:var(--danger-hover);transform:scale(1.1)}.ExpandImage .CloseExpandImage:active{transform:scale(.95)}.ExpandImage .CloseExpandImage i,.ExpandImage .CloseExpandImage lucide-icon{pointer-events:none;font-size:14px}.ExpandImage .CloseExpandImage i lucide-icon .lucide-svg,.ExpandImage .CloseExpandImage lucide-icon lucide-icon .lucide-svg{width:14px;height:14px}.ExpandImage .Image{height:100%;width:100%;display:flex;align-items:center;justify-content:center;position:relative}.ExpandImage .Image img{position:absolute;top:0;left:0;transform-origin:center center;width:100%;height:100%;object-fit:contain;touch-action:none;-webkit-user-select:none;user-select:none;pointer-events:none}.ExpandImage .Prev,.ExpandImage .Next{background-color:var(--color-scrim);padding:1.5rem;color:var(--color-fg-muted, var(--color-fg-muted));z-index:200;position:absolute;top:45%;pointer-events:auto;cursor:pointer;transition:all .2s ease;border-radius:8px}.ExpandImage .Prev:hover,.ExpandImage .Next:hover,.ExpandImage .Prev:active,.ExpandImage .Next:active{background-color:var(--color-scrim);color:#fff}.ExpandImage .Prev i,.ExpandImage .Prev lucide-icon,.ExpandImage .Next i,.ExpandImage .Next lucide-icon{pointer-events:none;font-size:14px}.ExpandImage .Prev i lucide-icon .lucide-svg,.ExpandImage .Prev lucide-icon lucide-icon .lucide-svg,.ExpandImage .Next i lucide-icon .lucide-svg,.ExpandImage .Next lucide-icon lucide-icon .lucide-svg{width:14px;height:14px}.ExpandImage .Prev{left:0;border-radius:0 12px 12px 0}.ExpandImage .Next{right:0;border-radius:12px 0 0 12px}\n"], dependencies: [{ kind: "component", type: LucideIconComponent, selector: "lucide-icon", inputs: ["name", "size", "spin", "filled"] }, { 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: FileSizePipe, name: "fileSize" }] });
11649
11595
  }
11650
11596
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: MediaEntryComponent, decorators: [{
11651
11597
  type: Component,
@@ -11659,7 +11605,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
11659
11605
  useExisting: forwardRef(() => MediaEntryComponent),
11660
11606
  multi: true,
11661
11607
  },
11662
- ], template: "<p\n *ngIf=\"label\"\n class=\"Label\"\n [class.Disabled]=\"isDisabled\"\n>\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\n</p>\n\n<p\n *ngIf=\"description\"\n class=\"Description\"\n [class.Disabled]=\"isDisabled\"\n>\n {{ description }}\n</p>\n<p *ngIf=\"allowedTypesText\" class=\"Types\" [class.Disabled]=\"isDisabled\">\n Tipos: {{ allowedTypesText }}\n</p>\n\n<!-- ESTRUCTURA UNIFICADA -->\n<ng-container>\n <!-- Upload Box -->\n <form\n #uploadForm\n (change)=\"onFileInput($event)\"\n (dragover)=\"onDragOver($event)\"\n (dragenter)=\"onDragEnter($event)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event)\"\n >\n <div\n class=\"UploadBox\"\n [class.Disabled]=\"loading\"\n [class.Dragging]=\"isDragging\"\n [class.Single]=\"!multiple\"\n [class.Multiple]=\"multiple\"\n >\n <label class=\"DropLabel\">\n <input type=\"file\" [multiple]=\"multiple\" [accept]=\"effectiveTypes.join(',')\" hidden />\n <div class=\"Texts\">\n <lucide-icon class=\"UploadIcon\" name=\"cloud-upload\" [size]=\"28\"></lucide-icon>\n <span class=\"Insentivo\">\n {{\n isDragging\n ? (isImageMode ? \"\u00A1Suelta las im\u00E1genes aqu\u00ED!\" : \"\u00A1Suelta los archivos aqu\u00ED!\")\n : multiple\n ? (isImageMode ? \"Arrastra varias im\u00E1genes aqu\u00ED\" : \"Arrastra varios archivos aqu\u00ED\")\n : (isImageMode ? \"Arrastra una imagen aqu\u00ED\" : \"Arrastra un archivo aqu\u00ED\")\n }}\n </span>\n <span class=\"Or\">O</span>\n <span class=\"Clicked\">haz clic para seleccionar</span>\n <span class=\"Info\">\n M\u00E1x: {{ maxItems }} item{{ maxItems > 1 ? \"s\" : \"\" }}<span *ngIf=\"maxSize\"> \u00B7 {{ (maxSize * 1024 * 1024) | fileSize }}</span>\n </span>\n </div>\n </label>\n </div>\n </form>\n\n <div *ngIf=\"statusMessage\" class=\"StatusMessage\">\n {{ statusMessage }}\n </div>\n \n <!-- Lista de items en proceso -->\n <div \n class=\"MediaSection\" \n *ngIf=\"pending.length\"\n [class.CardsDisplay]=\"isCardsDisplay\"\n >\n <h4 class=\"Title\">\n <span>Pendientes</span>\n </h4>\n <ul \n class=\"MediaList\"\n [class.CardsDisplay]=\"isCardsDisplay\"\n [class.ItemsDisplay]=\"isItemsDisplay\"\n >\n <li \n class=\"MediaItem\" \n *ngFor=\"let item of pending\"\n [class.FileItem]=\"isFileMode\"\n [class.ImageItem]=\"isImageMode\"\n >\n <div class=\"Thumbnail\" *ngIf=\"isFileMode\">\n <lucide-icon\n class=\"FileIcon\"\n [name]=\"getFileIconName(item.type)\"\n [size]=\"28\"\n />\n </div>\n <div class=\"FileInfo\">\n <span class=\"Name\">{{ item.name }}</span>\n <span class=\"Size\">{{ item.size | fileSize }}</span>\n <div class=\"Progress\">\n <div class=\"Bar\" [style.width.%]=\"item.progress\"></div>\n </div>\n <span class=\"ProgressLabel\">{{ item.phase === 'processing' ? 'Procesando...' : (item.progress + '%') }}</span>\n </div>\n </li>\n </ul>\n </div>\n\n <!-- Lista de items subidos correctamente -->\n <div \n class=\"MediaSection\" \n *ngIf=\"uploaded.length\"\n [class.CardsDisplay]=\"isCardsDisplay\"\n >\n <h4 class=\"Title\">\n <span>{{ isImageMode ? \"Im\u00E1genes Cargadas\" : \"Archivos Cargados\" }}</span>\n <button type=\"button\" (click)=\"clearAllUploaded()\" class=\"ClearAll\">\n <lucide-icon name=\"brush-cleaning\"></lucide-icon>\n </button>\n </h4>\n\n <ul \n class=\"MediaList\"\n [class.CardsDisplay]=\"isCardsDisplay\"\n [class.ItemsDisplay]=\"isItemsDisplay\"\n [class.IsSortable]=\"sortable && !isDisabled && uploaded.length > 1\"\n #sortableContainer\n >\n <li\n class=\"MediaItem MediaItemDraggable\"\n [class.FileItem]=\"isFileMode\"\n [class.ImageItem]=\"isImageMode\"\n *ngFor=\"let item of uploaded; let i = index; trackBy: trackUploaded\"\n [attr.data-index]=\"i\"\n >\n\n <div class=\"Thumbnail\">\n <img\n *ngIf=\"isImageMode\"\n [src]=\"getPreviewUrl(item.urlEncrypted || item.url) || undefined\"\n alt=\"Imagen cargada\"\n draggable=\"false\"\n />\n <lucide-icon\n *ngIf=\"isFileMode\"\n class=\"FileIcon\"\n [name]=\"getFileIconName(item.type)\"\n [size]=\"28\"\n />\n </div>\n\n <div class=\"FileInfo\">\n <span class=\"Name\">{{ item.name }}</span>\n <p class=\"Tags\">\n <span class=\"Size\">{{ item.size | fileSize }}</span>\n <span *ngIf=\"isPrimary(i)\" class=\"PrimaryTag\">\n {{ isImageMode ? \"Primaria\" : \"Primario\" }}\n </span>\n </p>\n </div>\n <!-- Preview: MediaViewerService (singleton); UI global en media-viewer-service -->\n <div class=\"Actions\">\n <button\n *ngIf=\"canPreviewInBrowser(item)\"\n type=\"button\"\n class=\"Open\"\n (click)=\"openGeneralMediaPreview(item)\"\n title=\"Ver\"\n >\n <lucide-icon class=\"Icon--eye\" name=\"eye\"></lucide-icon>\n </button>\n <button\n *ngIf=\"!canPreviewInBrowser(item)\"\n type=\"button\"\n class=\"Open\"\n (click)=\"downloadUploaded(item)\"\n title=\"Descargar\"\n >\n <lucide-icon class=\"Icon--download\" name=\"download\"></lucide-icon>\n </button>\n <button type=\"button\" class=\"Cancel\" (click)=\"removeUploaded(i)\" title=\"Eliminar\">\n <lucide-icon class=\"Icon--trash\" name=\"trash\"></lucide-icon>\n </button>\n </div>\n </li>\n </ul>\n </div>\n\n <!-- Lista de errores -->\n <div \n class=\"MediaSection Error\" \n *ngIf=\"failed.length\"\n [class.CardsDisplay]=\"isCardsDisplay\"\n >\n <h4 class=\"Title\">\n <span>Errores</span>\n <button type=\"button\" (click)=\"clearAllFailed()\" class=\"ClearAll\">\n <lucide-icon name=\"brush-cleaning\"></lucide-icon>\n </button>\n </h4>\n <ul \n class=\"MediaList\"\n [class.CardsDisplay]=\"isCardsDisplay\"\n [class.ItemsDisplay]=\"isItemsDisplay\"\n >\n <li \n class=\"MediaItem\"\n [class.FileItem]=\"isFileMode\"\n [class.ImageItem]=\"isImageMode\"\n *ngFor=\"let item of failed; let i = index\"\n >\n <div class=\"FileInfo\">\n <span class=\"Name\">{{ item.name }}</span>\n <span class=\"ErrorMsg\">{{ item.error }}</span>\n </div>\n <button type=\"button\" class=\"Cancel\" (click)=\"removeFailed(i)\" title=\"Eliminar\">\n <lucide-icon class=\"Icon--trash\" name=\"trash\"></lucide-icon>\n </button>\n </li>\n </ul>\n </div>\n</ng-container>\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex;flex-direction:column;width:100%;height:max-content;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);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(--color-input-border, #d4d4d4);border-radius:12px;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .Types{margin:0 0 4px;padding:0 3px;font-size:14px;font-weight:400;color:var(--color-fg-muted);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}:host form{width:100%;height:max-content;-webkit-user-select:none;user-select:none}:host form.InCardMode{flex-grow:1;height:max-content;overflow:hidden}:host form .UploadBox{display:flex;justify-content:center;align-items:center;width:100%;min-height:120px;padding:16px;background-color:var(--color-input-bg);border:1px dashed var(--color-input-border);border-radius:16px}:host form .UploadBox[class~=Disabled]{filter:saturate(0%)}:host form .UploadBox[class~=Dragging]{border-color:var(--color-input-border-focus);background-color:var(--color-input-bg-drag)}:host form .UploadBox[class~=Dragging] .UploadIcon{color:var(--color-fg-brand)}:host form .UploadBox .DropLabel{display:flex;width:100%;height:100%;cursor:pointer}:host form .UploadBox .Texts{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}:host form .UploadBox .Texts .UploadIcon{display:flex;align-items:center;justify-content:center;width:48px;height:48px;margin-bottom:4px;border-radius:50%;background:var(--color-surface);color:var(--color-fg-brand)}:host form .UploadBox .Texts .Insentivo{text-align:center;color:var(--color-fg)}@media (width <= 768px){:host form .UploadBox .Texts .Insentivo{display:none}}:host form .UploadBox .Texts .Or{color:var(--color-fg-muted)}@media (width <= 768px){:host form .UploadBox .Texts .Or{display:none}}:host form .UploadBox .Texts .Clicked{width:max-content;padding:8px 16px;border-radius:16px;background-color:var(--color-brand-soft);color:var(--color-fg-brand);cursor:pointer}:host form .UploadBox .Texts .Info{margin-top:4px;max-width:220px;text-align:center;color:var(--color-fg-muted)}:host .StatusMessage{position:relative;margin-top:8px;padding:8px 12px;border-radius:12px;background:var(--color-danger-bg);color:var(--color-danger-fg);font-size:14px;animation:fade-in-out .3s ease}@keyframes fade-in-out{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}:host .MediaSection{display:flex;flex-direction:column;gap:4px;width:100%;margin-top:8px;padding:4px;border-radius:16px;background:var(--color-input-bg)}:host .MediaSection.Error{background:var(--color-danger-bg)}:host .MediaSection .Title{display:flex;align-items:center;justify-content:space-between;gap:4px;width:100%;margin:0;padding:4px 8px;font-size:14px;font-weight:400;color:var(--color-fg-muted);overflow:hidden}:host .MediaSection .Title .ClearAll{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:32px;height:32px;padding:4px 8px;border:none;border-radius:50%;background:transparent;color:var(--color-fg-muted);cursor:pointer;font:inherit;color:var(--color-danger-fg)}:host .MediaSection .Title .ClearAll:hover{background:var(--color-surface-muted);color:var(--color-fg)}:host .MediaSection .Title .ClearAll:active{transform:scale(.98)}:host .MediaSection .Title .ClearAll:hover{color:var(--color-danger-fg);background:var(--color-danger-bg)}:host .MediaList{display:flex;flex-direction:column;gap:4px;margin:0;padding:0;list-style:none}:host .MediaList.IsSortable .MediaItemDraggable{cursor:grab;touch-action:none}:host .MediaList.is-reordering .MediaItemDraggable{cursor:grabbing}:host .MediaList.is-reordering .MediaItemDraggable[class~=ActiveDragItem]{background:var(--color-surface-muted);box-shadow:none}:host .MediaList.is-reordering .MediaItemDraggable[class~=ActiveDragItem] .Thumbnail,:host .MediaList.is-reordering .MediaItemDraggable[class~=ActiveDragItem] .FileInfo,:host .MediaList.is-reordering .MediaItemDraggable[class~=ActiveDragItem] .Actions{opacity:0}:host .MediaList .MediaItem{display:flex;align-items:center;gap:8px;width:100%;min-height:44px;padding:8px;border-radius:12px;position:relative;background:transparent}:host .MediaList .MediaItem:hover{background:var(--color-surface)}:host .MediaList .MediaItem[class~=ActiveDragItem]{background:var(--color-surface-muted);cursor:grabbing}:host .MediaList .MediaItem[class~=xu-list-reorder-ghost]{background:var(--color-surface);cursor:grabbing}:host .MediaList .MediaItem .Thumbnail{display:flex;align-items:center;justify-content:center;width:36px;min-width:36px;height:36px;overflow:hidden;border-radius:10px;background:var(--color-surface);cursor:default}:host .MediaList .MediaItem .Thumbnail.Clickable{cursor:pointer}:host .MediaList .MediaItem .Thumbnail img{width:100%;height:100%;object-fit:cover}:host .MediaList .MediaItem .Thumbnail lucide-icon.FileIcon{color:var(--color-icon)}:host .MediaList .MediaItem .FileInfo{display:flex;flex-direction:column;gap:4px;min-width:0;width:100%;overflow:hidden}:host .MediaList .MediaItem .FileInfo .Name{width:100%;font-size:14px;font-weight:400;color:var(--color-fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .MediaList .MediaItem .FileInfo .Tags{display:flex;align-items:center;flex-wrap:wrap;gap:4px;margin:0}:host .MediaList .MediaItem .FileInfo .Tags .Size{width:max-content;font-size:14px;color:var(--color-fg-muted)}:host .MediaList .MediaItem .FileInfo .Tags .PrimaryTag{width:max-content;padding:2px 4px;border-radius:8px;font-size:14px;background-color:var(--color-success-bg);color:var(--color-success-fg)}:host .MediaList .MediaItem .FileInfo .ErrorMsg{width:auto;font-size:14px;color:var(--color-danger-fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .MediaList .MediaItem .FileInfo .Progress{width:100%;height:4px;overflow:hidden;border-radius:4px;background-color:var(--color-surface-muted)}:host .MediaList .MediaItem .FileInfo .Progress .Bar{height:100%;background-color:var(--color-brand)}:host .MediaList .MediaItem .FileInfo .ProgressLabel{font-size:14px;color:var(--color-fg-muted)}:host .MediaList .MediaItem .Actions{display:flex;align-items:center;gap:4px;width:max-content;flex-shrink:0;z-index:10}:host .MediaList .MediaItem .Open,:host .MediaList .MediaItem .Cancel{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:32px;height:32px;padding:4px 8px;border:none;border-radius:50%;background:transparent;color:var(--color-fg-muted);cursor:pointer;font:inherit}:host .MediaList .MediaItem .Open:hover,:host .MediaList .MediaItem .Cancel:hover{background:var(--color-surface-muted);color:var(--color-fg)}:host .MediaList .MediaItem .Open:active,:host .MediaList .MediaItem .Cancel:active{transform:scale(.98)}:host .MediaList .MediaItem .Open{color:var(--color-fg-brand)}:host .MediaList .MediaItem .Open:hover{color:var(--color-fg-brand);background:var(--color-brand-soft)}:host .MediaList .MediaItem .Cancel{color:var(--color-danger-fg)}:host .MediaList .MediaItem .Cancel:hover{color:var(--color-danger-fg);background:var(--color-danger-bg)}:host .MediaList.ItemsDisplay .MediaItem .Thumbnail{width:36px;min-width:36px;height:36px}:host .MediaList.CardsDisplay{display:grid;gap:4px;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));grid-auto-rows:max-content}:host .MediaList.CardsDisplay .MediaItem{flex-direction:column;align-items:stretch;min-height:0;padding:8px;background:var(--color-surface)}:host .MediaList.CardsDisplay .MediaItem .Thumbnail{width:100%;min-width:0;height:72px;border-radius:12px}:host .MediaList.CardsDisplay .MediaItem .FileInfo .Tags{flex-direction:row;flex-wrap:wrap;align-items:center}:host .MediaList.CardsDisplay .MediaItem .FileInfo .Tags .Size{width:max-content;white-space:nowrap}:host .MediaList.CardsDisplay .MediaItem .FileInfo .ErrorMsg{width:100%}:host .MediaList.CardsDisplay .MediaItem .Actions{width:100%;justify-content:center}.ExpandImage{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:var(--color-scrim-strong, var(--color-scrim));z-index:1000;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(5px);overflow:hidden;touch-action:none}.ExpandImage .CloseExpandImage{position:absolute;top:10px;right:10px;z-index:10;width:40px;height:40px;display:flex;align-items:center;justify-content:center;background-color:var(--danger);color:#fff;border-radius:var(--radius-md);cursor:pointer;transition:all .2s ease}.ExpandImage .CloseExpandImage:hover{background-color:var(--danger-hover);transform:scale(1.1)}.ExpandImage .CloseExpandImage:active{transform:scale(.95)}.ExpandImage .CloseExpandImage i,.ExpandImage .CloseExpandImage lucide-icon{pointer-events:none;font-size:14px}.ExpandImage .CloseExpandImage i lucide-icon .lucide-svg,.ExpandImage .CloseExpandImage lucide-icon lucide-icon .lucide-svg{width:14px;height:14px}.ExpandImage .Image{height:100%;width:100%;display:flex;align-items:center;justify-content:center;position:relative}.ExpandImage .Image img{position:absolute;top:0;left:0;transform-origin:center center;width:100%;height:100%;object-fit:contain;touch-action:none;-webkit-user-select:none;user-select:none;pointer-events:none}.ExpandImage .Prev,.ExpandImage .Next{background-color:var(--color-scrim);padding:1.5rem;color:var(--color-fg-muted, var(--color-fg-muted));z-index:200;position:absolute;top:45%;pointer-events:auto;cursor:pointer;transition:all .2s ease;border-radius:var(--radius-md)}.ExpandImage .Prev:hover,.ExpandImage .Next:hover,.ExpandImage .Prev:active,.ExpandImage .Next:active{background-color:var(--color-scrim);color:#fff}.ExpandImage .Prev i,.ExpandImage .Prev lucide-icon,.ExpandImage .Next i,.ExpandImage .Next lucide-icon{pointer-events:none;font-size:14px}.ExpandImage .Prev i lucide-icon .lucide-svg,.ExpandImage .Prev lucide-icon lucide-icon .lucide-svg,.ExpandImage .Next i lucide-icon .lucide-svg,.ExpandImage .Next lucide-icon lucide-icon .lucide-svg{width:14px;height:14px}.ExpandImage .Prev{left:0;border-radius:0 var(--radius-lg) var(--radius-lg) 0}.ExpandImage .Next{right:0;border-radius:var(--radius-lg) 0 0 var(--radius-lg)}\n"] }]
11608
+ ], template: "<p\n *ngIf=\"label\"\n class=\"Label\"\n [class.Disabled]=\"isDisabled\"\n>\n {{ label }} <span class=\"Opcional\" *ngIf=\"opcional\">(opcional)</span>\n</p>\n\n<p\n *ngIf=\"description\"\n class=\"Description\"\n [class.Disabled]=\"isDisabled\"\n>\n {{ description }}\n</p>\n<p *ngIf=\"allowedTypesText\" class=\"Types\" [class.Disabled]=\"isDisabled\">\n Tipos: {{ allowedTypesText }}\n</p>\n\n<!-- ESTRUCTURA UNIFICADA -->\n<ng-container>\n <!-- Upload Box -->\n <form\n #uploadForm\n (change)=\"onFileInput($event)\"\n (dragover)=\"onDragOver($event)\"\n (dragenter)=\"onDragEnter($event)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event)\"\n >\n <div\n class=\"UploadBox\"\n [class.Disabled]=\"loading\"\n [class.Dragging]=\"isDragging\"\n [class.Single]=\"!multiple\"\n [class.Multiple]=\"multiple\"\n >\n <label class=\"DropLabel\">\n <input type=\"file\" [multiple]=\"multiple\" [accept]=\"effectiveTypes.join(',')\" hidden />\n <div class=\"Texts\">\n <lucide-icon class=\"UploadIcon\" name=\"cloud-upload\" [size]=\"28\"></lucide-icon>\n <span class=\"Insentivo\">\n {{\n isDragging\n ? (isImageMode ? \"\u00A1Suelta las im\u00E1genes aqu\u00ED!\" : \"\u00A1Suelta los archivos aqu\u00ED!\")\n : multiple\n ? (isImageMode ? \"Arrastra varias im\u00E1genes aqu\u00ED\" : \"Arrastra varios archivos aqu\u00ED\")\n : (isImageMode ? \"Arrastra una imagen aqu\u00ED\" : \"Arrastra un archivo aqu\u00ED\")\n }}\n </span>\n <span class=\"Or\">O</span>\n <span class=\"Clicked\">haz clic para seleccionar</span>\n <span class=\"Info\">\n M\u00E1x: {{ maxItems }} item{{ maxItems > 1 ? \"s\" : \"\" }}<span *ngIf=\"maxSize\"> \u00B7 {{ (maxSize * 1024 * 1024) | fileSize }}</span>\n </span>\n </div>\n </label>\n </div>\n </form>\n\n <div *ngIf=\"statusMessage\" class=\"StatusMessage\">\n {{ statusMessage }}\n </div>\n \n <!-- Lista de items en proceso -->\n <div \n class=\"MediaSection\" \n *ngIf=\"pending.length\"\n [class.CardsDisplay]=\"isCardsDisplay\"\n >\n <h4 class=\"Title\">\n <span>Pendientes</span>\n </h4>\n <ul \n class=\"MediaList\"\n [class.CardsDisplay]=\"isCardsDisplay\"\n [class.ItemsDisplay]=\"isItemsDisplay\"\n >\n <li \n class=\"MediaItem\" \n *ngFor=\"let item of pending\"\n [class.FileItem]=\"isFileMode\"\n [class.ImageItem]=\"isImageMode\"\n >\n <div class=\"Thumbnail\" *ngIf=\"isFileMode\">\n <lucide-icon\n class=\"FileIcon\"\n [name]=\"getFileIconName(item.type)\"\n [size]=\"28\"\n />\n </div>\n <div class=\"FileInfo\">\n <span class=\"Name\">{{ item.name }}</span>\n <span class=\"Size\">{{ item.size | fileSize }}</span>\n <div class=\"Progress\">\n <div class=\"Bar\" [style.width.%]=\"item.progress\"></div>\n </div>\n <span class=\"ProgressLabel\">{{ item.phase === 'processing' ? 'Procesando...' : (item.progress + '%') }}</span>\n </div>\n </li>\n </ul>\n </div>\n\n <!-- Lista de items subidos correctamente -->\n <div \n class=\"MediaSection\" \n *ngIf=\"uploaded.length\"\n [class.CardsDisplay]=\"isCardsDisplay\"\n >\n <h4 class=\"Title\">\n <span>{{ isImageMode ? \"Im\u00E1genes Cargadas\" : \"Archivos Cargados\" }}</span>\n <button type=\"button\" (click)=\"clearAllUploaded()\" class=\"ClearAll\">\n <lucide-icon name=\"brush-cleaning\"></lucide-icon>\n </button>\n </h4>\n\n <ul \n class=\"MediaList\"\n [class.CardsDisplay]=\"isCardsDisplay\"\n [class.ItemsDisplay]=\"isItemsDisplay\"\n [class.IsSortable]=\"sortable && !isDisabled && uploaded.length > 1\"\n #sortableContainer\n >\n <li\n class=\"MediaItem MediaItemDraggable\"\n [class.FileItem]=\"isFileMode\"\n [class.ImageItem]=\"isImageMode\"\n *ngFor=\"let item of uploaded; let i = index; trackBy: trackUploaded\"\n [attr.data-index]=\"i\"\n >\n\n <div class=\"Thumbnail\">\n <img\n *ngIf=\"isImageMode\"\n [src]=\"getPreviewUrl(item.urlEncrypted || item.url) || undefined\"\n alt=\"Imagen cargada\"\n draggable=\"false\"\n />\n <lucide-icon\n *ngIf=\"isFileMode\"\n class=\"FileIcon\"\n [name]=\"getFileIconName(item.type)\"\n [size]=\"28\"\n />\n </div>\n\n <div class=\"FileInfo\">\n <span class=\"Name\">{{ item.name }}</span>\n <p class=\"Tags\">\n <span class=\"Size\">{{ item.size | fileSize }}</span>\n <span *ngIf=\"isPrimary(i)\" class=\"PrimaryTag\">\n {{ isImageMode ? \"Primaria\" : \"Primario\" }}\n </span>\n </p>\n </div>\n <!-- Preview: MediaViewerService (singleton); UI global en media-viewer-service -->\n <div class=\"Actions\">\n <button\n *ngIf=\"canPreviewInBrowser(item)\"\n type=\"button\"\n class=\"Open\"\n (click)=\"openGeneralMediaPreview(item)\"\n title=\"Ver\"\n >\n <lucide-icon class=\"Icon--eye\" name=\"eye\"></lucide-icon>\n </button>\n <button\n *ngIf=\"!canPreviewInBrowser(item)\"\n type=\"button\"\n class=\"Open\"\n (click)=\"downloadUploaded(item)\"\n title=\"Descargar\"\n >\n <lucide-icon class=\"Icon--download\" name=\"download\"></lucide-icon>\n </button>\n <button type=\"button\" class=\"Cancel\" (click)=\"removeUploaded(i)\" title=\"Eliminar\">\n <lucide-icon class=\"Icon--trash\" name=\"trash\"></lucide-icon>\n </button>\n </div>\n </li>\n </ul>\n </div>\n\n <!-- Lista de errores -->\n <div \n class=\"MediaSection Error\" \n *ngIf=\"failed.length\"\n [class.CardsDisplay]=\"isCardsDisplay\"\n >\n <h4 class=\"Title\">\n <span>Errores</span>\n <button type=\"button\" (click)=\"clearAllFailed()\" class=\"ClearAll\">\n <lucide-icon name=\"brush-cleaning\"></lucide-icon>\n </button>\n </h4>\n <ul \n class=\"MediaList\"\n [class.CardsDisplay]=\"isCardsDisplay\"\n [class.ItemsDisplay]=\"isItemsDisplay\"\n >\n <li \n class=\"MediaItem\"\n [class.FileItem]=\"isFileMode\"\n [class.ImageItem]=\"isImageMode\"\n *ngFor=\"let item of failed; let i = index\"\n >\n <div class=\"FileInfo\">\n <span class=\"Name\">{{ item.name }}</span>\n <span class=\"ErrorMsg\">{{ item.error }}</span>\n </div>\n <button type=\"button\" class=\"Cancel\" (click)=\"removeFailed(i)\" title=\"Eliminar\">\n <lucide-icon class=\"Icon--trash\" name=\"trash\"></lucide-icon>\n </button>\n </li>\n </ul>\n </div>\n</ng-container>\n", styles: [":host(.IsDisable){opacity:.4;pointer-events:none;cursor:not-allowed}:host{display:flex!important;flex-direction:column!important;width:100%;height:max-content;--radius-none: 0;--radius-xs: 2px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 16px;--radius-full: 9999px;--spacing-xxs: 2px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 16px;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);font-weight:400;width:100%;cursor:pointer;padding:0 3px;margin:0 0 4px;overflow:hidden;word-break:break-all}:host .Entry{display:flex!important;width:100%;height:32px;justify-content:flex-start;align-items:center;border:solid 0 var(--color-input-border, #d4d4d4);border-radius:12px!important;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px!important;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host .Types{margin:0 0 4px;padding:0 3px;font-size:14px;font-weight:400;color:var(--color-fg-muted);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}:host form{width:100%;height:max-content;-webkit-user-select:none;user-select:none}:host form.InCardMode{flex-grow:1;height:max-content;overflow:hidden}:host form .UploadBox{display:flex;justify-content:center;align-items:center;width:100%;min-height:120px;padding:16px;background-color:var(--color-input-bg);border:1px dashed var(--color-input-border);border-radius:16px}:host form .UploadBox[class~=Disabled]{filter:saturate(0%)}:host form .UploadBox[class~=Dragging]{border-color:var(--color-input-border-focus);background-color:var(--color-input-bg-drag)}:host form .UploadBox[class~=Dragging] .UploadIcon{color:var(--color-fg-brand)}:host form .UploadBox .DropLabel{display:flex;width:100%;height:100%;cursor:pointer}:host form .UploadBox .Texts{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}:host form .UploadBox .Texts .UploadIcon{display:flex;align-items:center;justify-content:center;width:48px;height:48px;margin-bottom:4px;border-radius:50%;background:var(--color-surface);color:var(--color-fg-brand)}:host form .UploadBox .Texts .Insentivo{text-align:center;color:var(--color-fg)}@media (width <= 768px){:host form .UploadBox .Texts .Insentivo{display:none}}:host form .UploadBox .Texts .Or{color:var(--color-fg-muted)}@media (width <= 768px){:host form .UploadBox .Texts .Or{display:none}}:host form .UploadBox .Texts .Clicked{width:max-content;padding:8px 16px;border-radius:16px;background-color:var(--color-brand-soft);color:var(--color-fg-brand);cursor:pointer}:host form .UploadBox .Texts .Info{margin-top:4px;max-width:220px;text-align:center;color:var(--color-fg-muted)}:host .StatusMessage{position:relative;margin-top:8px;padding:8px 12px;border-radius:12px;background:var(--color-danger-bg);color:var(--color-danger-fg);font-size:14px;animation:fade-in-out .3s ease}@keyframes fade-in-out{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}:host .MediaSection{display:flex;flex-direction:column;gap:4px;width:100%;margin-top:8px;padding:4px;border-radius:16px;background:var(--color-input-bg)}:host .MediaSection.Error{background:var(--color-danger-bg)}:host .MediaSection .Title{display:flex;align-items:center;justify-content:space-between;gap:4px;width:100%;margin:0;padding:4px 8px;font-size:14px;font-weight:400;color:var(--color-fg-muted);overflow:hidden}:host .MediaSection .Title .ClearAll{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:32px;height:32px;padding:4px 8px;border:none;border-radius:50%;background:transparent;color:var(--color-fg-muted);cursor:pointer;font:inherit;color:var(--color-danger-fg)}:host .MediaSection .Title .ClearAll:hover{background:var(--color-surface-muted);color:var(--color-fg)}:host .MediaSection .Title .ClearAll:active{transform:scale(.98)}:host .MediaSection .Title .ClearAll:hover{color:var(--color-danger-fg);background:var(--color-danger-bg)}:host .MediaList{display:flex;flex-direction:column;gap:4px;margin:0;padding:0;list-style:none}:host .MediaList.IsSortable .MediaItemDraggable{cursor:grab;touch-action:none}:host .MediaList.is-reordering .MediaItemDraggable{cursor:grabbing}:host .MediaList.is-reordering .MediaItemDraggable[class~=ActiveDragItem]{background:var(--color-surface-muted);box-shadow:none}:host .MediaList.is-reordering .MediaItemDraggable[class~=ActiveDragItem] .Thumbnail,:host .MediaList.is-reordering .MediaItemDraggable[class~=ActiveDragItem] .FileInfo,:host .MediaList.is-reordering .MediaItemDraggable[class~=ActiveDragItem] .Actions{opacity:0}:host .MediaList .MediaItem{display:flex;align-items:center;gap:8px;width:100%;min-height:44px;padding:8px;border-radius:12px;position:relative;background:transparent}:host .MediaList .MediaItem:hover{background:var(--color-surface)}:host .MediaList .MediaItem[class~=ActiveDragItem]{background:var(--color-surface-muted);cursor:grabbing}:host .MediaList .MediaItem[class~=xu-list-reorder-ghost]{background:var(--color-surface);cursor:grabbing}:host .MediaList .MediaItem .Thumbnail{display:flex;align-items:center;justify-content:center;width:36px;min-width:36px;height:36px;overflow:hidden;border-radius:10px;background:var(--color-surface);cursor:default}:host .MediaList .MediaItem .Thumbnail.Clickable{cursor:pointer}:host .MediaList .MediaItem .Thumbnail img{width:100%;height:100%;object-fit:cover}:host .MediaList .MediaItem .Thumbnail lucide-icon.FileIcon{color:var(--color-icon)}:host .MediaList .MediaItem .FileInfo{display:flex;flex-direction:column;gap:4px;min-width:0;width:100%;overflow:hidden}:host .MediaList .MediaItem .FileInfo .Name{width:100%;font-size:14px;font-weight:400;color:var(--color-fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .MediaList .MediaItem .FileInfo .Tags{display:flex;align-items:center;flex-wrap:wrap;gap:4px;margin:0}:host .MediaList .MediaItem .FileInfo .Tags .Size{width:max-content;font-size:14px;color:var(--color-fg-muted)}:host .MediaList .MediaItem .FileInfo .Tags .PrimaryTag{width:max-content;padding:2px 4px;border-radius:8px;font-size:14px;background-color:var(--color-success-bg);color:var(--color-success-fg)}:host .MediaList .MediaItem .FileInfo .ErrorMsg{width:auto;font-size:14px;color:var(--color-danger-fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .MediaList .MediaItem .FileInfo .Progress{width:100%;height:4px;overflow:hidden;border-radius:4px;background-color:var(--color-surface-muted)}:host .MediaList .MediaItem .FileInfo .Progress .Bar{height:100%;background-color:var(--color-brand)}:host .MediaList .MediaItem .FileInfo .ProgressLabel{font-size:14px;color:var(--color-fg-muted)}:host .MediaList .MediaItem .Actions{display:flex;align-items:center;gap:4px;width:max-content;flex-shrink:0;z-index:10}:host .MediaList .MediaItem .Open,:host .MediaList .MediaItem .Cancel{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:32px;height:32px;padding:4px 8px;border:none;border-radius:50%;background:transparent;color:var(--color-fg-muted);cursor:pointer;font:inherit}:host .MediaList .MediaItem .Open:hover,:host .MediaList .MediaItem .Cancel:hover{background:var(--color-surface-muted);color:var(--color-fg)}:host .MediaList .MediaItem .Open:active,:host .MediaList .MediaItem .Cancel:active{transform:scale(.98)}:host .MediaList .MediaItem .Open{color:var(--color-fg-brand)}:host .MediaList .MediaItem .Open:hover{color:var(--color-fg-brand);background:var(--color-brand-soft)}:host .MediaList .MediaItem .Cancel{color:var(--color-danger-fg)}:host .MediaList .MediaItem .Cancel:hover{color:var(--color-danger-fg);background:var(--color-danger-bg)}:host .MediaList.ItemsDisplay .MediaItem .Thumbnail{width:36px;min-width:36px;height:36px}:host .MediaList.CardsDisplay{display:grid;gap:4px;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));grid-auto-rows:max-content}:host .MediaList.CardsDisplay .MediaItem{flex-direction:column;align-items:stretch;min-height:0;padding:8px;background:var(--color-surface)}:host .MediaList.CardsDisplay .MediaItem .Thumbnail{width:100%;min-width:0;height:72px;border-radius:12px}:host .MediaList.CardsDisplay .MediaItem .FileInfo .Tags{flex-direction:row;flex-wrap:wrap;align-items:center}:host .MediaList.CardsDisplay .MediaItem .FileInfo .Tags .Size{width:max-content;white-space:nowrap}:host .MediaList.CardsDisplay .MediaItem .FileInfo .ErrorMsg{width:100%}:host .MediaList.CardsDisplay .MediaItem .Actions{width:100%;justify-content:center}.ExpandImage{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:var(--color-scrim-strong, var(--color-scrim));z-index:1000;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(5px);overflow:hidden;touch-action:none}.ExpandImage .CloseExpandImage{position:absolute;top:10px;right:10px;z-index:10;width:40px;height:40px;display:flex;align-items:center;justify-content:center;background-color:var(--danger);color:#fff;border-radius:8px;cursor:pointer;transition:all .2s ease}.ExpandImage .CloseExpandImage:hover{background-color:var(--danger-hover);transform:scale(1.1)}.ExpandImage .CloseExpandImage:active{transform:scale(.95)}.ExpandImage .CloseExpandImage i,.ExpandImage .CloseExpandImage lucide-icon{pointer-events:none;font-size:14px}.ExpandImage .CloseExpandImage i lucide-icon .lucide-svg,.ExpandImage .CloseExpandImage lucide-icon lucide-icon .lucide-svg{width:14px;height:14px}.ExpandImage .Image{height:100%;width:100%;display:flex;align-items:center;justify-content:center;position:relative}.ExpandImage .Image img{position:absolute;top:0;left:0;transform-origin:center center;width:100%;height:100%;object-fit:contain;touch-action:none;-webkit-user-select:none;user-select:none;pointer-events:none}.ExpandImage .Prev,.ExpandImage .Next{background-color:var(--color-scrim);padding:1.5rem;color:var(--color-fg-muted, var(--color-fg-muted));z-index:200;position:absolute;top:45%;pointer-events:auto;cursor:pointer;transition:all .2s ease;border-radius:8px}.ExpandImage .Prev:hover,.ExpandImage .Next:hover,.ExpandImage .Prev:active,.ExpandImage .Next:active{background-color:var(--color-scrim);color:#fff}.ExpandImage .Prev i,.ExpandImage .Prev lucide-icon,.ExpandImage .Next i,.ExpandImage .Next lucide-icon{pointer-events:none;font-size:14px}.ExpandImage .Prev i lucide-icon .lucide-svg,.ExpandImage .Prev lucide-icon lucide-icon .lucide-svg,.ExpandImage .Next i lucide-icon .lucide-svg,.ExpandImage .Next lucide-icon lucide-icon .lucide-svg{width:14px;height:14px}.ExpandImage .Prev{left:0;border-radius:0 12px 12px 0}.ExpandImage .Next{right:0;border-radius:12px 0 0 12px}\n"] }]
11663
11609
  }], propDecorators: { label: [{
11664
11610
  type: Input
11665
11611
  }], opcional: [{
@@ -11799,28 +11745,89 @@ function parseContentRangeTotal(value) {
11799
11745
  return match ? parseSizeHeader(match[1]) : null;
11800
11746
  }
11801
11747
 
11748
+ function focusOverlaySearch(host) {
11749
+ const input = host.querySelector('.SearchInput');
11750
+ if (!input || input.disabled)
11751
+ return false;
11752
+ if (document.activeElement === input)
11753
+ return true;
11754
+ input.focus({ preventScroll: true });
11755
+ return document.activeElement === input;
11756
+ }
11757
+ function scrollOverlayOptionsToTop(host) {
11758
+ const lists = host.querySelectorAll('.OptionsList, .CountriesList');
11759
+ lists.forEach((list) => {
11760
+ list.scrollTop = 0;
11761
+ });
11762
+ const picker = host.querySelector('.Picker');
11763
+ if (picker)
11764
+ picker.scrollTop = 0;
11765
+ }
11766
+ class OverlaySearchChrome {
11767
+ lastOpen = false;
11768
+ lastQuery = null;
11769
+ lastOptions = null;
11770
+ pendingFocus = false;
11771
+ pendingScroll = false;
11772
+ onSession(open, query, options, canFocus) {
11773
+ const justOpened = open && !this.lastOpen;
11774
+ const queryChanged = open && query !== this.lastQuery;
11775
+ const optionsChanged = open && options !== this.lastOptions;
11776
+ if (!open) {
11777
+ this.pendingFocus = false;
11778
+ this.pendingScroll = false;
11779
+ }
11780
+ else {
11781
+ if (justOpened && canFocus)
11782
+ this.pendingFocus = true;
11783
+ if (justOpened || queryChanged || optionsChanged)
11784
+ this.pendingScroll = true;
11785
+ }
11786
+ this.lastOpen = open;
11787
+ this.lastQuery = query;
11788
+ this.lastOptions = options;
11789
+ }
11790
+ flush(host) {
11791
+ if (this.pendingFocus && focusOverlaySearch(host)) {
11792
+ this.pendingFocus = false;
11793
+ }
11794
+ if (this.pendingScroll) {
11795
+ scrollOverlayOptionsToTop(host);
11796
+ this.pendingScroll = false;
11797
+ }
11798
+ }
11799
+ }
11800
+
11802
11801
  class OnlySelectModalServiceComponent {
11803
11802
  onlySelectModal;
11804
11803
  cdr;
11805
11804
  vm$;
11806
11805
  sub;
11806
+ host = inject((ElementRef));
11807
+ chrome = new OverlaySearchChrome();
11807
11808
  constructor(onlySelectModal, cdr) {
11808
11809
  this.onlySelectModal = onlySelectModal;
11809
11810
  this.cdr = cdr;
11810
11811
  this.vm$ = this.onlySelectModal.state$;
11811
11812
  }
11812
11813
  ngOnInit() {
11813
- this.sub = this.onlySelectModal.state$.subscribe(() => this.cdr.markForCheck());
11814
+ this.sub = this.onlySelectModal.state$.subscribe((session) => {
11815
+ this.chrome.onSession(!!session, session?.view.searchQuery ?? null, session?.view.filteredOptions ?? null, !!session?.view.shouldShowSearch);
11816
+ this.cdr.markForCheck();
11817
+ });
11818
+ }
11819
+ ngAfterViewChecked() {
11820
+ this.chrome.flush(this.host.nativeElement);
11814
11821
  }
11815
11822
  ngOnDestroy() {
11816
11823
  this.sub?.unsubscribe();
11817
11824
  }
11818
11825
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: OnlySelectModalServiceComponent, deps: [{ token: OnlySelectModalService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
11819
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", 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 <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 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;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true]{user-select:auto;-webkit-user-select:auto}.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(--color-scrim);overflow:hidden}@media (width <= 768px){.Backdrop{align-items:flex-start}}.Backdrop .Picker{display:flex;flex-direction:column;gap:4px;width:100%;max-width:600px;max-height:100%;margin:0 auto;background:var(--color-surface);border-radius:var(--radius-xl);padding:0;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow)}.Backdrop .Picker .SearchContainer{display:flex;align-items:center;gap:4px;width:calc(100% - 12px);height:32px;min-height:32px;padding:0 8px;margin-top:6px;margin-left:6px;margin-right:6px;box-sizing:border-box;border:0;border-radius:12px;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}.Backdrop .Picker .SearchContainer:hover{outline:solid 1px var(--color-input-border-hover, #a3a3a3)}.Backdrop .Picker .SearchContainer:focus-within{outline:solid 1px var(--color-input-border-focus, #22c55e)}.Backdrop .Picker .SearchContainer .SearchIcon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:14px;height:14px;color:var(--color-fg-muted, #a3a3a3);pointer-events:none}.Backdrop .Picker .SearchContainer .SearchInput{flex:1;min-width:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:none;box-shadow:none;border-radius:0;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);background:transparent;appearance:none;-webkit-appearance:none;font:inherit;font-size:14px;font-weight:400;line-height:1.2}.Backdrop .Picker .SearchContainer .SearchInput:focus{border:0;outline:none;box-shadow:none}.Backdrop .Picker .SearchContainer .SearchInput::placeholder{color:var(--color-input-placeholder, #a3a3a3);opacity:1}.Backdrop .Picker .SearchContainer .Close{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:24px;height:24px;margin:0 -4px 0 0;padding:0;border:0;border-radius:12px;color:var(--color-fg-muted, #a3a3a3);background:transparent;cursor:pointer}.Backdrop .Picker .SearchContainer .Close:hover{color:var(--color-fg, #171717);background:color-mix(in srgb,var(--color-fg, #171717) 8%,transparent)}.Backdrop .Picker .OptionsList{width:100%;display:flex;flex-direction:column;overflow:hidden;overflow-y:auto;padding:6px 12px 12px}.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(--color-surface-muted)}.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:14px;color:var(--color-fg-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(--color-fg-muted)}.Backdrop .Picker .OptionsList .Option label .CheckIcon lucide-icon .lucide-svg{width:14px;height:14px}.Backdrop .Picker .OptionsList .Option label .CheckIcon.Selected{color:var(--color-fg-brand)}.LoadingState{display:flex;align-items:center;justify-content:center;gap:8px;padding:var(--spacing-lg);color:var(--color-fg-muted);font-size:14px}.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(--color-fg-muted, var(--color-fg-muted));font-weight:400;font-size:14px}\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"] }] });
11826
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", 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 <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 placeholder=\"Buscar\"\r\n autocomplete=\"off\"\r\n autocapitalize=\"off\"\r\n spellcheck=\"false\"\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:block;position:relative;z-index:10050;width:0;height:0;overflow:visible;pointer-events:none;--radius-none: 0;--radius-xs: 2px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 16px;--radius-full: 9999px;--spacing-xxs: 2px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 16px;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-user-select:auto}.Backdrop{position:fixed;top:0;left:0;z-index:10050;pointer-events:auto;display:flex;justify-content:center;align-items:center;width:100%;height:100%;padding:12px;background:var(--color-scrim, color-mix(in srgb, #171717 40%, transparent));overflow:hidden}@media (width <= 768px){.Backdrop{align-items:flex-start}}.Backdrop .Picker{display:flex;flex-direction:column;gap:4px;width:100%;max-width:600px;max-height:100%;margin:0 auto;background:var(--color-surface);border-radius:16px!important;padding:0;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow)}.Backdrop .Picker .SearchContainer{display:flex;align-items:center;gap:4px;width:calc(100% - 12px);height:32px;min-height:32px;padding:0 8px;margin-top:6px;margin-left:6px;margin-right:6px;box-sizing:border-box;border:0;border-radius:12px!important;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}.Backdrop .Picker .SearchContainer:hover{outline:solid 1px var(--color-input-border-hover, #a3a3a3)}.Backdrop .Picker .SearchContainer:focus-within{outline:solid 1px var(--color-input-border-focus, #22c55e)}.Backdrop .Picker .SearchContainer .SearchIcon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:14px;height:14px;color:var(--color-fg-muted, #a3a3a3);pointer-events:none}.Backdrop .Picker .SearchContainer .SearchInput{flex:1;min-width:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:none;box-shadow:none;border-radius:0;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);background:transparent;appearance:none;-webkit-appearance:none;font:inherit;font-size:14px;font-weight:400;line-height:1.2}.Backdrop .Picker .SearchContainer .SearchInput:focus{border:0;outline:none;box-shadow:none}.Backdrop .Picker .SearchContainer .SearchInput::placeholder{color:var(--color-input-placeholder, #a3a3a3);opacity:1}.Backdrop .Picker .SearchContainer .Close{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:24px;height:24px;margin:0 -4px 0 0;padding:0;border:0;border-radius:12px;color:var(--color-fg-muted, #a3a3a3);background:transparent;cursor:pointer}.Backdrop .Picker .SearchContainer .Close:hover{color:var(--color-fg, #171717);background:color-mix(in srgb,var(--color-fg, #171717) 8%,transparent)}.Backdrop .Picker .OptionsList{width:100%;display:flex;flex-direction:column;overflow:hidden;overflow-y:auto;padding:6px 12px 12px}.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:8px}.Backdrop .Picker .OptionsList .Option label:hover{background-color:var(--color-surface-muted)}.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:14px;color:var(--color-fg-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(--color-fg-muted)}.Backdrop .Picker .OptionsList .Option label .CheckIcon lucide-icon .lucide-svg{width:14px;height:14px}.Backdrop .Picker .OptionsList .Option label .CheckIcon.Selected{color:var(--color-fg-brand)}.LoadingState{display:flex;align-items:center;justify-content:center;gap:8px;padding:16px;color:var(--color-fg-muted);font-size:14px}.LoadingState .fa-spinner{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.EmptyOptionsMessage{padding:16px;text-align:center;color:var(--color-fg-muted, var(--color-fg-muted));font-weight:400;font-size:14px}\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"] }] });
11820
11827
  }
11821
11828
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: OnlySelectModalServiceComponent, decorators: [{
11822
11829
  type: Component,
11823
- 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 <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 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;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true]{user-select:auto;-webkit-user-select:auto}.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(--color-scrim);overflow:hidden}@media (width <= 768px){.Backdrop{align-items:flex-start}}.Backdrop .Picker{display:flex;flex-direction:column;gap:4px;width:100%;max-width:600px;max-height:100%;margin:0 auto;background:var(--color-surface);border-radius:var(--radius-xl);padding:0;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow)}.Backdrop .Picker .SearchContainer{display:flex;align-items:center;gap:4px;width:calc(100% - 12px);height:32px;min-height:32px;padding:0 8px;margin-top:6px;margin-left:6px;margin-right:6px;box-sizing:border-box;border:0;border-radius:12px;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}.Backdrop .Picker .SearchContainer:hover{outline:solid 1px var(--color-input-border-hover, #a3a3a3)}.Backdrop .Picker .SearchContainer:focus-within{outline:solid 1px var(--color-input-border-focus, #22c55e)}.Backdrop .Picker .SearchContainer .SearchIcon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:14px;height:14px;color:var(--color-fg-muted, #a3a3a3);pointer-events:none}.Backdrop .Picker .SearchContainer .SearchInput{flex:1;min-width:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:none;box-shadow:none;border-radius:0;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);background:transparent;appearance:none;-webkit-appearance:none;font:inherit;font-size:14px;font-weight:400;line-height:1.2}.Backdrop .Picker .SearchContainer .SearchInput:focus{border:0;outline:none;box-shadow:none}.Backdrop .Picker .SearchContainer .SearchInput::placeholder{color:var(--color-input-placeholder, #a3a3a3);opacity:1}.Backdrop .Picker .SearchContainer .Close{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:24px;height:24px;margin:0 -4px 0 0;padding:0;border:0;border-radius:12px;color:var(--color-fg-muted, #a3a3a3);background:transparent;cursor:pointer}.Backdrop .Picker .SearchContainer .Close:hover{color:var(--color-fg, #171717);background:color-mix(in srgb,var(--color-fg, #171717) 8%,transparent)}.Backdrop .Picker .OptionsList{width:100%;display:flex;flex-direction:column;overflow:hidden;overflow-y:auto;padding:6px 12px 12px}.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(--color-surface-muted)}.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:14px;color:var(--color-fg-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(--color-fg-muted)}.Backdrop .Picker .OptionsList .Option label .CheckIcon lucide-icon .lucide-svg{width:14px;height:14px}.Backdrop .Picker .OptionsList .Option label .CheckIcon.Selected{color:var(--color-fg-brand)}.LoadingState{display:flex;align-items:center;justify-content:center;gap:8px;padding:var(--spacing-lg);color:var(--color-fg-muted);font-size:14px}.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(--color-fg-muted, var(--color-fg-muted));font-weight:400;font-size:14px}\n"] }]
11830
+ 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 <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 placeholder=\"Buscar\"\r\n autocomplete=\"off\"\r\n autocapitalize=\"off\"\r\n spellcheck=\"false\"\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:block;position:relative;z-index:10050;width:0;height:0;overflow:visible;pointer-events:none;--radius-none: 0;--radius-xs: 2px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 16px;--radius-full: 9999px;--spacing-xxs: 2px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 16px;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-user-select:auto}.Backdrop{position:fixed;top:0;left:0;z-index:10050;pointer-events:auto;display:flex;justify-content:center;align-items:center;width:100%;height:100%;padding:12px;background:var(--color-scrim, color-mix(in srgb, #171717 40%, transparent));overflow:hidden}@media (width <= 768px){.Backdrop{align-items:flex-start}}.Backdrop .Picker{display:flex;flex-direction:column;gap:4px;width:100%;max-width:600px;max-height:100%;margin:0 auto;background:var(--color-surface);border-radius:16px!important;padding:0;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow)}.Backdrop .Picker .SearchContainer{display:flex;align-items:center;gap:4px;width:calc(100% - 12px);height:32px;min-height:32px;padding:0 8px;margin-top:6px;margin-left:6px;margin-right:6px;box-sizing:border-box;border:0;border-radius:12px!important;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}.Backdrop .Picker .SearchContainer:hover{outline:solid 1px var(--color-input-border-hover, #a3a3a3)}.Backdrop .Picker .SearchContainer:focus-within{outline:solid 1px var(--color-input-border-focus, #22c55e)}.Backdrop .Picker .SearchContainer .SearchIcon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:14px;height:14px;color:var(--color-fg-muted, #a3a3a3);pointer-events:none}.Backdrop .Picker .SearchContainer .SearchInput{flex:1;min-width:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:none;box-shadow:none;border-radius:0;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);background:transparent;appearance:none;-webkit-appearance:none;font:inherit;font-size:14px;font-weight:400;line-height:1.2}.Backdrop .Picker .SearchContainer .SearchInput:focus{border:0;outline:none;box-shadow:none}.Backdrop .Picker .SearchContainer .SearchInput::placeholder{color:var(--color-input-placeholder, #a3a3a3);opacity:1}.Backdrop .Picker .SearchContainer .Close{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:24px;height:24px;margin:0 -4px 0 0;padding:0;border:0;border-radius:12px;color:var(--color-fg-muted, #a3a3a3);background:transparent;cursor:pointer}.Backdrop .Picker .SearchContainer .Close:hover{color:var(--color-fg, #171717);background:color-mix(in srgb,var(--color-fg, #171717) 8%,transparent)}.Backdrop .Picker .OptionsList{width:100%;display:flex;flex-direction:column;overflow:hidden;overflow-y:auto;padding:6px 12px 12px}.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:8px}.Backdrop .Picker .OptionsList .Option label:hover{background-color:var(--color-surface-muted)}.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:14px;color:var(--color-fg-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(--color-fg-muted)}.Backdrop .Picker .OptionsList .Option label .CheckIcon lucide-icon .lucide-svg{width:14px;height:14px}.Backdrop .Picker .OptionsList .Option label .CheckIcon.Selected{color:var(--color-fg-brand)}.LoadingState{display:flex;align-items:center;justify-content:center;gap:8px;padding:16px;color:var(--color-fg-muted);font-size:14px}.LoadingState .fa-spinner{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.EmptyOptionsMessage{padding:16px;text-align:center;color:var(--color-fg-muted, var(--color-fg-muted));font-weight:400;font-size:14px}\n"] }]
11824
11831
  }], ctorParameters: () => [{ type: OnlySelectModalService }, { type: i0.ChangeDetectorRef }] });
11825
11832
 
11826
11833
  class MultiselectComboboxModalServiceComponent {
@@ -11828,13 +11835,21 @@ class MultiselectComboboxModalServiceComponent {
11828
11835
  cdr;
11829
11836
  vm$;
11830
11837
  sub;
11838
+ host = inject((ElementRef));
11839
+ chrome = new OverlaySearchChrome();
11831
11840
  constructor(multiselectModal, cdr) {
11832
11841
  this.multiselectModal = multiselectModal;
11833
11842
  this.cdr = cdr;
11834
11843
  this.vm$ = this.multiselectModal.state$;
11835
11844
  }
11836
11845
  ngOnInit() {
11837
- this.sub = this.multiselectModal.state$.subscribe(() => this.cdr.markForCheck());
11846
+ this.sub = this.multiselectModal.state$.subscribe((session) => {
11847
+ this.chrome.onSession(!!session, session?.view.searchQuery ?? null, session?.view.filteredOptions ?? null, !!session?.view.shouldShowSearch);
11848
+ this.cdr.markForCheck();
11849
+ });
11850
+ }
11851
+ ngAfterViewChecked() {
11852
+ this.chrome.flush(this.host.nativeElement);
11838
11853
  }
11839
11854
  ngOnDestroy() {
11840
11855
  this.sub?.unsubscribe();
@@ -11843,11 +11858,11 @@ class MultiselectComboboxModalServiceComponent {
11843
11858
  return selected.some((o) => o.value === option.value);
11844
11859
  }
11845
11860
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: MultiselectComboboxModalServiceComponent, deps: [{ token: MultiselectComboboxModalService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
11846
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", 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 <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 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;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true]{user-select:auto;-webkit-user-select:auto}.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(--color-scrim);overflow:hidden}@media (width <= 768px){.Backdrop{align-items:flex-start}}.Backdrop .Picker{display:flex;flex-direction:column;gap:4px;width:100%;max-width:600px;max-height:100%;margin:0 auto;background:var(--color-surface);border-radius:var(--radius-xl);padding:8px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow)}.Backdrop .Picker .SearchContainer{display:flex;align-items:center;gap:4px;width:calc(100% - 12px);height:32px;min-height:32px;padding:0 8px;margin-top:6px;margin-left:6px;margin-right:6px;box-sizing:border-box;border:0;border-radius:12px;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}.Backdrop .Picker .SearchContainer:hover{outline:solid 1px var(--color-input-border-hover, #a3a3a3)}.Backdrop .Picker .SearchContainer:focus-within{outline:solid 1px var(--color-input-border-focus, #22c55e)}.Backdrop .Picker .SearchContainer .SearchIcon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:14px;height:14px;color:var(--color-fg-muted, #a3a3a3);pointer-events:none}.Backdrop .Picker .SearchContainer .SearchInput{flex:1;min-width:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:none;box-shadow:none;border-radius:0;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);background:transparent;appearance:none;-webkit-appearance:none;font:inherit;font-size:14px;font-weight:400;line-height:1.2}.Backdrop .Picker .SearchContainer .SearchInput:focus{border:0;outline:none;box-shadow:none}.Backdrop .Picker .SearchContainer .SearchInput::placeholder{color:var(--color-input-placeholder, #a3a3a3);opacity:1}.Backdrop .Picker .SearchContainer .Close{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:24px;height:24px;margin:0 -4px 0 0;padding:0;border:0;border-radius:12px;color:var(--color-fg-muted, #a3a3a3);background:transparent;cursor:pointer}.Backdrop .Picker .SearchContainer .Close:hover{color:var(--color-fg, #171717);background:color-mix(in srgb,var(--color-fg, #171717) 8%,transparent)}.Backdrop .Picker .Close{padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-lg);color:var(--color-action-cancel-fg);border-color:var(--color-action-cancel-border);background-color:var(--color-action-cancel-bg);width:max-content;margin-left:auto;cursor:pointer}.Backdrop .Picker .Close:hover{color:var(--color-action-cancel-fg-hover);border-color:var(--color-action-cancel-border-hover);background-color:var(--color-action-cancel-bg-hover)}.Backdrop .Picker .Close:active{color:var(--color-action-cancel-fg-active);border-color:var(--color-action-cancel-border-active);background-color:var(--color-action-cancel-bg-active)}.Backdrop .Picker .SelectedOptions{display:flex;align-items:center;flex-wrap:wrap;gap:5px;border-bottom:solid 1px var(--color-border);padding:4px}.Backdrop .Picker .SelectedOptions .SelectedOption{background-color:var(--color-surface-muted, var(--color-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:14px}.Backdrop .Picker .SelectedOptions .SelectedOption .RemoveIcon lucide-icon .lucide-svg{width:14px;height:14px}.Backdrop .Picker .SelectedOptions .SelectedOption .RemoveIcon:hover{color:var(--color-danger-fg);background-color:var(--color-border)}.Backdrop .Picker .OptionsList{width:100%;display:flex;flex-direction:column;overflow:hidden;overflow-y:auto;padding:6px 12px 12px}.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(--color-surface-muted)}.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:14px;color:var(--color-fg-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(--color-fg-muted)}.Backdrop .Picker .OptionsList .Option label .CheckIcon lucide-icon .lucide-svg{width:14px;height:14px}.Backdrop .Picker .OptionsList .Option label .CheckIcon.Selected{color:var(--color-fg-brand)}.LoadingState{display:flex;align-items:center;justify-content:center;gap:8px;padding:var(--spacing-lg);color:var(--color-fg-muted);font-size:14px}.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(--color-fg-muted, var(--color-fg-muted));font-weight:400;font-size:14px}\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"] }] });
11861
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", 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 <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 placeholder=\"Buscar\"\r\n autocomplete=\"off\"\r\n autocapitalize=\"off\"\r\n spellcheck=\"false\"\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:block;position:relative;z-index:10050;width:0;height:0;overflow:visible;pointer-events:none;--radius-none: 0;--radius-xs: 2px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 16px;--radius-full: 9999px;--spacing-xxs: 2px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 16px;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-user-select:auto}.Backdrop{position:fixed;top:0;left:0;z-index:10050;pointer-events:auto;display:flex;justify-content:center;align-items:center;width:100%;height:100%;padding:12px;background:var(--color-scrim, color-mix(in srgb, #171717 40%, transparent));overflow:hidden}@media (width <= 768px){.Backdrop{align-items:flex-start}}.Backdrop .Picker{display:flex;flex-direction:column;gap:4px;width:100%;max-width:600px;max-height:100%;margin:0 auto;background:var(--color-surface);border-radius:16px!important;padding:8px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow)}.Backdrop .Picker .SearchContainer{display:flex;align-items:center;gap:4px;width:calc(100% - 12px);height:32px;min-height:32px;padding:0 8px;margin-top:6px;margin-left:6px;margin-right:6px;box-sizing:border-box;border:0;border-radius:12px!important;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}.Backdrop .Picker .SearchContainer:hover{outline:solid 1px var(--color-input-border-hover, #a3a3a3)}.Backdrop .Picker .SearchContainer:focus-within{outline:solid 1px var(--color-input-border-focus, #22c55e)}.Backdrop .Picker .SearchContainer .SearchIcon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:14px;height:14px;color:var(--color-fg-muted, #a3a3a3);pointer-events:none}.Backdrop .Picker .SearchContainer .SearchInput{flex:1;min-width:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:none;box-shadow:none;border-radius:0;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);background:transparent;appearance:none;-webkit-appearance:none;font:inherit;font-size:14px;font-weight:400;line-height:1.2}.Backdrop .Picker .SearchContainer .SearchInput:focus{border:0;outline:none;box-shadow:none}.Backdrop .Picker .SearchContainer .SearchInput::placeholder{color:var(--color-input-placeholder, #a3a3a3);opacity:1}.Backdrop .Picker .SearchContainer .Close{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:24px;height:24px;margin:0 -4px 0 0;padding:0;border:0;border-radius:12px;color:var(--color-fg-muted, #a3a3a3);background:transparent;cursor:pointer}.Backdrop .Picker .SearchContainer .Close:hover{color:var(--color-fg, #171717);background:color-mix(in srgb,var(--color-fg, #171717) 8%,transparent)}.Backdrop .Picker .Close{padding:8px 12px;border-radius:12px;color:var(--color-action-cancel-fg);border-color:var(--color-action-cancel-border);background-color:var(--color-action-cancel-bg);width:max-content;margin-left:auto;cursor:pointer}.Backdrop .Picker .Close:hover{color:var(--color-action-cancel-fg-hover);border-color:var(--color-action-cancel-border-hover);background-color:var(--color-action-cancel-bg-hover)}.Backdrop .Picker .Close:active{color:var(--color-action-cancel-fg-active);border-color:var(--color-action-cancel-border-active);background-color:var(--color-action-cancel-bg-active)}.Backdrop .Picker .SelectedOptions{display:flex;align-items:center;flex-wrap:wrap;gap:5px;border-bottom:solid 1px var(--color-border);padding:4px}.Backdrop .Picker .SelectedOptions .SelectedOption{background-color:var(--color-surface-muted, var(--color-border));border-radius:8px;width:max-content;height:25px;padding:0 0 0 8px;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:14px}.Backdrop .Picker .SelectedOptions .SelectedOption .RemoveIcon lucide-icon .lucide-svg{width:14px;height:14px}.Backdrop .Picker .SelectedOptions .SelectedOption .RemoveIcon:hover{color:var(--color-danger-fg);background-color:var(--color-border)}.Backdrop .Picker .OptionsList{width:100%;display:flex;flex-direction:column;overflow:hidden;overflow-y:auto;padding:6px 12px 12px}.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:8px}.Backdrop .Picker .OptionsList .Option label:hover{background-color:var(--color-surface-muted)}.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:14px;color:var(--color-fg-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(--color-fg-muted)}.Backdrop .Picker .OptionsList .Option label .CheckIcon lucide-icon .lucide-svg{width:14px;height:14px}.Backdrop .Picker .OptionsList .Option label .CheckIcon.Selected{color:var(--color-fg-brand)}.LoadingState{display:flex;align-items:center;justify-content:center;gap:8px;padding:16px;color:var(--color-fg-muted);font-size:14px}.LoadingState .fa-spinner{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.EmptyOptionsMessage{padding:16px;text-align:center;color:var(--color-fg-muted, var(--color-fg-muted));font-weight:400;font-size:14px}\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"] }] });
11847
11862
  }
11848
11863
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: MultiselectComboboxModalServiceComponent, decorators: [{
11849
11864
  type: Component,
11850
- 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 <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 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;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true]{user-select:auto;-webkit-user-select:auto}.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(--color-scrim);overflow:hidden}@media (width <= 768px){.Backdrop{align-items:flex-start}}.Backdrop .Picker{display:flex;flex-direction:column;gap:4px;width:100%;max-width:600px;max-height:100%;margin:0 auto;background:var(--color-surface);border-radius:var(--radius-xl);padding:8px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow)}.Backdrop .Picker .SearchContainer{display:flex;align-items:center;gap:4px;width:calc(100% - 12px);height:32px;min-height:32px;padding:0 8px;margin-top:6px;margin-left:6px;margin-right:6px;box-sizing:border-box;border:0;border-radius:12px;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}.Backdrop .Picker .SearchContainer:hover{outline:solid 1px var(--color-input-border-hover, #a3a3a3)}.Backdrop .Picker .SearchContainer:focus-within{outline:solid 1px var(--color-input-border-focus, #22c55e)}.Backdrop .Picker .SearchContainer .SearchIcon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:14px;height:14px;color:var(--color-fg-muted, #a3a3a3);pointer-events:none}.Backdrop .Picker .SearchContainer .SearchInput{flex:1;min-width:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:none;box-shadow:none;border-radius:0;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);background:transparent;appearance:none;-webkit-appearance:none;font:inherit;font-size:14px;font-weight:400;line-height:1.2}.Backdrop .Picker .SearchContainer .SearchInput:focus{border:0;outline:none;box-shadow:none}.Backdrop .Picker .SearchContainer .SearchInput::placeholder{color:var(--color-input-placeholder, #a3a3a3);opacity:1}.Backdrop .Picker .SearchContainer .Close{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:24px;height:24px;margin:0 -4px 0 0;padding:0;border:0;border-radius:12px;color:var(--color-fg-muted, #a3a3a3);background:transparent;cursor:pointer}.Backdrop .Picker .SearchContainer .Close:hover{color:var(--color-fg, #171717);background:color-mix(in srgb,var(--color-fg, #171717) 8%,transparent)}.Backdrop .Picker .Close{padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-lg);color:var(--color-action-cancel-fg);border-color:var(--color-action-cancel-border);background-color:var(--color-action-cancel-bg);width:max-content;margin-left:auto;cursor:pointer}.Backdrop .Picker .Close:hover{color:var(--color-action-cancel-fg-hover);border-color:var(--color-action-cancel-border-hover);background-color:var(--color-action-cancel-bg-hover)}.Backdrop .Picker .Close:active{color:var(--color-action-cancel-fg-active);border-color:var(--color-action-cancel-border-active);background-color:var(--color-action-cancel-bg-active)}.Backdrop .Picker .SelectedOptions{display:flex;align-items:center;flex-wrap:wrap;gap:5px;border-bottom:solid 1px var(--color-border);padding:4px}.Backdrop .Picker .SelectedOptions .SelectedOption{background-color:var(--color-surface-muted, var(--color-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:14px}.Backdrop .Picker .SelectedOptions .SelectedOption .RemoveIcon lucide-icon .lucide-svg{width:14px;height:14px}.Backdrop .Picker .SelectedOptions .SelectedOption .RemoveIcon:hover{color:var(--color-danger-fg);background-color:var(--color-border)}.Backdrop .Picker .OptionsList{width:100%;display:flex;flex-direction:column;overflow:hidden;overflow-y:auto;padding:6px 12px 12px}.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(--color-surface-muted)}.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:14px;color:var(--color-fg-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(--color-fg-muted)}.Backdrop .Picker .OptionsList .Option label .CheckIcon lucide-icon .lucide-svg{width:14px;height:14px}.Backdrop .Picker .OptionsList .Option label .CheckIcon.Selected{color:var(--color-fg-brand)}.LoadingState{display:flex;align-items:center;justify-content:center;gap:8px;padding:var(--spacing-lg);color:var(--color-fg-muted);font-size:14px}.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(--color-fg-muted, var(--color-fg-muted));font-weight:400;font-size:14px}\n"] }]
11865
+ 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 <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 placeholder=\"Buscar\"\r\n autocomplete=\"off\"\r\n autocapitalize=\"off\"\r\n spellcheck=\"false\"\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:block;position:relative;z-index:10050;width:0;height:0;overflow:visible;pointer-events:none;--radius-none: 0;--radius-xs: 2px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 16px;--radius-full: 9999px;--spacing-xxs: 2px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 16px;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-user-select:auto}.Backdrop{position:fixed;top:0;left:0;z-index:10050;pointer-events:auto;display:flex;justify-content:center;align-items:center;width:100%;height:100%;padding:12px;background:var(--color-scrim, color-mix(in srgb, #171717 40%, transparent));overflow:hidden}@media (width <= 768px){.Backdrop{align-items:flex-start}}.Backdrop .Picker{display:flex;flex-direction:column;gap:4px;width:100%;max-width:600px;max-height:100%;margin:0 auto;background:var(--color-surface);border-radius:16px!important;padding:8px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow)}.Backdrop .Picker .SearchContainer{display:flex;align-items:center;gap:4px;width:calc(100% - 12px);height:32px;min-height:32px;padding:0 8px;margin-top:6px;margin-left:6px;margin-right:6px;box-sizing:border-box;border:0;border-radius:12px!important;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}.Backdrop .Picker .SearchContainer:hover{outline:solid 1px var(--color-input-border-hover, #a3a3a3)}.Backdrop .Picker .SearchContainer:focus-within{outline:solid 1px var(--color-input-border-focus, #22c55e)}.Backdrop .Picker .SearchContainer .SearchIcon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:14px;height:14px;color:var(--color-fg-muted, #a3a3a3);pointer-events:none}.Backdrop .Picker .SearchContainer .SearchInput{flex:1;min-width:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:none;box-shadow:none;border-radius:0;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);background:transparent;appearance:none;-webkit-appearance:none;font:inherit;font-size:14px;font-weight:400;line-height:1.2}.Backdrop .Picker .SearchContainer .SearchInput:focus{border:0;outline:none;box-shadow:none}.Backdrop .Picker .SearchContainer .SearchInput::placeholder{color:var(--color-input-placeholder, #a3a3a3);opacity:1}.Backdrop .Picker .SearchContainer .Close{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:24px;height:24px;margin:0 -4px 0 0;padding:0;border:0;border-radius:12px;color:var(--color-fg-muted, #a3a3a3);background:transparent;cursor:pointer}.Backdrop .Picker .SearchContainer .Close:hover{color:var(--color-fg, #171717);background:color-mix(in srgb,var(--color-fg, #171717) 8%,transparent)}.Backdrop .Picker .Close{padding:8px 12px;border-radius:12px;color:var(--color-action-cancel-fg);border-color:var(--color-action-cancel-border);background-color:var(--color-action-cancel-bg);width:max-content;margin-left:auto;cursor:pointer}.Backdrop .Picker .Close:hover{color:var(--color-action-cancel-fg-hover);border-color:var(--color-action-cancel-border-hover);background-color:var(--color-action-cancel-bg-hover)}.Backdrop .Picker .Close:active{color:var(--color-action-cancel-fg-active);border-color:var(--color-action-cancel-border-active);background-color:var(--color-action-cancel-bg-active)}.Backdrop .Picker .SelectedOptions{display:flex;align-items:center;flex-wrap:wrap;gap:5px;border-bottom:solid 1px var(--color-border);padding:4px}.Backdrop .Picker .SelectedOptions .SelectedOption{background-color:var(--color-surface-muted, var(--color-border));border-radius:8px;width:max-content;height:25px;padding:0 0 0 8px;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:14px}.Backdrop .Picker .SelectedOptions .SelectedOption .RemoveIcon lucide-icon .lucide-svg{width:14px;height:14px}.Backdrop .Picker .SelectedOptions .SelectedOption .RemoveIcon:hover{color:var(--color-danger-fg);background-color:var(--color-border)}.Backdrop .Picker .OptionsList{width:100%;display:flex;flex-direction:column;overflow:hidden;overflow-y:auto;padding:6px 12px 12px}.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:8px}.Backdrop .Picker .OptionsList .Option label:hover{background-color:var(--color-surface-muted)}.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:14px;color:var(--color-fg-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(--color-fg-muted)}.Backdrop .Picker .OptionsList .Option label .CheckIcon lucide-icon .lucide-svg{width:14px;height:14px}.Backdrop .Picker .OptionsList .Option label .CheckIcon.Selected{color:var(--color-fg-brand)}.LoadingState{display:flex;align-items:center;justify-content:center;gap:8px;padding:16px;color:var(--color-fg-muted);font-size:14px}.LoadingState .fa-spinner{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.EmptyOptionsMessage{padding:16px;text-align:center;color:var(--color-fg-muted, var(--color-fg-muted));font-weight:400;font-size:14px}\n"] }]
11851
11866
  }], ctorParameters: () => [{ type: MultiselectComboboxModalService }, { type: i0.ChangeDetectorRef }] });
11852
11867
 
11853
11868
  class SearchEntryModalServiceComponent {
@@ -11855,23 +11870,31 @@ class SearchEntryModalServiceComponent {
11855
11870
  cdr;
11856
11871
  vm$;
11857
11872
  sub;
11873
+ host = inject((ElementRef));
11874
+ chrome = new OverlaySearchChrome();
11858
11875
  constructor(searchEntryModal, cdr) {
11859
11876
  this.searchEntryModal = searchEntryModal;
11860
11877
  this.cdr = cdr;
11861
11878
  this.vm$ = this.searchEntryModal.state$;
11862
11879
  }
11863
11880
  ngOnInit() {
11864
- this.sub = this.searchEntryModal.state$.subscribe(() => this.cdr.markForCheck());
11881
+ this.sub = this.searchEntryModal.state$.subscribe((session) => {
11882
+ this.chrome.onSession(!!session, session?.view.searchText ?? null, session?.view.filteredOptions ?? null, !!session?.view.shouldShowSearch);
11883
+ this.cdr.markForCheck();
11884
+ });
11885
+ }
11886
+ ngAfterViewChecked() {
11887
+ this.chrome.flush(this.host.nativeElement);
11865
11888
  }
11866
11889
  ngOnDestroy() {
11867
11890
  this.sub?.unsubscribe();
11868
11891
  }
11869
11892
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SearchEntryModalServiceComponent, deps: [{ token: SearchEntryModalService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
11870
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", 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 <lucide-icon class=\"SearchIcon\" name=\"search\"></lucide-icon>\r\n <input\r\n type=\"text\"\r\n class=\"SearchInput\"\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;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true]{user-select:auto;-webkit-user-select:auto}.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(--color-scrim)}.Backdrop .Picker{max-width:550px;width:100%;margin:0 auto;background:var(--color-surface);display:flex;flex-direction:column;gap:8px;border-radius:var(--radius-lg);max-height:calc(100vh - 20px);box-shadow:0 0 10px var(--color-shadow);padding:8px}.Backdrop .Picker .SearchContainer{display:flex;align-items:center;gap:4px;width:calc(100% - 12px);height:32px;min-height:32px;padding:0 8px;margin-top:6px;margin-left:6px;margin-right:6px;box-sizing:border-box;border:0;border-radius:12px;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}.Backdrop .Picker .SearchContainer:hover{outline:solid 1px var(--color-input-border-hover, #a3a3a3)}.Backdrop .Picker .SearchContainer:focus-within{outline:solid 1px var(--color-input-border-focus, #22c55e)}.Backdrop .Picker .SearchContainer .SearchIcon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:14px;height:14px;color:var(--color-fg-muted, #a3a3a3);pointer-events:none}.Backdrop .Picker .SearchContainer .SearchInput{flex:1;min-width:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:none;box-shadow:none;border-radius:0;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);background:transparent;appearance:none;-webkit-appearance:none;font:inherit;font-size:14px;font-weight:400;line-height:1.2}.Backdrop .Picker .SearchContainer .SearchInput:focus{border:0;outline:none;box-shadow:none}.Backdrop .Picker .SearchContainer .SearchInput::placeholder{color:var(--color-input-placeholder, #a3a3a3);opacity:1}.Backdrop .Picker .SearchContainer .Close{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:24px;height:24px;margin:0 -4px 0 0;padding:0;border:0;border-radius:12px;color:var(--color-fg-muted, #a3a3a3);background:transparent;cursor:pointer}.Backdrop .Picker .SearchContainer .Close:hover{color:var(--color-fg, #171717);background:color-mix(in srgb,var(--color-fg, #171717) 8%,transparent)}.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(--color-fg-muted)}.Backdrop .Picker .OptionsList .EmptyState i,.Backdrop .Picker .OptionsList .EmptyState lucide-icon{font-size:14px;color:var(--color-fg-secondary);opacity:.5}.Backdrop .Picker .OptionsList .EmptyState i lucide-icon .lucide-svg,.Backdrop .Picker .OptionsList .EmptyState lucide-icon lucide-icon .lucide-svg{width:14px;height:14px}.Backdrop .Picker .OptionsList .EmptyState p{font-size:14px;font-weight:400;color:var(--color-fg);margin:0}.Backdrop .Picker .OptionsList .EmptyState .Hint{font-size:14px;color:var(--color-fg-muted);font-style:italic}.Backdrop .Picker .OptionsList .LoadingState{display:flex;align-items:center;justify-content:center;gap:12px;padding:2rem 1rem;color:var(--color-fg-muted);font-size:14px}.Backdrop .Picker .OptionsList .LoadingState i,.Backdrop .Picker .OptionsList .LoadingState lucide-icon{font-size:14px;color:var(--color-brand);animation:spin 1s linear infinite}.Backdrop .Picker .OptionsList .LoadingState i lucide-icon .lucide-svg,.Backdrop .Picker .OptionsList .LoadingState lucide-icon lucide-icon .lucide-svg{width:14px;height:14px}.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(--color-danger-fg)}.Backdrop .Picker .OptionsList .ErrorState i,.Backdrop .Picker .OptionsList .ErrorState lucide-icon{font-size:14px;color:var(--color-danger-fg)}.Backdrop .Picker .OptionsList .ErrorState i lucide-icon .lucide-svg,.Backdrop .Picker .OptionsList .ErrorState lucide-icon lucide-icon .lucide-svg{width:14px;height:14px}.Backdrop .Picker .OptionsList .ErrorState p{font-size:14px;font-weight:400;color:var(--color-fg);margin:0}.Backdrop .Picker .OptionsList .ErrorState .Hint{font-size:14px;color:var(--color-fg-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(--color-fg-muted)}.Backdrop .Picker .OptionsList .NoResults i,.Backdrop .Picker .OptionsList .NoResults lucide-icon{font-size:14px;color:var(--color-fg-secondary);opacity:.5}.Backdrop .Picker .OptionsList .NoResults i lucide-icon .lucide-svg,.Backdrop .Picker .OptionsList .NoResults lucide-icon lucide-icon .lucide-svg{width:14px;height:14px}.Backdrop .Picker .OptionsList .NoResults p{font-size:14px;font-weight:400;color:var(--color-fg);margin:0}.Backdrop .Picker .OptionsList .NoResults .Hint{font-size:14px;color:var(--color-fg-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(--color-surface-muted)}.Backdrop .Picker .OptionsList .Option.SearchAllOption{border-bottom:1px solid var(--color-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(--color-brand) 0%,var(--color-brand-strong, var(--color-brand)) 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:14px}.Backdrop .Picker .OptionsList .Option.SearchAllOption label .SearchAllIcon i lucide-icon .lucide-svg,.Backdrop .Picker .OptionsList .Option.SearchAllOption label .SearchAllIcon lucide-icon lucide-icon .lucide-svg{width:14px;height:14px}.Backdrop .Picker .OptionsList .Option.SearchAllOption label .Info .Name{font-weight:400;color:var(--color-brand)}.Backdrop .Picker .OptionsList .Option.SearchAllOption label .Info .Description{font-weight:400;font-size:14px;color:var(--color-fg-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(--color-surface-muted);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:14px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;color:var(--color-fg);line-height:1.3}.Backdrop .Picker .OptionsList .Option .Details .Info .Description{font-size:14px;color:var(--color-fg-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(--color-icon-brand);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-svg{width:14px;height:14px}.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"] }] });
11893
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", 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 <lucide-icon class=\"SearchIcon\" name=\"search\"></lucide-icon>\r\n <input\r\n type=\"text\"\r\n class=\"SearchInput\"\r\n [placeholder]=\"session.view.placeholder\"\r\n [value]=\"session.view.searchText\"\r\n (input)=\"session.handlers.onSearchInput($event)\"\r\n autocomplete=\"off\"\r\n autocapitalize=\"off\"\r\n spellcheck=\"false\"\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:block;position:relative;z-index:10050;width:0;height:0;overflow:visible;pointer-events:none;--radius-none: 0;--radius-xs: 2px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 16px;--radius-full: 9999px;--spacing-xxs: 2px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 16px;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-user-select:auto}.Backdrop{position:fixed;top:0;left:0;z-index:10050;pointer-events:auto;display:flex;justify-content:center;align-items:flex-start;width:100%;height:100%;padding:4px;background:var(--color-scrim, color-mix(in srgb, #171717 40%, transparent))}.Backdrop .Picker{max-width:550px;width:100%;margin:0 auto;background:var(--color-surface);display:flex;flex-direction:column;gap:8px;border-radius:12px;max-height:calc(100vh - 20px);box-shadow:0 0 10px var(--color-shadow);padding:8px}.Backdrop .Picker .SearchContainer{display:flex;align-items:center;gap:4px;width:calc(100% - 12px);height:32px;min-height:32px;padding:0 8px;margin-top:6px;margin-left:6px;margin-right:6px;box-sizing:border-box;border:0;border-radius:12px!important;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}.Backdrop .Picker .SearchContainer:hover{outline:solid 1px var(--color-input-border-hover, #a3a3a3)}.Backdrop .Picker .SearchContainer:focus-within{outline:solid 1px var(--color-input-border-focus, #22c55e)}.Backdrop .Picker .SearchContainer .SearchIcon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:14px;height:14px;color:var(--color-fg-muted, #a3a3a3);pointer-events:none}.Backdrop .Picker .SearchContainer .SearchInput{flex:1;min-width:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:none;box-shadow:none;border-radius:0;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);background:transparent;appearance:none;-webkit-appearance:none;font:inherit;font-size:14px;font-weight:400;line-height:1.2}.Backdrop .Picker .SearchContainer .SearchInput:focus{border:0;outline:none;box-shadow:none}.Backdrop .Picker .SearchContainer .SearchInput::placeholder{color:var(--color-input-placeholder, #a3a3a3);opacity:1}.Backdrop .Picker .SearchContainer .Close{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:24px;height:24px;margin:0 -4px 0 0;padding:0;border:0;border-radius:12px;color:var(--color-fg-muted, #a3a3a3);background:transparent;cursor:pointer}.Backdrop .Picker .SearchContainer .Close:hover{color:var(--color-fg, #171717);background:color-mix(in srgb,var(--color-fg, #171717) 8%,transparent)}.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(--color-fg-muted)}.Backdrop .Picker .OptionsList .EmptyState i,.Backdrop .Picker .OptionsList .EmptyState lucide-icon{font-size:14px;color:var(--color-fg-secondary);opacity:.5}.Backdrop .Picker .OptionsList .EmptyState i lucide-icon .lucide-svg,.Backdrop .Picker .OptionsList .EmptyState lucide-icon lucide-icon .lucide-svg{width:14px;height:14px}.Backdrop .Picker .OptionsList .EmptyState p{font-size:14px;font-weight:400;color:var(--color-fg);margin:0}.Backdrop .Picker .OptionsList .EmptyState .Hint{font-size:14px;color:var(--color-fg-muted);font-style:italic}.Backdrop .Picker .OptionsList .LoadingState{display:flex;align-items:center;justify-content:center;gap:12px;padding:2rem 1rem;color:var(--color-fg-muted);font-size:14px}.Backdrop .Picker .OptionsList .LoadingState i,.Backdrop .Picker .OptionsList .LoadingState lucide-icon{font-size:14px;color:var(--color-brand);animation:spin 1s linear infinite}.Backdrop .Picker .OptionsList .LoadingState i lucide-icon .lucide-svg,.Backdrop .Picker .OptionsList .LoadingState lucide-icon lucide-icon .lucide-svg{width:14px;height:14px}.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(--color-danger-fg)}.Backdrop .Picker .OptionsList .ErrorState i,.Backdrop .Picker .OptionsList .ErrorState lucide-icon{font-size:14px;color:var(--color-danger-fg)}.Backdrop .Picker .OptionsList .ErrorState i lucide-icon .lucide-svg,.Backdrop .Picker .OptionsList .ErrorState lucide-icon lucide-icon .lucide-svg{width:14px;height:14px}.Backdrop .Picker .OptionsList .ErrorState p{font-size:14px;font-weight:400;color:var(--color-fg);margin:0}.Backdrop .Picker .OptionsList .ErrorState .Hint{font-size:14px;color:var(--color-fg-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(--color-fg-muted)}.Backdrop .Picker .OptionsList .NoResults i,.Backdrop .Picker .OptionsList .NoResults lucide-icon{font-size:14px;color:var(--color-fg-secondary);opacity:.5}.Backdrop .Picker .OptionsList .NoResults i lucide-icon .lucide-svg,.Backdrop .Picker .OptionsList .NoResults lucide-icon lucide-icon .lucide-svg{width:14px;height:14px}.Backdrop .Picker .OptionsList .NoResults p{font-size:14px;font-weight:400;color:var(--color-fg);margin:0}.Backdrop .Picker .OptionsList .NoResults .Hint{font-size:14px;color:var(--color-fg-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:12px;gap:4px}.Backdrop .Picker .OptionsList .Option label:hover{background-color:var(--color-surface-muted)}.Backdrop .Picker .OptionsList .Option.SearchAllOption{border-bottom:1px solid var(--color-input-border);margin-bottom:4px}.Backdrop .Picker .OptionsList .Option.SearchAllOption label .SearchAllIcon{width:40px;min-width:40px;height:40px;min-height:40px;border-radius:12px;background:linear-gradient(135deg,var(--color-brand) 0%,var(--color-brand-strong, var(--color-brand)) 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:14px}.Backdrop .Picker .OptionsList .Option.SearchAllOption label .SearchAllIcon i lucide-icon .lucide-svg,.Backdrop .Picker .OptionsList .Option.SearchAllOption label .SearchAllIcon lucide-icon lucide-icon .lucide-svg{width:14px;height:14px}.Backdrop .Picker .OptionsList .Option.SearchAllOption label .Info .Name{font-weight:400;color:var(--color-brand)}.Backdrop .Picker .OptionsList .Option.SearchAllOption label .Info .Description{font-weight:400;font-size:14px;color:var(--color-fg-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:8px;overflow:hidden;background-color:var(--color-surface-muted);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:14px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;color:var(--color-fg);line-height:1.3}.Backdrop .Picker .OptionsList .Option .Details .Info .Description{font-size:14px;color:var(--color-fg-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(--color-icon-brand);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-svg{width:14px;height:14px}.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"] }] });
11871
11894
  }
11872
11895
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SearchEntryModalServiceComponent, decorators: [{
11873
11896
  type: Component,
11874
- 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 <lucide-icon class=\"SearchIcon\" name=\"search\"></lucide-icon>\r\n <input\r\n type=\"text\"\r\n class=\"SearchInput\"\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;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true]{user-select:auto;-webkit-user-select:auto}.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(--color-scrim)}.Backdrop .Picker{max-width:550px;width:100%;margin:0 auto;background:var(--color-surface);display:flex;flex-direction:column;gap:8px;border-radius:var(--radius-lg);max-height:calc(100vh - 20px);box-shadow:0 0 10px var(--color-shadow);padding:8px}.Backdrop .Picker .SearchContainer{display:flex;align-items:center;gap:4px;width:calc(100% - 12px);height:32px;min-height:32px;padding:0 8px;margin-top:6px;margin-left:6px;margin-right:6px;box-sizing:border-box;border:0;border-radius:12px;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}.Backdrop .Picker .SearchContainer:hover{outline:solid 1px var(--color-input-border-hover, #a3a3a3)}.Backdrop .Picker .SearchContainer:focus-within{outline:solid 1px var(--color-input-border-focus, #22c55e)}.Backdrop .Picker .SearchContainer .SearchIcon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:14px;height:14px;color:var(--color-fg-muted, #a3a3a3);pointer-events:none}.Backdrop .Picker .SearchContainer .SearchInput{flex:1;min-width:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:none;box-shadow:none;border-radius:0;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);background:transparent;appearance:none;-webkit-appearance:none;font:inherit;font-size:14px;font-weight:400;line-height:1.2}.Backdrop .Picker .SearchContainer .SearchInput:focus{border:0;outline:none;box-shadow:none}.Backdrop .Picker .SearchContainer .SearchInput::placeholder{color:var(--color-input-placeholder, #a3a3a3);opacity:1}.Backdrop .Picker .SearchContainer .Close{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:24px;height:24px;margin:0 -4px 0 0;padding:0;border:0;border-radius:12px;color:var(--color-fg-muted, #a3a3a3);background:transparent;cursor:pointer}.Backdrop .Picker .SearchContainer .Close:hover{color:var(--color-fg, #171717);background:color-mix(in srgb,var(--color-fg, #171717) 8%,transparent)}.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(--color-fg-muted)}.Backdrop .Picker .OptionsList .EmptyState i,.Backdrop .Picker .OptionsList .EmptyState lucide-icon{font-size:14px;color:var(--color-fg-secondary);opacity:.5}.Backdrop .Picker .OptionsList .EmptyState i lucide-icon .lucide-svg,.Backdrop .Picker .OptionsList .EmptyState lucide-icon lucide-icon .lucide-svg{width:14px;height:14px}.Backdrop .Picker .OptionsList .EmptyState p{font-size:14px;font-weight:400;color:var(--color-fg);margin:0}.Backdrop .Picker .OptionsList .EmptyState .Hint{font-size:14px;color:var(--color-fg-muted);font-style:italic}.Backdrop .Picker .OptionsList .LoadingState{display:flex;align-items:center;justify-content:center;gap:12px;padding:2rem 1rem;color:var(--color-fg-muted);font-size:14px}.Backdrop .Picker .OptionsList .LoadingState i,.Backdrop .Picker .OptionsList .LoadingState lucide-icon{font-size:14px;color:var(--color-brand);animation:spin 1s linear infinite}.Backdrop .Picker .OptionsList .LoadingState i lucide-icon .lucide-svg,.Backdrop .Picker .OptionsList .LoadingState lucide-icon lucide-icon .lucide-svg{width:14px;height:14px}.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(--color-danger-fg)}.Backdrop .Picker .OptionsList .ErrorState i,.Backdrop .Picker .OptionsList .ErrorState lucide-icon{font-size:14px;color:var(--color-danger-fg)}.Backdrop .Picker .OptionsList .ErrorState i lucide-icon .lucide-svg,.Backdrop .Picker .OptionsList .ErrorState lucide-icon lucide-icon .lucide-svg{width:14px;height:14px}.Backdrop .Picker .OptionsList .ErrorState p{font-size:14px;font-weight:400;color:var(--color-fg);margin:0}.Backdrop .Picker .OptionsList .ErrorState .Hint{font-size:14px;color:var(--color-fg-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(--color-fg-muted)}.Backdrop .Picker .OptionsList .NoResults i,.Backdrop .Picker .OptionsList .NoResults lucide-icon{font-size:14px;color:var(--color-fg-secondary);opacity:.5}.Backdrop .Picker .OptionsList .NoResults i lucide-icon .lucide-svg,.Backdrop .Picker .OptionsList .NoResults lucide-icon lucide-icon .lucide-svg{width:14px;height:14px}.Backdrop .Picker .OptionsList .NoResults p{font-size:14px;font-weight:400;color:var(--color-fg);margin:0}.Backdrop .Picker .OptionsList .NoResults .Hint{font-size:14px;color:var(--color-fg-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(--color-surface-muted)}.Backdrop .Picker .OptionsList .Option.SearchAllOption{border-bottom:1px solid var(--color-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(--color-brand) 0%,var(--color-brand-strong, var(--color-brand)) 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:14px}.Backdrop .Picker .OptionsList .Option.SearchAllOption label .SearchAllIcon i lucide-icon .lucide-svg,.Backdrop .Picker .OptionsList .Option.SearchAllOption label .SearchAllIcon lucide-icon lucide-icon .lucide-svg{width:14px;height:14px}.Backdrop .Picker .OptionsList .Option.SearchAllOption label .Info .Name{font-weight:400;color:var(--color-brand)}.Backdrop .Picker .OptionsList .Option.SearchAllOption label .Info .Description{font-weight:400;font-size:14px;color:var(--color-fg-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(--color-surface-muted);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:14px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;color:var(--color-fg);line-height:1.3}.Backdrop .Picker .OptionsList .Option .Details .Info .Description{font-size:14px;color:var(--color-fg-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(--color-icon-brand);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-svg{width:14px;height:14px}.Backdrop .Picker .OptionsList .Option:hover .LinkIcon{opacity:1}\n"] }]
11897
+ 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 <lucide-icon class=\"SearchIcon\" name=\"search\"></lucide-icon>\r\n <input\r\n type=\"text\"\r\n class=\"SearchInput\"\r\n [placeholder]=\"session.view.placeholder\"\r\n [value]=\"session.view.searchText\"\r\n (input)=\"session.handlers.onSearchInput($event)\"\r\n autocomplete=\"off\"\r\n autocapitalize=\"off\"\r\n spellcheck=\"false\"\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:block;position:relative;z-index:10050;width:0;height:0;overflow:visible;pointer-events:none;--radius-none: 0;--radius-xs: 2px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 16px;--radius-full: 9999px;--spacing-xxs: 2px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 16px;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-user-select:auto}.Backdrop{position:fixed;top:0;left:0;z-index:10050;pointer-events:auto;display:flex;justify-content:center;align-items:flex-start;width:100%;height:100%;padding:4px;background:var(--color-scrim, color-mix(in srgb, #171717 40%, transparent))}.Backdrop .Picker{max-width:550px;width:100%;margin:0 auto;background:var(--color-surface);display:flex;flex-direction:column;gap:8px;border-radius:12px;max-height:calc(100vh - 20px);box-shadow:0 0 10px var(--color-shadow);padding:8px}.Backdrop .Picker .SearchContainer{display:flex;align-items:center;gap:4px;width:calc(100% - 12px);height:32px;min-height:32px;padding:0 8px;margin-top:6px;margin-left:6px;margin-right:6px;box-sizing:border-box;border:0;border-radius:12px!important;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}.Backdrop .Picker .SearchContainer:hover{outline:solid 1px var(--color-input-border-hover, #a3a3a3)}.Backdrop .Picker .SearchContainer:focus-within{outline:solid 1px var(--color-input-border-focus, #22c55e)}.Backdrop .Picker .SearchContainer .SearchIcon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:14px;height:14px;color:var(--color-fg-muted, #a3a3a3);pointer-events:none}.Backdrop .Picker .SearchContainer .SearchInput{flex:1;min-width:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:none;box-shadow:none;border-radius:0;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);background:transparent;appearance:none;-webkit-appearance:none;font:inherit;font-size:14px;font-weight:400;line-height:1.2}.Backdrop .Picker .SearchContainer .SearchInput:focus{border:0;outline:none;box-shadow:none}.Backdrop .Picker .SearchContainer .SearchInput::placeholder{color:var(--color-input-placeholder, #a3a3a3);opacity:1}.Backdrop .Picker .SearchContainer .Close{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:24px;height:24px;margin:0 -4px 0 0;padding:0;border:0;border-radius:12px;color:var(--color-fg-muted, #a3a3a3);background:transparent;cursor:pointer}.Backdrop .Picker .SearchContainer .Close:hover{color:var(--color-fg, #171717);background:color-mix(in srgb,var(--color-fg, #171717) 8%,transparent)}.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(--color-fg-muted)}.Backdrop .Picker .OptionsList .EmptyState i,.Backdrop .Picker .OptionsList .EmptyState lucide-icon{font-size:14px;color:var(--color-fg-secondary);opacity:.5}.Backdrop .Picker .OptionsList .EmptyState i lucide-icon .lucide-svg,.Backdrop .Picker .OptionsList .EmptyState lucide-icon lucide-icon .lucide-svg{width:14px;height:14px}.Backdrop .Picker .OptionsList .EmptyState p{font-size:14px;font-weight:400;color:var(--color-fg);margin:0}.Backdrop .Picker .OptionsList .EmptyState .Hint{font-size:14px;color:var(--color-fg-muted);font-style:italic}.Backdrop .Picker .OptionsList .LoadingState{display:flex;align-items:center;justify-content:center;gap:12px;padding:2rem 1rem;color:var(--color-fg-muted);font-size:14px}.Backdrop .Picker .OptionsList .LoadingState i,.Backdrop .Picker .OptionsList .LoadingState lucide-icon{font-size:14px;color:var(--color-brand);animation:spin 1s linear infinite}.Backdrop .Picker .OptionsList .LoadingState i lucide-icon .lucide-svg,.Backdrop .Picker .OptionsList .LoadingState lucide-icon lucide-icon .lucide-svg{width:14px;height:14px}.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(--color-danger-fg)}.Backdrop .Picker .OptionsList .ErrorState i,.Backdrop .Picker .OptionsList .ErrorState lucide-icon{font-size:14px;color:var(--color-danger-fg)}.Backdrop .Picker .OptionsList .ErrorState i lucide-icon .lucide-svg,.Backdrop .Picker .OptionsList .ErrorState lucide-icon lucide-icon .lucide-svg{width:14px;height:14px}.Backdrop .Picker .OptionsList .ErrorState p{font-size:14px;font-weight:400;color:var(--color-fg);margin:0}.Backdrop .Picker .OptionsList .ErrorState .Hint{font-size:14px;color:var(--color-fg-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(--color-fg-muted)}.Backdrop .Picker .OptionsList .NoResults i,.Backdrop .Picker .OptionsList .NoResults lucide-icon{font-size:14px;color:var(--color-fg-secondary);opacity:.5}.Backdrop .Picker .OptionsList .NoResults i lucide-icon .lucide-svg,.Backdrop .Picker .OptionsList .NoResults lucide-icon lucide-icon .lucide-svg{width:14px;height:14px}.Backdrop .Picker .OptionsList .NoResults p{font-size:14px;font-weight:400;color:var(--color-fg);margin:0}.Backdrop .Picker .OptionsList .NoResults .Hint{font-size:14px;color:var(--color-fg-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:12px;gap:4px}.Backdrop .Picker .OptionsList .Option label:hover{background-color:var(--color-surface-muted)}.Backdrop .Picker .OptionsList .Option.SearchAllOption{border-bottom:1px solid var(--color-input-border);margin-bottom:4px}.Backdrop .Picker .OptionsList .Option.SearchAllOption label .SearchAllIcon{width:40px;min-width:40px;height:40px;min-height:40px;border-radius:12px;background:linear-gradient(135deg,var(--color-brand) 0%,var(--color-brand-strong, var(--color-brand)) 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:14px}.Backdrop .Picker .OptionsList .Option.SearchAllOption label .SearchAllIcon i lucide-icon .lucide-svg,.Backdrop .Picker .OptionsList .Option.SearchAllOption label .SearchAllIcon lucide-icon lucide-icon .lucide-svg{width:14px;height:14px}.Backdrop .Picker .OptionsList .Option.SearchAllOption label .Info .Name{font-weight:400;color:var(--color-brand)}.Backdrop .Picker .OptionsList .Option.SearchAllOption label .Info .Description{font-weight:400;font-size:14px;color:var(--color-fg-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:8px;overflow:hidden;background-color:var(--color-surface-muted);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:14px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;color:var(--color-fg);line-height:1.3}.Backdrop .Picker .OptionsList .Option .Details .Info .Description{font-size:14px;color:var(--color-fg-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(--color-icon-brand);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-svg{width:14px;height:14px}.Backdrop .Picker .OptionsList .Option:hover .LinkIcon{opacity:1}\n"] }]
11875
11898
  }], ctorParameters: () => [{ type: SearchEntryModalService }, { type: i0.ChangeDetectorRef }] });
11876
11899
 
11877
11900
  class PhoneEntryModalServiceComponent {
@@ -11879,23 +11902,31 @@ class PhoneEntryModalServiceComponent {
11879
11902
  cdr;
11880
11903
  vm$;
11881
11904
  sub;
11905
+ host = inject((ElementRef));
11906
+ chrome = new OverlaySearchChrome();
11882
11907
  constructor(phoneModal, cdr) {
11883
11908
  this.phoneModal = phoneModal;
11884
11909
  this.cdr = cdr;
11885
11910
  this.vm$ = this.phoneModal.state$;
11886
11911
  }
11887
11912
  ngOnInit() {
11888
- this.sub = this.phoneModal.state$.subscribe(() => this.cdr.markForCheck());
11913
+ this.sub = this.phoneModal.state$.subscribe((session) => {
11914
+ this.chrome.onSession(!!session, session?.view.searchQuery ?? null, session?.view.filteredCountries ?? null, true);
11915
+ this.cdr.markForCheck();
11916
+ });
11917
+ }
11918
+ ngAfterViewChecked() {
11919
+ this.chrome.flush(this.host.nativeElement);
11889
11920
  }
11890
11921
  ngOnDestroy() {
11891
11922
  this.sub?.unsubscribe();
11892
11923
  }
11893
11924
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: PhoneEntryModalServiceComponent, deps: [{ token: PhoneEntryModalService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
11894
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", 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;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);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(--color-input-border, #d4d4d4);border-radius:12px;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}: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(--color-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(--color-surface);border-radius:var(--radius-xl);padding:12px;box-shadow:0 0 8px var(--color-shadow)}.Backdrop .Picker .SearchContainer{display:flex;align-items:center;gap:4px;width:calc(100% - 12px);height:32px;min-height:32px;padding:0 8px;margin-top:6px;margin-left:6px;margin-right:6px;box-sizing:border-box;border:0;border-radius:12px;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}.Backdrop .Picker .SearchContainer:hover{outline:solid 1px var(--color-input-border-hover, #a3a3a3)}.Backdrop .Picker .SearchContainer:focus-within{outline:solid 1px var(--color-input-border-focus, #22c55e)}.Backdrop .Picker .SearchContainer .SearchIcon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:14px;height:14px;color:var(--color-fg-muted, #a3a3a3);pointer-events:none}.Backdrop .Picker .SearchContainer .SearchInput{flex:1;min-width:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:none;box-shadow:none;border-radius:0;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);background:transparent;appearance:none;-webkit-appearance:none;font:inherit;font-size:14px;font-weight:400;line-height:1.2}.Backdrop .Picker .SearchContainer .SearchInput:focus{border:0;outline:none;box-shadow:none}.Backdrop .Picker .SearchContainer .SearchInput::placeholder{color:var(--color-input-placeholder, #a3a3a3);opacity:1}.Backdrop .Picker .SearchContainer .Close{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:24px;height:24px;margin:0 -4px 0 0;padding:0;border:0;border-radius:12px;color:var(--color-fg-muted, #a3a3a3);background:transparent;cursor:pointer}.Backdrop .Picker .SearchContainer .Close:hover{color:var(--color-fg, #171717);background:color-mix(in srgb,var(--color-fg, #171717) 8%,transparent)}.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(--color-surface-muted)}.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:14px;font-weight:400;background-color:var(--color-brand);color:var(--color-surface);display:flex;justify-content:center;align-items:center;white-space:nowrap;flex-shrink:0}.Backdrop .Picker .CountriesList .Item .Country{flex:1;color:var(--color-fg-brand);font-size:14px;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"] }] });
11925
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", 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 autocomplete=\"off\"\r\n autocapitalize=\"off\"\r\n spellcheck=\"false\"\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!important;flex-direction:column!important;width:100%;height:max-content;--radius-none: 0;--radius-xs: 2px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 16px;--radius-full: 9999px;--spacing-xxs: 2px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 16px;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;user-select:none;-webkit-user-select:none}:host .LabelRow{display:flex;align-items:center;justify-content:space-between;gap:6px;width:100%;margin-bottom:2px}:host .Label{color:var(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);font-weight:400;width:100%;cursor:pointer;padding:0 3px;margin:0 0 4px;overflow:hidden;word-break:break-all}:host .Entry{display:flex!important;width:100%;height:32px;justify-content:flex-start;align-items:center;border:solid 0 var(--color-input-border, #d4d4d4);border-radius:12px!important;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px!important;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host{display:block;position:relative;z-index:10050;width:0;height:0;overflow:visible;pointer-events:none;--radius-none: 0;--radius-xs: 2px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 16px;--radius-full: 9999px;--spacing-xxs: 2px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 16px;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-user-select:auto}.Backdrop{position:fixed;top:0;left:0;z-index:10050;pointer-events:auto;display:flex;justify-content:center;align-items:center;width:100%;height:100%;padding:12px;background:var(--color-scrim, color-mix(in srgb, #171717 40%, transparent));overflow:hidden}.Backdrop .Picker{display:flex;flex-direction:column;gap:8px;width:100%;max-width:420px;max-height:90vh;margin:0 auto;background:var(--color-surface);border-radius:16px!important;padding:12px;box-shadow:0 0 8px var(--color-shadow)}.Backdrop .Picker .SearchContainer{display:flex;align-items:center;gap:4px;width:calc(100% - 12px);height:32px;min-height:32px;padding:0 8px;margin-top:6px;margin-left:6px;margin-right:6px;box-sizing:border-box;border:0;border-radius:12px!important;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}.Backdrop .Picker .SearchContainer:hover{outline:solid 1px var(--color-input-border-hover, #a3a3a3)}.Backdrop .Picker .SearchContainer:focus-within{outline:solid 1px var(--color-input-border-focus, #22c55e)}.Backdrop .Picker .SearchContainer .SearchIcon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:14px;height:14px;color:var(--color-fg-muted, #a3a3a3);pointer-events:none}.Backdrop .Picker .SearchContainer .SearchInput{flex:1;min-width:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:none;box-shadow:none;border-radius:0;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);background:transparent;appearance:none;-webkit-appearance:none;font:inherit;font-size:14px;font-weight:400;line-height:1.2}.Backdrop .Picker .SearchContainer .SearchInput:focus{border:0;outline:none;box-shadow:none}.Backdrop .Picker .SearchContainer .SearchInput::placeholder{color:var(--color-input-placeholder, #a3a3a3);opacity:1}.Backdrop .Picker .SearchContainer .Close{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:24px;height:24px;margin:0 -4px 0 0;padding:0;border:0;border-radius:12px;color:var(--color-fg-muted, #a3a3a3);background:transparent;cursor:pointer}.Backdrop .Picker .SearchContainer .Close:hover{color:var(--color-fg, #171717);background:color-mix(in srgb,var(--color-fg, #171717) 8%,transparent)}.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:8px;padding:8px;cursor:pointer;border-radius:8px;transition:background-color .2s}.Backdrop .Picker .CountriesList .Item:hover{background-color:var(--color-surface-muted)}.Backdrop .Picker .CountriesList .Item .Icon{width:25px;height:25px;object-fit:contain;flex-shrink:0}.Backdrop .Picker .CountriesList .Item .Code{padding:2px 8px;border-radius:100px;font-size:14px;font-weight:400;background-color:var(--color-brand);color:var(--color-surface);display:flex;justify-content:center;align-items:center;white-space:nowrap;flex-shrink:0}.Backdrop .Picker .CountriesList .Item .Country{flex:1;color:var(--color-fg-brand);font-size:14px;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"] }] });
11895
11926
  }
11896
11927
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: PhoneEntryModalServiceComponent, decorators: [{
11897
11928
  type: Component,
11898
- 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;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);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(--color-input-border, #d4d4d4);border-radius:12px;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}: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(--color-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(--color-surface);border-radius:var(--radius-xl);padding:12px;box-shadow:0 0 8px var(--color-shadow)}.Backdrop .Picker .SearchContainer{display:flex;align-items:center;gap:4px;width:calc(100% - 12px);height:32px;min-height:32px;padding:0 8px;margin-top:6px;margin-left:6px;margin-right:6px;box-sizing:border-box;border:0;border-radius:12px;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}.Backdrop .Picker .SearchContainer:hover{outline:solid 1px var(--color-input-border-hover, #a3a3a3)}.Backdrop .Picker .SearchContainer:focus-within{outline:solid 1px var(--color-input-border-focus, #22c55e)}.Backdrop .Picker .SearchContainer .SearchIcon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:14px;height:14px;color:var(--color-fg-muted, #a3a3a3);pointer-events:none}.Backdrop .Picker .SearchContainer .SearchInput{flex:1;min-width:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:none;box-shadow:none;border-radius:0;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);background:transparent;appearance:none;-webkit-appearance:none;font:inherit;font-size:14px;font-weight:400;line-height:1.2}.Backdrop .Picker .SearchContainer .SearchInput:focus{border:0;outline:none;box-shadow:none}.Backdrop .Picker .SearchContainer .SearchInput::placeholder{color:var(--color-input-placeholder, #a3a3a3);opacity:1}.Backdrop .Picker .SearchContainer .Close{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:24px;height:24px;margin:0 -4px 0 0;padding:0;border:0;border-radius:12px;color:var(--color-fg-muted, #a3a3a3);background:transparent;cursor:pointer}.Backdrop .Picker .SearchContainer .Close:hover{color:var(--color-fg, #171717);background:color-mix(in srgb,var(--color-fg, #171717) 8%,transparent)}.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(--color-surface-muted)}.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:14px;font-weight:400;background-color:var(--color-brand);color:var(--color-surface);display:flex;justify-content:center;align-items:center;white-space:nowrap;flex-shrink:0}.Backdrop .Picker .CountriesList .Item .Country{flex:1;color:var(--color-fg-brand);font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"] }]
11929
+ 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 autocomplete=\"off\"\r\n autocapitalize=\"off\"\r\n spellcheck=\"false\"\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!important;flex-direction:column!important;width:100%;height:max-content;--radius-none: 0;--radius-xs: 2px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 16px;--radius-full: 9999px;--spacing-xxs: 2px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 16px;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;user-select:none;-webkit-user-select:none}:host .LabelRow{display:flex;align-items:center;justify-content:space-between;gap:6px;width:100%;margin-bottom:2px}:host .Label{color:var(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);font-weight:400;width:100%;cursor:pointer;padding:0 3px;margin:0 0 4px;overflow:hidden;word-break:break-all}:host .Entry{display:flex!important;width:100%;height:32px;justify-content:flex-start;align-items:center;border:solid 0 var(--color-input-border, #d4d4d4);border-radius:12px!important;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px!important;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host{display:block;position:relative;z-index:10050;width:0;height:0;overflow:visible;pointer-events:none;--radius-none: 0;--radius-xs: 2px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 16px;--radius-full: 9999px;--spacing-xxs: 2px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 16px;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-user-select:auto}.Backdrop{position:fixed;top:0;left:0;z-index:10050;pointer-events:auto;display:flex;justify-content:center;align-items:center;width:100%;height:100%;padding:12px;background:var(--color-scrim, color-mix(in srgb, #171717 40%, transparent));overflow:hidden}.Backdrop .Picker{display:flex;flex-direction:column;gap:8px;width:100%;max-width:420px;max-height:90vh;margin:0 auto;background:var(--color-surface);border-radius:16px!important;padding:12px;box-shadow:0 0 8px var(--color-shadow)}.Backdrop .Picker .SearchContainer{display:flex;align-items:center;gap:4px;width:calc(100% - 12px);height:32px;min-height:32px;padding:0 8px;margin-top:6px;margin-left:6px;margin-right:6px;box-sizing:border-box;border:0;border-radius:12px!important;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}.Backdrop .Picker .SearchContainer:hover{outline:solid 1px var(--color-input-border-hover, #a3a3a3)}.Backdrop .Picker .SearchContainer:focus-within{outline:solid 1px var(--color-input-border-focus, #22c55e)}.Backdrop .Picker .SearchContainer .SearchIcon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:14px;height:14px;color:var(--color-fg-muted, #a3a3a3);pointer-events:none}.Backdrop .Picker .SearchContainer .SearchInput{flex:1;min-width:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:none;box-shadow:none;border-radius:0;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);background:transparent;appearance:none;-webkit-appearance:none;font:inherit;font-size:14px;font-weight:400;line-height:1.2}.Backdrop .Picker .SearchContainer .SearchInput:focus{border:0;outline:none;box-shadow:none}.Backdrop .Picker .SearchContainer .SearchInput::placeholder{color:var(--color-input-placeholder, #a3a3a3);opacity:1}.Backdrop .Picker .SearchContainer .Close{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:24px;height:24px;margin:0 -4px 0 0;padding:0;border:0;border-radius:12px;color:var(--color-fg-muted, #a3a3a3);background:transparent;cursor:pointer}.Backdrop .Picker .SearchContainer .Close:hover{color:var(--color-fg, #171717);background:color-mix(in srgb,var(--color-fg, #171717) 8%,transparent)}.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:8px;padding:8px;cursor:pointer;border-radius:8px;transition:background-color .2s}.Backdrop .Picker .CountriesList .Item:hover{background-color:var(--color-surface-muted)}.Backdrop .Picker .CountriesList .Item .Icon{width:25px;height:25px;object-fit:contain;flex-shrink:0}.Backdrop .Picker .CountriesList .Item .Code{padding:2px 8px;border-radius:100px;font-size:14px;font-weight:400;background-color:var(--color-brand);color:var(--color-surface);display:flex;justify-content:center;align-items:center;white-space:nowrap;flex-shrink:0}.Backdrop .Picker .CountriesList .Item .Country{flex:1;color:var(--color-fg-brand);font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"] }]
11899
11930
  }], ctorParameters: () => [{ type: PhoneEntryModalService }, { type: i0.ChangeDetectorRef }] });
11900
11931
 
11901
11932
  class DatePickerModalServiceComponent {
@@ -11915,11 +11946,11 @@ class DatePickerModalServiceComponent {
11915
11946
  this.sub?.unsubscribe();
11916
11947
  }
11917
11948
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: DatePickerModalServiceComponent, deps: [{ token: DatePickerModalService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
11918
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", 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;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);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(--color-input-border, #d4d4d4);border-radius:12px;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}: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(--color-scrim);overflow:hidden}@media (width <= 768px){.Backdrop{align-items:flex-start}}.Backdrop .Picker{max-width:400px}.Backdrop .Picker .Preview{background-color:var(--color-surface-muted);border-radius:var(--radius-lg);padding:var(--spacing-sm) var(--spacing-sm);text-align:center;color:var(--color-fg-brand);margin-bottom:var(--spacing-sm);font-size:14px;font-weight:400}.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:400;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(--color-surface-muted)}.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:14px}.Backdrop .Picker .Cards .CardMonths .CardChangeYear .Up lucide-icon .lucide-svg,.Backdrop .Picker .Cards .CardMonths .CardChangeYear .Down lucide-icon .lucide-svg,.Backdrop .Picker .Cards .CardMonths .CardChangeMonth .Up lucide-icon .lucide-svg,.Backdrop .Picker .Cards .CardMonths .CardChangeMonth .Down lucide-icon .lucide-svg,.Backdrop .Picker .Cards .CardDates .CardChangeYear .Up lucide-icon .lucide-svg,.Backdrop .Picker .Cards .CardDates .CardChangeYear .Down lucide-icon .lucide-svg,.Backdrop .Picker .Cards .CardDates .CardChangeMonth .Up lucide-icon .lucide-svg,.Backdrop .Picker .Cards .CardDates .CardChangeMonth .Down lucide-icon .lucide-svg{width:14px;height:14px}.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(--color-surface-muted)}.Backdrop .Picker .Cards .CardYears{position:absolute;top:0;left:0;z-index:10;width:100%;height:100%;background:var(--color-fg-on-brand, var(--color-fg-inverse, #fafafa))}.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(--color-surface-muted)}.Backdrop .Picker .Cards .CardYears .years .selected{background-color:var(--color-brand);color:var(--color-fg-on-brand, var(--color-fg-inverse, #fafafa));font-weight:400}.Backdrop .Picker .Cards .CardYears .years .selected:hover{background-color:var(--color-brand)}.Backdrop .Picker .Cards .CardMonths{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--color-fg-on-brand, var(--color-fg-inverse, #fafafa));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(--color-surface-muted)}.Backdrop .Picker .Cards .CardMonths .months .selected{background-color:var(--color-brand);color:var(--color-fg-muted);font-weight:400}.Backdrop .Picker .Cards .CardMonths .months .selected:hover{background-color:var(--color-brand)}.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:14px;font-weight:400}.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(--color-surface-muted)}.Backdrop .Picker .Cards .CardDates .dates .sunday{color:var(--color-danger-fg)}.Backdrop .Picker .Cards .CardDates .dates .outside{cursor:auto;color:var(--color-fg-muted);pointer-events:none;cursor:not-allowed}.Backdrop .Picker .Cards .CardDates .dates .selected{background-color:var(--color-brand);color:var(--color-fg-on-brand, var(--color-fg-inverse, #fafafa));font-weight:400}.Backdrop .Picker .Cards .CardDates .dates .selected:hover{background-color:var(--color-brand)}.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, 8px) var(--spacing-md, 12px);border-radius:var(--radius-lg, 12px);color:var(--color-action-primary-fg, #fafafa);border-color:var(--color-action-primary-border, #16a34a);background-color:var(--color-action-primary-bg, #22c55e);cursor:pointer}.Backdrop .Picker .Actions .Ok:hover{color:var(--color-action-primary-fg-hover, #fafafa);border-color:var(--color-action-primary-border-hover, #15803d);background-color:var(--color-action-primary-bg-hover, #16a34a)}.Backdrop .Picker .Actions .Ok:active{color:var(--color-action-primary-fg-active, #fafafa);border-color:var(--color-action-primary-border-active, #166534);background-color:var(--color-action-primary-bg-active, #15803d)}.Backdrop .Picker .Actions .Ok:disabled{opacity:.6;cursor:not-allowed}.Backdrop .Picker .Actions .Clear{padding:var(--spacing-sm, 8px) var(--spacing-md, 12px);border-radius:var(--radius-lg, 12px);color:var(--color-action-secondary-fg, #16a34a);border-color:var(--color-action-secondary-border, #86efac);background-color:var(--color-action-secondary-bg, #bbf7d0);cursor:pointer}.Backdrop .Picker .Actions .Clear:hover{color:var(--color-action-secondary-fg-hover, #15803d);border-color:var(--color-action-secondary-border-hover, #4ade80);background-color:var(--color-action-secondary-bg-hover, #86efac)}.Backdrop .Picker .Actions .Clear:active{color:var(--color-action-secondary-fg-active, #15803d);border-color:var(--color-action-secondary-border-active, #22c55e);background-color:var(--color-action-secondary-bg-active, #4ade80)}.Backdrop .Picker .Actions .Clear:disabled{opacity:.6;cursor:not-allowed}.Backdrop .Picker .Actions .Cancel{padding:var(--spacing-sm, 8px) var(--spacing-md, 12px);border-radius:var(--radius-lg, 12px);color:var(--color-action-cancel-fg, #16a34a);border-color:var(--color-action-cancel-border, #86efac);background-color:var(--color-action-cancel-bg, #dcfce7);cursor:pointer}.Backdrop .Picker .Actions .Cancel:hover{color:var(--color-action-cancel-fg-hover, #16a34a);border-color:var(--color-action-cancel-border-hover, #86efac);background-color:var(--color-action-cancel-bg-hover, #bbf7d0)}.Backdrop .Picker .Actions .Cancel:active{color:var(--color-action-cancel-fg-active, #15803d);border-color:var(--color-action-cancel-border-active, #4ade80);background-color:var(--color-action-cancel-bg-active, #86efac)}.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"] }] });
11949
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", 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!important;flex-direction:column!important;width:100%;height:max-content;--radius-none: 0;--radius-xs: 2px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 16px;--radius-full: 9999px;--spacing-xxs: 2px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 16px;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;user-select:none;-webkit-user-select:none}:host .LabelRow{display:flex;align-items:center;justify-content:space-between;gap:6px;width:100%;margin-bottom:2px}:host .Label{color:var(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);font-weight:400;width:100%;cursor:pointer;padding:0 3px;margin:0 0 4px;overflow:hidden;word-break:break-all}:host .Entry{display:flex!important;width:100%;height:32px;justify-content:flex-start;align-items:center;border:solid 0 var(--color-input-border, #d4d4d4);border-radius:12px!important;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px!important;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host{display:block;position:relative;z-index:10050;width:0;height:0;overflow:visible;pointer-events:none;--radius-none: 0;--radius-xs: 2px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 16px;--radius-full: 9999px;--spacing-xxs: 2px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 16px;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-user-select:auto}.Backdrop{position:fixed;top:0;left:0;z-index:10050;pointer-events:auto;display:flex;justify-content:center;align-items:center;width:100%;height:100%;padding:12px;background:var(--color-scrim, color-mix(in srgb, #171717 40%, transparent));overflow:hidden}@media (width <= 768px){.Backdrop{align-items:flex-start}}.Backdrop .Picker{max-width:400px}.Backdrop .Picker .Preview{background-color:var(--color-surface-muted);border-radius:12px;padding:8px;text-align:center;color:var(--color-fg-brand);margin-bottom:8px;font-size:14px;font-weight:400}.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:400;cursor:pointer;border-radius:8px}.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(--color-surface-muted)}.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:8px;cursor:pointer;font-size:14px}.Backdrop .Picker .Cards .CardMonths .CardChangeYear .Up lucide-icon .lucide-svg,.Backdrop .Picker .Cards .CardMonths .CardChangeYear .Down lucide-icon .lucide-svg,.Backdrop .Picker .Cards .CardMonths .CardChangeMonth .Up lucide-icon .lucide-svg,.Backdrop .Picker .Cards .CardMonths .CardChangeMonth .Down lucide-icon .lucide-svg,.Backdrop .Picker .Cards .CardDates .CardChangeYear .Up lucide-icon .lucide-svg,.Backdrop .Picker .Cards .CardDates .CardChangeYear .Down lucide-icon .lucide-svg,.Backdrop .Picker .Cards .CardDates .CardChangeMonth .Up lucide-icon .lucide-svg,.Backdrop .Picker .Cards .CardDates .CardChangeMonth .Down lucide-icon .lucide-svg{width:14px;height:14px}.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(--color-surface-muted)}.Backdrop .Picker .Cards .CardYears{position:absolute;top:0;left:0;z-index:10;width:100%;height:100%;background:var(--color-fg-on-brand, var(--color-fg-inverse, #fafafa))}.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;text-transform:capitalize;padding:4px 12px;border-radius:12px;cursor:pointer}.Backdrop .Picker .Cards .CardYears .years .year:hover{background-color:var(--color-surface-muted)}.Backdrop .Picker .Cards .CardYears .years .selected{background-color:var(--color-brand);color:var(--color-fg-on-brand, var(--color-fg-inverse, #fafafa));font-weight:400}.Backdrop .Picker .Cards .CardYears .years .selected:hover{background-color:var(--color-brand)}.Backdrop .Picker .Cards .CardMonths{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--color-fg-on-brand, var(--color-fg-inverse, #fafafa));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:4px 12px;border-radius:12px;cursor:pointer}.Backdrop .Picker .Cards .CardMonths .months .month:hover{background-color:var(--color-surface-muted)}.Backdrop .Picker .Cards .CardMonths .months .selected{background-color:var(--color-brand);color:var(--color-fg-muted);font-weight:400}.Backdrop .Picker .Cards .CardMonths .months .selected:hover{background-color:var(--color-brand)}.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:14px;font-weight:400}.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:12px;cursor:pointer}.Backdrop .Picker .Cards .CardDates .dates .day:hover{background-color:var(--color-surface-muted)}.Backdrop .Picker .Cards .CardDates .dates .sunday{color:var(--color-danger-fg)}.Backdrop .Picker .Cards .CardDates .dates .outside{cursor:auto;color:var(--color-fg-muted);pointer-events:none;cursor:not-allowed}.Backdrop .Picker .Cards .CardDates .dates .selected{background-color:var(--color-brand);color:var(--color-fg-on-brand, var(--color-fg-inverse, #fafafa));font-weight:400}.Backdrop .Picker .Cards .CardDates .dates .selected:hover{background-color:var(--color-brand)}.Backdrop .Picker .Actions{display:flex;justify-content:flex-end;gap:4px;margin-top:12px}.Backdrop .Picker .Actions .Ok{padding:8px 12px;border-radius:12px;color:var(--color-action-primary-fg, #fafafa);border-color:var(--color-action-primary-border, #16a34a);background-color:var(--color-action-primary-bg, #22c55e);cursor:pointer}.Backdrop .Picker .Actions .Ok:hover{color:var(--color-action-primary-fg-hover, #fafafa);border-color:var(--color-action-primary-border-hover, #15803d);background-color:var(--color-action-primary-bg-hover, #16a34a)}.Backdrop .Picker .Actions .Ok:active{color:var(--color-action-primary-fg-active, #fafafa);border-color:var(--color-action-primary-border-active, #166534);background-color:var(--color-action-primary-bg-active, #15803d)}.Backdrop .Picker .Actions .Ok:disabled{opacity:.6;cursor:not-allowed}.Backdrop .Picker .Actions .Clear{padding:8px 12px;border-radius:12px;color:var(--color-action-secondary-fg, #16a34a);border-color:var(--color-action-secondary-border, #86efac);background-color:var(--color-action-secondary-bg, #bbf7d0);cursor:pointer}.Backdrop .Picker .Actions .Clear:hover{color:var(--color-action-secondary-fg-hover, #15803d);border-color:var(--color-action-secondary-border-hover, #4ade80);background-color:var(--color-action-secondary-bg-hover, #86efac)}.Backdrop .Picker .Actions .Clear:active{color:var(--color-action-secondary-fg-active, #15803d);border-color:var(--color-action-secondary-border-active, #22c55e);background-color:var(--color-action-secondary-bg-active, #4ade80)}.Backdrop .Picker .Actions .Clear:disabled{opacity:.6;cursor:not-allowed}.Backdrop .Picker .Actions .Cancel{padding:8px 12px;border-radius:12px;color:var(--color-action-cancel-fg, #16a34a);border-color:var(--color-action-cancel-border, #86efac);background-color:var(--color-action-cancel-bg, #dcfce7);cursor:pointer}.Backdrop .Picker .Actions .Cancel:hover{color:var(--color-action-cancel-fg-hover, #16a34a);border-color:var(--color-action-cancel-border-hover, #86efac);background-color:var(--color-action-cancel-bg-hover, #bbf7d0)}.Backdrop .Picker .Actions .Cancel:active{color:var(--color-action-cancel-fg-active, #15803d);border-color:var(--color-action-cancel-border-active, #4ade80);background-color:var(--color-action-cancel-bg-active, #86efac)}.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"] }] });
11919
11950
  }
11920
11951
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: DatePickerModalServiceComponent, decorators: [{
11921
11952
  type: Component,
11922
- 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;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);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(--color-input-border, #d4d4d4);border-radius:12px;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}: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(--color-scrim);overflow:hidden}@media (width <= 768px){.Backdrop{align-items:flex-start}}.Backdrop .Picker{max-width:400px}.Backdrop .Picker .Preview{background-color:var(--color-surface-muted);border-radius:var(--radius-lg);padding:var(--spacing-sm) var(--spacing-sm);text-align:center;color:var(--color-fg-brand);margin-bottom:var(--spacing-sm);font-size:14px;font-weight:400}.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:400;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(--color-surface-muted)}.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:14px}.Backdrop .Picker .Cards .CardMonths .CardChangeYear .Up lucide-icon .lucide-svg,.Backdrop .Picker .Cards .CardMonths .CardChangeYear .Down lucide-icon .lucide-svg,.Backdrop .Picker .Cards .CardMonths .CardChangeMonth .Up lucide-icon .lucide-svg,.Backdrop .Picker .Cards .CardMonths .CardChangeMonth .Down lucide-icon .lucide-svg,.Backdrop .Picker .Cards .CardDates .CardChangeYear .Up lucide-icon .lucide-svg,.Backdrop .Picker .Cards .CardDates .CardChangeYear .Down lucide-icon .lucide-svg,.Backdrop .Picker .Cards .CardDates .CardChangeMonth .Up lucide-icon .lucide-svg,.Backdrop .Picker .Cards .CardDates .CardChangeMonth .Down lucide-icon .lucide-svg{width:14px;height:14px}.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(--color-surface-muted)}.Backdrop .Picker .Cards .CardYears{position:absolute;top:0;left:0;z-index:10;width:100%;height:100%;background:var(--color-fg-on-brand, var(--color-fg-inverse, #fafafa))}.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(--color-surface-muted)}.Backdrop .Picker .Cards .CardYears .years .selected{background-color:var(--color-brand);color:var(--color-fg-on-brand, var(--color-fg-inverse, #fafafa));font-weight:400}.Backdrop .Picker .Cards .CardYears .years .selected:hover{background-color:var(--color-brand)}.Backdrop .Picker .Cards .CardMonths{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--color-fg-on-brand, var(--color-fg-inverse, #fafafa));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(--color-surface-muted)}.Backdrop .Picker .Cards .CardMonths .months .selected{background-color:var(--color-brand);color:var(--color-fg-muted);font-weight:400}.Backdrop .Picker .Cards .CardMonths .months .selected:hover{background-color:var(--color-brand)}.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:14px;font-weight:400}.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(--color-surface-muted)}.Backdrop .Picker .Cards .CardDates .dates .sunday{color:var(--color-danger-fg)}.Backdrop .Picker .Cards .CardDates .dates .outside{cursor:auto;color:var(--color-fg-muted);pointer-events:none;cursor:not-allowed}.Backdrop .Picker .Cards .CardDates .dates .selected{background-color:var(--color-brand);color:var(--color-fg-on-brand, var(--color-fg-inverse, #fafafa));font-weight:400}.Backdrop .Picker .Cards .CardDates .dates .selected:hover{background-color:var(--color-brand)}.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, 8px) var(--spacing-md, 12px);border-radius:var(--radius-lg, 12px);color:var(--color-action-primary-fg, #fafafa);border-color:var(--color-action-primary-border, #16a34a);background-color:var(--color-action-primary-bg, #22c55e);cursor:pointer}.Backdrop .Picker .Actions .Ok:hover{color:var(--color-action-primary-fg-hover, #fafafa);border-color:var(--color-action-primary-border-hover, #15803d);background-color:var(--color-action-primary-bg-hover, #16a34a)}.Backdrop .Picker .Actions .Ok:active{color:var(--color-action-primary-fg-active, #fafafa);border-color:var(--color-action-primary-border-active, #166534);background-color:var(--color-action-primary-bg-active, #15803d)}.Backdrop .Picker .Actions .Ok:disabled{opacity:.6;cursor:not-allowed}.Backdrop .Picker .Actions .Clear{padding:var(--spacing-sm, 8px) var(--spacing-md, 12px);border-radius:var(--radius-lg, 12px);color:var(--color-action-secondary-fg, #16a34a);border-color:var(--color-action-secondary-border, #86efac);background-color:var(--color-action-secondary-bg, #bbf7d0);cursor:pointer}.Backdrop .Picker .Actions .Clear:hover{color:var(--color-action-secondary-fg-hover, #15803d);border-color:var(--color-action-secondary-border-hover, #4ade80);background-color:var(--color-action-secondary-bg-hover, #86efac)}.Backdrop .Picker .Actions .Clear:active{color:var(--color-action-secondary-fg-active, #15803d);border-color:var(--color-action-secondary-border-active, #22c55e);background-color:var(--color-action-secondary-bg-active, #4ade80)}.Backdrop .Picker .Actions .Clear:disabled{opacity:.6;cursor:not-allowed}.Backdrop .Picker .Actions .Cancel{padding:var(--spacing-sm, 8px) var(--spacing-md, 12px);border-radius:var(--radius-lg, 12px);color:var(--color-action-cancel-fg, #16a34a);border-color:var(--color-action-cancel-border, #86efac);background-color:var(--color-action-cancel-bg, #dcfce7);cursor:pointer}.Backdrop .Picker .Actions .Cancel:hover{color:var(--color-action-cancel-fg-hover, #16a34a);border-color:var(--color-action-cancel-border-hover, #86efac);background-color:var(--color-action-cancel-bg-hover, #bbf7d0)}.Backdrop .Picker .Actions .Cancel:active{color:var(--color-action-cancel-fg-active, #15803d);border-color:var(--color-action-cancel-border-active, #4ade80);background-color:var(--color-action-cancel-bg-active, #86efac)}.Backdrop .Picker .Actions .Cancel:disabled{opacity:.6;cursor:not-allowed}\n"] }]
11953
+ 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!important;flex-direction:column!important;width:100%;height:max-content;--radius-none: 0;--radius-xs: 2px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 16px;--radius-full: 9999px;--spacing-xxs: 2px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 16px;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;user-select:none;-webkit-user-select:none}:host .LabelRow{display:flex;align-items:center;justify-content:space-between;gap:6px;width:100%;margin-bottom:2px}:host .Label{color:var(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);font-weight:400;width:100%;cursor:pointer;padding:0 3px;margin:0 0 4px;overflow:hidden;word-break:break-all}:host .Entry{display:flex!important;width:100%;height:32px;justify-content:flex-start;align-items:center;border:solid 0 var(--color-input-border, #d4d4d4);border-radius:12px!important;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px!important;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host{display:block;position:relative;z-index:10050;width:0;height:0;overflow:visible;pointer-events:none;--radius-none: 0;--radius-xs: 2px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 16px;--radius-full: 9999px;--spacing-xxs: 2px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 16px;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-user-select:auto}.Backdrop{position:fixed;top:0;left:0;z-index:10050;pointer-events:auto;display:flex;justify-content:center;align-items:center;width:100%;height:100%;padding:12px;background:var(--color-scrim, color-mix(in srgb, #171717 40%, transparent));overflow:hidden}@media (width <= 768px){.Backdrop{align-items:flex-start}}.Backdrop .Picker{max-width:400px}.Backdrop .Picker .Preview{background-color:var(--color-surface-muted);border-radius:12px;padding:8px;text-align:center;color:var(--color-fg-brand);margin-bottom:8px;font-size:14px;font-weight:400}.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:400;cursor:pointer;border-radius:8px}.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(--color-surface-muted)}.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:8px;cursor:pointer;font-size:14px}.Backdrop .Picker .Cards .CardMonths .CardChangeYear .Up lucide-icon .lucide-svg,.Backdrop .Picker .Cards .CardMonths .CardChangeYear .Down lucide-icon .lucide-svg,.Backdrop .Picker .Cards .CardMonths .CardChangeMonth .Up lucide-icon .lucide-svg,.Backdrop .Picker .Cards .CardMonths .CardChangeMonth .Down lucide-icon .lucide-svg,.Backdrop .Picker .Cards .CardDates .CardChangeYear .Up lucide-icon .lucide-svg,.Backdrop .Picker .Cards .CardDates .CardChangeYear .Down lucide-icon .lucide-svg,.Backdrop .Picker .Cards .CardDates .CardChangeMonth .Up lucide-icon .lucide-svg,.Backdrop .Picker .Cards .CardDates .CardChangeMonth .Down lucide-icon .lucide-svg{width:14px;height:14px}.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(--color-surface-muted)}.Backdrop .Picker .Cards .CardYears{position:absolute;top:0;left:0;z-index:10;width:100%;height:100%;background:var(--color-fg-on-brand, var(--color-fg-inverse, #fafafa))}.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;text-transform:capitalize;padding:4px 12px;border-radius:12px;cursor:pointer}.Backdrop .Picker .Cards .CardYears .years .year:hover{background-color:var(--color-surface-muted)}.Backdrop .Picker .Cards .CardYears .years .selected{background-color:var(--color-brand);color:var(--color-fg-on-brand, var(--color-fg-inverse, #fafafa));font-weight:400}.Backdrop .Picker .Cards .CardYears .years .selected:hover{background-color:var(--color-brand)}.Backdrop .Picker .Cards .CardMonths{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--color-fg-on-brand, var(--color-fg-inverse, #fafafa));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:4px 12px;border-radius:12px;cursor:pointer}.Backdrop .Picker .Cards .CardMonths .months .month:hover{background-color:var(--color-surface-muted)}.Backdrop .Picker .Cards .CardMonths .months .selected{background-color:var(--color-brand);color:var(--color-fg-muted);font-weight:400}.Backdrop .Picker .Cards .CardMonths .months .selected:hover{background-color:var(--color-brand)}.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:14px;font-weight:400}.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:12px;cursor:pointer}.Backdrop .Picker .Cards .CardDates .dates .day:hover{background-color:var(--color-surface-muted)}.Backdrop .Picker .Cards .CardDates .dates .sunday{color:var(--color-danger-fg)}.Backdrop .Picker .Cards .CardDates .dates .outside{cursor:auto;color:var(--color-fg-muted);pointer-events:none;cursor:not-allowed}.Backdrop .Picker .Cards .CardDates .dates .selected{background-color:var(--color-brand);color:var(--color-fg-on-brand, var(--color-fg-inverse, #fafafa));font-weight:400}.Backdrop .Picker .Cards .CardDates .dates .selected:hover{background-color:var(--color-brand)}.Backdrop .Picker .Actions{display:flex;justify-content:flex-end;gap:4px;margin-top:12px}.Backdrop .Picker .Actions .Ok{padding:8px 12px;border-radius:12px;color:var(--color-action-primary-fg, #fafafa);border-color:var(--color-action-primary-border, #16a34a);background-color:var(--color-action-primary-bg, #22c55e);cursor:pointer}.Backdrop .Picker .Actions .Ok:hover{color:var(--color-action-primary-fg-hover, #fafafa);border-color:var(--color-action-primary-border-hover, #15803d);background-color:var(--color-action-primary-bg-hover, #16a34a)}.Backdrop .Picker .Actions .Ok:active{color:var(--color-action-primary-fg-active, #fafafa);border-color:var(--color-action-primary-border-active, #166534);background-color:var(--color-action-primary-bg-active, #15803d)}.Backdrop .Picker .Actions .Ok:disabled{opacity:.6;cursor:not-allowed}.Backdrop .Picker .Actions .Clear{padding:8px 12px;border-radius:12px;color:var(--color-action-secondary-fg, #16a34a);border-color:var(--color-action-secondary-border, #86efac);background-color:var(--color-action-secondary-bg, #bbf7d0);cursor:pointer}.Backdrop .Picker .Actions .Clear:hover{color:var(--color-action-secondary-fg-hover, #15803d);border-color:var(--color-action-secondary-border-hover, #4ade80);background-color:var(--color-action-secondary-bg-hover, #86efac)}.Backdrop .Picker .Actions .Clear:active{color:var(--color-action-secondary-fg-active, #15803d);border-color:var(--color-action-secondary-border-active, #22c55e);background-color:var(--color-action-secondary-bg-active, #4ade80)}.Backdrop .Picker .Actions .Clear:disabled{opacity:.6;cursor:not-allowed}.Backdrop .Picker .Actions .Cancel{padding:8px 12px;border-radius:12px;color:var(--color-action-cancel-fg, #16a34a);border-color:var(--color-action-cancel-border, #86efac);background-color:var(--color-action-cancel-bg, #dcfce7);cursor:pointer}.Backdrop .Picker .Actions .Cancel:hover{color:var(--color-action-cancel-fg-hover, #16a34a);border-color:var(--color-action-cancel-border-hover, #86efac);background-color:var(--color-action-cancel-bg-hover, #bbf7d0)}.Backdrop .Picker .Actions .Cancel:active{color:var(--color-action-cancel-fg-active, #15803d);border-color:var(--color-action-cancel-border-active, #4ade80);background-color:var(--color-action-cancel-bg-active, #86efac)}.Backdrop .Picker .Actions .Cancel:disabled{opacity:.6;cursor:not-allowed}\n"] }]
11923
11954
  }], ctorParameters: () => [{ type: DatePickerModalService }, { type: i0.ChangeDetectorRef }] });
11924
11955
 
11925
11956
  class TimePickerModalServiceComponent {
@@ -11939,11 +11970,11 @@ class TimePickerModalServiceComponent {
11939
11970
  this.sub?.unsubscribe();
11940
11971
  }
11941
11972
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TimePickerModalServiceComponent, deps: [{ token: TimePickerModalService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
11942
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", 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;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);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(--color-input-border, #d4d4d4);border-radius:12px;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}: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(--color-scrim);overflow:hidden}@media (width <= 768px){.Backdrop{align-items:flex-start}}.Backdrop .Picker{max-width:400px}.Backdrop .Picker .Preview{background-color:var(--color-surface-muted);border-radius:var(--radius-lg);padding:var(--spacing-sm) var(--spacing-sm);text-align:center;color:var(--color-fg-brand);margin-bottom:var(--spacing-sm);font-size:14px;font-weight:400}.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:400;font-size:14px;color:var(--color-fg-muted)}.Backdrop .Picker .TimePicker .Hours,.Backdrop .Picker .TimePicker .Minutes{width:100%;height:100%;overflow:hidden;overflow-y:auto;background-color:var(--color-surface-muted);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(--color-surface-emphasis)}.Backdrop .Picker .TimePicker .Hours .selected,.Backdrop .Picker .TimePicker .Minutes .selected{background-color:var(--color-brand);color:var(--color-fg-muted);font-weight:400}.Backdrop .Picker .TimePicker .Hours .selected:hover,.Backdrop .Picker .TimePicker .Minutes .selected:hover{background-color:var(--color-brand)}.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, 8px) var(--spacing-md, 12px);border-radius:var(--radius-lg, 12px);color:var(--color-action-primary-fg, #fafafa);border-color:var(--color-action-primary-border, #16a34a);background-color:var(--color-action-primary-bg, #22c55e);cursor:pointer}.Backdrop .Picker .Actions .Ok:hover{color:var(--color-action-primary-fg-hover, #fafafa);border-color:var(--color-action-primary-border-hover, #15803d);background-color:var(--color-action-primary-bg-hover, #16a34a)}.Backdrop .Picker .Actions .Ok:active{color:var(--color-action-primary-fg-active, #fafafa);border-color:var(--color-action-primary-border-active, #166534);background-color:var(--color-action-primary-bg-active, #15803d)}.Backdrop .Picker .Actions .Ok:disabled{opacity:.6;cursor:not-allowed}.Backdrop .Picker .Actions .Clear{padding:var(--spacing-sm, 8px) var(--spacing-md, 12px);border-radius:var(--radius-lg, 12px);color:var(--color-action-secondary-fg, #16a34a);border-color:var(--color-action-secondary-border, #86efac);background-color:var(--color-action-secondary-bg, #bbf7d0);cursor:pointer}.Backdrop .Picker .Actions .Clear:hover{color:var(--color-action-secondary-fg-hover, #15803d);border-color:var(--color-action-secondary-border-hover, #4ade80);background-color:var(--color-action-secondary-bg-hover, #86efac)}.Backdrop .Picker .Actions .Clear:active{color:var(--color-action-secondary-fg-active, #15803d);border-color:var(--color-action-secondary-border-active, #22c55e);background-color:var(--color-action-secondary-bg-active, #4ade80)}.Backdrop .Picker .Actions .Clear:disabled{opacity:.6;cursor:not-allowed}.Backdrop .Picker .Actions .Cancel{padding:var(--spacing-sm, 8px) var(--spacing-md, 12px);border-radius:var(--radius-lg, 12px);color:var(--color-action-cancel-fg, #16a34a);border-color:var(--color-action-cancel-border, #86efac);background-color:var(--color-action-cancel-bg, #dcfce7);cursor:pointer}.Backdrop .Picker .Actions .Cancel:hover{color:var(--color-action-cancel-fg-hover, #16a34a);border-color:var(--color-action-cancel-border-hover, #86efac);background-color:var(--color-action-cancel-bg-hover, #bbf7d0)}.Backdrop .Picker .Actions .Cancel:active{color:var(--color-action-cancel-fg-active, #15803d);border-color:var(--color-action-cancel-border-active, #4ade80);background-color:var(--color-action-cancel-bg-active, #86efac)}.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" }] });
11973
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", 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!important;flex-direction:column!important;width:100%;height:max-content;--radius-none: 0;--radius-xs: 2px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 16px;--radius-full: 9999px;--spacing-xxs: 2px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 16px;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;user-select:none;-webkit-user-select:none}:host .LabelRow{display:flex;align-items:center;justify-content:space-between;gap:6px;width:100%;margin-bottom:2px}:host .Label{color:var(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);font-weight:400;width:100%;cursor:pointer;padding:0 3px;margin:0 0 4px;overflow:hidden;word-break:break-all}:host .Entry{display:flex!important;width:100%;height:32px;justify-content:flex-start;align-items:center;border:solid 0 var(--color-input-border, #d4d4d4);border-radius:12px!important;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px!important;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host{display:block;position:relative;z-index:10050;width:0;height:0;overflow:visible;pointer-events:none;--radius-none: 0;--radius-xs: 2px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 16px;--radius-full: 9999px;--spacing-xxs: 2px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 16px;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-user-select:auto}.Backdrop{position:fixed;top:0;left:0;z-index:10050;pointer-events:auto;display:flex;justify-content:center;align-items:center;width:100%;height:100%;padding:12px;background:var(--color-scrim, color-mix(in srgb, #171717 40%, transparent));overflow:hidden}@media (width <= 768px){.Backdrop{align-items:flex-start}}.Backdrop .Picker{max-width:400px}.Backdrop .Picker .Preview{background-color:var(--color-surface-muted);border-radius:12px;padding:8px;text-align:center;color:var(--color-fg-brand);margin-bottom:8px;font-size:14px;font-weight:400}.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:8px}.Backdrop .Picker .TimePicker .Separate{font-weight:400;font-size:14px;color:var(--color-fg-muted)}.Backdrop .Picker .TimePicker .Hours,.Backdrop .Picker .TimePicker .Minutes{width:100%;height:100%;overflow:hidden;overflow-y:auto;background-color:var(--color-surface-muted);border-radius:12px;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:12px;padding:12px;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(--color-surface-emphasis)}.Backdrop .Picker .TimePicker .Hours .selected,.Backdrop .Picker .TimePicker .Minutes .selected{background-color:var(--color-brand);color:var(--color-fg-muted);font-weight:400}.Backdrop .Picker .TimePicker .Hours .selected:hover,.Backdrop .Picker .TimePicker .Minutes .selected:hover{background-color:var(--color-brand)}.Backdrop .Picker .Actions{display:flex;justify-content:flex-end;gap:4px;margin-top:12px}.Backdrop .Picker .Actions .Ok{padding:8px 12px;border-radius:12px;color:var(--color-action-primary-fg, #fafafa);border-color:var(--color-action-primary-border, #16a34a);background-color:var(--color-action-primary-bg, #22c55e);cursor:pointer}.Backdrop .Picker .Actions .Ok:hover{color:var(--color-action-primary-fg-hover, #fafafa);border-color:var(--color-action-primary-border-hover, #15803d);background-color:var(--color-action-primary-bg-hover, #16a34a)}.Backdrop .Picker .Actions .Ok:active{color:var(--color-action-primary-fg-active, #fafafa);border-color:var(--color-action-primary-border-active, #166534);background-color:var(--color-action-primary-bg-active, #15803d)}.Backdrop .Picker .Actions .Ok:disabled{opacity:.6;cursor:not-allowed}.Backdrop .Picker .Actions .Clear{padding:8px 12px;border-radius:12px;color:var(--color-action-secondary-fg, #16a34a);border-color:var(--color-action-secondary-border, #86efac);background-color:var(--color-action-secondary-bg, #bbf7d0);cursor:pointer}.Backdrop .Picker .Actions .Clear:hover{color:var(--color-action-secondary-fg-hover, #15803d);border-color:var(--color-action-secondary-border-hover, #4ade80);background-color:var(--color-action-secondary-bg-hover, #86efac)}.Backdrop .Picker .Actions .Clear:active{color:var(--color-action-secondary-fg-active, #15803d);border-color:var(--color-action-secondary-border-active, #22c55e);background-color:var(--color-action-secondary-bg-active, #4ade80)}.Backdrop .Picker .Actions .Clear:disabled{opacity:.6;cursor:not-allowed}.Backdrop .Picker .Actions .Cancel{padding:8px 12px;border-radius:12px;color:var(--color-action-cancel-fg, #16a34a);border-color:var(--color-action-cancel-border, #86efac);background-color:var(--color-action-cancel-bg, #dcfce7);cursor:pointer}.Backdrop .Picker .Actions .Cancel:hover{color:var(--color-action-cancel-fg-hover, #16a34a);border-color:var(--color-action-cancel-border-hover, #86efac);background-color:var(--color-action-cancel-bg-hover, #bbf7d0)}.Backdrop .Picker .Actions .Cancel:active{color:var(--color-action-cancel-fg-active, #15803d);border-color:var(--color-action-cancel-border-active, #4ade80);background-color:var(--color-action-cancel-bg-active, #86efac)}.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" }] });
11943
11974
  }
11944
11975
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TimePickerModalServiceComponent, decorators: [{
11945
11976
  type: Component,
11946
- 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;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);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(--color-input-border, #d4d4d4);border-radius:12px;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}: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(--color-scrim);overflow:hidden}@media (width <= 768px){.Backdrop{align-items:flex-start}}.Backdrop .Picker{max-width:400px}.Backdrop .Picker .Preview{background-color:var(--color-surface-muted);border-radius:var(--radius-lg);padding:var(--spacing-sm) var(--spacing-sm);text-align:center;color:var(--color-fg-brand);margin-bottom:var(--spacing-sm);font-size:14px;font-weight:400}.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:400;font-size:14px;color:var(--color-fg-muted)}.Backdrop .Picker .TimePicker .Hours,.Backdrop .Picker .TimePicker .Minutes{width:100%;height:100%;overflow:hidden;overflow-y:auto;background-color:var(--color-surface-muted);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(--color-surface-emphasis)}.Backdrop .Picker .TimePicker .Hours .selected,.Backdrop .Picker .TimePicker .Minutes .selected{background-color:var(--color-brand);color:var(--color-fg-muted);font-weight:400}.Backdrop .Picker .TimePicker .Hours .selected:hover,.Backdrop .Picker .TimePicker .Minutes .selected:hover{background-color:var(--color-brand)}.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, 8px) var(--spacing-md, 12px);border-radius:var(--radius-lg, 12px);color:var(--color-action-primary-fg, #fafafa);border-color:var(--color-action-primary-border, #16a34a);background-color:var(--color-action-primary-bg, #22c55e);cursor:pointer}.Backdrop .Picker .Actions .Ok:hover{color:var(--color-action-primary-fg-hover, #fafafa);border-color:var(--color-action-primary-border-hover, #15803d);background-color:var(--color-action-primary-bg-hover, #16a34a)}.Backdrop .Picker .Actions .Ok:active{color:var(--color-action-primary-fg-active, #fafafa);border-color:var(--color-action-primary-border-active, #166534);background-color:var(--color-action-primary-bg-active, #15803d)}.Backdrop .Picker .Actions .Ok:disabled{opacity:.6;cursor:not-allowed}.Backdrop .Picker .Actions .Clear{padding:var(--spacing-sm, 8px) var(--spacing-md, 12px);border-radius:var(--radius-lg, 12px);color:var(--color-action-secondary-fg, #16a34a);border-color:var(--color-action-secondary-border, #86efac);background-color:var(--color-action-secondary-bg, #bbf7d0);cursor:pointer}.Backdrop .Picker .Actions .Clear:hover{color:var(--color-action-secondary-fg-hover, #15803d);border-color:var(--color-action-secondary-border-hover, #4ade80);background-color:var(--color-action-secondary-bg-hover, #86efac)}.Backdrop .Picker .Actions .Clear:active{color:var(--color-action-secondary-fg-active, #15803d);border-color:var(--color-action-secondary-border-active, #22c55e);background-color:var(--color-action-secondary-bg-active, #4ade80)}.Backdrop .Picker .Actions .Clear:disabled{opacity:.6;cursor:not-allowed}.Backdrop .Picker .Actions .Cancel{padding:var(--spacing-sm, 8px) var(--spacing-md, 12px);border-radius:var(--radius-lg, 12px);color:var(--color-action-cancel-fg, #16a34a);border-color:var(--color-action-cancel-border, #86efac);background-color:var(--color-action-cancel-bg, #dcfce7);cursor:pointer}.Backdrop .Picker .Actions .Cancel:hover{color:var(--color-action-cancel-fg-hover, #16a34a);border-color:var(--color-action-cancel-border-hover, #86efac);background-color:var(--color-action-cancel-bg-hover, #bbf7d0)}.Backdrop .Picker .Actions .Cancel:active{color:var(--color-action-cancel-fg-active, #15803d);border-color:var(--color-action-cancel-border-active, #4ade80);background-color:var(--color-action-cancel-bg-active, #86efac)}.Backdrop .Picker .Actions .Cancel:disabled{opacity:.6;cursor:not-allowed}\n"] }]
11977
+ 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!important;flex-direction:column!important;width:100%;height:max-content;--radius-none: 0;--radius-xs: 2px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 16px;--radius-full: 9999px;--spacing-xxs: 2px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 16px;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;user-select:none;-webkit-user-select:none}:host .LabelRow{display:flex;align-items:center;justify-content:space-between;gap:6px;width:100%;margin-bottom:2px}:host .Label{color:var(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);font-weight:400;width:100%;cursor:pointer;padding:0 3px;margin:0 0 4px;overflow:hidden;word-break:break-all}:host .Entry{display:flex!important;width:100%;height:32px;justify-content:flex-start;align-items:center;border:solid 0 var(--color-input-border, #d4d4d4);border-radius:12px!important;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px!important;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host{display:block;position:relative;z-index:10050;width:0;height:0;overflow:visible;pointer-events:none;--radius-none: 0;--radius-xs: 2px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 16px;--radius-full: 9999px;--spacing-xxs: 2px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 16px;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-user-select:auto}.Backdrop{position:fixed;top:0;left:0;z-index:10050;pointer-events:auto;display:flex;justify-content:center;align-items:center;width:100%;height:100%;padding:12px;background:var(--color-scrim, color-mix(in srgb, #171717 40%, transparent));overflow:hidden}@media (width <= 768px){.Backdrop{align-items:flex-start}}.Backdrop .Picker{max-width:400px}.Backdrop .Picker .Preview{background-color:var(--color-surface-muted);border-radius:12px;padding:8px;text-align:center;color:var(--color-fg-brand);margin-bottom:8px;font-size:14px;font-weight:400}.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:8px}.Backdrop .Picker .TimePicker .Separate{font-weight:400;font-size:14px;color:var(--color-fg-muted)}.Backdrop .Picker .TimePicker .Hours,.Backdrop .Picker .TimePicker .Minutes{width:100%;height:100%;overflow:hidden;overflow-y:auto;background-color:var(--color-surface-muted);border-radius:12px;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:12px;padding:12px;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(--color-surface-emphasis)}.Backdrop .Picker .TimePicker .Hours .selected,.Backdrop .Picker .TimePicker .Minutes .selected{background-color:var(--color-brand);color:var(--color-fg-muted);font-weight:400}.Backdrop .Picker .TimePicker .Hours .selected:hover,.Backdrop .Picker .TimePicker .Minutes .selected:hover{background-color:var(--color-brand)}.Backdrop .Picker .Actions{display:flex;justify-content:flex-end;gap:4px;margin-top:12px}.Backdrop .Picker .Actions .Ok{padding:8px 12px;border-radius:12px;color:var(--color-action-primary-fg, #fafafa);border-color:var(--color-action-primary-border, #16a34a);background-color:var(--color-action-primary-bg, #22c55e);cursor:pointer}.Backdrop .Picker .Actions .Ok:hover{color:var(--color-action-primary-fg-hover, #fafafa);border-color:var(--color-action-primary-border-hover, #15803d);background-color:var(--color-action-primary-bg-hover, #16a34a)}.Backdrop .Picker .Actions .Ok:active{color:var(--color-action-primary-fg-active, #fafafa);border-color:var(--color-action-primary-border-active, #166534);background-color:var(--color-action-primary-bg-active, #15803d)}.Backdrop .Picker .Actions .Ok:disabled{opacity:.6;cursor:not-allowed}.Backdrop .Picker .Actions .Clear{padding:8px 12px;border-radius:12px;color:var(--color-action-secondary-fg, #16a34a);border-color:var(--color-action-secondary-border, #86efac);background-color:var(--color-action-secondary-bg, #bbf7d0);cursor:pointer}.Backdrop .Picker .Actions .Clear:hover{color:var(--color-action-secondary-fg-hover, #15803d);border-color:var(--color-action-secondary-border-hover, #4ade80);background-color:var(--color-action-secondary-bg-hover, #86efac)}.Backdrop .Picker .Actions .Clear:active{color:var(--color-action-secondary-fg-active, #15803d);border-color:var(--color-action-secondary-border-active, #22c55e);background-color:var(--color-action-secondary-bg-active, #4ade80)}.Backdrop .Picker .Actions .Clear:disabled{opacity:.6;cursor:not-allowed}.Backdrop .Picker .Actions .Cancel{padding:8px 12px;border-radius:12px;color:var(--color-action-cancel-fg, #16a34a);border-color:var(--color-action-cancel-border, #86efac);background-color:var(--color-action-cancel-bg, #dcfce7);cursor:pointer}.Backdrop .Picker .Actions .Cancel:hover{color:var(--color-action-cancel-fg-hover, #16a34a);border-color:var(--color-action-cancel-border-hover, #86efac);background-color:var(--color-action-cancel-bg-hover, #bbf7d0)}.Backdrop .Picker .Actions .Cancel:active{color:var(--color-action-cancel-fg-active, #15803d);border-color:var(--color-action-cancel-border-active, #4ade80);background-color:var(--color-action-cancel-bg-active, #86efac)}.Backdrop .Picker .Actions .Cancel:disabled{opacity:.6;cursor:not-allowed}\n"] }]
11947
11978
  }], ctorParameters: () => [{ type: TimePickerModalService }, { type: i0.ChangeDetectorRef }] });
11948
11979
 
11949
11980
  class DatetimePickerModalServiceComponent {
@@ -11963,11 +11994,11 @@ class DatetimePickerModalServiceComponent {
11963
11994
  this.sub?.unsubscribe();
11964
11995
  }
11965
11996
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: DatetimePickerModalServiceComponent, deps: [{ token: DatetimePickerModalService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
11966
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", 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;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);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(--color-input-border, #d4d4d4);border-radius:12px;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}: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(--color-scrim);overflow:hidden}@media (width <= 768px){.Backdrop{align-items:flex-start}}.Backdrop .Picker{max-width:400px}.Backdrop .Picker .Preview{background-color:var(--color-surface-muted);border-radius:var(--radius-lg);padding:var(--spacing-sm) var(--spacing-sm);text-align:center;color:var(--color-fg-brand);margin-bottom:var(--spacing-sm);font-size:14px;font-weight:400}.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:400;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(--color-surface-muted)}.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:14px}.Backdrop .Picker .Cards .CardMonths .CardChangeYear .Up lucide-icon .lucide-svg,.Backdrop .Picker .Cards .CardMonths .CardChangeYear .Down lucide-icon .lucide-svg,.Backdrop .Picker .Cards .CardMonths .CardChangeMonth .Up lucide-icon .lucide-svg,.Backdrop .Picker .Cards .CardMonths .CardChangeMonth .Down lucide-icon .lucide-svg,.Backdrop .Picker .Cards .CardDates .CardChangeYear .Up lucide-icon .lucide-svg,.Backdrop .Picker .Cards .CardDates .CardChangeYear .Down lucide-icon .lucide-svg,.Backdrop .Picker .Cards .CardDates .CardChangeMonth .Up lucide-icon .lucide-svg,.Backdrop .Picker .Cards .CardDates .CardChangeMonth .Down lucide-icon .lucide-svg{width:14px;height:14px}.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(--color-surface-muted)}.Backdrop .Picker .Cards .CardYears{position:absolute;top:0;left:0;z-index:10;width:100%;height:100%;background:var(--color-fg-on-brand, var(--color-fg-inverse, #fafafa))}.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(--color-surface-muted)}.Backdrop .Picker .Cards .CardYears .years .selected{background-color:var(--color-brand);color:var(--color-fg-on-brand, var(--color-fg-inverse, #fafafa));font-weight:400}.Backdrop .Picker .Cards .CardYears .years .selected:hover{background-color:var(--color-brand)}.Backdrop .Picker .Cards .CardMonths{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--color-fg-on-brand, var(--color-fg-inverse, #fafafa));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(--color-surface-muted)}.Backdrop .Picker .Cards .CardMonths .months .selected{background-color:var(--color-brand);color:var(--color-fg-muted);font-weight:400}.Backdrop .Picker .Cards .CardMonths .months .selected:hover{background-color:var(--color-brand)}.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:14px;font-weight:400}.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(--color-surface-muted)}.Backdrop .Picker .Cards .CardDates .dates .sunday{color:var(--color-danger-fg)}.Backdrop .Picker .Cards .CardDates .dates .outside{cursor:auto;color:var(--color-fg-muted);pointer-events:none;cursor:not-allowed}.Backdrop .Picker .Cards .CardDates .dates .selected{background-color:var(--color-brand);color:var(--color-fg-on-brand, var(--color-fg-inverse, #fafafa));font-weight:400}.Backdrop .Picker .Cards .CardDates .dates .selected:hover{background-color:var(--color-brand)}.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(--color-border);padding-top:var(--spacing-sm)}.Backdrop .Picker .TimePicker .Separate{font-weight:400;font-size:14px;color:var(--color-fg-muted)}.Backdrop .Picker .TimePicker .Hours,.Backdrop .Picker .TimePicker .Minutes{width:100%;height:100%;overflow:hidden;overflow-y:auto;background-color:var(--color-surface-muted);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(--color-surface-emphasis)}.Backdrop .Picker .TimePicker .Hours .selected,.Backdrop .Picker .TimePicker .Minutes .selected{background-color:var(--color-brand);color:var(--color-fg-muted);font-weight:400}.Backdrop .Picker .TimePicker .Hours .selected:hover,.Backdrop .Picker .TimePicker .Minutes .selected:hover{background-color:var(--color-brand)}.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, 8px) var(--spacing-md, 12px);border-radius:var(--radius-lg, 12px);color:var(--color-action-primary-fg, #fafafa);border-color:var(--color-action-primary-border, #16a34a);background-color:var(--color-action-primary-bg, #22c55e);cursor:pointer}.Backdrop .Picker .Actions .Ok:hover{color:var(--color-action-primary-fg-hover, #fafafa);border-color:var(--color-action-primary-border-hover, #15803d);background-color:var(--color-action-primary-bg-hover, #16a34a)}.Backdrop .Picker .Actions .Ok:active{color:var(--color-action-primary-fg-active, #fafafa);border-color:var(--color-action-primary-border-active, #166534);background-color:var(--color-action-primary-bg-active, #15803d)}.Backdrop .Picker .Actions .Ok:disabled{opacity:.6;cursor:not-allowed}.Backdrop .Picker .Actions .Clear{padding:var(--spacing-sm, 8px) var(--spacing-md, 12px);border-radius:var(--radius-lg, 12px);color:var(--color-action-secondary-fg, #16a34a);border-color:var(--color-action-secondary-border, #86efac);background-color:var(--color-action-secondary-bg, #bbf7d0);cursor:pointer}.Backdrop .Picker .Actions .Clear:hover{color:var(--color-action-secondary-fg-hover, #15803d);border-color:var(--color-action-secondary-border-hover, #4ade80);background-color:var(--color-action-secondary-bg-hover, #86efac)}.Backdrop .Picker .Actions .Clear:active{color:var(--color-action-secondary-fg-active, #15803d);border-color:var(--color-action-secondary-border-active, #22c55e);background-color:var(--color-action-secondary-bg-active, #4ade80)}.Backdrop .Picker .Actions .Clear:disabled{opacity:.6;cursor:not-allowed}.Backdrop .Picker .Actions .Cancel{padding:var(--spacing-sm, 8px) var(--spacing-md, 12px);border-radius:var(--radius-lg, 12px);color:var(--color-action-cancel-fg, #16a34a);border-color:var(--color-action-cancel-border, #86efac);background-color:var(--color-action-cancel-bg, #dcfce7);cursor:pointer}.Backdrop .Picker .Actions .Cancel:hover{color:var(--color-action-cancel-fg-hover, #16a34a);border-color:var(--color-action-cancel-border-hover, #86efac);background-color:var(--color-action-cancel-bg-hover, #bbf7d0)}.Backdrop .Picker .Actions .Cancel:active{color:var(--color-action-cancel-fg-active, #15803d);border-color:var(--color-action-cancel-border-active, #4ade80);background-color:var(--color-action-cancel-bg-active, #86efac)}.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"] }] });
11997
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", 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!important;flex-direction:column!important;width:100%;height:max-content;--radius-none: 0;--radius-xs: 2px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 16px;--radius-full: 9999px;--spacing-xxs: 2px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 16px;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;user-select:none;-webkit-user-select:none}:host .LabelRow{display:flex;align-items:center;justify-content:space-between;gap:6px;width:100%;margin-bottom:2px}:host .Label{color:var(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);font-weight:400;width:100%;cursor:pointer;padding:0 3px;margin:0 0 4px;overflow:hidden;word-break:break-all}:host .Entry{display:flex!important;width:100%;height:32px;justify-content:flex-start;align-items:center;border:solid 0 var(--color-input-border, #d4d4d4);border-radius:12px!important;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px!important;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host{display:block;position:relative;z-index:10050;width:0;height:0;overflow:visible;pointer-events:none;--radius-none: 0;--radius-xs: 2px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 16px;--radius-full: 9999px;--spacing-xxs: 2px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 16px;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-user-select:auto}.Backdrop{position:fixed;top:0;left:0;z-index:10050;pointer-events:auto;display:flex;justify-content:center;align-items:center;width:100%;height:100%;padding:12px;background:var(--color-scrim, color-mix(in srgb, #171717 40%, transparent));overflow:hidden}@media (width <= 768px){.Backdrop{align-items:flex-start}}.Backdrop .Picker{max-width:400px}.Backdrop .Picker .Preview{background-color:var(--color-surface-muted);border-radius:12px;padding:8px;text-align:center;color:var(--color-fg-brand);margin-bottom:8px;font-size:14px;font-weight:400}.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:400;cursor:pointer;border-radius:8px}.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(--color-surface-muted)}.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:8px;cursor:pointer;font-size:14px}.Backdrop .Picker .Cards .CardMonths .CardChangeYear .Up lucide-icon .lucide-svg,.Backdrop .Picker .Cards .CardMonths .CardChangeYear .Down lucide-icon .lucide-svg,.Backdrop .Picker .Cards .CardMonths .CardChangeMonth .Up lucide-icon .lucide-svg,.Backdrop .Picker .Cards .CardMonths .CardChangeMonth .Down lucide-icon .lucide-svg,.Backdrop .Picker .Cards .CardDates .CardChangeYear .Up lucide-icon .lucide-svg,.Backdrop .Picker .Cards .CardDates .CardChangeYear .Down lucide-icon .lucide-svg,.Backdrop .Picker .Cards .CardDates .CardChangeMonth .Up lucide-icon .lucide-svg,.Backdrop .Picker .Cards .CardDates .CardChangeMonth .Down lucide-icon .lucide-svg{width:14px;height:14px}.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(--color-surface-muted)}.Backdrop .Picker .Cards .CardYears{position:absolute;top:0;left:0;z-index:10;width:100%;height:100%;background:var(--color-fg-on-brand, var(--color-fg-inverse, #fafafa))}.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;text-transform:capitalize;padding:4px 12px;border-radius:12px;cursor:pointer}.Backdrop .Picker .Cards .CardYears .years .year:hover{background-color:var(--color-surface-muted)}.Backdrop .Picker .Cards .CardYears .years .selected{background-color:var(--color-brand);color:var(--color-fg-on-brand, var(--color-fg-inverse, #fafafa));font-weight:400}.Backdrop .Picker .Cards .CardYears .years .selected:hover{background-color:var(--color-brand)}.Backdrop .Picker .Cards .CardMonths{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--color-fg-on-brand, var(--color-fg-inverse, #fafafa));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:4px 12px;border-radius:12px;cursor:pointer}.Backdrop .Picker .Cards .CardMonths .months .month:hover{background-color:var(--color-surface-muted)}.Backdrop .Picker .Cards .CardMonths .months .selected{background-color:var(--color-brand);color:var(--color-fg-muted);font-weight:400}.Backdrop .Picker .Cards .CardMonths .months .selected:hover{background-color:var(--color-brand)}.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:14px;font-weight:400}.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:12px;cursor:pointer}.Backdrop .Picker .Cards .CardDates .dates .day:hover{background-color:var(--color-surface-muted)}.Backdrop .Picker .Cards .CardDates .dates .sunday{color:var(--color-danger-fg)}.Backdrop .Picker .Cards .CardDates .dates .outside{cursor:auto;color:var(--color-fg-muted);pointer-events:none;cursor:not-allowed}.Backdrop .Picker .Cards .CardDates .dates .selected{background-color:var(--color-brand);color:var(--color-fg-on-brand, var(--color-fg-inverse, #fafafa));font-weight:400}.Backdrop .Picker .Cards .CardDates .dates .selected:hover{background-color:var(--color-brand)}.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(--color-border);padding-top:8px}.Backdrop .Picker .TimePicker .Separate{font-weight:400;font-size:14px;color:var(--color-fg-muted)}.Backdrop .Picker .TimePicker .Hours,.Backdrop .Picker .TimePicker .Minutes{width:100%;height:100%;overflow:hidden;overflow-y:auto;background-color:var(--color-surface-muted);border-radius:12px;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:12px;padding:12px;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(--color-surface-emphasis)}.Backdrop .Picker .TimePicker .Hours .selected,.Backdrop .Picker .TimePicker .Minutes .selected{background-color:var(--color-brand);color:var(--color-fg-muted);font-weight:400}.Backdrop .Picker .TimePicker .Hours .selected:hover,.Backdrop .Picker .TimePicker .Minutes .selected:hover{background-color:var(--color-brand)}.Backdrop .Picker .Actions{display:flex;justify-content:flex-end;gap:4px;margin-top:12px}.Backdrop .Picker .Actions .Ok{padding:8px 12px;border-radius:12px;color:var(--color-action-primary-fg, #fafafa);border-color:var(--color-action-primary-border, #16a34a);background-color:var(--color-action-primary-bg, #22c55e);cursor:pointer}.Backdrop .Picker .Actions .Ok:hover{color:var(--color-action-primary-fg-hover, #fafafa);border-color:var(--color-action-primary-border-hover, #15803d);background-color:var(--color-action-primary-bg-hover, #16a34a)}.Backdrop .Picker .Actions .Ok:active{color:var(--color-action-primary-fg-active, #fafafa);border-color:var(--color-action-primary-border-active, #166534);background-color:var(--color-action-primary-bg-active, #15803d)}.Backdrop .Picker .Actions .Ok:disabled{opacity:.6;cursor:not-allowed}.Backdrop .Picker .Actions .Clear{padding:8px 12px;border-radius:12px;color:var(--color-action-secondary-fg, #16a34a);border-color:var(--color-action-secondary-border, #86efac);background-color:var(--color-action-secondary-bg, #bbf7d0);cursor:pointer}.Backdrop .Picker .Actions .Clear:hover{color:var(--color-action-secondary-fg-hover, #15803d);border-color:var(--color-action-secondary-border-hover, #4ade80);background-color:var(--color-action-secondary-bg-hover, #86efac)}.Backdrop .Picker .Actions .Clear:active{color:var(--color-action-secondary-fg-active, #15803d);border-color:var(--color-action-secondary-border-active, #22c55e);background-color:var(--color-action-secondary-bg-active, #4ade80)}.Backdrop .Picker .Actions .Clear:disabled{opacity:.6;cursor:not-allowed}.Backdrop .Picker .Actions .Cancel{padding:8px 12px;border-radius:12px;color:var(--color-action-cancel-fg, #16a34a);border-color:var(--color-action-cancel-border, #86efac);background-color:var(--color-action-cancel-bg, #dcfce7);cursor:pointer}.Backdrop .Picker .Actions .Cancel:hover{color:var(--color-action-cancel-fg-hover, #16a34a);border-color:var(--color-action-cancel-border-hover, #86efac);background-color:var(--color-action-cancel-bg-hover, #bbf7d0)}.Backdrop .Picker .Actions .Cancel:active{color:var(--color-action-cancel-fg-active, #15803d);border-color:var(--color-action-cancel-border-active, #4ade80);background-color:var(--color-action-cancel-bg-active, #86efac)}.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"] }] });
11967
11998
  }
11968
11999
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: DatetimePickerModalServiceComponent, decorators: [{
11969
12000
  type: Component,
11970
- 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;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);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(--color-input-border, #d4d4d4);border-radius:12px;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}: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(--color-scrim);overflow:hidden}@media (width <= 768px){.Backdrop{align-items:flex-start}}.Backdrop .Picker{max-width:400px}.Backdrop .Picker .Preview{background-color:var(--color-surface-muted);border-radius:var(--radius-lg);padding:var(--spacing-sm) var(--spacing-sm);text-align:center;color:var(--color-fg-brand);margin-bottom:var(--spacing-sm);font-size:14px;font-weight:400}.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:400;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(--color-surface-muted)}.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:14px}.Backdrop .Picker .Cards .CardMonths .CardChangeYear .Up lucide-icon .lucide-svg,.Backdrop .Picker .Cards .CardMonths .CardChangeYear .Down lucide-icon .lucide-svg,.Backdrop .Picker .Cards .CardMonths .CardChangeMonth .Up lucide-icon .lucide-svg,.Backdrop .Picker .Cards .CardMonths .CardChangeMonth .Down lucide-icon .lucide-svg,.Backdrop .Picker .Cards .CardDates .CardChangeYear .Up lucide-icon .lucide-svg,.Backdrop .Picker .Cards .CardDates .CardChangeYear .Down lucide-icon .lucide-svg,.Backdrop .Picker .Cards .CardDates .CardChangeMonth .Up lucide-icon .lucide-svg,.Backdrop .Picker .Cards .CardDates .CardChangeMonth .Down lucide-icon .lucide-svg{width:14px;height:14px}.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(--color-surface-muted)}.Backdrop .Picker .Cards .CardYears{position:absolute;top:0;left:0;z-index:10;width:100%;height:100%;background:var(--color-fg-on-brand, var(--color-fg-inverse, #fafafa))}.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(--color-surface-muted)}.Backdrop .Picker .Cards .CardYears .years .selected{background-color:var(--color-brand);color:var(--color-fg-on-brand, var(--color-fg-inverse, #fafafa));font-weight:400}.Backdrop .Picker .Cards .CardYears .years .selected:hover{background-color:var(--color-brand)}.Backdrop .Picker .Cards .CardMonths{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--color-fg-on-brand, var(--color-fg-inverse, #fafafa));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(--color-surface-muted)}.Backdrop .Picker .Cards .CardMonths .months .selected{background-color:var(--color-brand);color:var(--color-fg-muted);font-weight:400}.Backdrop .Picker .Cards .CardMonths .months .selected:hover{background-color:var(--color-brand)}.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:14px;font-weight:400}.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(--color-surface-muted)}.Backdrop .Picker .Cards .CardDates .dates .sunday{color:var(--color-danger-fg)}.Backdrop .Picker .Cards .CardDates .dates .outside{cursor:auto;color:var(--color-fg-muted);pointer-events:none;cursor:not-allowed}.Backdrop .Picker .Cards .CardDates .dates .selected{background-color:var(--color-brand);color:var(--color-fg-on-brand, var(--color-fg-inverse, #fafafa));font-weight:400}.Backdrop .Picker .Cards .CardDates .dates .selected:hover{background-color:var(--color-brand)}.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(--color-border);padding-top:var(--spacing-sm)}.Backdrop .Picker .TimePicker .Separate{font-weight:400;font-size:14px;color:var(--color-fg-muted)}.Backdrop .Picker .TimePicker .Hours,.Backdrop .Picker .TimePicker .Minutes{width:100%;height:100%;overflow:hidden;overflow-y:auto;background-color:var(--color-surface-muted);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(--color-surface-emphasis)}.Backdrop .Picker .TimePicker .Hours .selected,.Backdrop .Picker .TimePicker .Minutes .selected{background-color:var(--color-brand);color:var(--color-fg-muted);font-weight:400}.Backdrop .Picker .TimePicker .Hours .selected:hover,.Backdrop .Picker .TimePicker .Minutes .selected:hover{background-color:var(--color-brand)}.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, 8px) var(--spacing-md, 12px);border-radius:var(--radius-lg, 12px);color:var(--color-action-primary-fg, #fafafa);border-color:var(--color-action-primary-border, #16a34a);background-color:var(--color-action-primary-bg, #22c55e);cursor:pointer}.Backdrop .Picker .Actions .Ok:hover{color:var(--color-action-primary-fg-hover, #fafafa);border-color:var(--color-action-primary-border-hover, #15803d);background-color:var(--color-action-primary-bg-hover, #16a34a)}.Backdrop .Picker .Actions .Ok:active{color:var(--color-action-primary-fg-active, #fafafa);border-color:var(--color-action-primary-border-active, #166534);background-color:var(--color-action-primary-bg-active, #15803d)}.Backdrop .Picker .Actions .Ok:disabled{opacity:.6;cursor:not-allowed}.Backdrop .Picker .Actions .Clear{padding:var(--spacing-sm, 8px) var(--spacing-md, 12px);border-radius:var(--radius-lg, 12px);color:var(--color-action-secondary-fg, #16a34a);border-color:var(--color-action-secondary-border, #86efac);background-color:var(--color-action-secondary-bg, #bbf7d0);cursor:pointer}.Backdrop .Picker .Actions .Clear:hover{color:var(--color-action-secondary-fg-hover, #15803d);border-color:var(--color-action-secondary-border-hover, #4ade80);background-color:var(--color-action-secondary-bg-hover, #86efac)}.Backdrop .Picker .Actions .Clear:active{color:var(--color-action-secondary-fg-active, #15803d);border-color:var(--color-action-secondary-border-active, #22c55e);background-color:var(--color-action-secondary-bg-active, #4ade80)}.Backdrop .Picker .Actions .Clear:disabled{opacity:.6;cursor:not-allowed}.Backdrop .Picker .Actions .Cancel{padding:var(--spacing-sm, 8px) var(--spacing-md, 12px);border-radius:var(--radius-lg, 12px);color:var(--color-action-cancel-fg, #16a34a);border-color:var(--color-action-cancel-border, #86efac);background-color:var(--color-action-cancel-bg, #dcfce7);cursor:pointer}.Backdrop .Picker .Actions .Cancel:hover{color:var(--color-action-cancel-fg-hover, #16a34a);border-color:var(--color-action-cancel-border-hover, #86efac);background-color:var(--color-action-cancel-bg-hover, #bbf7d0)}.Backdrop .Picker .Actions .Cancel:active{color:var(--color-action-cancel-fg-active, #15803d);border-color:var(--color-action-cancel-border-active, #4ade80);background-color:var(--color-action-cancel-bg-active, #86efac)}.Backdrop .Picker .Actions .Cancel:disabled{opacity:.6;cursor:not-allowed}\n"] }]
12001
+ 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!important;flex-direction:column!important;width:100%;height:max-content;--radius-none: 0;--radius-xs: 2px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 16px;--radius-full: 9999px;--spacing-xxs: 2px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 16px;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;user-select:none;-webkit-user-select:none}:host .LabelRow{display:flex;align-items:center;justify-content:space-between;gap:6px;width:100%;margin-bottom:2px}:host .Label{color:var(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);font-weight:400;width:100%;cursor:pointer;padding:0 3px;margin:0 0 4px;overflow:hidden;word-break:break-all}:host .Entry{display:flex!important;width:100%;height:32px;justify-content:flex-start;align-items:center;border:solid 0 var(--color-input-border, #d4d4d4);border-radius:12px!important;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px!important;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host{display:block;position:relative;z-index:10050;width:0;height:0;overflow:visible;pointer-events:none;--radius-none: 0;--radius-xs: 2px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 16px;--radius-full: 9999px;--spacing-xxs: 2px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 16px;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-user-select:auto}.Backdrop{position:fixed;top:0;left:0;z-index:10050;pointer-events:auto;display:flex;justify-content:center;align-items:center;width:100%;height:100%;padding:12px;background:var(--color-scrim, color-mix(in srgb, #171717 40%, transparent));overflow:hidden}@media (width <= 768px){.Backdrop{align-items:flex-start}}.Backdrop .Picker{max-width:400px}.Backdrop .Picker .Preview{background-color:var(--color-surface-muted);border-radius:12px;padding:8px;text-align:center;color:var(--color-fg-brand);margin-bottom:8px;font-size:14px;font-weight:400}.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:400;cursor:pointer;border-radius:8px}.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(--color-surface-muted)}.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:8px;cursor:pointer;font-size:14px}.Backdrop .Picker .Cards .CardMonths .CardChangeYear .Up lucide-icon .lucide-svg,.Backdrop .Picker .Cards .CardMonths .CardChangeYear .Down lucide-icon .lucide-svg,.Backdrop .Picker .Cards .CardMonths .CardChangeMonth .Up lucide-icon .lucide-svg,.Backdrop .Picker .Cards .CardMonths .CardChangeMonth .Down lucide-icon .lucide-svg,.Backdrop .Picker .Cards .CardDates .CardChangeYear .Up lucide-icon .lucide-svg,.Backdrop .Picker .Cards .CardDates .CardChangeYear .Down lucide-icon .lucide-svg,.Backdrop .Picker .Cards .CardDates .CardChangeMonth .Up lucide-icon .lucide-svg,.Backdrop .Picker .Cards .CardDates .CardChangeMonth .Down lucide-icon .lucide-svg{width:14px;height:14px}.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(--color-surface-muted)}.Backdrop .Picker .Cards .CardYears{position:absolute;top:0;left:0;z-index:10;width:100%;height:100%;background:var(--color-fg-on-brand, var(--color-fg-inverse, #fafafa))}.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;text-transform:capitalize;padding:4px 12px;border-radius:12px;cursor:pointer}.Backdrop .Picker .Cards .CardYears .years .year:hover{background-color:var(--color-surface-muted)}.Backdrop .Picker .Cards .CardYears .years .selected{background-color:var(--color-brand);color:var(--color-fg-on-brand, var(--color-fg-inverse, #fafafa));font-weight:400}.Backdrop .Picker .Cards .CardYears .years .selected:hover{background-color:var(--color-brand)}.Backdrop .Picker .Cards .CardMonths{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--color-fg-on-brand, var(--color-fg-inverse, #fafafa));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:4px 12px;border-radius:12px;cursor:pointer}.Backdrop .Picker .Cards .CardMonths .months .month:hover{background-color:var(--color-surface-muted)}.Backdrop .Picker .Cards .CardMonths .months .selected{background-color:var(--color-brand);color:var(--color-fg-muted);font-weight:400}.Backdrop .Picker .Cards .CardMonths .months .selected:hover{background-color:var(--color-brand)}.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:14px;font-weight:400}.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:12px;cursor:pointer}.Backdrop .Picker .Cards .CardDates .dates .day:hover{background-color:var(--color-surface-muted)}.Backdrop .Picker .Cards .CardDates .dates .sunday{color:var(--color-danger-fg)}.Backdrop .Picker .Cards .CardDates .dates .outside{cursor:auto;color:var(--color-fg-muted);pointer-events:none;cursor:not-allowed}.Backdrop .Picker .Cards .CardDates .dates .selected{background-color:var(--color-brand);color:var(--color-fg-on-brand, var(--color-fg-inverse, #fafafa));font-weight:400}.Backdrop .Picker .Cards .CardDates .dates .selected:hover{background-color:var(--color-brand)}.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(--color-border);padding-top:8px}.Backdrop .Picker .TimePicker .Separate{font-weight:400;font-size:14px;color:var(--color-fg-muted)}.Backdrop .Picker .TimePicker .Hours,.Backdrop .Picker .TimePicker .Minutes{width:100%;height:100%;overflow:hidden;overflow-y:auto;background-color:var(--color-surface-muted);border-radius:12px;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:12px;padding:12px;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(--color-surface-emphasis)}.Backdrop .Picker .TimePicker .Hours .selected,.Backdrop .Picker .TimePicker .Minutes .selected{background-color:var(--color-brand);color:var(--color-fg-muted);font-weight:400}.Backdrop .Picker .TimePicker .Hours .selected:hover,.Backdrop .Picker .TimePicker .Minutes .selected:hover{background-color:var(--color-brand)}.Backdrop .Picker .Actions{display:flex;justify-content:flex-end;gap:4px;margin-top:12px}.Backdrop .Picker .Actions .Ok{padding:8px 12px;border-radius:12px;color:var(--color-action-primary-fg, #fafafa);border-color:var(--color-action-primary-border, #16a34a);background-color:var(--color-action-primary-bg, #22c55e);cursor:pointer}.Backdrop .Picker .Actions .Ok:hover{color:var(--color-action-primary-fg-hover, #fafafa);border-color:var(--color-action-primary-border-hover, #15803d);background-color:var(--color-action-primary-bg-hover, #16a34a)}.Backdrop .Picker .Actions .Ok:active{color:var(--color-action-primary-fg-active, #fafafa);border-color:var(--color-action-primary-border-active, #166534);background-color:var(--color-action-primary-bg-active, #15803d)}.Backdrop .Picker .Actions .Ok:disabled{opacity:.6;cursor:not-allowed}.Backdrop .Picker .Actions .Clear{padding:8px 12px;border-radius:12px;color:var(--color-action-secondary-fg, #16a34a);border-color:var(--color-action-secondary-border, #86efac);background-color:var(--color-action-secondary-bg, #bbf7d0);cursor:pointer}.Backdrop .Picker .Actions .Clear:hover{color:var(--color-action-secondary-fg-hover, #15803d);border-color:var(--color-action-secondary-border-hover, #4ade80);background-color:var(--color-action-secondary-bg-hover, #86efac)}.Backdrop .Picker .Actions .Clear:active{color:var(--color-action-secondary-fg-active, #15803d);border-color:var(--color-action-secondary-border-active, #22c55e);background-color:var(--color-action-secondary-bg-active, #4ade80)}.Backdrop .Picker .Actions .Clear:disabled{opacity:.6;cursor:not-allowed}.Backdrop .Picker .Actions .Cancel{padding:8px 12px;border-radius:12px;color:var(--color-action-cancel-fg, #16a34a);border-color:var(--color-action-cancel-border, #86efac);background-color:var(--color-action-cancel-bg, #dcfce7);cursor:pointer}.Backdrop .Picker .Actions .Cancel:hover{color:var(--color-action-cancel-fg-hover, #16a34a);border-color:var(--color-action-cancel-border-hover, #86efac);background-color:var(--color-action-cancel-bg-hover, #bbf7d0)}.Backdrop .Picker .Actions .Cancel:active{color:var(--color-action-cancel-fg-active, #15803d);border-color:var(--color-action-cancel-border-active, #4ade80);background-color:var(--color-action-cancel-bg-active, #86efac)}.Backdrop .Picker .Actions .Cancel:disabled{opacity:.6;cursor:not-allowed}\n"] }]
11971
12002
  }], ctorParameters: () => [{ type: DatetimePickerModalService }, { type: i0.ChangeDetectorRef }] });
11972
12003
 
11973
12004
  class MonthPickerModalServiceComponent {
@@ -11987,11 +12018,11 @@ class MonthPickerModalServiceComponent {
11987
12018
  this.sub?.unsubscribe();
11988
12019
  }
11989
12020
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: MonthPickerModalServiceComponent, deps: [{ token: MonthPickerModalService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
11990
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", 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;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);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(--color-input-border, #d4d4d4);border-radius:12px;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}: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(--color-scrim);overflow:hidden}@media (width <= 768px){.Backdrop{align-items:flex-start}}.Backdrop .Picker{max-width:400px}.Backdrop .Picker .Preview{background-color:var(--color-surface-muted);border-radius:var(--radius-lg);padding:var(--spacing-sm) var(--spacing-sm);text-align:center;color:var(--color-fg-brand);margin-bottom:var(--spacing-sm);font-size:14px;font-weight:400}.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:400;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(--color-surface-muted)}.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:14px}.Backdrop .Picker .Cards .CardMonths .CardChangeYear .Up lucide-icon .lucide-svg,.Backdrop .Picker .Cards .CardMonths .CardChangeYear .Down lucide-icon .lucide-svg,.Backdrop .Picker .Cards .CardMonths .CardChangeMonth .Up lucide-icon .lucide-svg,.Backdrop .Picker .Cards .CardMonths .CardChangeMonth .Down lucide-icon .lucide-svg,.Backdrop .Picker .Cards .CardDates .CardChangeYear .Up lucide-icon .lucide-svg,.Backdrop .Picker .Cards .CardDates .CardChangeYear .Down lucide-icon .lucide-svg,.Backdrop .Picker .Cards .CardDates .CardChangeMonth .Up lucide-icon .lucide-svg,.Backdrop .Picker .Cards .CardDates .CardChangeMonth .Down lucide-icon .lucide-svg{width:14px;height:14px}.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(--color-surface-muted)}.Backdrop .Picker .Cards .CardYears{position:absolute;top:0;left:0;z-index:10;width:100%;height:100%;background:var(--color-fg-on-brand, var(--color-fg-inverse, #fafafa))}.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(--color-surface-muted)}.Backdrop .Picker .Cards .CardYears .years .selected{background-color:var(--color-brand);color:var(--color-fg-on-brand, var(--color-fg-inverse, #fafafa));font-weight:400}.Backdrop .Picker .Cards .CardYears .years .selected:hover{background-color:var(--color-brand)}.Backdrop .Picker .Cards .CardMonths{width:100%;height:100%;background:var(--color-fg-on-brand, var(--color-fg-inverse, #fafafa));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(--color-surface-muted)}.Backdrop .Picker .Cards .CardMonths .months .selected{background-color:var(--color-brand);color:var(--color-fg-muted);font-weight:400}.Backdrop .Picker .Cards .CardMonths .months .selected:hover{background-color:var(--color-brand)}.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, 8px) var(--spacing-md, 12px);border-radius:var(--radius-lg, 12px);color:var(--color-action-primary-fg, #fafafa);border-color:var(--color-action-primary-border, #16a34a);background-color:var(--color-action-primary-bg, #22c55e);cursor:pointer}.Backdrop .Picker .Actions .Ok:hover{color:var(--color-action-primary-fg-hover, #fafafa);border-color:var(--color-action-primary-border-hover, #15803d);background-color:var(--color-action-primary-bg-hover, #16a34a)}.Backdrop .Picker .Actions .Ok:active{color:var(--color-action-primary-fg-active, #fafafa);border-color:var(--color-action-primary-border-active, #166534);background-color:var(--color-action-primary-bg-active, #15803d)}.Backdrop .Picker .Actions .Ok:disabled{opacity:.6;cursor:not-allowed}.Backdrop .Picker .Actions .Clear{padding:var(--spacing-sm, 8px) var(--spacing-md, 12px);border-radius:var(--radius-lg, 12px);color:var(--color-action-secondary-fg, #16a34a);border-color:var(--color-action-secondary-border, #86efac);background-color:var(--color-action-secondary-bg, #bbf7d0);cursor:pointer}.Backdrop .Picker .Actions .Clear:hover{color:var(--color-action-secondary-fg-hover, #15803d);border-color:var(--color-action-secondary-border-hover, #4ade80);background-color:var(--color-action-secondary-bg-hover, #86efac)}.Backdrop .Picker .Actions .Clear:active{color:var(--color-action-secondary-fg-active, #15803d);border-color:var(--color-action-secondary-border-active, #22c55e);background-color:var(--color-action-secondary-bg-active, #4ade80)}.Backdrop .Picker .Actions .Clear:disabled{opacity:.6;cursor:not-allowed}.Backdrop .Picker .Actions .Cancel{padding:var(--spacing-sm, 8px) var(--spacing-md, 12px);border-radius:var(--radius-lg, 12px);color:var(--color-action-cancel-fg, #16a34a);border-color:var(--color-action-cancel-border, #86efac);background-color:var(--color-action-cancel-bg, #dcfce7);cursor:pointer}.Backdrop .Picker .Actions .Cancel:hover{color:var(--color-action-cancel-fg-hover, #16a34a);border-color:var(--color-action-cancel-border-hover, #86efac);background-color:var(--color-action-cancel-bg-hover, #bbf7d0)}.Backdrop .Picker .Actions .Cancel:active{color:var(--color-action-cancel-fg-active, #15803d);border-color:var(--color-action-cancel-border-active, #4ade80);background-color:var(--color-action-cancel-bg-active, #86efac)}.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"] }] });
12021
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", 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!important;flex-direction:column!important;width:100%;height:max-content;--radius-none: 0;--radius-xs: 2px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 16px;--radius-full: 9999px;--spacing-xxs: 2px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 16px;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;user-select:none;-webkit-user-select:none}:host .LabelRow{display:flex;align-items:center;justify-content:space-between;gap:6px;width:100%;margin-bottom:2px}:host .Label{color:var(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);font-weight:400;width:100%;cursor:pointer;padding:0 3px;margin:0 0 4px;overflow:hidden;word-break:break-all}:host .Entry{display:flex!important;width:100%;height:32px;justify-content:flex-start;align-items:center;border:solid 0 var(--color-input-border, #d4d4d4);border-radius:12px!important;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px!important;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host{display:block;position:relative;z-index:10050;width:0;height:0;overflow:visible;pointer-events:none;--radius-none: 0;--radius-xs: 2px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 16px;--radius-full: 9999px;--spacing-xxs: 2px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 16px;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-user-select:auto}.Backdrop{position:fixed;top:0;left:0;z-index:10050;pointer-events:auto;display:flex;justify-content:center;align-items:center;width:100%;height:100%;padding:12px;background:var(--color-scrim, color-mix(in srgb, #171717 40%, transparent));overflow:hidden}@media (width <= 768px){.Backdrop{align-items:flex-start}}.Backdrop .Picker{max-width:400px}.Backdrop .Picker .Preview{background-color:var(--color-surface-muted);border-radius:12px;padding:8px;text-align:center;color:var(--color-fg-brand);margin-bottom:8px;font-size:14px;font-weight:400}.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:400;cursor:pointer;border-radius:8px}.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(--color-surface-muted)}.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:8px;cursor:pointer;font-size:14px}.Backdrop .Picker .Cards .CardMonths .CardChangeYear .Up lucide-icon .lucide-svg,.Backdrop .Picker .Cards .CardMonths .CardChangeYear .Down lucide-icon .lucide-svg,.Backdrop .Picker .Cards .CardMonths .CardChangeMonth .Up lucide-icon .lucide-svg,.Backdrop .Picker .Cards .CardMonths .CardChangeMonth .Down lucide-icon .lucide-svg,.Backdrop .Picker .Cards .CardDates .CardChangeYear .Up lucide-icon .lucide-svg,.Backdrop .Picker .Cards .CardDates .CardChangeYear .Down lucide-icon .lucide-svg,.Backdrop .Picker .Cards .CardDates .CardChangeMonth .Up lucide-icon .lucide-svg,.Backdrop .Picker .Cards .CardDates .CardChangeMonth .Down lucide-icon .lucide-svg{width:14px;height:14px}.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(--color-surface-muted)}.Backdrop .Picker .Cards .CardYears{position:absolute;top:0;left:0;z-index:10;width:100%;height:100%;background:var(--color-fg-on-brand, var(--color-fg-inverse, #fafafa))}.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;text-transform:capitalize;padding:4px 12px;border-radius:12px;cursor:pointer}.Backdrop .Picker .Cards .CardYears .years .year:hover{background-color:var(--color-surface-muted)}.Backdrop .Picker .Cards .CardYears .years .selected{background-color:var(--color-brand);color:var(--color-fg-on-brand, var(--color-fg-inverse, #fafafa));font-weight:400}.Backdrop .Picker .Cards .CardYears .years .selected:hover{background-color:var(--color-brand)}.Backdrop .Picker .Cards .CardMonths{width:100%;height:100%;background:var(--color-fg-on-brand, var(--color-fg-inverse, #fafafa));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:4px 12px;border-radius:12px;cursor:pointer}.Backdrop .Picker .Cards .CardMonths .months .month:hover{background-color:var(--color-surface-muted)}.Backdrop .Picker .Cards .CardMonths .months .selected{background-color:var(--color-brand);color:var(--color-fg-muted);font-weight:400}.Backdrop .Picker .Cards .CardMonths .months .selected:hover{background-color:var(--color-brand)}.Backdrop .Picker .Actions{display:flex;justify-content:flex-end;gap:4px;margin-top:12px}.Backdrop .Picker .Actions .Ok{padding:8px 12px;border-radius:12px;color:var(--color-action-primary-fg, #fafafa);border-color:var(--color-action-primary-border, #16a34a);background-color:var(--color-action-primary-bg, #22c55e);cursor:pointer}.Backdrop .Picker .Actions .Ok:hover{color:var(--color-action-primary-fg-hover, #fafafa);border-color:var(--color-action-primary-border-hover, #15803d);background-color:var(--color-action-primary-bg-hover, #16a34a)}.Backdrop .Picker .Actions .Ok:active{color:var(--color-action-primary-fg-active, #fafafa);border-color:var(--color-action-primary-border-active, #166534);background-color:var(--color-action-primary-bg-active, #15803d)}.Backdrop .Picker .Actions .Ok:disabled{opacity:.6;cursor:not-allowed}.Backdrop .Picker .Actions .Clear{padding:8px 12px;border-radius:12px;color:var(--color-action-secondary-fg, #16a34a);border-color:var(--color-action-secondary-border, #86efac);background-color:var(--color-action-secondary-bg, #bbf7d0);cursor:pointer}.Backdrop .Picker .Actions .Clear:hover{color:var(--color-action-secondary-fg-hover, #15803d);border-color:var(--color-action-secondary-border-hover, #4ade80);background-color:var(--color-action-secondary-bg-hover, #86efac)}.Backdrop .Picker .Actions .Clear:active{color:var(--color-action-secondary-fg-active, #15803d);border-color:var(--color-action-secondary-border-active, #22c55e);background-color:var(--color-action-secondary-bg-active, #4ade80)}.Backdrop .Picker .Actions .Clear:disabled{opacity:.6;cursor:not-allowed}.Backdrop .Picker .Actions .Cancel{padding:8px 12px;border-radius:12px;color:var(--color-action-cancel-fg, #16a34a);border-color:var(--color-action-cancel-border, #86efac);background-color:var(--color-action-cancel-bg, #dcfce7);cursor:pointer}.Backdrop .Picker .Actions .Cancel:hover{color:var(--color-action-cancel-fg-hover, #16a34a);border-color:var(--color-action-cancel-border-hover, #86efac);background-color:var(--color-action-cancel-bg-hover, #bbf7d0)}.Backdrop .Picker .Actions .Cancel:active{color:var(--color-action-cancel-fg-active, #15803d);border-color:var(--color-action-cancel-border-active, #4ade80);background-color:var(--color-action-cancel-bg-active, #86efac)}.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"] }] });
11991
12022
  }
11992
12023
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: MonthPickerModalServiceComponent, decorators: [{
11993
12024
  type: Component,
11994
- 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;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);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(--color-input-border, #d4d4d4);border-radius:12px;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}: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(--color-scrim);overflow:hidden}@media (width <= 768px){.Backdrop{align-items:flex-start}}.Backdrop .Picker{max-width:400px}.Backdrop .Picker .Preview{background-color:var(--color-surface-muted);border-radius:var(--radius-lg);padding:var(--spacing-sm) var(--spacing-sm);text-align:center;color:var(--color-fg-brand);margin-bottom:var(--spacing-sm);font-size:14px;font-weight:400}.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:400;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(--color-surface-muted)}.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:14px}.Backdrop .Picker .Cards .CardMonths .CardChangeYear .Up lucide-icon .lucide-svg,.Backdrop .Picker .Cards .CardMonths .CardChangeYear .Down lucide-icon .lucide-svg,.Backdrop .Picker .Cards .CardMonths .CardChangeMonth .Up lucide-icon .lucide-svg,.Backdrop .Picker .Cards .CardMonths .CardChangeMonth .Down lucide-icon .lucide-svg,.Backdrop .Picker .Cards .CardDates .CardChangeYear .Up lucide-icon .lucide-svg,.Backdrop .Picker .Cards .CardDates .CardChangeYear .Down lucide-icon .lucide-svg,.Backdrop .Picker .Cards .CardDates .CardChangeMonth .Up lucide-icon .lucide-svg,.Backdrop .Picker .Cards .CardDates .CardChangeMonth .Down lucide-icon .lucide-svg{width:14px;height:14px}.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(--color-surface-muted)}.Backdrop .Picker .Cards .CardYears{position:absolute;top:0;left:0;z-index:10;width:100%;height:100%;background:var(--color-fg-on-brand, var(--color-fg-inverse, #fafafa))}.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(--color-surface-muted)}.Backdrop .Picker .Cards .CardYears .years .selected{background-color:var(--color-brand);color:var(--color-fg-on-brand, var(--color-fg-inverse, #fafafa));font-weight:400}.Backdrop .Picker .Cards .CardYears .years .selected:hover{background-color:var(--color-brand)}.Backdrop .Picker .Cards .CardMonths{width:100%;height:100%;background:var(--color-fg-on-brand, var(--color-fg-inverse, #fafafa));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(--color-surface-muted)}.Backdrop .Picker .Cards .CardMonths .months .selected{background-color:var(--color-brand);color:var(--color-fg-muted);font-weight:400}.Backdrop .Picker .Cards .CardMonths .months .selected:hover{background-color:var(--color-brand)}.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, 8px) var(--spacing-md, 12px);border-radius:var(--radius-lg, 12px);color:var(--color-action-primary-fg, #fafafa);border-color:var(--color-action-primary-border, #16a34a);background-color:var(--color-action-primary-bg, #22c55e);cursor:pointer}.Backdrop .Picker .Actions .Ok:hover{color:var(--color-action-primary-fg-hover, #fafafa);border-color:var(--color-action-primary-border-hover, #15803d);background-color:var(--color-action-primary-bg-hover, #16a34a)}.Backdrop .Picker .Actions .Ok:active{color:var(--color-action-primary-fg-active, #fafafa);border-color:var(--color-action-primary-border-active, #166534);background-color:var(--color-action-primary-bg-active, #15803d)}.Backdrop .Picker .Actions .Ok:disabled{opacity:.6;cursor:not-allowed}.Backdrop .Picker .Actions .Clear{padding:var(--spacing-sm, 8px) var(--spacing-md, 12px);border-radius:var(--radius-lg, 12px);color:var(--color-action-secondary-fg, #16a34a);border-color:var(--color-action-secondary-border, #86efac);background-color:var(--color-action-secondary-bg, #bbf7d0);cursor:pointer}.Backdrop .Picker .Actions .Clear:hover{color:var(--color-action-secondary-fg-hover, #15803d);border-color:var(--color-action-secondary-border-hover, #4ade80);background-color:var(--color-action-secondary-bg-hover, #86efac)}.Backdrop .Picker .Actions .Clear:active{color:var(--color-action-secondary-fg-active, #15803d);border-color:var(--color-action-secondary-border-active, #22c55e);background-color:var(--color-action-secondary-bg-active, #4ade80)}.Backdrop .Picker .Actions .Clear:disabled{opacity:.6;cursor:not-allowed}.Backdrop .Picker .Actions .Cancel{padding:var(--spacing-sm, 8px) var(--spacing-md, 12px);border-radius:var(--radius-lg, 12px);color:var(--color-action-cancel-fg, #16a34a);border-color:var(--color-action-cancel-border, #86efac);background-color:var(--color-action-cancel-bg, #dcfce7);cursor:pointer}.Backdrop .Picker .Actions .Cancel:hover{color:var(--color-action-cancel-fg-hover, #16a34a);border-color:var(--color-action-cancel-border-hover, #86efac);background-color:var(--color-action-cancel-bg-hover, #bbf7d0)}.Backdrop .Picker .Actions .Cancel:active{color:var(--color-action-cancel-fg-active, #15803d);border-color:var(--color-action-cancel-border-active, #4ade80);background-color:var(--color-action-cancel-bg-active, #86efac)}.Backdrop .Picker .Actions .Cancel:disabled{opacity:.6;cursor:not-allowed}\n"] }]
12025
+ 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!important;flex-direction:column!important;width:100%;height:max-content;--radius-none: 0;--radius-xs: 2px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 16px;--radius-full: 9999px;--spacing-xxs: 2px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 16px;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;user-select:none;-webkit-user-select:none}:host .LabelRow{display:flex;align-items:center;justify-content:space-between;gap:6px;width:100%;margin-bottom:2px}:host .Label{color:var(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);font-weight:400;width:100%;cursor:pointer;padding:0 3px;margin:0 0 4px;overflow:hidden;word-break:break-all}:host .Entry{display:flex!important;width:100%;height:32px;justify-content:flex-start;align-items:center;border:solid 0 var(--color-input-border, #d4d4d4);border-radius:12px!important;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px!important;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host{display:block;position:relative;z-index:10050;width:0;height:0;overflow:visible;pointer-events:none;--radius-none: 0;--radius-xs: 2px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 16px;--radius-full: 9999px;--spacing-xxs: 2px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 16px;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-user-select:auto}.Backdrop{position:fixed;top:0;left:0;z-index:10050;pointer-events:auto;display:flex;justify-content:center;align-items:center;width:100%;height:100%;padding:12px;background:var(--color-scrim, color-mix(in srgb, #171717 40%, transparent));overflow:hidden}@media (width <= 768px){.Backdrop{align-items:flex-start}}.Backdrop .Picker{max-width:400px}.Backdrop .Picker .Preview{background-color:var(--color-surface-muted);border-radius:12px;padding:8px;text-align:center;color:var(--color-fg-brand);margin-bottom:8px;font-size:14px;font-weight:400}.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:400;cursor:pointer;border-radius:8px}.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(--color-surface-muted)}.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:8px;cursor:pointer;font-size:14px}.Backdrop .Picker .Cards .CardMonths .CardChangeYear .Up lucide-icon .lucide-svg,.Backdrop .Picker .Cards .CardMonths .CardChangeYear .Down lucide-icon .lucide-svg,.Backdrop .Picker .Cards .CardMonths .CardChangeMonth .Up lucide-icon .lucide-svg,.Backdrop .Picker .Cards .CardMonths .CardChangeMonth .Down lucide-icon .lucide-svg,.Backdrop .Picker .Cards .CardDates .CardChangeYear .Up lucide-icon .lucide-svg,.Backdrop .Picker .Cards .CardDates .CardChangeYear .Down lucide-icon .lucide-svg,.Backdrop .Picker .Cards .CardDates .CardChangeMonth .Up lucide-icon .lucide-svg,.Backdrop .Picker .Cards .CardDates .CardChangeMonth .Down lucide-icon .lucide-svg{width:14px;height:14px}.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(--color-surface-muted)}.Backdrop .Picker .Cards .CardYears{position:absolute;top:0;left:0;z-index:10;width:100%;height:100%;background:var(--color-fg-on-brand, var(--color-fg-inverse, #fafafa))}.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;text-transform:capitalize;padding:4px 12px;border-radius:12px;cursor:pointer}.Backdrop .Picker .Cards .CardYears .years .year:hover{background-color:var(--color-surface-muted)}.Backdrop .Picker .Cards .CardYears .years .selected{background-color:var(--color-brand);color:var(--color-fg-on-brand, var(--color-fg-inverse, #fafafa));font-weight:400}.Backdrop .Picker .Cards .CardYears .years .selected:hover{background-color:var(--color-brand)}.Backdrop .Picker .Cards .CardMonths{width:100%;height:100%;background:var(--color-fg-on-brand, var(--color-fg-inverse, #fafafa));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:4px 12px;border-radius:12px;cursor:pointer}.Backdrop .Picker .Cards .CardMonths .months .month:hover{background-color:var(--color-surface-muted)}.Backdrop .Picker .Cards .CardMonths .months .selected{background-color:var(--color-brand);color:var(--color-fg-muted);font-weight:400}.Backdrop .Picker .Cards .CardMonths .months .selected:hover{background-color:var(--color-brand)}.Backdrop .Picker .Actions{display:flex;justify-content:flex-end;gap:4px;margin-top:12px}.Backdrop .Picker .Actions .Ok{padding:8px 12px;border-radius:12px;color:var(--color-action-primary-fg, #fafafa);border-color:var(--color-action-primary-border, #16a34a);background-color:var(--color-action-primary-bg, #22c55e);cursor:pointer}.Backdrop .Picker .Actions .Ok:hover{color:var(--color-action-primary-fg-hover, #fafafa);border-color:var(--color-action-primary-border-hover, #15803d);background-color:var(--color-action-primary-bg-hover, #16a34a)}.Backdrop .Picker .Actions .Ok:active{color:var(--color-action-primary-fg-active, #fafafa);border-color:var(--color-action-primary-border-active, #166534);background-color:var(--color-action-primary-bg-active, #15803d)}.Backdrop .Picker .Actions .Ok:disabled{opacity:.6;cursor:not-allowed}.Backdrop .Picker .Actions .Clear{padding:8px 12px;border-radius:12px;color:var(--color-action-secondary-fg, #16a34a);border-color:var(--color-action-secondary-border, #86efac);background-color:var(--color-action-secondary-bg, #bbf7d0);cursor:pointer}.Backdrop .Picker .Actions .Clear:hover{color:var(--color-action-secondary-fg-hover, #15803d);border-color:var(--color-action-secondary-border-hover, #4ade80);background-color:var(--color-action-secondary-bg-hover, #86efac)}.Backdrop .Picker .Actions .Clear:active{color:var(--color-action-secondary-fg-active, #15803d);border-color:var(--color-action-secondary-border-active, #22c55e);background-color:var(--color-action-secondary-bg-active, #4ade80)}.Backdrop .Picker .Actions .Clear:disabled{opacity:.6;cursor:not-allowed}.Backdrop .Picker .Actions .Cancel{padding:8px 12px;border-radius:12px;color:var(--color-action-cancel-fg, #16a34a);border-color:var(--color-action-cancel-border, #86efac);background-color:var(--color-action-cancel-bg, #dcfce7);cursor:pointer}.Backdrop .Picker .Actions .Cancel:hover{color:var(--color-action-cancel-fg-hover, #16a34a);border-color:var(--color-action-cancel-border-hover, #86efac);background-color:var(--color-action-cancel-bg-hover, #bbf7d0)}.Backdrop .Picker .Actions .Cancel:active{color:var(--color-action-cancel-fg-active, #15803d);border-color:var(--color-action-cancel-border-active, #4ade80);background-color:var(--color-action-cancel-bg-active, #86efac)}.Backdrop .Picker .Actions .Cancel:disabled{opacity:.6;cursor:not-allowed}\n"] }]
11995
12026
  }], ctorParameters: () => [{ type: MonthPickerModalService }, { type: i0.ChangeDetectorRef }] });
11996
12027
 
11997
12028
  // ============================================================================
@@ -12655,11 +12686,11 @@ class ColorPickerPanelComponent {
12655
12686
  this.cdr.markForCheck();
12656
12687
  }
12657
12688
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ColorPickerPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
12658
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", 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%;user-select:none;-webkit-user-select:none}: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(--color-surface-muted);border:1px solid var(--color-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(--color-input-border);background-color:var(--color-input-addon-bg);box-shadow:inset 0 0 0 1px var(--color-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:14px;font-weight:400;letter-spacing:.04em;text-transform:uppercase;color:var(--color-fg-muted)}:host .Picker .ColorMeta .ColorValues .ColorValueRow .Value{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:14px;font-weight:400;color:var(--color-fg);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(--color-brand);transform:scale(1.1);box-shadow:0 2px 8px var(--color-scrim)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
12689
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", 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%;user-select:none;-webkit-user-select:none}:host .Picker{display:flex;flex-direction:column;gap:12px;overflow-y:auto}:host .Picker .ColorPickerMain{display:flex;gap:12px;align-items:stretch;width:100%;min-height:200px;max-height:200px}:host .Picker .ColorPickerMain .CanvasContainer{position:relative;flex:1;aspect-ratio:1;border-radius:12px;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:12px;overflow:hidden;cursor:crosshair}:host .Picker .ColorPickerMain .HueContainer .HueCanvas{width:100%;height:100%;display:block;touch-action:none}:host .Picker .ColorMeta{display:flex;gap:12px;align-items:center;padding:8px;background:var(--color-surface-muted);border:1px solid var(--color-input-border);border-radius:8px}:host .Picker .ColorMeta .ColorPreview{flex-shrink:0;width:52px;height:52px;border-radius:8px;border:1px solid var(--color-input-border);background-color:var(--color-input-addon-bg);box-shadow:inset 0 0 0 1px var(--color-border)}:host .Picker .ColorMeta .ColorValues{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}:host .Picker .ColorMeta .ColorValues .ColorValueRow{display:flex;align-items:center;gap:8px}:host .Picker .ColorMeta .ColorValues .ColorValueRow .Label{flex-shrink:0;min-width:2.25rem;font-size:14px;font-weight:400;letter-spacing:.04em;text-transform:uppercase;color:var(--color-fg-muted)}:host .Picker .ColorMeta .ColorValues .ColorValueRow .Value{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:14px;font-weight:400;color:var(--color-fg);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:4px;border:2px solid transparent;transition:all .2s ease}:host .Picker .SwatchesContainer .Swatch:hover{border-color:var(--color-brand);transform:scale(1.1);box-shadow:0 2px 8px var(--color-scrim)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
12659
12690
  }
12660
12691
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ColorPickerPanelComponent, decorators: [{
12661
12692
  type: Component,
12662
- 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%;user-select:none;-webkit-user-select:none}: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(--color-surface-muted);border:1px solid var(--color-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(--color-input-border);background-color:var(--color-input-addon-bg);box-shadow:inset 0 0 0 1px var(--color-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:14px;font-weight:400;letter-spacing:.04em;text-transform:uppercase;color:var(--color-fg-muted)}:host .Picker .ColorMeta .ColorValues .ColorValueRow .Value{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:14px;font-weight:400;color:var(--color-fg);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(--color-brand);transform:scale(1.1);box-shadow:0 2px 8px var(--color-scrim)}\n"] }]
12693
+ 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%;user-select:none;-webkit-user-select:none}:host .Picker{display:flex;flex-direction:column;gap:12px;overflow-y:auto}:host .Picker .ColorPickerMain{display:flex;gap:12px;align-items:stretch;width:100%;min-height:200px;max-height:200px}:host .Picker .ColorPickerMain .CanvasContainer{position:relative;flex:1;aspect-ratio:1;border-radius:12px;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:12px;overflow:hidden;cursor:crosshair}:host .Picker .ColorPickerMain .HueContainer .HueCanvas{width:100%;height:100%;display:block;touch-action:none}:host .Picker .ColorMeta{display:flex;gap:12px;align-items:center;padding:8px;background:var(--color-surface-muted);border:1px solid var(--color-input-border);border-radius:8px}:host .Picker .ColorMeta .ColorPreview{flex-shrink:0;width:52px;height:52px;border-radius:8px;border:1px solid var(--color-input-border);background-color:var(--color-input-addon-bg);box-shadow:inset 0 0 0 1px var(--color-border)}:host .Picker .ColorMeta .ColorValues{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}:host .Picker .ColorMeta .ColorValues .ColorValueRow{display:flex;align-items:center;gap:8px}:host .Picker .ColorMeta .ColorValues .ColorValueRow .Label{flex-shrink:0;min-width:2.25rem;font-size:14px;font-weight:400;letter-spacing:.04em;text-transform:uppercase;color:var(--color-fg-muted)}:host .Picker .ColorMeta .ColorValues .ColorValueRow .Value{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:14px;font-weight:400;color:var(--color-fg);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:4px;border:2px solid transparent;transition:all .2s ease}:host .Picker .SwatchesContainer .Swatch:hover{border-color:var(--color-brand);transform:scale(1.1);box-shadow:0 2px 8px var(--color-scrim)}\n"] }]
12663
12694
  }], propDecorators: { colorCanvas: [{
12664
12695
  type: ViewChild,
12665
12696
  args: ['colorCanvas', { static: false }]
@@ -12708,11 +12739,11 @@ class ColorPickerModalServiceComponent {
12708
12739
  this.sub?.unsubscribe();
12709
12740
  }
12710
12741
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ColorPickerModalServiceComponent, deps: [{ token: ColorPickerModalService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
12711
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", 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;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);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(--color-input-border, #d4d4d4);border-radius:12px;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}: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(--color-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(--color-surface);border-radius:var(--radius-xl);padding:12px;box-shadow:0 0 8px var(--color-shadow);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(--color-border);flex-shrink:0}.Backdrop .Picker .Actions button{border:none;font:inherit}.Backdrop .Picker .Actions .Ok{padding:var(--spacing-sm, 8px) var(--spacing-md, 12px);border-radius:var(--radius-lg, 12px);color:var(--color-action-primary-fg, #fafafa);border-color:var(--color-action-primary-border, #16a34a);background-color:var(--color-action-primary-bg, #22c55e);cursor:pointer}.Backdrop .Picker .Actions .Ok:hover{color:var(--color-action-primary-fg-hover, #fafafa);border-color:var(--color-action-primary-border-hover, #15803d);background-color:var(--color-action-primary-bg-hover, #16a34a)}.Backdrop .Picker .Actions .Ok:active{color:var(--color-action-primary-fg-active, #fafafa);border-color:var(--color-action-primary-border-active, #166534);background-color:var(--color-action-primary-bg-active, #15803d)}.Backdrop .Picker .Actions .Ok:disabled{opacity:.6;cursor:not-allowed}.Backdrop .Picker .Actions .Cancel{padding:var(--spacing-sm, 8px) var(--spacing-md, 12px);border-radius:var(--radius-lg, 12px);color:var(--color-action-cancel-fg, #16a34a);border-color:var(--color-action-cancel-border, #86efac);background-color:var(--color-action-cancel-bg, #dcfce7);cursor:pointer}.Backdrop .Picker .Actions .Cancel:hover{color:var(--color-action-cancel-fg-hover, #16a34a);border-color:var(--color-action-cancel-border-hover, #86efac);background-color:var(--color-action-cancel-bg-hover, #bbf7d0)}.Backdrop .Picker .Actions .Cancel:active{color:var(--color-action-cancel-fg-active, #15803d);border-color:var(--color-action-cancel-border-active, #4ade80);background-color:var(--color-action-cancel-bg-active, #86efac)}.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"] }] });
12742
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.25", 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!important;flex-direction:column!important;width:100%;height:max-content;--radius-none: 0;--radius-xs: 2px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 16px;--radius-full: 9999px;--spacing-xxs: 2px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 16px;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;user-select:none;-webkit-user-select:none}:host .LabelRow{display:flex;align-items:center;justify-content:space-between;gap:6px;width:100%;margin-bottom:2px}:host .Label{color:var(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);font-weight:400;width:100%;cursor:pointer;padding:0 3px;margin:0 0 4px;overflow:hidden;word-break:break-all}:host .Entry{display:flex!important;width:100%;height:32px;justify-content:flex-start;align-items:center;border:solid 0 var(--color-input-border, #d4d4d4);border-radius:12px!important;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px!important;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host{display:block;position:relative;z-index:10050;width:0;height:0;overflow:visible;pointer-events:none;--radius-none: 0;--radius-xs: 2px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 16px;--radius-full: 9999px;--spacing-xxs: 2px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 16px;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-user-select:auto}.Backdrop{position:fixed;top:0;left:0;z-index:10050;pointer-events:auto;display:flex;justify-content:center;align-items:center;width:100%;height:100%;padding:12px;background:var(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface);border-radius:16px;padding:12px;box-shadow:0 0 8px var(--color-shadow);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:4px;margin-top:12px;padding-top:12px;border-top:1px solid var(--color-border);flex-shrink:0}.Backdrop .Picker .Actions button{border:none;font:inherit}.Backdrop .Picker .Actions .Ok{padding:8px 12px;border-radius:12px;color:var(--color-action-primary-fg, #fafafa);border-color:var(--color-action-primary-border, #16a34a);background-color:var(--color-action-primary-bg, #22c55e);cursor:pointer}.Backdrop .Picker .Actions .Ok:hover{color:var(--color-action-primary-fg-hover, #fafafa);border-color:var(--color-action-primary-border-hover, #15803d);background-color:var(--color-action-primary-bg-hover, #16a34a)}.Backdrop .Picker .Actions .Ok:active{color:var(--color-action-primary-fg-active, #fafafa);border-color:var(--color-action-primary-border-active, #166534);background-color:var(--color-action-primary-bg-active, #15803d)}.Backdrop .Picker .Actions .Ok:disabled{opacity:.6;cursor:not-allowed}.Backdrop .Picker .Actions .Cancel{padding:8px 12px;border-radius:12px;color:var(--color-action-cancel-fg, #16a34a);border-color:var(--color-action-cancel-border, #86efac);background-color:var(--color-action-cancel-bg, #dcfce7);cursor:pointer}.Backdrop .Picker .Actions .Cancel:hover{color:var(--color-action-cancel-fg-hover, #16a34a);border-color:var(--color-action-cancel-border-hover, #86efac);background-color:var(--color-action-cancel-bg-hover, #bbf7d0)}.Backdrop .Picker .Actions .Cancel:active{color:var(--color-action-cancel-fg-active, #15803d);border-color:var(--color-action-cancel-border-active, #4ade80);background-color:var(--color-action-cancel-bg-active, #86efac)}.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"] }] });
12712
12743
  }
12713
12744
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ColorPickerModalServiceComponent, decorators: [{
12714
12745
  type: Component,
12715
- 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;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-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(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);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(--color-input-border, #d4d4d4);border-radius:12px;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}: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(--color-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(--color-surface);border-radius:var(--radius-xl);padding:12px;box-shadow:0 0 8px var(--color-shadow);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(--color-border);flex-shrink:0}.Backdrop .Picker .Actions button{border:none;font:inherit}.Backdrop .Picker .Actions .Ok{padding:var(--spacing-sm, 8px) var(--spacing-md, 12px);border-radius:var(--radius-lg, 12px);color:var(--color-action-primary-fg, #fafafa);border-color:var(--color-action-primary-border, #16a34a);background-color:var(--color-action-primary-bg, #22c55e);cursor:pointer}.Backdrop .Picker .Actions .Ok:hover{color:var(--color-action-primary-fg-hover, #fafafa);border-color:var(--color-action-primary-border-hover, #15803d);background-color:var(--color-action-primary-bg-hover, #16a34a)}.Backdrop .Picker .Actions .Ok:active{color:var(--color-action-primary-fg-active, #fafafa);border-color:var(--color-action-primary-border-active, #166534);background-color:var(--color-action-primary-bg-active, #15803d)}.Backdrop .Picker .Actions .Ok:disabled{opacity:.6;cursor:not-allowed}.Backdrop .Picker .Actions .Cancel{padding:var(--spacing-sm, 8px) var(--spacing-md, 12px);border-radius:var(--radius-lg, 12px);color:var(--color-action-cancel-fg, #16a34a);border-color:var(--color-action-cancel-border, #86efac);background-color:var(--color-action-cancel-bg, #dcfce7);cursor:pointer}.Backdrop .Picker .Actions .Cancel:hover{color:var(--color-action-cancel-fg-hover, #16a34a);border-color:var(--color-action-cancel-border-hover, #86efac);background-color:var(--color-action-cancel-bg-hover, #bbf7d0)}.Backdrop .Picker .Actions .Cancel:active{color:var(--color-action-cancel-fg-active, #15803d);border-color:var(--color-action-cancel-border-active, #4ade80);background-color:var(--color-action-cancel-bg-active, #86efac)}.Backdrop .Picker .Actions .Cancel:disabled{opacity:.6;cursor:not-allowed}\n"] }]
12746
+ 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!important;flex-direction:column!important;width:100%;height:max-content;--radius-none: 0;--radius-xs: 2px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 16px;--radius-full: 9999px;--spacing-xxs: 2px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 16px;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;user-select:none;-webkit-user-select:none}:host .LabelRow{display:flex;align-items:center;justify-content:space-between;gap:6px;width:100%;margin-bottom:2px}:host .Label{color:var(--color-fg-secondary, #525252);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(--color-fg-muted, #a3a3a3)}:host .Description{-webkit-user-select:none;user-select:none;font-size:14px;color:var(--color-fg, #171717);font-weight:400;width:100%;cursor:pointer;padding:0 3px;margin:0 0 4px;overflow:hidden;word-break:break-all}:host .Entry{display:flex!important;width:100%;height:32px;justify-content:flex-start;align-items:center;border:solid 0 var(--color-input-border, #d4d4d4);border-radius:12px!important;cursor:pointer;overflow:hidden;background-color:var(--color-input-bg, #f5f5f5)}:host .Entry:hover{border:none;outline:solid 1px var(--color-input-border-hover, #a3a3a3)}:host .Entry[class~=IsFocus]{border:none;outline:solid 1px var(--color-input-border-focus, #22c55e)}:host .Entry[class~=Error]{outline:solid 1px var(--color-input-border-danger, #fca5a5)}:host .Entry .Input{height:100%;width:100%;border:solid 0 var(--color-input-border, #d4d4d4);padding:0 8px;color:var(--color-input-fg, #171717);caret-color:var(--color-brand, #22c55e);text-align:start;background-color:transparent;appearance:none;font:inherit}:host .Entry .Input:focus{border:none;outline:none}:host .Entry .Input::placeholder{color:var(--color-input-placeholder, #a3a3a3)}: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(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface, #ffffff);border-radius:16px!important;padding:12px;overflow:hidden;overflow-y:auto;box-shadow:0 0 8px var(--color-shadow, color-mix(in srgb, #171717 12%, transparent))}:host{display:block;position:relative;z-index:10050;width:0;height:0;overflow:visible;pointer-events:none;--radius-none: 0;--radius-xs: 2px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 16px;--radius-full: 9999px;--spacing-xxs: 2px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 16px;--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;user-select:none;-webkit-user-select:none}:host input,:host textarea,:host [contenteditable=true],:host [contenteditable=plaintext-only]{user-select:auto;-webkit-user-select:auto}.Backdrop{position:fixed;top:0;left:0;z-index:10050;pointer-events:auto;display:flex;justify-content:center;align-items:center;width:100%;height:100%;padding:12px;background:var(--color-scrim, color-mix(in srgb, #171717 40%, transparent));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(--color-surface);border-radius:16px;padding:12px;box-shadow:0 0 8px var(--color-shadow);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:4px;margin-top:12px;padding-top:12px;border-top:1px solid var(--color-border);flex-shrink:0}.Backdrop .Picker .Actions button{border:none;font:inherit}.Backdrop .Picker .Actions .Ok{padding:8px 12px;border-radius:12px;color:var(--color-action-primary-fg, #fafafa);border-color:var(--color-action-primary-border, #16a34a);background-color:var(--color-action-primary-bg, #22c55e);cursor:pointer}.Backdrop .Picker .Actions .Ok:hover{color:var(--color-action-primary-fg-hover, #fafafa);border-color:var(--color-action-primary-border-hover, #15803d);background-color:var(--color-action-primary-bg-hover, #16a34a)}.Backdrop .Picker .Actions .Ok:active{color:var(--color-action-primary-fg-active, #fafafa);border-color:var(--color-action-primary-border-active, #166534);background-color:var(--color-action-primary-bg-active, #15803d)}.Backdrop .Picker .Actions .Ok:disabled{opacity:.6;cursor:not-allowed}.Backdrop .Picker .Actions .Cancel{padding:8px 12px;border-radius:12px;color:var(--color-action-cancel-fg, #16a34a);border-color:var(--color-action-cancel-border, #86efac);background-color:var(--color-action-cancel-bg, #dcfce7);cursor:pointer}.Backdrop .Picker .Actions .Cancel:hover{color:var(--color-action-cancel-fg-hover, #16a34a);border-color:var(--color-action-cancel-border-hover, #86efac);background-color:var(--color-action-cancel-bg-hover, #bbf7d0)}.Backdrop .Picker .Actions .Cancel:active{color:var(--color-action-cancel-fg-active, #15803d);border-color:var(--color-action-cancel-border-active, #4ade80);background-color:var(--color-action-cancel-bg-active, #86efac)}.Backdrop .Picker .Actions .Cancel:disabled{opacity:.6;cursor:not-allowed}\n"] }]
12716
12747
  }], ctorParameters: () => [{ type: ColorPickerModalService }, { type: i0.ChangeDetectorRef }] });
12717
12748
 
12718
12749
  /**
@@ -12818,8 +12849,11 @@ class ContextMenuServiceComponent {
12818
12849
  sub;
12819
12850
  closeSub;
12820
12851
  scrollListener = () => {
12821
- if (this.active && !this.compact)
12822
- this.dismissCurrent(null);
12852
+ if (!this.active || this.compact)
12853
+ return;
12854
+ if (performance.now() < this.ignoreOutsideUntil)
12855
+ return;
12856
+ this.dismissCurrent(null);
12823
12857
  };
12824
12858
  outsidePointerListener = (event) => {
12825
12859
  this.handleOutsideEvent(event);
@@ -12843,7 +12877,7 @@ class ContextMenuServiceComponent {
12843
12877
  };
12844
12878
  this.panelVisible = true;
12845
12879
  // Ignorar el mismo gesto de apertura y el click sintético post-contextmenu.
12846
- this.ignoreOutsideUntil = performance.now() + 180;
12880
+ this.ignoreOutsideUntil = performance.now() + 280;
12847
12881
  this.cdr.detectChanges();
12848
12882
  this.applyClampedPosition();
12849
12883
  });
@@ -12977,11 +13011,11 @@ class ContextMenuServiceComponent {
12977
13011
  this.cdr.detectChanges();
12978
13012
  }
12979
13013
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ContextMenuServiceComponent, deps: [{ token: ContextMenuService }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component });
12980
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: ContextMenuServiceComponent, isStandalone: true, selector: "context-menu-service", host: { listeners: { "window:resize": "onWindowResize()", "document:keydown": "onEscape($event)" } }, viewQueries: [{ propertyName: "panelRef", first: true, predicate: ["panel"], descendants: true }], ngImport: i0, template: "@if (active) {\r\n <div\r\n class=\"ContextMenuOverlay\"\r\n [class.ContextMenuOverlay--compact]=\"compact\"\r\n aria-hidden=\"true\"\r\n (click)=\"onBackdropClick($event)\"\r\n >\r\n <div\r\n #panel\r\n class=\"ContextMenuPanel\"\r\n [class.ContextMenuPanel--visible]=\"panelVisible\"\r\n [class.ContextMenuPanel--menu]=\"active.kind === 'menu'\"\r\n [class.ContextMenuPanel--info]=\"active.kind === 'info'\"\r\n [style.left.px]=\"compact ? null : position.x\"\r\n [style.top.px]=\"compact ? null : position.y\"\r\n role=\"menu\"\r\n [attr.aria-label]=\"active.kind === 'info' ? active.info.title : (active.title || 'Opciones')\"\r\n [attr.aria-hidden]=\"!panelVisible\"\r\n (click)=\"$event.stopPropagation()\"\r\n (pointerdown)=\"$event.stopPropagation()\"\r\n (contextmenu)=\"$event.preventDefault()\"\r\n >\r\n @if (active.kind === 'menu') {\r\n @if (active.title) {\r\n <p class=\"ContextMenuMenuTitle\">{{ active.title }}</p>\r\n }\r\n @for (option of active.options; track $index) {\r\n @if (option.separatorBefore) {\r\n <div class=\"ContextMenuMenuSep\" aria-hidden=\"true\"></div>\r\n }\r\n <button\r\n type=\"button\"\r\n class=\"ContextMenuMenuItem\"\r\n [class.ContextMenuMenuItem--danger]=\"option.danger\"\r\n [class.ContextMenuMenuItem--disabled]=\"option.disabled\"\r\n [disabled]=\"option.disabled\"\r\n role=\"menuitem\"\r\n (click)=\"selectOption(option)\"\r\n >\r\n <lucide-icon [name]=\"option.icon\" [size]=\"14\"></lucide-icon>\r\n <span>{{ option.name }}</span>\r\n </button>\r\n }\r\n } @else {\r\n <div class=\"ContextMenuInfo\">\r\n <div class=\"ContextMenuInfoHeader\">\r\n <lucide-icon [name]=\"active.info.icon\" [size]=\"14\"></lucide-icon>\r\n <strong>{{ active.info.title }}</strong>\r\n </div>\r\n <p class=\"ContextMenuInfoBody\">{{ active.info.info }}</p>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n}\r\n", styles: [":host{user-select:none;-webkit-user-select:none}.ContextMenuOverlay{position:fixed;inset:5px;pointer-events:none;z-index:10001}.ContextMenuOverlay--compact{inset:0;padding:8px;display:flex;align-items:center;justify-content:center;pointer-events:auto;background:var(--color-scrim)}.ContextMenuOverlay--compact .ContextMenuPanel{position:relative;left:auto;top:auto}.ContextMenuPanel{position:fixed;pointer-events:none;visibility:hidden;opacity:0;min-width:10rem;max-width:min(18rem,100vw - 10px);max-height:calc(100vh - 10px);overflow-x:hidden;overflow-y:auto;background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:0 8px 24px var(--color-shadow);transition:opacity .1s ease-out}.ContextMenuPanel--visible{visibility:visible;opacity:1;pointer-events:auto}.ContextMenuPanel--menu{min-width:220px;max-width:min(280px,100vw - 16px);padding:4px;border-radius:12px;border:1px solid var(--color-border);background:var(--color-surface);box-shadow:0 12px 40px var(--color-shadow),0 0 0 .5px var(--color-border);display:flex;flex-direction:column;gap:2px;animation:cupertino-menu-in .1s ease-out}.ContextMenuMenuTitle{margin:0;padding:4px 8px 2px;font-size:14px;font-weight:400;letter-spacing:.02em;text-transform:uppercase;color:var(--color-fg-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ContextMenuMenuSep{height:1px;margin:2px 4px;background:var(--color-surface-muted, var(--color-border))}.ContextMenuMenuItem{display:flex;align-items:center;gap:8px;width:100%;padding:4px 8px;border:none;border-radius:8px;background:transparent;color:var(--color-fg);font:inherit;font-size:14px;text-align:left;cursor:pointer}.ContextMenuMenuItem lucide-icon{flex-shrink:0;--lucide-stroke: var(--color-icon)}.ContextMenuMenuItem:hover,.ContextMenuMenuItem:focus-visible{outline:none;background:var(--color-info-bg, var(--color-brand-soft, var(--color-surface-muted)))}.ContextMenuMenuItem--danger{color:var(--color-danger-fg)}.ContextMenuMenuItem--danger lucide-icon{--lucide-stroke: var(--color-danger-fg)}.ContextMenuMenuItem--danger:hover,.ContextMenuMenuItem--danger:focus-visible{background:var(--color-danger-bg)}.ContextMenuMenuItem--disabled,.ContextMenuMenuItem:disabled{opacity:.45;cursor:not-allowed;pointer-events:none}.ContextMenuPanel--info{padding:0}.ContextMenuInfo{padding:12px;display:flex;flex-direction:column;gap:8px}.ContextMenuInfoHeader{display:flex;align-items:center;gap:8px;color:var(--color-fg)}.ContextMenuInfoHeader strong{font-size:14px;font-weight:400}.ContextMenuInfoHeader lucide-icon{flex-shrink:0;--lucide-stroke: var(--color-brand)}.ContextMenuInfoBody{margin:0;font-size:14px;line-height:1.45;color:var(--color-fg-secondary)}@keyframes cupertino-menu-in{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: LucideIconComponent, selector: "lucide-icon", inputs: ["name", "size", "spin", "filled"] }] });
13014
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.25", type: ContextMenuServiceComponent, isStandalone: true, selector: "context-menu-service", host: { listeners: { "window:resize": "onWindowResize()", "document:keydown": "onEscape($event)" } }, viewQueries: [{ propertyName: "panelRef", first: true, predicate: ["panel"], descendants: true }], ngImport: i0, template: "@if (active) {\r\n <div\r\n class=\"ContextMenuOverlay\"\r\n [class.ContextMenuOverlay--compact]=\"compact\"\r\n aria-hidden=\"true\"\r\n (click)=\"onBackdropClick($event)\"\r\n >\r\n <div\r\n #panel\r\n class=\"ContextMenuPanel\"\r\n [class.ContextMenuPanel--visible]=\"panelVisible\"\r\n [class.ContextMenuPanel--menu]=\"active.kind === 'menu'\"\r\n [class.ContextMenuPanel--info]=\"active.kind === 'info'\"\r\n [style.left.px]=\"compact ? null : position.x\"\r\n [style.top.px]=\"compact ? null : position.y\"\r\n role=\"menu\"\r\n [attr.aria-label]=\"active.kind === 'info' ? active.info.title : (active.title || 'Opciones')\"\r\n [attr.aria-hidden]=\"!panelVisible\"\r\n (click)=\"$event.stopPropagation()\"\r\n (pointerdown)=\"$event.stopPropagation()\"\r\n (contextmenu)=\"$event.preventDefault()\"\r\n >\r\n @if (active.kind === 'menu') {\r\n @if (active.title) {\r\n <p class=\"ContextMenuMenuTitle\">{{ active.title }}</p>\r\n }\r\n @for (option of active.options; track $index) {\r\n @if (option.separatorBefore) {\r\n <div class=\"ContextMenuMenuSep\" aria-hidden=\"true\"></div>\r\n }\r\n <button\r\n type=\"button\"\r\n class=\"ContextMenuMenuItem\"\r\n [class.ContextMenuMenuItem--danger]=\"option.danger\"\r\n [class.ContextMenuMenuItem--disabled]=\"option.disabled\"\r\n [disabled]=\"option.disabled\"\r\n role=\"menuitem\"\r\n (click)=\"selectOption(option)\"\r\n >\r\n <lucide-icon [name]=\"option.icon\" [size]=\"14\"></lucide-icon>\r\n <span>{{ option.name }}</span>\r\n </button>\r\n }\r\n } @else {\r\n <div class=\"ContextMenuInfo\">\r\n <div class=\"ContextMenuInfoHeader\">\r\n <lucide-icon [name]=\"active.info.icon\" [size]=\"14\"></lucide-icon>\r\n <strong>{{ active.info.title }}</strong>\r\n </div>\r\n <p class=\"ContextMenuInfoBody\">{{ active.info.info }}</p>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n}\r\n", styles: [":host{user-select:none;-webkit-user-select:none}.ContextMenuOverlay{position:fixed;inset:5px;pointer-events:none;z-index:10001}.ContextMenuOverlay--compact{inset:0;padding:8px;display:flex;align-items:center;justify-content:center;pointer-events:auto;background:var(--color-scrim)}.ContextMenuOverlay--compact .ContextMenuPanel{position:relative;left:auto;top:auto}.ContextMenuPanel{position:fixed;pointer-events:none;visibility:hidden;opacity:0;min-width:10rem;max-width:min(18rem,100vw - 10px);max-height:calc(100vh - 10px);overflow-x:hidden;overflow-y:auto;background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:12px;box-shadow:0 8px 24px var(--color-shadow);transition:opacity .1s ease-out}.ContextMenuPanel--visible{visibility:visible;opacity:1;pointer-events:auto}.ContextMenuPanel--menu{min-width:220px;max-width:min(280px,100vw - 16px);padding:4px;border-radius:12px;border:1px solid var(--color-border);background:var(--color-surface);box-shadow:0 12px 40px var(--color-shadow),0 0 0 .5px var(--color-border);display:flex;flex-direction:column;gap:2px;animation:cupertino-menu-in .1s ease-out}.ContextMenuMenuTitle{margin:0;padding:4px 8px 2px;font-size:14px;font-weight:400;letter-spacing:.02em;text-transform:uppercase;color:var(--color-fg-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ContextMenuMenuSep{height:1px;margin:2px 4px;background:var(--color-surface-muted, var(--color-border))}.ContextMenuMenuItem{display:flex;align-items:center;gap:8px;width:100%;padding:4px 8px;border:none;border-radius:8px;background:transparent;color:var(--color-fg);font:inherit;font-size:14px;text-align:left;cursor:pointer}.ContextMenuMenuItem lucide-icon{flex-shrink:0;--lucide-stroke: var(--color-icon)}.ContextMenuMenuItem:hover,.ContextMenuMenuItem:focus-visible{outline:none;background:var(--color-info-bg, var(--color-brand-soft, var(--color-surface-muted)))}.ContextMenuMenuItem--danger{color:var(--color-danger-fg)}.ContextMenuMenuItem--danger lucide-icon{--lucide-stroke: var(--color-danger-fg)}.ContextMenuMenuItem--danger:hover,.ContextMenuMenuItem--danger:focus-visible{background:var(--color-danger-bg)}.ContextMenuMenuItem--disabled,.ContextMenuMenuItem:disabled{opacity:.45;cursor:not-allowed;pointer-events:none}.ContextMenuPanel--info{padding:0}.ContextMenuInfo{padding:12px;display:flex;flex-direction:column;gap:8px}.ContextMenuInfoHeader{display:flex;align-items:center;gap:8px;color:var(--color-fg)}.ContextMenuInfoHeader strong{font-size:14px;font-weight:400}.ContextMenuInfoHeader lucide-icon{flex-shrink:0;--lucide-stroke: var(--color-brand)}.ContextMenuInfoBody{margin:0;font-size:14px;line-height:1.45;color:var(--color-fg-secondary)}@keyframes cupertino-menu-in{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: LucideIconComponent, selector: "lucide-icon", inputs: ["name", "size", "spin", "filled"] }] });
12981
13015
  }
12982
13016
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ContextMenuServiceComponent, decorators: [{
12983
13017
  type: Component,
12984
- args: [{ selector: 'context-menu-service', standalone: true, imports: [CommonModule, LucideIconComponent], template: "@if (active) {\r\n <div\r\n class=\"ContextMenuOverlay\"\r\n [class.ContextMenuOverlay--compact]=\"compact\"\r\n aria-hidden=\"true\"\r\n (click)=\"onBackdropClick($event)\"\r\n >\r\n <div\r\n #panel\r\n class=\"ContextMenuPanel\"\r\n [class.ContextMenuPanel--visible]=\"panelVisible\"\r\n [class.ContextMenuPanel--menu]=\"active.kind === 'menu'\"\r\n [class.ContextMenuPanel--info]=\"active.kind === 'info'\"\r\n [style.left.px]=\"compact ? null : position.x\"\r\n [style.top.px]=\"compact ? null : position.y\"\r\n role=\"menu\"\r\n [attr.aria-label]=\"active.kind === 'info' ? active.info.title : (active.title || 'Opciones')\"\r\n [attr.aria-hidden]=\"!panelVisible\"\r\n (click)=\"$event.stopPropagation()\"\r\n (pointerdown)=\"$event.stopPropagation()\"\r\n (contextmenu)=\"$event.preventDefault()\"\r\n >\r\n @if (active.kind === 'menu') {\r\n @if (active.title) {\r\n <p class=\"ContextMenuMenuTitle\">{{ active.title }}</p>\r\n }\r\n @for (option of active.options; track $index) {\r\n @if (option.separatorBefore) {\r\n <div class=\"ContextMenuMenuSep\" aria-hidden=\"true\"></div>\r\n }\r\n <button\r\n type=\"button\"\r\n class=\"ContextMenuMenuItem\"\r\n [class.ContextMenuMenuItem--danger]=\"option.danger\"\r\n [class.ContextMenuMenuItem--disabled]=\"option.disabled\"\r\n [disabled]=\"option.disabled\"\r\n role=\"menuitem\"\r\n (click)=\"selectOption(option)\"\r\n >\r\n <lucide-icon [name]=\"option.icon\" [size]=\"14\"></lucide-icon>\r\n <span>{{ option.name }}</span>\r\n </button>\r\n }\r\n } @else {\r\n <div class=\"ContextMenuInfo\">\r\n <div class=\"ContextMenuInfoHeader\">\r\n <lucide-icon [name]=\"active.info.icon\" [size]=\"14\"></lucide-icon>\r\n <strong>{{ active.info.title }}</strong>\r\n </div>\r\n <p class=\"ContextMenuInfoBody\">{{ active.info.info }}</p>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n}\r\n", styles: [":host{user-select:none;-webkit-user-select:none}.ContextMenuOverlay{position:fixed;inset:5px;pointer-events:none;z-index:10001}.ContextMenuOverlay--compact{inset:0;padding:8px;display:flex;align-items:center;justify-content:center;pointer-events:auto;background:var(--color-scrim)}.ContextMenuOverlay--compact .ContextMenuPanel{position:relative;left:auto;top:auto}.ContextMenuPanel{position:fixed;pointer-events:none;visibility:hidden;opacity:0;min-width:10rem;max-width:min(18rem,100vw - 10px);max-height:calc(100vh - 10px);overflow-x:hidden;overflow-y:auto;background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:0 8px 24px var(--color-shadow);transition:opacity .1s ease-out}.ContextMenuPanel--visible{visibility:visible;opacity:1;pointer-events:auto}.ContextMenuPanel--menu{min-width:220px;max-width:min(280px,100vw - 16px);padding:4px;border-radius:12px;border:1px solid var(--color-border);background:var(--color-surface);box-shadow:0 12px 40px var(--color-shadow),0 0 0 .5px var(--color-border);display:flex;flex-direction:column;gap:2px;animation:cupertino-menu-in .1s ease-out}.ContextMenuMenuTitle{margin:0;padding:4px 8px 2px;font-size:14px;font-weight:400;letter-spacing:.02em;text-transform:uppercase;color:var(--color-fg-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ContextMenuMenuSep{height:1px;margin:2px 4px;background:var(--color-surface-muted, var(--color-border))}.ContextMenuMenuItem{display:flex;align-items:center;gap:8px;width:100%;padding:4px 8px;border:none;border-radius:8px;background:transparent;color:var(--color-fg);font:inherit;font-size:14px;text-align:left;cursor:pointer}.ContextMenuMenuItem lucide-icon{flex-shrink:0;--lucide-stroke: var(--color-icon)}.ContextMenuMenuItem:hover,.ContextMenuMenuItem:focus-visible{outline:none;background:var(--color-info-bg, var(--color-brand-soft, var(--color-surface-muted)))}.ContextMenuMenuItem--danger{color:var(--color-danger-fg)}.ContextMenuMenuItem--danger lucide-icon{--lucide-stroke: var(--color-danger-fg)}.ContextMenuMenuItem--danger:hover,.ContextMenuMenuItem--danger:focus-visible{background:var(--color-danger-bg)}.ContextMenuMenuItem--disabled,.ContextMenuMenuItem:disabled{opacity:.45;cursor:not-allowed;pointer-events:none}.ContextMenuPanel--info{padding:0}.ContextMenuInfo{padding:12px;display:flex;flex-direction:column;gap:8px}.ContextMenuInfoHeader{display:flex;align-items:center;gap:8px;color:var(--color-fg)}.ContextMenuInfoHeader strong{font-size:14px;font-weight:400}.ContextMenuInfoHeader lucide-icon{flex-shrink:0;--lucide-stroke: var(--color-brand)}.ContextMenuInfoBody{margin:0;font-size:14px;line-height:1.45;color:var(--color-fg-secondary)}@keyframes cupertino-menu-in{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}\n"] }]
13018
+ args: [{ selector: 'context-menu-service', standalone: true, imports: [CommonModule, LucideIconComponent], template: "@if (active) {\r\n <div\r\n class=\"ContextMenuOverlay\"\r\n [class.ContextMenuOverlay--compact]=\"compact\"\r\n aria-hidden=\"true\"\r\n (click)=\"onBackdropClick($event)\"\r\n >\r\n <div\r\n #panel\r\n class=\"ContextMenuPanel\"\r\n [class.ContextMenuPanel--visible]=\"panelVisible\"\r\n [class.ContextMenuPanel--menu]=\"active.kind === 'menu'\"\r\n [class.ContextMenuPanel--info]=\"active.kind === 'info'\"\r\n [style.left.px]=\"compact ? null : position.x\"\r\n [style.top.px]=\"compact ? null : position.y\"\r\n role=\"menu\"\r\n [attr.aria-label]=\"active.kind === 'info' ? active.info.title : (active.title || 'Opciones')\"\r\n [attr.aria-hidden]=\"!panelVisible\"\r\n (click)=\"$event.stopPropagation()\"\r\n (pointerdown)=\"$event.stopPropagation()\"\r\n (contextmenu)=\"$event.preventDefault()\"\r\n >\r\n @if (active.kind === 'menu') {\r\n @if (active.title) {\r\n <p class=\"ContextMenuMenuTitle\">{{ active.title }}</p>\r\n }\r\n @for (option of active.options; track $index) {\r\n @if (option.separatorBefore) {\r\n <div class=\"ContextMenuMenuSep\" aria-hidden=\"true\"></div>\r\n }\r\n <button\r\n type=\"button\"\r\n class=\"ContextMenuMenuItem\"\r\n [class.ContextMenuMenuItem--danger]=\"option.danger\"\r\n [class.ContextMenuMenuItem--disabled]=\"option.disabled\"\r\n [disabled]=\"option.disabled\"\r\n role=\"menuitem\"\r\n (click)=\"selectOption(option)\"\r\n >\r\n <lucide-icon [name]=\"option.icon\" [size]=\"14\"></lucide-icon>\r\n <span>{{ option.name }}</span>\r\n </button>\r\n }\r\n } @else {\r\n <div class=\"ContextMenuInfo\">\r\n <div class=\"ContextMenuInfoHeader\">\r\n <lucide-icon [name]=\"active.info.icon\" [size]=\"14\"></lucide-icon>\r\n <strong>{{ active.info.title }}</strong>\r\n </div>\r\n <p class=\"ContextMenuInfoBody\">{{ active.info.info }}</p>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n}\r\n", styles: [":host{user-select:none;-webkit-user-select:none}.ContextMenuOverlay{position:fixed;inset:5px;pointer-events:none;z-index:10001}.ContextMenuOverlay--compact{inset:0;padding:8px;display:flex;align-items:center;justify-content:center;pointer-events:auto;background:var(--color-scrim)}.ContextMenuOverlay--compact .ContextMenuPanel{position:relative;left:auto;top:auto}.ContextMenuPanel{position:fixed;pointer-events:none;visibility:hidden;opacity:0;min-width:10rem;max-width:min(18rem,100vw - 10px);max-height:calc(100vh - 10px);overflow-x:hidden;overflow-y:auto;background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:12px;box-shadow:0 8px 24px var(--color-shadow);transition:opacity .1s ease-out}.ContextMenuPanel--visible{visibility:visible;opacity:1;pointer-events:auto}.ContextMenuPanel--menu{min-width:220px;max-width:min(280px,100vw - 16px);padding:4px;border-radius:12px;border:1px solid var(--color-border);background:var(--color-surface);box-shadow:0 12px 40px var(--color-shadow),0 0 0 .5px var(--color-border);display:flex;flex-direction:column;gap:2px;animation:cupertino-menu-in .1s ease-out}.ContextMenuMenuTitle{margin:0;padding:4px 8px 2px;font-size:14px;font-weight:400;letter-spacing:.02em;text-transform:uppercase;color:var(--color-fg-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ContextMenuMenuSep{height:1px;margin:2px 4px;background:var(--color-surface-muted, var(--color-border))}.ContextMenuMenuItem{display:flex;align-items:center;gap:8px;width:100%;padding:4px 8px;border:none;border-radius:8px;background:transparent;color:var(--color-fg);font:inherit;font-size:14px;text-align:left;cursor:pointer}.ContextMenuMenuItem lucide-icon{flex-shrink:0;--lucide-stroke: var(--color-icon)}.ContextMenuMenuItem:hover,.ContextMenuMenuItem:focus-visible{outline:none;background:var(--color-info-bg, var(--color-brand-soft, var(--color-surface-muted)))}.ContextMenuMenuItem--danger{color:var(--color-danger-fg)}.ContextMenuMenuItem--danger lucide-icon{--lucide-stroke: var(--color-danger-fg)}.ContextMenuMenuItem--danger:hover,.ContextMenuMenuItem--danger:focus-visible{background:var(--color-danger-bg)}.ContextMenuMenuItem--disabled,.ContextMenuMenuItem:disabled{opacity:.45;cursor:not-allowed;pointer-events:none}.ContextMenuPanel--info{padding:0}.ContextMenuInfo{padding:12px;display:flex;flex-direction:column;gap:8px}.ContextMenuInfoHeader{display:flex;align-items:center;gap:8px;color:var(--color-fg)}.ContextMenuInfoHeader strong{font-size:14px;font-weight:400}.ContextMenuInfoHeader lucide-icon{flex-shrink:0;--lucide-stroke: var(--color-brand)}.ContextMenuInfoBody{margin:0;font-size:14px;line-height:1.45;color:var(--color-fg-secondary)}@keyframes cupertino-menu-in{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}\n"] }]
12985
13019
  }], ctorParameters: () => [{ type: ContextMenuService }, { type: undefined, decorators: [{
12986
13020
  type: Inject,
12987
13021
  args: [PLATFORM_ID]