@xosue-utils/inputs

Librería Angular 19 de inputs standalone (text, select, date, media, rich-text, …), extraída de Caludy.

Estructura

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):

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):

<context-menu-service></context-menu-service>

Desarrollo local (sin publicar)

En el package.json de tu app:

"dependencies": {
  "@xosue-utils/inputs": "file:../xosue-utils/inputs"
}

O en tsconfig.json (path mapping sin build):

"paths": {
  "@xosue-utils/inputs": ["../xosue-utils/inputs/src/public-api.ts"],
  "@xosue-utils/inputs/*": ["../xosue-utils/inputs/src/*"]
}

Build del paquete

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
2. Verificá el email
3. Creá una organización (recomendado) p.ej. xosue-utils:
   • 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:

"name": "@tu-org/inputs"

2) Login

npm login
# usuario, password, email, OTP si tenés 2FA
npm whoami

3) Publicar

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:

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

npm install @xosue-utils/inputs

import { TextEntryComponent, OnlySelectComponent } from '@xosue-utils/inputs';

6) GitHub Packages (alternativa a npmjs)

Si preferís GitHub:

# .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:

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, rxjs

Nota

media-entry exige provideXosueUtilsMedia(...). El resto de inputs solo necesita provideXosueUtilsInputs(...).