@telcomdev/ui 0.1.17 → 0.1.18

package/fesm2022/telcomdev-ui.mjs

@@ -3091,6 +3091,384 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
             args: [{ providedIn: 'root' }]
         }] });
 
+let fileUploadSequence = 0;
+class TdFileUpload {
+    cdr = inject(ChangeDetectorRef);
+    viewer = inject(TdFileViewerService);
+    generatedId = `td-file-upload-${++fileUploadSequence}`;
+    nativeInput;
+    id = '';
+    label = 'Seleccionar archivos';
+    placeholder = 'Ningún archivo seleccionado';
+    description = 'Arrastra tus archivos aquí o selecciónalos desde tu dispositivo.';
+    hint = '';
+    accept = '';
+    multiple = false;
+    maxFiles = 0;
+    maxSizeMb = 0;
+    variant = 'dropzone';
+    showPreview = true;
+    clearable = true;
+    disabled = false;
+    readonly = false;
+    required = false;
+    error = '';
+    dark = false;
+    valueChange = new EventEmitter();
+    filesChange = new EventEmitter();
+    rejected = new EventEmitter();
+    preview = new EventEmitter();
+    removed = new EventEmitter();
+    items = [];
+    dragging = false;
+    touched = false;
+    rejectedItems = [];
+    onChange = () => undefined;
+    onTouched = () => undefined;
+    get inputId() {
+        return this.id || this.generatedId;
+    }
+    get isDisabled() {
+        return this.disabled;
+    }
+    get selectedText() {
+        if (!this.items.length)
+            return this.placeholder;
+        if (this.items.length === 1)
+            return this.items[0]?.name ?? this.placeholder;
+        return `${this.items.length} archivos seleccionados`;
+    }
+    get acceptText() {
+        return this.accept || 'Cualquier archivo';
+    }
+    get hasError() {
+        return !!this.error || !!this.rejectedItems.length;
+    }
+    get message() {
+        return this.error || this.rejectedItems[0]?.message || this.hint;
+    }
+    writeValue(value) {
+        this.revokePreviewUrls();
+        const files = value ? (Array.isArray(value) ? value : [value]) : [];
+        this.items = files.map((file) => this.createItem(file));
+        this.rejectedItems = [];
+        this.cdr.markForCheck();
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(disabled) {
+        this.disabled = disabled;
+        this.cdr.markForCheck();
+    }
+    browse() {
+        if (this.isDisabled || this.readonly)
+            return;
+        this.nativeInput?.nativeElement.click();
+    }
+    handleInput(event) {
+        const input = event.target;
+        this.addFiles(Array.from(input.files ?? []));
+        input.value = '';
+    }
+    handleDragOver(event) {
+        if (this.isDisabled || this.readonly)
+            return;
+        event.preventDefault();
+        this.dragging = true;
+    }
+    handleDragLeave(event) {
+        if (!this.isLeavingHost(event))
+            return;
+        this.dragging = false;
+    }
+    handleDrop(event) {
+        if (this.isDisabled || this.readonly)
+            return;
+        event.preventDefault();
+        this.dragging = false;
+        this.addFiles(Array.from(event.dataTransfer?.files ?? []));
+    }
+    remove(item, event) {
+        event?.stopPropagation();
+        if (this.isDisabled || this.readonly)
+            return;
+        this.items = this.items.filter((current) => current.id !== item.id);
+        this.revokePreviewUrl(item);
+        this.removed.emit(item);
+        this.emitValue();
+    }
+    clear(event) {
+        event?.stopPropagation();
+        if (this.isDisabled || this.readonly)
+            return;
+        this.revokePreviewUrls();
+        this.items = [];
+        this.rejectedItems = [];
+        this.emitValue();
+    }
+    markTouched() {
+        if (this.touched)
+            return;
+        this.touched = true;
+        this.onTouched();
+    }
+    async openPreview(item, event) {
+        event?.stopPropagation();
+        this.preview.emit(item);
+        if (item.previewKind === 'file')
+            return;
+        const file = await this.fileToDataUrl(item.file);
+        this.viewer.open({
+            file,
+            fileName: item.name,
+            type: item.type,
+            size: item.size,
+            description: item.sizeLabel,
+        }, { titulo: item.name, descripcion: 'Vista previa del archivo seleccionado.' });
+    }
+    iconFor(item) {
+        if (item.previewKind === 'image')
+            return 'image';
+        if (item.previewKind === 'pdf')
+            return 'pdf';
+        if (item.extension === 'xlsx' || item.extension === 'xls')
+            return 'excel';
+        if (item.extension === 'xml')
+            return 'xml';
+        if (item.extension === 'zip' || item.extension === 'rar' || item.extension === '7z')
+            return 'zip';
+        return 'file';
+    }
+    addFiles(files) {
+        this.markTouched();
+        if (!files.length)
+            return;
+        const accepted = [];
+        const rejected = [];
+        const availableSlots = this.resolveAvailableSlots();
+        for (const file of files) {
+            if (availableSlots !== null && accepted.length >= availableSlots) {
+                rejected.push({
+                    file,
+                    reason: 'maxFiles',
+                    message: `Solo puedes seleccionar ${this.maxFiles} archivo(s).`,
+                });
+                continue;
+            }
+            const typeError = this.validateType(file);
+            if (typeError) {
+                rejected.push(typeError);
+                continue;
+            }
+            const sizeError = this.validateSize(file);
+            if (sizeError) {
+                rejected.push(sizeError);
+                continue;
+            }
+            accepted.push(file);
+        }
+        this.rejectedItems = rejected;
+        if (rejected.length)
+            this.rejected.emit(rejected);
+        if (accepted.length) {
+            const nextItems = accepted.map((file) => this.createItem(file));
+            if (this.multiple) {
+                this.items = [...this.items, ...nextItems];
+            }
+            else {
+                this.revokePreviewUrls();
+                this.items = nextItems.slice(0, 1);
+            }
+            this.emitValue();
+        }
+        this.cdr.markForCheck();
+    }
+    resolveAvailableSlots() {
+        if (!this.multiple)
+            return 1;
+        if (this.maxFiles <= 0)
+            return null;
+        return Math.max(this.maxFiles - this.items.length, 0);
+    }
+    validateType(file) {
+        const rules = this.accept
+            .split(',')
+            .map((rule) => rule.trim().toLowerCase())
+            .filter(Boolean);
+        if (!rules.length)
+            return null;
+        const extension = this.extensionOf(file.name);
+        const fileType = file.type.toLowerCase();
+        const valid = rules.some((rule) => {
+            if (rule.startsWith('.'))
+                return rule.slice(1) === extension;
+            if (rule.endsWith('/*'))
+                return fileType.startsWith(rule.slice(0, -1));
+            return fileType === rule;
+        });
+        return valid
+            ? null
+            : {
+                file,
+                reason: 'type',
+                message: `El archivo "${file.name}" no tiene un formato permitido.`,
+            };
+    }
+    validateSize(file) {
+        if (this.maxSizeMb <= 0)
+            return null;
+        const maxBytes = this.maxSizeMb * 1024 * 1024;
+        return file.size <= maxBytes
+            ? null
+            : {
+                file,
+                reason: 'size',
+                message: `El archivo "${file.name}" supera el máximo de ${this.maxSizeMb} MB.`,
+            };
+    }
+    emitValue() {
+        const files = this.items.map((item) => item.file);
+        const value = this.multiple ? files : files[0] ?? null;
+        this.onChange(value);
+        this.valueChange.emit(value);
+        this.filesChange.emit(files);
+        this.cdr.markForCheck();
+    }
+    createItem(file) {
+        const extension = this.extensionOf(file.name);
+        const previewKind = file.type.startsWith('image/')
+            ? 'image'
+            : file.type === 'application/pdf' || extension === 'pdf'
+                ? 'pdf'
+                : 'file';
+        return {
+            id: `${Date.now()}-${Math.random().toString(36).slice(2)}`,
+            file,
+            name: file.name,
+            size: file.size,
+            sizeLabel: this.formatSize(file.size),
+            type: file.type || this.typeFromExtension(extension),
+            extension,
+            previewKind,
+            previewUrl: previewKind === 'image' ? URL.createObjectURL(file) : undefined,
+        };
+    }
+    extensionOf(name) {
+        return name.includes('.') ? name.split('.').pop()?.toLowerCase() || '' : '';
+    }
+    typeFromExtension(extension) {
+        if (extension === 'pdf')
+            return 'application/pdf';
+        if (extension === 'xml')
+            return 'application/xml';
+        if (extension === 'xlsx')
+            return 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
+        if (extension === 'xls')
+            return 'application/vnd.ms-excel';
+        if (extension === 'zip')
+            return 'application/zip';
+        return 'application/octet-stream';
+    }
+    formatSize(bytes) {
+        if (bytes < 1024)
+            return `${bytes} B`;
+        const kb = bytes / 1024;
+        if (kb < 1024)
+            return `${kb.toFixed(kb >= 100 ? 0 : 1)} KB`;
+        const mb = kb / 1024;
+        return `${mb.toFixed(mb >= 100 ? 0 : 1)} MB`;
+    }
+    fileToDataUrl(file) {
+        return new Promise((resolve, reject) => {
+            const reader = new FileReader();
+            reader.onload = () => resolve(String(reader.result ?? ''));
+            reader.onerror = () => reject(reader.error);
+            reader.readAsDataURL(file);
+        });
+    }
+    isLeavingHost(event) {
+        const currentTarget = event.currentTarget;
+        const relatedTarget = event.relatedTarget;
+        return currentTarget instanceof Node && !currentTarget.contains(relatedTarget);
+    }
+    revokePreviewUrls() {
+        this.items.forEach((item) => this.revokePreviewUrl(item));
+    }
+    revokePreviewUrl(item) {
+        if (item.previewUrl)
+            URL.revokeObjectURL(item.previewUrl);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdFileUpload, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: TdFileUpload, isStandalone: true, selector: "td-file-upload", inputs: { id: "id", label: "label", placeholder: "placeholder", description: "description", hint: "hint", accept: "accept", multiple: "multiple", maxFiles: "maxFiles", maxSizeMb: "maxSizeMb", variant: "variant", showPreview: "showPreview", clearable: "clearable", disabled: "disabled", readonly: "readonly", required: "required", error: "error", dark: "dark" }, outputs: { valueChange: "valueChange", filesChange: "filesChange", rejected: "rejected", preview: "preview", removed: "removed" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => TdFileUpload),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "nativeInput", first: true, predicate: ["nativeInput"], descendants: true }], ngImport: i0, template: "<div\n  class=\"td-file-upload\"\n  [class.td-file-upload--input]=\"variant === 'input'\"\n  [class.td-file-upload--dropzone]=\"variant === 'dropzone'\"\n  [class.td-file-upload--dragging]=\"dragging\"\n  [class.td-file-upload--disabled]=\"isDisabled\"\n  [class.td-file-upload--readonly]=\"readonly\"\n  [class.td-file-upload--error]=\"hasError\"\n  [class.td-file-upload--dark]=\"dark\"\n  (dragover)=\"handleDragOver($event)\"\n  (dragleave)=\"handleDragLeave($event)\"\n  (drop)=\"handleDrop($event)\"\n  (click)=\"variant === 'dropzone' ? browse() : null\"\n  (blur)=\"markTouched()\"\n  tabindex=\"0\"\n  role=\"button\"\n  [attr.aria-disabled]=\"isDisabled || readonly\"\n  [attr.aria-describedby]=\"message ? inputId + '-message' : null\"\n>\n  <input\n    #nativeInput\n    class=\"td-file-upload__native\"\n    [id]=\"inputId\"\n    type=\"file\"\n    [accept]=\"accept\"\n    [multiple]=\"multiple\"\n    [disabled]=\"isDisabled\"\n    [required]=\"required\"\n    (change)=\"handleInput($event)\"\n    (blur)=\"markTouched()\"\n  />\n\n  @if (variant === 'input') {\n    <label class=\"td-file-upload__label\" [for]=\"inputId\">{{ label }}</label>\n    <div class=\"td-file-upload__input-shell\">\n      <div class=\"td-file-upload__input-text\">\n        <td-icon nombre=\"upload\" />\n        <span>{{ selectedText }}</span>\n      </div>\n      <button\n        type=\"button\"\n        class=\"td-file-upload__button\"\n        [disabled]=\"isDisabled || readonly\"\n        (click)=\"browse(); $event.stopPropagation()\"\n      >\n        Seleccionar\n      </button>\n    </div>\n  } @else {\n    <div class=\"td-file-upload__hero\">\n      <span class=\"td-file-upload__icon\">\n        <td-icon nombre=\"cloud\" />\n      </span>\n      <div>\n        <strong>{{ label }}</strong>\n        <p>{{ description }}</p>\n      </div>\n      <button\n        type=\"button\"\n        class=\"td-file-upload__button\"\n        [disabled]=\"isDisabled || readonly\"\n        (click)=\"browse(); $event.stopPropagation()\"\n      >\n        Buscar archivo\n      </button>\n    </div>\n    <div class=\"td-file-upload__meta\">\n      <span>Formatos: {{ acceptText }}</span>\n      @if (maxSizeMb > 0) {\n        <span>M\u00E1x. {{ maxSizeMb }} MB</span>\n      }\n      @if (multiple && maxFiles > 0) {\n        <span>Hasta {{ maxFiles }} archivos</span>\n      }\n    </div>\n  }\n</div>\n\n@if (message) {\n  <p\n    class=\"td-file-upload__message\"\n    [class.td-file-upload__message--error]=\"hasError\"\n    [id]=\"inputId + '-message'\"\n  >\n    {{ message }}\n  </p>\n}\n\n@if (showPreview && items.length) {\n  <div\n    class=\"td-file-upload__list\"\n    [class.td-file-upload__list--gallery]=\"variant === 'dropzone'\"\n    [class.td-file-upload__list--compact]=\"variant === 'input'\"\n    [class.td-file-upload__list--dark]=\"dark\"\n  >\n    @for (item of items; track item.id) {\n      <article class=\"td-file-upload__item\">\n        <button\n          type=\"button\"\n          class=\"td-file-upload__thumb\"\n          [class.td-file-upload__thumb--clickable]=\"item.previewKind !== 'file'\"\n          [title]=\"item.previewKind !== 'file' ? 'Previsualizar' : item.name\"\n          (click)=\"openPreview(item, $event)\"\n        >\n          @if (item.previewKind === 'image' && item.previewUrl) {\n            <img [src]=\"item.previewUrl\" [alt]=\"item.name\" />\n          } @else {\n            <td-icon [nombre]=\"iconFor(item)\" />\n          }\n        </button>\n\n        <div class=\"td-file-upload__item-info\">\n          <strong>{{ item.name }}</strong>\n          <span>{{ item.sizeLabel }} \u00B7 {{ item.type || item.extension || 'archivo' }}</span>\n        </div>\n\n        <div class=\"td-file-upload__actions\">\n          @if (item.previewKind !== 'file') {\n            <button type=\"button\" title=\"Previsualizar\" (click)=\"openPreview(item, $event)\">\n              <td-icon nombre=\"visibility\" />\n            </button>\n          }\n          @if (clearable) {\n            <button type=\"button\" title=\"Quitar\" (click)=\"remove(item, $event)\">\n              <td-icon nombre=\"close\" />\n            </button>\n          }\n        </div>\n      </article>\n    }\n\n    @if (clearable && items.length > 1) {\n      <button type=\"button\" class=\"td-file-upload__clear-all\" (click)=\"clear($event)\">\n        Limpiar todo\n      </button>\n    }\n  </div>\n}\n", styles: [":host{display:block;font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif)}.td-file-upload{position:relative;color:var(--td-color-text, #202b3d)}.td-file-upload__native{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.td-file-upload__label{display:inline-flex;margin:0 0 .45rem .85rem;color:var(--td-color-primary, #5746d8);font-size:.72rem;font-weight:800}.td-file-upload__input-shell,.td-file-upload__hero{border:1px solid var(--td-color-border, #dce3ef);border-radius:var(--td-radius-lg, 1rem);background:var(--td-color-surface, #ffffff);box-shadow:var(--td-shadow-xs, 0 8px 24px rgba(38, 50, 72, .06));transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}.td-file-upload__input-shell{display:flex;align-items:center;justify-content:space-between;gap:.75rem;min-height:3.25rem;padding:.45rem .5rem .45rem .9rem}.td-file-upload__input-text{display:inline-flex;min-width:0;align-items:center;gap:.65rem;color:var(--td-color-text-muted, #63708a);font-size:.86rem;font-weight:650}.td-file-upload__input-text span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-file-upload__hero{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:1rem;padding:1.25rem;cursor:pointer}.td-file-upload__hero strong{display:block;color:var(--td-color-text, #202b3d);font-size:.96rem;font-weight:850}.td-file-upload__hero p{margin:.25rem 0 0;color:var(--td-color-text-muted, #6c7890);font-size:.78rem;line-height:1.45}.td-file-upload__icon{display:inline-grid;width:3rem;height:3rem;place-items:center;border-radius:var(--td-radius-lg, 1rem);color:var(--td-color-primary, #5746d8);background:var(--td-color-primary-soft, #f0edff)}.td-file-upload__icon td-icon{width:1.45rem;height:1.45rem}.td-file-upload__button{display:inline-flex;align-items:center;justify-content:center;min-height:2.35rem;border:0;border-radius:var(--td-radius-md, .8rem);padding:0 .9rem;color:#fff;background:var(--td-color-primary, #315eb8);font-size:.78rem;font-weight:850;cursor:pointer;transition:transform .18s ease,background .18s ease}.td-file-upload__button:hover:not(:disabled){transform:translateY(-1px);background:var(--td-color-primary-hover, #284f9e)}.td-file-upload__button:disabled{cursor:not-allowed;opacity:.55}.td-file-upload__meta{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.65rem}.td-file-upload__meta span{border:1px solid var(--td-color-border, #e1e7f1);border-radius:999px;padding:.25rem .55rem;color:var(--td-color-text-muted, #6c7890);background:var(--td-color-surface-soft, #f8faff);font-size:.68rem;font-weight:750}.td-file-upload--dragging .td-file-upload__hero,.td-file-upload:focus-within .td-file-upload__input-shell,.td-file-upload:focus .td-file-upload__hero{border-color:var(--td-color-primary, #5746d8);box-shadow:var(--td-focus-ring, 0 0 0 4px rgba(87, 70, 216, .16))}.td-file-upload--error .td-file-upload__input-shell,.td-file-upload--error .td-file-upload__hero{border-color:var(--td-color-danger, #ef4444)}.td-file-upload--disabled,.td-file-upload--readonly{cursor:not-allowed;opacity:.7}.td-file-upload__message{margin:.45rem 0 0;color:var(--td-color-text-muted, #6c7890);font-size:.72rem;font-weight:650}.td-file-upload__message--error{color:var(--td-color-danger, #dc2626)}.td-file-upload__list{display:grid;gap:.55rem;margin-top:.75rem}.td-file-upload__list--gallery{grid-template-columns:repeat(auto-fill,minmax(138px,1fr));gap:.75rem}.td-file-upload__item{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.75rem;border:1px solid var(--td-color-border, #e2e8f0);border-radius:var(--td-radius-lg, 1rem);padding:.55rem;background:var(--td-color-surface, #ffffff)}.td-file-upload__list--gallery .td-file-upload__item{position:relative;display:flex;min-height:150px;overflow:hidden;align-items:stretch;gap:0;aspect-ratio:1/1;border-radius:var(--td-radius-xl, 1.15rem);padding:0;background:linear-gradient(135deg,#5746d814,#315eb80a),var(--td-color-surface-soft, #f7f9fc);box-shadow:var(--td-shadow-xs, 0 10px 26px rgba(38, 50, 72, .08))}.td-file-upload__list--gallery .td-file-upload__item:hover{transform:translateY(-2px);box-shadow:var(--td-shadow-md, 0 18px 40px rgba(38, 50, 72, .14))}.td-file-upload__thumb{display:inline-grid;width:3rem;height:3rem;place-items:center;overflow:hidden;border:1px solid var(--td-color-border, #dce3ef);border-radius:var(--td-radius-md, .8rem);color:var(--td-color-primary, #315eb8);background:var(--td-color-surface-soft, #f7f9fc)}.td-file-upload__list--gallery .td-file-upload__thumb{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:inherit;color:var(--td-color-primary, #315eb8);background:radial-gradient(circle at 30% 18%,rgba(255,255,255,.72),transparent 24%),linear-gradient(135deg,var(--td-color-primary-soft, #eef2ff),var(--td-color-surface-soft, #f7f9fc))}.td-file-upload__thumb--clickable{cursor:pointer}.td-file-upload__thumb img{width:100%;height:100%;object-fit:cover}.td-file-upload__list--gallery .td-file-upload__thumb img{transform:scale(1.01)}.td-file-upload__list--gallery .td-file-upload__thumb td-icon{width:2.6rem;height:2.6rem;filter:drop-shadow(0 10px 18px rgba(49,94,184,.16))}.td-file-upload__item-info{display:grid;min-width:0;gap:.2rem}.td-file-upload__list--gallery .td-file-upload__item-info{position:absolute;right:0;bottom:0;left:0;z-index:1;gap:.1rem;padding:1.65rem .7rem .65rem;background:linear-gradient(to top,#0b1220c7,#0b122000)}.td-file-upload__item-info strong{overflow:hidden;color:var(--td-color-text, #202b3d);font-size:.82rem;font-weight:850;text-overflow:ellipsis;white-space:nowrap}.td-file-upload__list--gallery .td-file-upload__item-info strong{color:#fff;font-size:.75rem;text-shadow:0 1px 2px rgba(0,0,0,.35)}.td-file-upload__item-info span{overflow:hidden;color:var(--td-color-text-muted, #72809a);font-size:.7rem;font-weight:650;text-overflow:ellipsis;white-space:nowrap}.td-file-upload__list--gallery .td-file-upload__item-info span{color:#ffffffd1;font-size:.66rem}.td-file-upload__actions{display:inline-flex;gap:.3rem}.td-file-upload__list--gallery .td-file-upload__actions{position:absolute;top:.5rem;right:.5rem;z-index:2;opacity:0;transform:translateY(-3px);transition:opacity .18s ease,transform .18s ease}.td-file-upload__list--gallery .td-file-upload__item:hover .td-file-upload__actions,.td-file-upload__list--gallery .td-file-upload__item:focus-within .td-file-upload__actions{opacity:1;transform:translateY(0)}.td-file-upload__actions button,.td-file-upload__clear-all{display:inline-grid;min-width:2rem;height:2rem;place-items:center;border:1px solid var(--td-color-border, #dce3ef);border-radius:var(--td-radius-md, .75rem);color:var(--td-color-text-muted, #62708a);background:var(--td-color-surface, #ffffff);cursor:pointer}.td-file-upload__list--gallery .td-file-upload__actions button{width:2rem;min-width:2rem;height:2rem;border-color:#ffffff3d;color:#fff;background:#0f172a8a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.td-file-upload__list--gallery .td-file-upload__actions button:hover{color:#fff;border-color:#ffffff85;background:#0f172ac7}.td-file-upload__actions button:hover,.td-file-upload__clear-all:hover{color:var(--td-color-primary, #315eb8);border-color:var(--td-color-primary, #315eb8)}.td-file-upload__clear-all{justify-self:end;grid-column:1/-1;width:auto;padding:0 .75rem;font-size:.72rem;font-weight:800}:host-context(.docs-shell--oscuro) .td-file-upload__input-shell,:host-context(.docs-shell--oscuro) .td-file-upload__hero,:host-context(.docs-shell--oscuro) .td-file-upload__item,.td-file-upload--dark .td-file-upload__input-shell,.td-file-upload--dark .td-file-upload__hero,.td-file-upload__list--dark .td-file-upload__item{border-color:var(--td-color-border, #30384a);background:var(--td-color-surface, #171923)}@media(max-width:700px){.td-file-upload__hero{grid-template-columns:1fr}.td-file-upload__button{width:100%}}\n"], dependencies: [{ kind: "component", type: TdIcon, selector: "td-icon", inputs: ["nombre", "titulo", "tamano"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdFileUpload, decorators: [{
+            type: Component,
+            args: [{ selector: 'td-file-upload', imports: [TdIcon], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => TdFileUpload),
+                            multi: true,
+                        },
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"td-file-upload\"\n  [class.td-file-upload--input]=\"variant === 'input'\"\n  [class.td-file-upload--dropzone]=\"variant === 'dropzone'\"\n  [class.td-file-upload--dragging]=\"dragging\"\n  [class.td-file-upload--disabled]=\"isDisabled\"\n  [class.td-file-upload--readonly]=\"readonly\"\n  [class.td-file-upload--error]=\"hasError\"\n  [class.td-file-upload--dark]=\"dark\"\n  (dragover)=\"handleDragOver($event)\"\n  (dragleave)=\"handleDragLeave($event)\"\n  (drop)=\"handleDrop($event)\"\n  (click)=\"variant === 'dropzone' ? browse() : null\"\n  (blur)=\"markTouched()\"\n  tabindex=\"0\"\n  role=\"button\"\n  [attr.aria-disabled]=\"isDisabled || readonly\"\n  [attr.aria-describedby]=\"message ? inputId + '-message' : null\"\n>\n  <input\n    #nativeInput\n    class=\"td-file-upload__native\"\n    [id]=\"inputId\"\n    type=\"file\"\n    [accept]=\"accept\"\n    [multiple]=\"multiple\"\n    [disabled]=\"isDisabled\"\n    [required]=\"required\"\n    (change)=\"handleInput($event)\"\n    (blur)=\"markTouched()\"\n  />\n\n  @if (variant === 'input') {\n    <label class=\"td-file-upload__label\" [for]=\"inputId\">{{ label }}</label>\n    <div class=\"td-file-upload__input-shell\">\n      <div class=\"td-file-upload__input-text\">\n        <td-icon nombre=\"upload\" />\n        <span>{{ selectedText }}</span>\n      </div>\n      <button\n        type=\"button\"\n        class=\"td-file-upload__button\"\n        [disabled]=\"isDisabled || readonly\"\n        (click)=\"browse(); $event.stopPropagation()\"\n      >\n        Seleccionar\n      </button>\n    </div>\n  } @else {\n    <div class=\"td-file-upload__hero\">\n      <span class=\"td-file-upload__icon\">\n        <td-icon nombre=\"cloud\" />\n      </span>\n      <div>\n        <strong>{{ label }}</strong>\n        <p>{{ description }}</p>\n      </div>\n      <button\n        type=\"button\"\n        class=\"td-file-upload__button\"\n        [disabled]=\"isDisabled || readonly\"\n        (click)=\"browse(); $event.stopPropagation()\"\n      >\n        Buscar archivo\n      </button>\n    </div>\n    <div class=\"td-file-upload__meta\">\n      <span>Formatos: {{ acceptText }}</span>\n      @if (maxSizeMb > 0) {\n        <span>M\u00E1x. {{ maxSizeMb }} MB</span>\n      }\n      @if (multiple && maxFiles > 0) {\n        <span>Hasta {{ maxFiles }} archivos</span>\n      }\n    </div>\n  }\n</div>\n\n@if (message) {\n  <p\n    class=\"td-file-upload__message\"\n    [class.td-file-upload__message--error]=\"hasError\"\n    [id]=\"inputId + '-message'\"\n  >\n    {{ message }}\n  </p>\n}\n\n@if (showPreview && items.length) {\n  <div\n    class=\"td-file-upload__list\"\n    [class.td-file-upload__list--gallery]=\"variant === 'dropzone'\"\n    [class.td-file-upload__list--compact]=\"variant === 'input'\"\n    [class.td-file-upload__list--dark]=\"dark\"\n  >\n    @for (item of items; track item.id) {\n      <article class=\"td-file-upload__item\">\n        <button\n          type=\"button\"\n          class=\"td-file-upload__thumb\"\n          [class.td-file-upload__thumb--clickable]=\"item.previewKind !== 'file'\"\n          [title]=\"item.previewKind !== 'file' ? 'Previsualizar' : item.name\"\n          (click)=\"openPreview(item, $event)\"\n        >\n          @if (item.previewKind === 'image' && item.previewUrl) {\n            <img [src]=\"item.previewUrl\" [alt]=\"item.name\" />\n          } @else {\n            <td-icon [nombre]=\"iconFor(item)\" />\n          }\n        </button>\n\n        <div class=\"td-file-upload__item-info\">\n          <strong>{{ item.name }}</strong>\n          <span>{{ item.sizeLabel }} \u00B7 {{ item.type || item.extension || 'archivo' }}</span>\n        </div>\n\n        <div class=\"td-file-upload__actions\">\n          @if (item.previewKind !== 'file') {\n            <button type=\"button\" title=\"Previsualizar\" (click)=\"openPreview(item, $event)\">\n              <td-icon nombre=\"visibility\" />\n            </button>\n          }\n          @if (clearable) {\n            <button type=\"button\" title=\"Quitar\" (click)=\"remove(item, $event)\">\n              <td-icon nombre=\"close\" />\n            </button>\n          }\n        </div>\n      </article>\n    }\n\n    @if (clearable && items.length > 1) {\n      <button type=\"button\" class=\"td-file-upload__clear-all\" (click)=\"clear($event)\">\n        Limpiar todo\n      </button>\n    }\n  </div>\n}\n", styles: [":host{display:block;font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif)}.td-file-upload{position:relative;color:var(--td-color-text, #202b3d)}.td-file-upload__native{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.td-file-upload__label{display:inline-flex;margin:0 0 .45rem .85rem;color:var(--td-color-primary, #5746d8);font-size:.72rem;font-weight:800}.td-file-upload__input-shell,.td-file-upload__hero{border:1px solid var(--td-color-border, #dce3ef);border-radius:var(--td-radius-lg, 1rem);background:var(--td-color-surface, #ffffff);box-shadow:var(--td-shadow-xs, 0 8px 24px rgba(38, 50, 72, .06));transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}.td-file-upload__input-shell{display:flex;align-items:center;justify-content:space-between;gap:.75rem;min-height:3.25rem;padding:.45rem .5rem .45rem .9rem}.td-file-upload__input-text{display:inline-flex;min-width:0;align-items:center;gap:.65rem;color:var(--td-color-text-muted, #63708a);font-size:.86rem;font-weight:650}.td-file-upload__input-text span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-file-upload__hero{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:1rem;padding:1.25rem;cursor:pointer}.td-file-upload__hero strong{display:block;color:var(--td-color-text, #202b3d);font-size:.96rem;font-weight:850}.td-file-upload__hero p{margin:.25rem 0 0;color:var(--td-color-text-muted, #6c7890);font-size:.78rem;line-height:1.45}.td-file-upload__icon{display:inline-grid;width:3rem;height:3rem;place-items:center;border-radius:var(--td-radius-lg, 1rem);color:var(--td-color-primary, #5746d8);background:var(--td-color-primary-soft, #f0edff)}.td-file-upload__icon td-icon{width:1.45rem;height:1.45rem}.td-file-upload__button{display:inline-flex;align-items:center;justify-content:center;min-height:2.35rem;border:0;border-radius:var(--td-radius-md, .8rem);padding:0 .9rem;color:#fff;background:var(--td-color-primary, #315eb8);font-size:.78rem;font-weight:850;cursor:pointer;transition:transform .18s ease,background .18s ease}.td-file-upload__button:hover:not(:disabled){transform:translateY(-1px);background:var(--td-color-primary-hover, #284f9e)}.td-file-upload__button:disabled{cursor:not-allowed;opacity:.55}.td-file-upload__meta{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.65rem}.td-file-upload__meta span{border:1px solid var(--td-color-border, #e1e7f1);border-radius:999px;padding:.25rem .55rem;color:var(--td-color-text-muted, #6c7890);background:var(--td-color-surface-soft, #f8faff);font-size:.68rem;font-weight:750}.td-file-upload--dragging .td-file-upload__hero,.td-file-upload:focus-within .td-file-upload__input-shell,.td-file-upload:focus .td-file-upload__hero{border-color:var(--td-color-primary, #5746d8);box-shadow:var(--td-focus-ring, 0 0 0 4px rgba(87, 70, 216, .16))}.td-file-upload--error .td-file-upload__input-shell,.td-file-upload--error .td-file-upload__hero{border-color:var(--td-color-danger, #ef4444)}.td-file-upload--disabled,.td-file-upload--readonly{cursor:not-allowed;opacity:.7}.td-file-upload__message{margin:.45rem 0 0;color:var(--td-color-text-muted, #6c7890);font-size:.72rem;font-weight:650}.td-file-upload__message--error{color:var(--td-color-danger, #dc2626)}.td-file-upload__list{display:grid;gap:.55rem;margin-top:.75rem}.td-file-upload__list--gallery{grid-template-columns:repeat(auto-fill,minmax(138px,1fr));gap:.75rem}.td-file-upload__item{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.75rem;border:1px solid var(--td-color-border, #e2e8f0);border-radius:var(--td-radius-lg, 1rem);padding:.55rem;background:var(--td-color-surface, #ffffff)}.td-file-upload__list--gallery .td-file-upload__item{position:relative;display:flex;min-height:150px;overflow:hidden;align-items:stretch;gap:0;aspect-ratio:1/1;border-radius:var(--td-radius-xl, 1.15rem);padding:0;background:linear-gradient(135deg,#5746d814,#315eb80a),var(--td-color-surface-soft, #f7f9fc);box-shadow:var(--td-shadow-xs, 0 10px 26px rgba(38, 50, 72, .08))}.td-file-upload__list--gallery .td-file-upload__item:hover{transform:translateY(-2px);box-shadow:var(--td-shadow-md, 0 18px 40px rgba(38, 50, 72, .14))}.td-file-upload__thumb{display:inline-grid;width:3rem;height:3rem;place-items:center;overflow:hidden;border:1px solid var(--td-color-border, #dce3ef);border-radius:var(--td-radius-md, .8rem);color:var(--td-color-primary, #315eb8);background:var(--td-color-surface-soft, #f7f9fc)}.td-file-upload__list--gallery .td-file-upload__thumb{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:inherit;color:var(--td-color-primary, #315eb8);background:radial-gradient(circle at 30% 18%,rgba(255,255,255,.72),transparent 24%),linear-gradient(135deg,var(--td-color-primary-soft, #eef2ff),var(--td-color-surface-soft, #f7f9fc))}.td-file-upload__thumb--clickable{cursor:pointer}.td-file-upload__thumb img{width:100%;height:100%;object-fit:cover}.td-file-upload__list--gallery .td-file-upload__thumb img{transform:scale(1.01)}.td-file-upload__list--gallery .td-file-upload__thumb td-icon{width:2.6rem;height:2.6rem;filter:drop-shadow(0 10px 18px rgba(49,94,184,.16))}.td-file-upload__item-info{display:grid;min-width:0;gap:.2rem}.td-file-upload__list--gallery .td-file-upload__item-info{position:absolute;right:0;bottom:0;left:0;z-index:1;gap:.1rem;padding:1.65rem .7rem .65rem;background:linear-gradient(to top,#0b1220c7,#0b122000)}.td-file-upload__item-info strong{overflow:hidden;color:var(--td-color-text, #202b3d);font-size:.82rem;font-weight:850;text-overflow:ellipsis;white-space:nowrap}.td-file-upload__list--gallery .td-file-upload__item-info strong{color:#fff;font-size:.75rem;text-shadow:0 1px 2px rgba(0,0,0,.35)}.td-file-upload__item-info span{overflow:hidden;color:var(--td-color-text-muted, #72809a);font-size:.7rem;font-weight:650;text-overflow:ellipsis;white-space:nowrap}.td-file-upload__list--gallery .td-file-upload__item-info span{color:#ffffffd1;font-size:.66rem}.td-file-upload__actions{display:inline-flex;gap:.3rem}.td-file-upload__list--gallery .td-file-upload__actions{position:absolute;top:.5rem;right:.5rem;z-index:2;opacity:0;transform:translateY(-3px);transition:opacity .18s ease,transform .18s ease}.td-file-upload__list--gallery .td-file-upload__item:hover .td-file-upload__actions,.td-file-upload__list--gallery .td-file-upload__item:focus-within .td-file-upload__actions{opacity:1;transform:translateY(0)}.td-file-upload__actions button,.td-file-upload__clear-all{display:inline-grid;min-width:2rem;height:2rem;place-items:center;border:1px solid var(--td-color-border, #dce3ef);border-radius:var(--td-radius-md, .75rem);color:var(--td-color-text-muted, #62708a);background:var(--td-color-surface, #ffffff);cursor:pointer}.td-file-upload__list--gallery .td-file-upload__actions button{width:2rem;min-width:2rem;height:2rem;border-color:#ffffff3d;color:#fff;background:#0f172a8a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.td-file-upload__list--gallery .td-file-upload__actions button:hover{color:#fff;border-color:#ffffff85;background:#0f172ac7}.td-file-upload__actions button:hover,.td-file-upload__clear-all:hover{color:var(--td-color-primary, #315eb8);border-color:var(--td-color-primary, #315eb8)}.td-file-upload__clear-all{justify-self:end;grid-column:1/-1;width:auto;padding:0 .75rem;font-size:.72rem;font-weight:800}:host-context(.docs-shell--oscuro) .td-file-upload__input-shell,:host-context(.docs-shell--oscuro) .td-file-upload__hero,:host-context(.docs-shell--oscuro) .td-file-upload__item,.td-file-upload--dark .td-file-upload__input-shell,.td-file-upload--dark .td-file-upload__hero,.td-file-upload__list--dark .td-file-upload__item{border-color:var(--td-color-border, #30384a);background:var(--td-color-surface, #171923)}@media(max-width:700px){.td-file-upload__hero{grid-template-columns:1fr}.td-file-upload__button{width:100%}}\n"] }]
+        }], propDecorators: { nativeInput: [{
+                type: ViewChild,
+                args: ['nativeInput']
+            }], id: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], description: [{
+                type: Input
+            }], hint: [{
+                type: Input
+            }], accept: [{
+                type: Input
+            }], multiple: [{
+                type: Input
+            }], maxFiles: [{
+                type: Input
+            }], maxSizeMb: [{
+                type: Input
+            }], variant: [{
+                type: Input
+            }], showPreview: [{
+                type: Input
+            }], clearable: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], error: [{
+                type: Input
+            }], dark: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], filesChange: [{
+                type: Output
+            }], rejected: [{
+                type: Output
+            }], preview: [{
+                type: Output
+            }], removed: [{
+                type: Output
+            }] } });
+
 class TdHeader {
     menuAbierto = true;
     mostrarMenu = true;
@@ -4149,6 +4527,167 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
                 type: Input
             }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
 
+let radioSequence = 0;
+class TdRadioGroup {
+    cdr = inject(ChangeDetectorRef);
+    formBridge = createTdFormControlBridge();
+    generatedName = `td-radio-${++radioSequence}`;
+    options = [];
+    label = '';
+    hint = '';
+    dark = false;
+    direction = 'vertical';
+    variant = 'default';
+    compareWith = (first, second) => Object.is(first, second);
+    name = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    disabledReasons = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabledReasons" }] : /* istanbul ignore next */ []));
+    readonly = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+    hidden = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hidden" }] : /* istanbul ignore next */ []));
+    invalid = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+    pending = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pending" }] : /* istanbul ignore next */ []));
+    dirty = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dirty" }] : /* istanbul ignore next */ []));
+    required = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    errors = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
+    touched = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
+    touch = output();
+    error = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+    errorDisplay = input('auto', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errorDisplay" }] : /* istanbul ignore next */ []));
+    value = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    selectionChange = new EventEmitter();
+    isDisabled = computed(() => this.formBridge.isDisabled(this.disabled()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    fieldError = computed(() => this.errors()[0]?.message || '', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fieldError" }] : /* istanbul ignore next */ []));
+    shouldDisplayFieldError = computed(() => this.formBridge.shouldDisplayError(this.errorDisplay(), this.invalid(), !!this.fieldError(), this.touched(), this.dirty()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "shouldDisplayFieldError" }] : /* istanbul ignore next */ []));
+    displayError = computed(() => this.error() || (this.shouldDisplayFieldError() ? this.fieldError() : ''), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayError" }] : /* istanbul ignore next */ []));
+    hasError = computed(() => !!this.error() || this.shouldDisplayFieldError(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
+    onChange = () => undefined;
+    get groupName() {
+        return this.name() || this.generatedName;
+    }
+    get messageId() {
+        return this.displayError() || this.hint ? `${this.groupName}-message` : null;
+    }
+    writeValue(value) {
+        this.value.set(value ?? null);
+        this.cdr.markForCheck();
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.formBridge.registerOnTouched(fn);
+    }
+    setDisabledState(disabled) {
+        this.formBridge.setDisabledState(disabled);
+    }
+    isSelected(option) {
+        return this.compareWith(option.value, this.value());
+    }
+    optionId(index) {
+        return `${this.groupName}-${index}`;
+    }
+    select(option) {
+        if (this.isDisabled() || this.readonly() || option.disabled)
+            return;
+        if (this.isSelected(option)) {
+            this.markTouched();
+            return;
+        }
+        this.value.set(option.value);
+        this.onChange(option.value);
+        this.selectionChange.emit(option.value);
+        this.markTouched();
+        this.cdr.markForCheck();
+    }
+    handleKeydown(event, index) {
+        if (!['ArrowDown', 'ArrowRight', 'ArrowUp', 'ArrowLeft', 'Home', 'End'].includes(event.key)) {
+            return;
+        }
+        event.preventDefault();
+        const enabled = this.options
+            .map((option, optionIndex) => ({ option, optionIndex }))
+            .filter((item) => !item.option.disabled);
+        if (!enabled.length)
+            return;
+        const currentPosition = enabled.findIndex((item) => item.optionIndex === index);
+        let nextPosition = currentPosition;
+        if (event.key === 'Home')
+            nextPosition = 0;
+        if (event.key === 'End')
+            nextPosition = enabled.length - 1;
+        if (event.key === 'ArrowDown' || event.key === 'ArrowRight') {
+            nextPosition = (currentPosition + 1 + enabled.length) % enabled.length;
+        }
+        if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {
+            nextPosition = (currentPosition - 1 + enabled.length) % enabled.length;
+        }
+        const next = enabled[nextPosition];
+        if (!next)
+            return;
+        this.select(next.option);
+        queueMicrotask(() => document.getElementById(this.optionId(next.optionIndex))?.focus());
+    }
+    markTouched() {
+        this.formBridge.markTouched(this.touched, this.touch);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdRadioGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: TdRadioGroup, isStandalone: true, selector: "td-radio-group", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: false, isRequired: false, transformFunction: null }, dark: { classPropertyName: "dark", publicName: "dark", isSignal: false, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: false, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: false, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, disabledReasons: { classPropertyName: "disabledReasons", publicName: "disabledReasons", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, pending: { classPropertyName: "pending", publicName: "pending", isSignal: true, isRequired: false, transformFunction: null }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, errorDisplay: { classPropertyName: "errorDisplay", publicName: "errorDisplay", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { touched: "touchedChange", touch: "touch", value: "valueChange", selectionChange: "selectionChange" }, host: { properties: { "hidden": "hidden()", "attr.aria-busy": "pending() ? \"true\" : null" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => TdRadioGroup),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<div\n  class=\"td-radio\"\n  [class.td-radio--horizontal]=\"direction === 'horizontal'\"\n  [class.td-radio--card]=\"variant === 'card'\"\n  [class.td-radio--disabled]=\"isDisabled()\"\n  [class.td-radio--readonly]=\"readonly()\"\n  [class.td-radio--error]=\"hasError()\"\n  [class.td-radio--dark]=\"dark\"\n  role=\"radiogroup\"\n  [attr.aria-label]=\"label || null\"\n  [attr.aria-required]=\"required()\"\n  [attr.aria-invalid]=\"hasError()\"\n  [attr.aria-describedby]=\"messageId\"\n>\n  @if (label) {\n    <span class=\"td-radio__legend\">{{ label }}</span>\n  }\n\n  <div class=\"td-radio__options\">\n    @for (option of options; track option.value; let index = $index) {\n      <label\n        class=\"td-radio__option\"\n        [class.td-radio__option--selected]=\"isSelected(option)\"\n        [class.td-radio__option--disabled]=\"option.disabled || isDisabled()\"\n        [for]=\"optionId(index)\"\n      >\n        <input\n          [id]=\"optionId(index)\"\n          type=\"radio\"\n          [name]=\"groupName\"\n          [checked]=\"isSelected(option)\"\n          [disabled]=\"isDisabled() || option.disabled\"\n          [required]=\"required()\"\n          [attr.aria-readonly]=\"readonly()\"\n          [attr.aria-invalid]=\"hasError()\"\n          (change)=\"select(option)\"\n          (blur)=\"markTouched()\"\n          (keydown)=\"handleKeydown($event, index)\"\n        />\n\n        <span class=\"td-radio__control\" aria-hidden=\"true\"></span>\n\n        @if (option.icon) {\n          <span class=\"td-radio__icon\">\n            <td-icon [nombre]=\"option.icon\" />\n          </span>\n        }\n\n        <span class=\"td-radio__content\">\n          <span class=\"td-radio__label\">{{ option.label }}</span>\n          @if (option.description) {\n            <span class=\"td-radio__description\">{{ option.description }}</span>\n          }\n        </span>\n      </label>\n    }\n  </div>\n</div>\n\n@if (displayError() || hint) {\n  <p\n    class=\"td-radio__message\"\n    [class.td-radio__message--error]=\"hasError()\"\n    [id]=\"messageId\"\n  >\n    {{ displayError() || hint }}\n  </p>\n}\n", styles: [":host{display:block;min-width:0;font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif)}*{box-sizing:border-box}.td-radio{--td-radio-bg: var(--td-color-surface, #ffffff);--td-radio-border: var(--td-color-border-strong, #cfd5e1);--td-radio-text: var(--td-color-text, #263147);--td-radio-muted: var(--td-color-text-muted, #748096);color:var(--td-radio-text)}.td-radio--dark{--td-radio-bg: var(--td-color-surface, #19191f);--td-radio-border: var(--td-color-border-strong, #555563);--td-radio-text: var(--td-color-text, #ededf0);--td-radio-muted: var(--td-color-text-muted, #a1a1aa);color-scheme:dark}.td-radio__legend{display:inline-flex;margin-bottom:.65rem;color:var(--td-color-primary, #5746d8);font-size:.72rem;font-weight:850}.td-radio__options{display:grid;gap:.65rem}.td-radio--horizontal .td-radio__options{display:flex;flex-wrap:wrap}.td-radio__option{position:relative;display:inline-flex;max-width:100%;align-items:flex-start;gap:.72rem;color:var(--td-radio-text);cursor:pointer;-webkit-user-select:none;user-select:none}.td-radio--card .td-radio__option{align-items:center;border:1px solid var(--td-color-border, #dce3ef);border-radius:var(--td-radius-lg, 1rem);padding:.85rem;background:var(--td-radio-bg);box-shadow:var(--td-shadow-xs, 0 8px 24px rgba(38, 50, 72, .06));transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease,background .16s ease}.td-radio--card .td-radio__option:hover:not(.td-radio__option--disabled){transform:translateY(-1px);border-color:var(--td-color-primary, #5746d8);box-shadow:var(--td-shadow-md, 0 14px 34px rgba(38, 50, 72, .1))}input{position:absolute;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}.td-radio__control{display:grid;width:1.22rem;height:1.22rem;flex:0 0 auto;place-items:center;margin-top:.05rem;border:1.6px solid var(--td-radio-border);border-radius:999px;background:var(--td-radio-bg);transition:border-color .14s ease,box-shadow .14s ease,background .14s ease,transform .1s ease}.td-radio__control:after{width:.5rem;height:.5rem;border-radius:999px;background:var(--td-color-on-primary, #ffffff);content:\"\";opacity:0;transform:scale(.35);transition:opacity .14s ease,transform .14s ease}.td-radio__option:hover:not(.td-radio__option--disabled) .td-radio__control{border-color:var(--td-color-primary, #5746d8)}.td-radio__option--selected .td-radio__control{border-color:var(--td-color-primary, #5746d8);background:var(--td-color-primary, #5746d8)}.td-radio__option--selected .td-radio__control:after{opacity:1;transform:scale(1)}input:focus-visible+.td-radio__control{border-color:var(--td-color-primary, #5746d8);box-shadow:var(--td-focus-ring, 0 0 0 3px rgba(87, 70, 216, .16))}input:active+.td-radio__control{transform:scale(.94)}.td-radio--error .td-radio__control{border-color:var(--td-color-danger, #d33f3f);box-shadow:var(--td-danger-ring, 0 0 0 3px color-mix(in srgb, var(--td-color-danger, #d33f3f) 16%, transparent))}.td-radio__icon{display:inline-grid;width:2rem;height:2rem;flex:0 0 auto;place-items:center;border-radius:var(--td-radius-md, .75rem);color:var(--td-color-primary, #5746d8);background:var(--td-color-primary-soft, #f0edff)}.td-radio__content{display:grid;min-width:0;gap:.15rem}.td-radio__label{color:var(--td-radio-text);font-size:.78rem;font-weight:780;line-height:1.35}.td-radio__description{color:var(--td-radio-muted);font-size:.68rem;line-height:1.4}.td-radio--disabled,.td-radio__option--disabled{cursor:not-allowed;opacity:.56}.td-radio--readonly .td-radio__option{cursor:default}.td-radio__message{margin:.45rem 0 0;color:var(--td-color-text-muted, #748096);font-size:.66rem;line-height:1.4}.td-radio__message--error{color:var(--td-color-danger, #c43636)}@media(max-width:700px){.td-radio--horizontal .td-radio__options{display:grid}}\n"], dependencies: [{ kind: "component", type: TdIcon, selector: "td-icon", inputs: ["nombre", "titulo", "tamano"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdRadioGroup, decorators: [{
+            type: Component,
+            args: [{ selector: 'td-radio-group', imports: [TdIcon], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => TdRadioGroup),
+                            multi: true,
+                        },
+                    ], host: {
+                        '[hidden]': 'hidden()',
+                        '[attr.aria-busy]': 'pending() ? "true" : null',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"td-radio\"\n  [class.td-radio--horizontal]=\"direction === 'horizontal'\"\n  [class.td-radio--card]=\"variant === 'card'\"\n  [class.td-radio--disabled]=\"isDisabled()\"\n  [class.td-radio--readonly]=\"readonly()\"\n  [class.td-radio--error]=\"hasError()\"\n  [class.td-radio--dark]=\"dark\"\n  role=\"radiogroup\"\n  [attr.aria-label]=\"label || null\"\n  [attr.aria-required]=\"required()\"\n  [attr.aria-invalid]=\"hasError()\"\n  [attr.aria-describedby]=\"messageId\"\n>\n  @if (label) {\n    <span class=\"td-radio__legend\">{{ label }}</span>\n  }\n\n  <div class=\"td-radio__options\">\n    @for (option of options; track option.value; let index = $index) {\n      <label\n        class=\"td-radio__option\"\n        [class.td-radio__option--selected]=\"isSelected(option)\"\n        [class.td-radio__option--disabled]=\"option.disabled || isDisabled()\"\n        [for]=\"optionId(index)\"\n      >\n        <input\n          [id]=\"optionId(index)\"\n          type=\"radio\"\n          [name]=\"groupName\"\n          [checked]=\"isSelected(option)\"\n          [disabled]=\"isDisabled() || option.disabled\"\n          [required]=\"required()\"\n          [attr.aria-readonly]=\"readonly()\"\n          [attr.aria-invalid]=\"hasError()\"\n          (change)=\"select(option)\"\n          (blur)=\"markTouched()\"\n          (keydown)=\"handleKeydown($event, index)\"\n        />\n\n        <span class=\"td-radio__control\" aria-hidden=\"true\"></span>\n\n        @if (option.icon) {\n          <span class=\"td-radio__icon\">\n            <td-icon [nombre]=\"option.icon\" />\n          </span>\n        }\n\n        <span class=\"td-radio__content\">\n          <span class=\"td-radio__label\">{{ option.label }}</span>\n          @if (option.description) {\n            <span class=\"td-radio__description\">{{ option.description }}</span>\n          }\n        </span>\n      </label>\n    }\n  </div>\n</div>\n\n@if (displayError() || hint) {\n  <p\n    class=\"td-radio__message\"\n    [class.td-radio__message--error]=\"hasError()\"\n    [id]=\"messageId\"\n  >\n    {{ displayError() || hint }}\n  </p>\n}\n", styles: [":host{display:block;min-width:0;font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif)}*{box-sizing:border-box}.td-radio{--td-radio-bg: var(--td-color-surface, #ffffff);--td-radio-border: var(--td-color-border-strong, #cfd5e1);--td-radio-text: var(--td-color-text, #263147);--td-radio-muted: var(--td-color-text-muted, #748096);color:var(--td-radio-text)}.td-radio--dark{--td-radio-bg: var(--td-color-surface, #19191f);--td-radio-border: var(--td-color-border-strong, #555563);--td-radio-text: var(--td-color-text, #ededf0);--td-radio-muted: var(--td-color-text-muted, #a1a1aa);color-scheme:dark}.td-radio__legend{display:inline-flex;margin-bottom:.65rem;color:var(--td-color-primary, #5746d8);font-size:.72rem;font-weight:850}.td-radio__options{display:grid;gap:.65rem}.td-radio--horizontal .td-radio__options{display:flex;flex-wrap:wrap}.td-radio__option{position:relative;display:inline-flex;max-width:100%;align-items:flex-start;gap:.72rem;color:var(--td-radio-text);cursor:pointer;-webkit-user-select:none;user-select:none}.td-radio--card .td-radio__option{align-items:center;border:1px solid var(--td-color-border, #dce3ef);border-radius:var(--td-radius-lg, 1rem);padding:.85rem;background:var(--td-radio-bg);box-shadow:var(--td-shadow-xs, 0 8px 24px rgba(38, 50, 72, .06));transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease,background .16s ease}.td-radio--card .td-radio__option:hover:not(.td-radio__option--disabled){transform:translateY(-1px);border-color:var(--td-color-primary, #5746d8);box-shadow:var(--td-shadow-md, 0 14px 34px rgba(38, 50, 72, .1))}input{position:absolute;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}.td-radio__control{display:grid;width:1.22rem;height:1.22rem;flex:0 0 auto;place-items:center;margin-top:.05rem;border:1.6px solid var(--td-radio-border);border-radius:999px;background:var(--td-radio-bg);transition:border-color .14s ease,box-shadow .14s ease,background .14s ease,transform .1s ease}.td-radio__control:after{width:.5rem;height:.5rem;border-radius:999px;background:var(--td-color-on-primary, #ffffff);content:\"\";opacity:0;transform:scale(.35);transition:opacity .14s ease,transform .14s ease}.td-radio__option:hover:not(.td-radio__option--disabled) .td-radio__control{border-color:var(--td-color-primary, #5746d8)}.td-radio__option--selected .td-radio__control{border-color:var(--td-color-primary, #5746d8);background:var(--td-color-primary, #5746d8)}.td-radio__option--selected .td-radio__control:after{opacity:1;transform:scale(1)}input:focus-visible+.td-radio__control{border-color:var(--td-color-primary, #5746d8);box-shadow:var(--td-focus-ring, 0 0 0 3px rgba(87, 70, 216, .16))}input:active+.td-radio__control{transform:scale(.94)}.td-radio--error .td-radio__control{border-color:var(--td-color-danger, #d33f3f);box-shadow:var(--td-danger-ring, 0 0 0 3px color-mix(in srgb, var(--td-color-danger, #d33f3f) 16%, transparent))}.td-radio__icon{display:inline-grid;width:2rem;height:2rem;flex:0 0 auto;place-items:center;border-radius:var(--td-radius-md, .75rem);color:var(--td-color-primary, #5746d8);background:var(--td-color-primary-soft, #f0edff)}.td-radio__content{display:grid;min-width:0;gap:.15rem}.td-radio__label{color:var(--td-radio-text);font-size:.78rem;font-weight:780;line-height:1.35}.td-radio__description{color:var(--td-radio-muted);font-size:.68rem;line-height:1.4}.td-radio--disabled,.td-radio__option--disabled{cursor:not-allowed;opacity:.56}.td-radio--readonly .td-radio__option{cursor:default}.td-radio__message{margin:.45rem 0 0;color:var(--td-color-text-muted, #748096);font-size:.66rem;line-height:1.4}.td-radio__message--error{color:var(--td-color-danger, #c43636)}@media(max-width:700px){.td-radio--horizontal .td-radio__options{display:grid}}\n"] }]
+        }], propDecorators: { options: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], hint: [{
+                type: Input
+            }], dark: [{
+                type: Input
+            }], direction: [{
+                type: Input
+            }], variant: [{
+                type: Input
+            }], compareWith: [{
+                type: Input
+            }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], disabledReasons: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledReasons", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], hidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidden", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], pending: [{ type: i0.Input, args: [{ isSignal: true, alias: "pending", required: false }] }], dirty: [{ type: i0.Input, args: [{ isSignal: true, alias: "dirty", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], touch: [{ type: i0.Output, args: ["touch"] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], errorDisplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorDisplay", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], selectionChange: [{
+                type: Output
+            }] } });
+
 let autocompleteSequence = 0;
 class TdAutocompleteSelect {
     cdr = inject(ChangeDetectorRef);
@@ -5973,5 +6512,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { TD_DIALOG_CONFIG, TD_DIALOG_DATA, TD_ICONOS, TD_ICONOS_NOMBRES, TD_THEME_DARK_COLORS, TD_THEME_LIGHT_COLORS, TdAlerta, TdAutocompleteSelect, TdButton, TdCheckbox, TdDataTable, TdDatePicker, TdDialog, TdDialogActions, TdDialogClose, TdDialogPrimary, TdDialogRef, TdFileViewer, TdFileViewerService, TdFooter, TdHeader, TdIcon, TdIconoRegistry, TdInput, TdMenu, TdSelect, TdSidebar, TdTab, TdTabs, TdTextarea, TdThemeService, TelcomdevUi, createTdFormControlBridge };
+export { TD_DIALOG_CONFIG, TD_DIALOG_DATA, TD_ICONOS, TD_ICONOS_NOMBRES, TD_THEME_DARK_COLORS, TD_THEME_LIGHT_COLORS, TdAlerta, TdAutocompleteSelect, TdButton, TdCheckbox, TdDataTable, TdDatePicker, TdDialog, TdDialogActions, TdDialogClose, TdDialogPrimary, TdDialogRef, TdFileUpload, TdFileViewer, TdFileViewerService, TdFooter, TdHeader, TdIcon, TdIconoRegistry, TdInput, TdMenu, TdRadioGroup, TdSelect, TdSidebar, TdTab, TdTabs, TdTextarea, TdThemeService, TelcomdevUi, createTdFormControlBridge };
 //# sourceMappingURL=telcomdev-ui.mjs.map