@xosue-utils/inputs 0.1.0

package/README.md

@@ -0,0 +1,169 @@
+# @xosue-utils/inputs
+
+Librería Angular 19 de inputs standalone (text, select, date, media, rich-text, …), extraída de Caludy.
+
+## Estructura
+
+```text
+inputs/
+  package.json          # manifiesto npm
+  ng-package.json       # build con ng-packagr
+  src/
+    public-api.ts       # API pública
+    config/             # provideXosueUtilsInputs / media adapters
+    lib/                # componentes de input
+    vendor/             # lucide-icon, field-help-tooltip, context-menu, pipes…
+```
+
+## Requisitos del host
+
+En `app.config.ts` (o `main`):
+
+```ts
+import {
+  provideXosueUtilsInputs,
+  provideXosueUtilsMedia,
+  ContextMenuServiceComponent,
+} from '@xosue-utils/inputs';
+import { environment } from './enviroments/environment';
+import { AuthService } from './core/services/auth.service';
+import { MediaPreviewService } from '...';
+import { MediaViewerService } from '...';
+
+export const appConfig = {
+  providers: [
+    ...provideXosueUtilsInputs({
+      apiUrl: environment.apiUrl,
+      getAuthToken: () => inject(AuthService).getToken(), // o closure con tu auth
+    }),
+    // Solo si usas <media-entry>
+    ...provideXosueUtilsMedia({
+      preview: inject(MediaPreviewService),
+      viewer: inject(MediaViewerService),
+    }),
+  ],
+};
+```
+
+Montá el overlay de context-menu una vez (field-help):
+
+```html
+<context-menu-service></context-menu-service>
+```
+
+## Desarrollo local (sin publicar)
+
+En el `package.json` de tu app:
+
+```json
+"dependencies": {
+  "@xosue-utils/inputs": "file:../xosue-utils/inputs"
+}
+```
+
+O en `tsconfig.json` (path mapping sin build):
+
+```json
+"paths": {
+  "@xosue-utils/inputs": ["../xosue-utils/inputs/src/public-api.ts"],
+  "@xosue-utils/inputs/*": ["../xosue-utils/inputs/src/*"]
+}
+```
+
+## Build del paquete
+
+```bash
+cd D:\apps\xosue-utils\inputs
+npm install
+npm run build
+```
+
+La salida queda en `dist/` lista para publicar.
+
+## Cómo subirla a npm (librería oficial)
+
+### 1) Cuenta y scope
+
+1. Creá cuenta en [https://www.npmjs.com/signup](https://www.npmjs.com/signup)
+2. Verificá el email
+3. Creá una **organización** (recomendado) p.ej. `xosue-utils`:
+   - [https://www.npmjs.com/org/create](https://www.npmjs.com/org/create)
+4. El nombre del paquete ya es `@xosue-utils/inputs` (scope = org)
+
+Si la org `xosue-utils` no está libre, cambiá en `package.json`:
+
+```json
+"name": "@tu-org/inputs"
+```
+
+### 2) Login
+
+```bash
+npm login
+# usuario, password, email, OTP si tenés 2FA
+npm whoami
+```
+
+### 3) Publicar
+
+```bash
+cd D:\apps\xosue-utils\inputs
+npm run build
+npm publish ./dist --access public
+```
+
+- `--access public` es obligatorio la primera vez en scopes gratuitos.
+- Si el paquete debe ser **privado** (npm Pro): omití `--access public` y usá plan de pago.
+- El build deja el paquete listo en `dist/` (ahí está el `package.json` que se publica).
+
+### 4) Versionado
+
+Antes de cada release:
+
+```bash
+npm version patch   # 0.1.0 → 0.1.1
+# o: npm version minor / major
+npm run build
+npm publish ./dist --access public
+```
+
+### 5) Usar desde un proyecto
+
+```bash
+npm install @xosue-utils/inputs
+```
+
+```ts
+import { TextEntryComponent, OnlySelectComponent } from '@xosue-utils/inputs';
+```
+
+### 6) GitHub Packages (alternativa a npmjs)
+
+Si preferís GitHub:
+
+```bash
+# .npmrc en xosue-utils/inputs
+@xosue-utils:registry=https://npm.pkg.github.com
+//npm.pkg.github.com/:_authToken=YOUR_GH_TOKEN
+
+npm publish ./dist
+```
+
+Y en la app:
+
+```bash
+npm install @xosue-utils/inputs --registry=https://npm.pkg.github.com
+```
+
+## Peer dependencies
+
+El host debe instalar (si aún no las tiene):
+
+- `@angular/*` 19
+- `@lucide/angular`
+- `lexical` + `@lexical/*` (rich-text)
+- `luxon`, `sortablejs`, `rxjs`
+
+## Nota
+
+`media-entry` exige `provideXosueUtilsMedia(...)`. El resto de inputs solo necesita `provideXosueUtilsInputs(...)`.

package/config/inputs-config.d.ts

@@ -0,0 +1,18 @@
+import { InjectionToken, Provider } from '@angular/core';
+import { type XosueUtilsMediaPreview, type XosueUtilsMediaViewer } from './media-adapters';
+export * from './media-adapters';
+/**
+ * Configuración que cada app host debe proveer al usar @xosue-utils/inputs.
+ */
+export interface XosueUtilsInputsConfig {
+    /** Base URL del API (sin slash final), p.ej. https://api.ejemplo.com */
+    apiUrl: string;
+    /** Token Bearer actual, o null si no hay sesión. */
+    getAuthToken: () => string | null;
+}
+export declare const XOSUE_UTILS_INPUTS_CONFIG: InjectionToken<XosueUtilsInputsConfig>;
+export declare function provideXosueUtilsInputs(config: XosueUtilsInputsConfig): Provider[];
+export declare function provideXosueUtilsMedia(options: {
+    preview: XosueUtilsMediaPreview;
+    viewer: XosueUtilsMediaViewer;
+}): Provider[];

package/config/media-adapters.d.ts

@@ -0,0 +1,24 @@
+import { InjectionToken } from '@angular/core';
+/** Estado mutable para resolver URLs de imagen desde el backend. */
+export interface BackendMediaImageUrlState {
+    cache: Record<string, string>;
+    pending: Set<string>;
+    failed: Set<string>;
+}
+export declare function createBackendMediaImageUrlState(): BackendMediaImageUrlState;
+export type GeneralViewerMode = 'image' | 'video' | 'audio' | 'document' | 'download';
+/**
+ * Contrato mínimo que el host debe implementar (adaptador sobre MediaPreviewService).
+ */
+export interface XosueUtilsMediaPreview {
+    scheduleBackendImageDisplayUrl(hash: string, state: BackendMediaImageUrlState, onReady: () => void): string;
+    resolveImageUrlForMetadata(hashOrUrl: string): Promise<string>;
+}
+export declare const XOSUE_UTILS_MEDIA_PREVIEW: InjectionToken<XosueUtilsMediaPreview>;
+/**
+ * Contrato mínimo del visor global (adaptador sobre MediaViewerService).
+ */
+export interface XosueUtilsMediaViewer {
+    open(params: Record<string, unknown>): void;
+}
+export declare const XOSUE_UTILS_MEDIA_VIEWER: InjectionToken<XosueUtilsMediaViewer>;