@xosue-utils/inputs 0.1.9 → 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.
- package/fesm2022/xosue-utils-inputs.mjs +314 -288
- package/fesm2022/xosue-utils-inputs.mjs.map +1 -1
- package/lib/index.d.ts +1 -1
- package/lib/multiselect-combobox/multiselect-combobox.component.d.ts +0 -13
- package/lib/multiselect-combobox/services/multiselect-combobox-modal/multiselect-combobox-modal-service.component.d.ts +5 -2
- package/lib/only-select/only-select.component.d.ts +0 -13
- package/lib/only-select/services/only-select-modal/only-select-modal-service.component.d.ts +5 -2
- package/lib/overlay-search-chrome.d.ts +11 -0
- package/lib/phone-entry/services/phone-entry-modal/phone-entry-modal-service.component.d.ts +5 -2
- package/lib/search-entry/services/search-entry-modal/search-entry-modal-service.component.d.ts +5 -2
- package/lib/select-search.util.d.ts +9 -0
- package/package.json +1 -1
|
@@ -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
|
|
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
|
|
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:
|
|
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:
|
|
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:
|
|
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:
|
|
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,6 +5365,43 @@ 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)
|
|
@@ -5473,48 +5510,27 @@ class OnlySelectComponent {
|
|
|
5473
5510
|
// LIFE CYCLE HOOKS (Ciclo de vida del componente)
|
|
5474
5511
|
// ============================================================================
|
|
5475
5512
|
ngOnInit() {
|
|
5476
|
-
|
|
5477
|
-
|
|
5478
|
-
|
|
5479
|
-
|
|
5480
|
-
|
|
5481
|
-
|
|
5482
|
-
|
|
5483
|
-
|
|
5484
|
-
|
|
5485
|
-
|
|
5486
|
-
|
|
5487
|
-
|
|
5488
|
-
|
|
5489
|
-
|
|
5490
|
-
|
|
5491
|
-
|
|
5492
|
-
|
|
5493
|
-
|
|
5494
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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)
|
|
@@ -5805,7 +5773,7 @@ class OnlySelectComponent {
|
|
|
5805
5773
|
useExisting: forwardRef(() => OnlySelectComponent), // Utilizamos forwardRef para evitar problemas con el ciclo de vida de Angular
|
|
5806
5774
|
multi: true, // Necesario para que se pueda usar con múltiples componentes
|
|
5807
5775
|
},
|
|
5808
|
-
], 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 });
|
|
5809
5777
|
}
|
|
5810
5778
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: OnlySelectComponent, decorators: [{
|
|
5811
5779
|
type: Component,
|
|
@@ -5820,7 +5788,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
|
|
|
5820
5788
|
useExisting: forwardRef(() => OnlySelectComponent), // Utilizamos forwardRef para evitar problemas con el ciclo de vida de Angular
|
|
5821
5789
|
multi: true, // Necesario para que se pueda usar con múltiples componentes
|
|
5822
5790
|
},
|
|
5823
|
-
], 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"] }]
|
|
5824
5792
|
}], propDecorators: { label: [{
|
|
5825
5793
|
type: Input
|
|
5826
5794
|
}], description: [{
|
|
@@ -6079,40 +6047,44 @@ class MultiselectComboboxComponent {
|
|
|
6079
6047
|
this.cdr.markForCheck();
|
|
6080
6048
|
});
|
|
6081
6049
|
}
|
|
6082
|
-
|
|
6083
|
-
|
|
6084
|
-
|
|
6085
|
-
|
|
6086
|
-
|
|
6087
|
-
|
|
6088
|
-
|
|
6089
|
-
|
|
6090
|
-
|
|
6091
|
-
|
|
6092
|
-
}
|
|
6093
|
-
this.isSearching = true;
|
|
6094
|
-
this.syncModalView();
|
|
6095
|
-
this.cdr.markForCheck();
|
|
6096
|
-
if (!this.http) {
|
|
6097
|
-
return of([]);
|
|
6098
|
-
}
|
|
6099
|
-
return this.http
|
|
6100
|
-
.get(this.buildApiUrl(normalizedQuery), {
|
|
6101
|
-
headers: this.getAuthHeaders(),
|
|
6102
|
-
})
|
|
6103
|
-
.pipe(catchError((err) => {
|
|
6104
|
-
console.error('API search error:', err);
|
|
6105
|
-
return of([]);
|
|
6106
|
-
}));
|
|
6107
|
-
}))
|
|
6108
|
-
.subscribe((results) => {
|
|
6109
|
-
this.filteredOptions = results;
|
|
6110
|
-
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) {
|
|
6111
6060
|
this.isSearching = false;
|
|
6061
|
+
this.filteredOptions = [];
|
|
6112
6062
|
this.syncModalView();
|
|
6113
6063
|
this.cdr.markForCheck();
|
|
6114
|
-
|
|
6115
|
-
|
|
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
|
+
});
|
|
6116
6088
|
if (this.api) {
|
|
6117
6089
|
this.apiReady = true;
|
|
6118
6090
|
if (this.pendingValues?.length) {
|
|
@@ -6151,70 +6123,22 @@ class MultiselectComboboxComponent {
|
|
|
6151
6123
|
onSearchChange(e) {
|
|
6152
6124
|
const query = e.target?.value ?? '';
|
|
6153
6125
|
this.searchQuery = query;
|
|
6154
|
-
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();
|
|
6155
6133
|
return;
|
|
6156
|
-
|
|
6134
|
+
}
|
|
6135
|
+
this.filteredOptions = this.filterLocalOptions(query);
|
|
6136
|
+
this.isSearching = false;
|
|
6157
6137
|
this.syncModalView();
|
|
6138
|
+
this.cdr.markForCheck();
|
|
6158
6139
|
}
|
|
6159
|
-
/**
|
|
6160
|
-
* Filtra opciones locales (método auxiliar para búsqueda con debounce)
|
|
6161
|
-
*/
|
|
6162
6140
|
filterLocalOptions(query) {
|
|
6163
|
-
|
|
6164
|
-
if (!normalizedQuery) {
|
|
6165
|
-
return [...this.internalOptions];
|
|
6166
|
-
}
|
|
6167
|
-
// Reordenar por relevancia
|
|
6168
|
-
return [...this.internalOptions]
|
|
6169
|
-
.map((option) => ({
|
|
6170
|
-
option,
|
|
6171
|
-
score: this.calculateRelevanceScore(option, normalizedQuery),
|
|
6172
|
-
}))
|
|
6173
|
-
.sort((a, b) => b.score - a.score)
|
|
6174
|
-
.map((item) => item.option);
|
|
6175
|
-
}
|
|
6176
|
-
/**
|
|
6177
|
-
* Calcula un score de relevancia para una opción basado en la búsqueda.
|
|
6178
|
-
* - Score más alto = mejor coincidencia
|
|
6179
|
-
* - Coincidencia exacta: 100
|
|
6180
|
-
* - Comienza con la búsqueda: 80
|
|
6181
|
-
* - Contiene la búsqueda: 60
|
|
6182
|
-
* - Coincidencia en descripción: 40
|
|
6183
|
-
* - Sin coincidencia: 0
|
|
6184
|
-
*/
|
|
6185
|
-
calculateRelevanceScore(option, query) {
|
|
6186
|
-
const normalizedQuery = query.toLowerCase().trim();
|
|
6187
|
-
if (!normalizedQuery)
|
|
6188
|
-
return 50; // Sin búsqueda, score neutral
|
|
6189
|
-
const name = option.name.toLowerCase();
|
|
6190
|
-
const description = (option.description || '').toLowerCase();
|
|
6191
|
-
let score = 0;
|
|
6192
|
-
// Coincidencia exacta (mayor prioridad)
|
|
6193
|
-
if (name === normalizedQuery) {
|
|
6194
|
-
score = 100;
|
|
6195
|
-
}
|
|
6196
|
-
// Comienza con la búsqueda (alta prioridad)
|
|
6197
|
-
else if (name.startsWith(normalizedQuery)) {
|
|
6198
|
-
score = 80;
|
|
6199
|
-
}
|
|
6200
|
-
// Contiene la búsqueda en el nombre (media prioridad)
|
|
6201
|
-
else if (name.includes(normalizedQuery)) {
|
|
6202
|
-
score = 60;
|
|
6203
|
-
// Bonificación si está al principio de una palabra
|
|
6204
|
-
const words = name.split(/\s+/);
|
|
6205
|
-
if (words.some((word) => word.startsWith(normalizedQuery))) {
|
|
6206
|
-
score += 10;
|
|
6207
|
-
}
|
|
6208
|
-
}
|
|
6209
|
-
// Coincidencia en descripción (baja prioridad)
|
|
6210
|
-
else if (description.includes(normalizedQuery)) {
|
|
6211
|
-
score = 40;
|
|
6212
|
-
}
|
|
6213
|
-
// Sin coincidencia
|
|
6214
|
-
else {
|
|
6215
|
-
score = 0;
|
|
6216
|
-
}
|
|
6217
|
-
return score;
|
|
6141
|
+
return filterSelectOptions(this.internalOptions, query);
|
|
6218
6142
|
}
|
|
6219
6143
|
// ============================================================================
|
|
6220
6144
|
// API HANDLERS (Manejadores de API)
|
|
@@ -6365,12 +6289,26 @@ class MultiselectComboboxComponent {
|
|
|
6365
6289
|
* @param event Evento del mouse (opcional).
|
|
6366
6290
|
*/
|
|
6367
6291
|
manualClick(event) {
|
|
6368
|
-
event?.stopPropagation();
|
|
6292
|
+
event?.stopPropagation();
|
|
6369
6293
|
if (this.isDisabled)
|
|
6370
6294
|
return;
|
|
6371
|
-
// Si el dropdown está cerrado, abrirlo
|
|
6372
6295
|
if (!this.isOpenOptions) {
|
|
6373
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();
|
|
6374
6312
|
this.cdr.markForCheck();
|
|
6375
6313
|
}
|
|
6376
6314
|
}
|
|
@@ -6381,7 +6319,7 @@ class MultiselectComboboxComponent {
|
|
|
6381
6319
|
useExisting: forwardRef(() => MultiselectComboboxComponent),
|
|
6382
6320
|
multi: true,
|
|
6383
6321
|
},
|
|
6384
|
-
], 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 });
|
|
6385
6323
|
}
|
|
6386
6324
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: MultiselectComboboxComponent, decorators: [{
|
|
6387
6325
|
type: Component,
|
|
@@ -6393,7 +6331,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
|
|
|
6393
6331
|
useExisting: forwardRef(() => MultiselectComboboxComponent),
|
|
6394
6332
|
multi: true,
|
|
6395
6333
|
},
|
|
6396
|
-
], 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"] }]
|
|
6397
6335
|
}], propDecorators: { label: [{
|
|
6398
6336
|
type: Input
|
|
6399
6337
|
}], description: [{
|
|
@@ -6546,7 +6484,7 @@ class BooleanEntryComponent {
|
|
|
6546
6484
|
useExisting: forwardRef(() => BooleanEntryComponent),
|
|
6547
6485
|
multi: true,
|
|
6548
6486
|
},
|
|
6549
|
-
], 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:
|
|
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"] }] });
|
|
6550
6488
|
}
|
|
6551
6489
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: BooleanEntryComponent, decorators: [{
|
|
6552
6490
|
type: Component,
|
|
@@ -6556,7 +6494,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
|
|
|
6556
6494
|
useExisting: forwardRef(() => BooleanEntryComponent),
|
|
6557
6495
|
multi: true,
|
|
6558
6496
|
},
|
|
6559
|
-
], 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:
|
|
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"] }]
|
|
6560
6498
|
}], propDecorators: { label: [{
|
|
6561
6499
|
type: Input
|
|
6562
6500
|
}], description: [{
|
|
@@ -6666,7 +6604,7 @@ class MultichoiceEntryComponent {
|
|
|
6666
6604
|
useExisting: forwardRef(() => MultichoiceEntryComponent),
|
|
6667
6605
|
multi: true,
|
|
6668
6606
|
},
|
|
6669
|
-
], 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:
|
|
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 }] });
|
|
6670
6608
|
}
|
|
6671
6609
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: MultichoiceEntryComponent, decorators: [{
|
|
6672
6610
|
type: Component,
|
|
@@ -6676,7 +6614,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
|
|
|
6676
6614
|
useExisting: forwardRef(() => MultichoiceEntryComponent),
|
|
6677
6615
|
multi: true,
|
|
6678
6616
|
},
|
|
6679
|
-
], 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:
|
|
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"] }]
|
|
6680
6618
|
}], propDecorators: { label: [{
|
|
6681
6619
|
type: Input
|
|
6682
6620
|
}], description: [{
|
|
@@ -6768,7 +6706,7 @@ class OnlychoiceEntryComponent {
|
|
|
6768
6706
|
useExisting: forwardRef(() => OnlychoiceEntryComponent),
|
|
6769
6707
|
multi: true,
|
|
6770
6708
|
},
|
|
6771
|
-
], 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 }] });
|
|
6772
6710
|
}
|
|
6773
6711
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: OnlychoiceEntryComponent, decorators: [{
|
|
6774
6712
|
type: Component,
|
|
@@ -6778,7 +6716,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
|
|
|
6778
6716
|
useExisting: forwardRef(() => OnlychoiceEntryComponent),
|
|
6779
6717
|
multi: true,
|
|
6780
6718
|
},
|
|
6781
|
-
], 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"] }]
|
|
6782
6720
|
}], propDecorators: { label: [{
|
|
6783
6721
|
type: Input
|
|
6784
6722
|
}], description: [{
|
|
@@ -7070,7 +7008,7 @@ class SwitchEntryComponent {
|
|
|
7070
7008
|
useExisting: SwitchEntryComponent,
|
|
7071
7009
|
multi: true,
|
|
7072
7010
|
},
|
|
7073
|
-
], 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"] }] });
|
|
7074
7012
|
}
|
|
7075
7013
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SwitchEntryComponent, decorators: [{
|
|
7076
7014
|
type: Component,
|
|
@@ -7080,7 +7018,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
|
|
|
7080
7018
|
useExisting: SwitchEntryComponent,
|
|
7081
7019
|
multi: true,
|
|
7082
7020
|
},
|
|
7083
|
-
], 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"] }]
|
|
7084
7022
|
}], propDecorators: { label: [{
|
|
7085
7023
|
type: Input
|
|
7086
7024
|
}], description: [{
|
|
@@ -7713,7 +7651,7 @@ class PhoneEntryComponent {
|
|
|
7713
7651
|
* @param query Texto de búsqueda.
|
|
7714
7652
|
*/
|
|
7715
7653
|
applySearch(query) {
|
|
7716
|
-
const normalizedQuery = query
|
|
7654
|
+
const normalizedQuery = foldSearchText(query);
|
|
7717
7655
|
if (!normalizedQuery) {
|
|
7718
7656
|
// Sin búsqueda: mostrar todos ordenados por número (menor a mayor)
|
|
7719
7657
|
this.filteredCountries = [...this.countries].sort((a, b) => {
|
|
@@ -7724,12 +7662,12 @@ class PhoneEntryComponent {
|
|
|
7724
7662
|
this.syncModalView();
|
|
7725
7663
|
return;
|
|
7726
7664
|
}
|
|
7727
|
-
// Con búsqueda: reordenar por relevancia
|
|
7728
7665
|
this.filteredCountries = [...this.countries]
|
|
7729
7666
|
.map((country) => ({
|
|
7730
7667
|
country,
|
|
7731
7668
|
score: this.calculateRelevanceScore(country, normalizedQuery),
|
|
7732
7669
|
}))
|
|
7670
|
+
.filter((item) => item.score > 0)
|
|
7733
7671
|
.sort((a, b) => b.score - a.score)
|
|
7734
7672
|
.map((item) => item.country);
|
|
7735
7673
|
this.syncModalView();
|
|
@@ -7743,9 +7681,9 @@ class PhoneEntryComponent {
|
|
|
7743
7681
|
*/
|
|
7744
7682
|
calculateRelevanceScore(country, query) {
|
|
7745
7683
|
let score = 0;
|
|
7746
|
-
const lowerCaseName = country.name
|
|
7684
|
+
const lowerCaseName = foldSearchText(country.name);
|
|
7747
7685
|
const prefixNumber = country.prefix.replace('+', '');
|
|
7748
|
-
const lowerCasePrefix = country.prefix
|
|
7686
|
+
const lowerCasePrefix = foldSearchText(country.prefix);
|
|
7749
7687
|
// Coincidencia exacta en nombre
|
|
7750
7688
|
if (lowerCaseName === query) {
|
|
7751
7689
|
score += 100;
|
|
@@ -7872,7 +7810,7 @@ class PhoneEntryComponent {
|
|
|
7872
7810
|
useExisting: forwardRef(() => PhoneEntryComponent),
|
|
7873
7811
|
multi: true,
|
|
7874
7812
|
},
|
|
7875
|
-
], 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
|
|
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"] }] });
|
|
7876
7814
|
}
|
|
7877
7815
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: PhoneEntryComponent, decorators: [{
|
|
7878
7816
|
type: Component,
|
|
@@ -7884,7 +7822,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
|
|
|
7884
7822
|
useExisting: forwardRef(() => PhoneEntryComponent),
|
|
7885
7823
|
multi: true,
|
|
7886
7824
|
},
|
|
7887
|
-
], 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
|
|
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"] }]
|
|
7888
7826
|
}], ctorParameters: () => [], propDecorators: { label: [{
|
|
7889
7827
|
type: Input
|
|
7890
7828
|
}], opcional: [{
|
|
@@ -8137,7 +8075,7 @@ class ColorPickerComponent {
|
|
|
8137
8075
|
useExisting: forwardRef(() => ColorPickerComponent),
|
|
8138
8076
|
multi: true,
|
|
8139
8077
|
},
|
|
8140
|
-
], 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"] }] });
|
|
8141
8079
|
}
|
|
8142
8080
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ColorPickerComponent, decorators: [{
|
|
8143
8081
|
type: Component,
|
|
@@ -8147,7 +8085,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
|
|
|
8147
8085
|
useExisting: forwardRef(() => ColorPickerComponent),
|
|
8148
8086
|
multi: true,
|
|
8149
8087
|
},
|
|
8150
|
-
], 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"] }]
|
|
8151
8089
|
}], propDecorators: { label: [{
|
|
8152
8090
|
type: Input
|
|
8153
8091
|
}], description: [{
|
|
@@ -8324,7 +8262,7 @@ class OtpEntryComponent {
|
|
|
8324
8262
|
useExisting: forwardRef(() => OtpEntryComponent),
|
|
8325
8263
|
multi: true,
|
|
8326
8264
|
},
|
|
8327
|
-
], 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:
|
|
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 }] });
|
|
8328
8266
|
}
|
|
8329
8267
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: OtpEntryComponent, decorators: [{
|
|
8330
8268
|
type: Component,
|
|
@@ -8334,7 +8272,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
|
|
|
8334
8272
|
useExisting: forwardRef(() => OtpEntryComponent),
|
|
8335
8273
|
multi: true,
|
|
8336
8274
|
},
|
|
8337
|
-
], 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:
|
|
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"] }]
|
|
8338
8276
|
}], propDecorators: { length: [{
|
|
8339
8277
|
type: Input
|
|
8340
8278
|
}], label: [{
|
|
@@ -9554,7 +9492,7 @@ class RichTextEntryComponent {
|
|
|
9554
9492
|
useExisting: forwardRef(() => RichTextEntryComponent),
|
|
9555
9493
|
multi: true,
|
|
9556
9494
|
},
|
|
9557
|
-
], 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"] }] });
|
|
9558
9496
|
}
|
|
9559
9497
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: RichTextEntryComponent, decorators: [{
|
|
9560
9498
|
type: Component,
|
|
@@ -9566,7 +9504,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
|
|
|
9566
9504
|
useExisting: forwardRef(() => RichTextEntryComponent),
|
|
9567
9505
|
multi: true,
|
|
9568
9506
|
},
|
|
9569
|
-
], 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"] }]
|
|
9570
9508
|
}], propDecorators: { label: [{
|
|
9571
9509
|
type: Input
|
|
9572
9510
|
}], opcional: [{
|
|
@@ -9836,7 +9774,7 @@ class SignatureEntryComponent {
|
|
|
9836
9774
|
useExisting: forwardRef(() => SignatureEntryComponent),
|
|
9837
9775
|
multi: true,
|
|
9838
9776
|
},
|
|
9839
|
-
], 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:
|
|
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"] }] });
|
|
9840
9778
|
}
|
|
9841
9779
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SignatureEntryComponent, decorators: [{
|
|
9842
9780
|
type: Component,
|
|
@@ -9848,7 +9786,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
|
|
|
9848
9786
|
useExisting: forwardRef(() => SignatureEntryComponent),
|
|
9849
9787
|
multi: true,
|
|
9850
9788
|
},
|
|
9851
|
-
], 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:
|
|
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"] }]
|
|
9852
9790
|
}], propDecorators: { label: [{
|
|
9853
9791
|
type: Input
|
|
9854
9792
|
}], opcional: [{
|
|
@@ -11653,7 +11591,7 @@ class MediaEntryComponent {
|
|
|
11653
11591
|
useExisting: forwardRef(() => MediaEntryComponent),
|
|
11654
11592
|
multi: true,
|
|
11655
11593
|
},
|
|
11656
|
-
], 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" }] });
|
|
11657
11595
|
}
|
|
11658
11596
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: MediaEntryComponent, decorators: [{
|
|
11659
11597
|
type: Component,
|
|
@@ -11667,7 +11605,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImpo
|
|
|
11667
11605
|
useExisting: forwardRef(() => MediaEntryComponent),
|
|
11668
11606
|
multi: true,
|
|
11669
11607
|
},
|
|
11670
|
-
], 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"] }]
|
|
11671
11609
|
}], propDecorators: { label: [{
|
|
11672
11610
|
type: Input
|
|
11673
11611
|
}], opcional: [{
|
|
@@ -11807,28 +11745,89 @@ function parseContentRangeTotal(value) {
|
|
|
11807
11745
|
return match ? parseSizeHeader(match[1]) : null;
|
|
11808
11746
|
}
|
|
11809
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
|
+
|
|
11810
11801
|
class OnlySelectModalServiceComponent {
|
|
11811
11802
|
onlySelectModal;
|
|
11812
11803
|
cdr;
|
|
11813
11804
|
vm$;
|
|
11814
11805
|
sub;
|
|
11806
|
+
host = inject((ElementRef));
|
|
11807
|
+
chrome = new OverlaySearchChrome();
|
|
11815
11808
|
constructor(onlySelectModal, cdr) {
|
|
11816
11809
|
this.onlySelectModal = onlySelectModal;
|
|
11817
11810
|
this.cdr = cdr;
|
|
11818
11811
|
this.vm$ = this.onlySelectModal.state$;
|
|
11819
11812
|
}
|
|
11820
11813
|
ngOnInit() {
|
|
11821
|
-
this.sub = this.onlySelectModal.state$.subscribe(() =>
|
|
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);
|
|
11822
11821
|
}
|
|
11823
11822
|
ngOnDestroy() {
|
|
11824
11823
|
this.sub?.unsubscribe();
|
|
11825
11824
|
}
|
|
11826
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 });
|
|
11827
|
-
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:block;position:relative;z-index:10050;width:0;height:0;overflow:visible;pointer-events:none;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:
|
|
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"] }] });
|
|
11828
11827
|
}
|
|
11829
11828
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: OnlySelectModalServiceComponent, decorators: [{
|
|
11830
11829
|
type: Component,
|
|
11831
|
-
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:block;position:relative;z-index:10050;width:0;height:0;overflow:visible;pointer-events:none;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:
|
|
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"] }]
|
|
11832
11831
|
}], ctorParameters: () => [{ type: OnlySelectModalService }, { type: i0.ChangeDetectorRef }] });
|
|
11833
11832
|
|
|
11834
11833
|
class MultiselectComboboxModalServiceComponent {
|
|
@@ -11836,13 +11835,21 @@ class MultiselectComboboxModalServiceComponent {
|
|
|
11836
11835
|
cdr;
|
|
11837
11836
|
vm$;
|
|
11838
11837
|
sub;
|
|
11838
|
+
host = inject((ElementRef));
|
|
11839
|
+
chrome = new OverlaySearchChrome();
|
|
11839
11840
|
constructor(multiselectModal, cdr) {
|
|
11840
11841
|
this.multiselectModal = multiselectModal;
|
|
11841
11842
|
this.cdr = cdr;
|
|
11842
11843
|
this.vm$ = this.multiselectModal.state$;
|
|
11843
11844
|
}
|
|
11844
11845
|
ngOnInit() {
|
|
11845
|
-
this.sub = this.multiselectModal.state$.subscribe(() =>
|
|
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);
|
|
11846
11853
|
}
|
|
11847
11854
|
ngOnDestroy() {
|
|
11848
11855
|
this.sub?.unsubscribe();
|
|
@@ -11851,11 +11858,11 @@ class MultiselectComboboxModalServiceComponent {
|
|
|
11851
11858
|
return selected.some((o) => o.value === option.value);
|
|
11852
11859
|
}
|
|
11853
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 });
|
|
11854
|
-
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:block;position:relative;z-index:10050;width:0;height:0;overflow:visible;pointer-events:none;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: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"] }] });
|
|
11855
11862
|
}
|
|
11856
11863
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: MultiselectComboboxModalServiceComponent, decorators: [{
|
|
11857
11864
|
type: Component,
|
|
11858
|
-
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:block;position:relative;z-index:10050;width:0;height:0;overflow:visible;pointer-events:none;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: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"] }]
|
|
11859
11866
|
}], ctorParameters: () => [{ type: MultiselectComboboxModalService }, { type: i0.ChangeDetectorRef }] });
|
|
11860
11867
|
|
|
11861
11868
|
class SearchEntryModalServiceComponent {
|
|
@@ -11863,23 +11870,31 @@ class SearchEntryModalServiceComponent {
|
|
|
11863
11870
|
cdr;
|
|
11864
11871
|
vm$;
|
|
11865
11872
|
sub;
|
|
11873
|
+
host = inject((ElementRef));
|
|
11874
|
+
chrome = new OverlaySearchChrome();
|
|
11866
11875
|
constructor(searchEntryModal, cdr) {
|
|
11867
11876
|
this.searchEntryModal = searchEntryModal;
|
|
11868
11877
|
this.cdr = cdr;
|
|
11869
11878
|
this.vm$ = this.searchEntryModal.state$;
|
|
11870
11879
|
}
|
|
11871
11880
|
ngOnInit() {
|
|
11872
|
-
this.sub = this.searchEntryModal.state$.subscribe(() =>
|
|
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);
|
|
11873
11888
|
}
|
|
11874
11889
|
ngOnDestroy() {
|
|
11875
11890
|
this.sub?.unsubscribe();
|
|
11876
11891
|
}
|
|
11877
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 });
|
|
11878
|
-
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:block;position:relative;z-index:10050;width:0;height:0;overflow:visible;pointer-events:none;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: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"] }] });
|
|
11879
11894
|
}
|
|
11880
11895
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: SearchEntryModalServiceComponent, decorators: [{
|
|
11881
11896
|
type: Component,
|
|
11882
|
-
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:block;position:relative;z-index:10050;width:0;height:0;overflow:visible;pointer-events:none;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: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"] }]
|
|
11883
11898
|
}], ctorParameters: () => [{ type: SearchEntryModalService }, { type: i0.ChangeDetectorRef }] });
|
|
11884
11899
|
|
|
11885
11900
|
class PhoneEntryModalServiceComponent {
|
|
@@ -11887,23 +11902,31 @@ class PhoneEntryModalServiceComponent {
|
|
|
11887
11902
|
cdr;
|
|
11888
11903
|
vm$;
|
|
11889
11904
|
sub;
|
|
11905
|
+
host = inject((ElementRef));
|
|
11906
|
+
chrome = new OverlaySearchChrome();
|
|
11890
11907
|
constructor(phoneModal, cdr) {
|
|
11891
11908
|
this.phoneModal = phoneModal;
|
|
11892
11909
|
this.cdr = cdr;
|
|
11893
11910
|
this.vm$ = this.phoneModal.state$;
|
|
11894
11911
|
}
|
|
11895
11912
|
ngOnInit() {
|
|
11896
|
-
this.sub = this.phoneModal.state$.subscribe(() =>
|
|
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);
|
|
11897
11920
|
}
|
|
11898
11921
|
ngOnDestroy() {
|
|
11899
11922
|
this.sub?.unsubscribe();
|
|
11900
11923
|
}
|
|
11901
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 });
|
|
11902
|
-
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 .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:block;position:relative;z-index:10050;width:0;height:0;overflow:visible;pointer-events:none;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:
|
|
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"] }] });
|
|
11903
11926
|
}
|
|
11904
11927
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: PhoneEntryModalServiceComponent, decorators: [{
|
|
11905
11928
|
type: Component,
|
|
11906
|
-
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 .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:block;position:relative;z-index:10050;width:0;height:0;overflow:visible;pointer-events:none;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:
|
|
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"] }]
|
|
11907
11930
|
}], ctorParameters: () => [{ type: PhoneEntryModalService }, { type: i0.ChangeDetectorRef }] });
|
|
11908
11931
|
|
|
11909
11932
|
class DatePickerModalServiceComponent {
|
|
@@ -11923,11 +11946,11 @@ class DatePickerModalServiceComponent {
|
|
|
11923
11946
|
this.sub?.unsubscribe();
|
|
11924
11947
|
}
|
|
11925
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 });
|
|
11926
|
-
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 .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:block;position:relative;z-index:10050;width:0;height:0;overflow:visible;pointer-events:none;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: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"] }] });
|
|
11927
11950
|
}
|
|
11928
11951
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: DatePickerModalServiceComponent, decorators: [{
|
|
11929
11952
|
type: Component,
|
|
11930
|
-
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 .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:block;position:relative;z-index:10050;width:0;height:0;overflow:visible;pointer-events:none;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: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"] }]
|
|
11931
11954
|
}], ctorParameters: () => [{ type: DatePickerModalService }, { type: i0.ChangeDetectorRef }] });
|
|
11932
11955
|
|
|
11933
11956
|
class TimePickerModalServiceComponent {
|
|
@@ -11947,11 +11970,11 @@ class TimePickerModalServiceComponent {
|
|
|
11947
11970
|
this.sub?.unsubscribe();
|
|
11948
11971
|
}
|
|
11949
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 });
|
|
11950
|
-
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 .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:block;position:relative;z-index:10050;width:0;height:0;overflow:visible;pointer-events:none;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:
|
|
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" }] });
|
|
11951
11974
|
}
|
|
11952
11975
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: TimePickerModalServiceComponent, decorators: [{
|
|
11953
11976
|
type: Component,
|
|
11954
|
-
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 .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:block;position:relative;z-index:10050;width:0;height:0;overflow:visible;pointer-events:none;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:
|
|
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"] }]
|
|
11955
11978
|
}], ctorParameters: () => [{ type: TimePickerModalService }, { type: i0.ChangeDetectorRef }] });
|
|
11956
11979
|
|
|
11957
11980
|
class DatetimePickerModalServiceComponent {
|
|
@@ -11971,11 +11994,11 @@ class DatetimePickerModalServiceComponent {
|
|
|
11971
11994
|
this.sub?.unsubscribe();
|
|
11972
11995
|
}
|
|
11973
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 });
|
|
11974
|
-
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 .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:block;position:relative;z-index:10050;width:0;height:0;overflow:visible;pointer-events:none;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: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"] }] });
|
|
11975
11998
|
}
|
|
11976
11999
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: DatetimePickerModalServiceComponent, decorators: [{
|
|
11977
12000
|
type: Component,
|
|
11978
|
-
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 .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:block;position:relative;z-index:10050;width:0;height:0;overflow:visible;pointer-events:none;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: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"] }]
|
|
11979
12002
|
}], ctorParameters: () => [{ type: DatetimePickerModalService }, { type: i0.ChangeDetectorRef }] });
|
|
11980
12003
|
|
|
11981
12004
|
class MonthPickerModalServiceComponent {
|
|
@@ -11995,11 +12018,11 @@ class MonthPickerModalServiceComponent {
|
|
|
11995
12018
|
this.sub?.unsubscribe();
|
|
11996
12019
|
}
|
|
11997
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 });
|
|
11998
|
-
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 .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:block;position:relative;z-index:10050;width:0;height:0;overflow:visible;pointer-events:none;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: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"] }] });
|
|
11999
12022
|
}
|
|
12000
12023
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: MonthPickerModalServiceComponent, decorators: [{
|
|
12001
12024
|
type: Component,
|
|
12002
|
-
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 .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:block;position:relative;z-index:10050;width:0;height:0;overflow:visible;pointer-events:none;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: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"] }]
|
|
12003
12026
|
}], ctorParameters: () => [{ type: MonthPickerModalService }, { type: i0.ChangeDetectorRef }] });
|
|
12004
12027
|
|
|
12005
12028
|
// ============================================================================
|
|
@@ -12663,11 +12686,11 @@ class ColorPickerPanelComponent {
|
|
|
12663
12686
|
this.cdr.markForCheck();
|
|
12664
12687
|
}
|
|
12665
12688
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ColorPickerPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
12666
|
-
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:
|
|
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"] }] });
|
|
12667
12690
|
}
|
|
12668
12691
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ColorPickerPanelComponent, decorators: [{
|
|
12669
12692
|
type: Component,
|
|
12670
|
-
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:
|
|
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"] }]
|
|
12671
12694
|
}], propDecorators: { colorCanvas: [{
|
|
12672
12695
|
type: ViewChild,
|
|
12673
12696
|
args: ['colorCanvas', { static: false }]
|
|
@@ -12716,11 +12739,11 @@ class ColorPickerModalServiceComponent {
|
|
|
12716
12739
|
this.sub?.unsubscribe();
|
|
12717
12740
|
}
|
|
12718
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 });
|
|
12719
|
-
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 .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:block;position:relative;z-index:10050;width:0;height:0;overflow:visible;pointer-events:none;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:
|
|
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"] }] });
|
|
12720
12743
|
}
|
|
12721
12744
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ColorPickerModalServiceComponent, decorators: [{
|
|
12722
12745
|
type: Component,
|
|
12723
|
-
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 .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:block;position:relative;z-index:10050;width:0;height:0;overflow:visible;pointer-events:none;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:
|
|
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"] }]
|
|
12724
12747
|
}], ctorParameters: () => [{ type: ColorPickerModalService }, { type: i0.ChangeDetectorRef }] });
|
|
12725
12748
|
|
|
12726
12749
|
/**
|
|
@@ -12826,8 +12849,11 @@ class ContextMenuServiceComponent {
|
|
|
12826
12849
|
sub;
|
|
12827
12850
|
closeSub;
|
|
12828
12851
|
scrollListener = () => {
|
|
12829
|
-
if (this.active
|
|
12830
|
-
|
|
12852
|
+
if (!this.active || this.compact)
|
|
12853
|
+
return;
|
|
12854
|
+
if (performance.now() < this.ignoreOutsideUntil)
|
|
12855
|
+
return;
|
|
12856
|
+
this.dismissCurrent(null);
|
|
12831
12857
|
};
|
|
12832
12858
|
outsidePointerListener = (event) => {
|
|
12833
12859
|
this.handleOutsideEvent(event);
|
|
@@ -12851,7 +12877,7 @@ class ContextMenuServiceComponent {
|
|
|
12851
12877
|
};
|
|
12852
12878
|
this.panelVisible = true;
|
|
12853
12879
|
// Ignorar el mismo gesto de apertura y el click sintético post-contextmenu.
|
|
12854
|
-
this.ignoreOutsideUntil = performance.now() +
|
|
12880
|
+
this.ignoreOutsideUntil = performance.now() + 280;
|
|
12855
12881
|
this.cdr.detectChanges();
|
|
12856
12882
|
this.applyClampedPosition();
|
|
12857
12883
|
});
|
|
@@ -12985,11 +13011,11 @@ class ContextMenuServiceComponent {
|
|
|
12985
13011
|
this.cdr.detectChanges();
|
|
12986
13012
|
}
|
|
12987
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 });
|
|
12988
|
-
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:
|
|
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"] }] });
|
|
12989
13015
|
}
|
|
12990
13016
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: ContextMenuServiceComponent, decorators: [{
|
|
12991
13017
|
type: Component,
|
|
12992
|
-
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:
|
|
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"] }]
|
|
12993
13019
|
}], ctorParameters: () => [{ type: ContextMenuService }, { type: undefined, decorators: [{
|
|
12994
13020
|
type: Inject,
|
|
12995
13021
|
args: [PLATFORM_ID]
|