angular-ecosistema-unp 0.1.0-pre.0
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/README.md
ADDED
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
# angular-ecosistema-unp
|
|
2
|
+
|
|
3
|
+
Libreria de componentes Angular del Ecosistema de Informacion de la Unidad
|
|
4
|
+
Nacional de Proteccion.
|
|
5
|
+
|
|
6
|
+
Es el equivalente en Angular de
|
|
7
|
+
[`react-ecosistema-unp`](https://www.npmjs.com/package/react-ecosistema-unp):
|
|
8
|
+
reune el chrome institucional (barra superior, menu lateral, listado de roles,
|
|
9
|
+
campanita de notificaciones, mascota de usuario) y el nucleo transversal
|
|
10
|
+
(sesion, refresco de token, websockets) para que cada aplicacion nueva no vuelva
|
|
11
|
+
a implementarlo.
|
|
12
|
+
|
|
13
|
+
## Estado
|
|
14
|
+
|
|
15
|
+
Version `0.1.x`: **andamiaje**. La libreria todavia no tiene componentes
|
|
16
|
+
funcionales. Esta version existe para validar de extremo a extremo el
|
|
17
|
+
empaquetado, la publicacion y la instalacion en las aplicaciones consumidoras
|
|
18
|
+
antes de portar codigo.
|
|
19
|
+
|
|
20
|
+
Lo publicado hoy es unicamente material de diagnostico. Ver la hoja de ruta en
|
|
21
|
+
la documentacion del repositorio.
|
|
22
|
+
|
|
23
|
+
## Requisitos
|
|
24
|
+
|
|
25
|
+
- Angular 21 o superior. La version de la aplicacion debe ser mayor o igual que
|
|
26
|
+
la de la libreria.
|
|
27
|
+
- `@angular/common`, `@angular/core`, `@angular/router` y `rxjs` son
|
|
28
|
+
dependencias de pares; ya vienen en cualquier aplicacion Angular.
|
|
29
|
+
|
|
30
|
+
## Instalacion
|
|
31
|
+
|
|
32
|
+
Mientras la libreria este en prelanzamiento hay que pedir el dist-tag `pre` de
|
|
33
|
+
forma explicita, porque todavia no existe una version bajo `latest`:
|
|
34
|
+
|
|
35
|
+
```bash
|
|
36
|
+
npm install angular-ecosistema-unp@pre
|
|
37
|
+
# o, con pnpm
|
|
38
|
+
pnpm add angular-ecosistema-unp@pre
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
## Uso
|
|
42
|
+
|
|
43
|
+
Todos los componentes son standalone. En una aplicacion con arranque standalone
|
|
44
|
+
se importan en el componente que los usa:
|
|
45
|
+
|
|
46
|
+
```ts
|
|
47
|
+
import { Component } from '@angular/core';
|
|
48
|
+
import { EcoPruebaInstalacion } from 'angular-ecosistema-unp';
|
|
49
|
+
|
|
50
|
+
@Component({
|
|
51
|
+
selector: 'app-diagnostico',
|
|
52
|
+
imports: [EcoPruebaInstalacion],
|
|
53
|
+
template: `<eco-prueba-instalacion aplicacion="Mi aplicacion" />`,
|
|
54
|
+
})
|
|
55
|
+
export class Diagnostico {}
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
En una aplicacion basada en NgModule van en `imports` del modulo, nunca en
|
|
59
|
+
`declarations`:
|
|
60
|
+
|
|
61
|
+
```ts
|
|
62
|
+
@NgModule({
|
|
63
|
+
declarations: [MiComponente],
|
|
64
|
+
imports: [CommonModule, EcoPruebaInstalacion],
|
|
65
|
+
})
|
|
66
|
+
export class ShellModule {}
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
## Estilos
|
|
70
|
+
|
|
71
|
+
No hay ningun CSS obligatorio que importar: los estilos de cada componente
|
|
72
|
+
viajan incrustados en el bundle.
|
|
73
|
+
|
|
74
|
+
Los componentes se tematizan con custom properties `--eco-*` que siempre llevan
|
|
75
|
+
un valor por defecto incrustado, de modo que una aplicacion sin configurar nada
|
|
76
|
+
ve la paleta institucional. Para redefinir la paleta o reutilizar los tokens en
|
|
77
|
+
el CSS propio, se carga el archivo opcional de tokens:
|
|
78
|
+
|
|
79
|
+
```json
|
|
80
|
+
{
|
|
81
|
+
"styles": [
|
|
82
|
+
"node_modules/angular-ecosistema-unp/styles/eco-tokens.css",
|
|
83
|
+
"src/styles.css"
|
|
84
|
+
]
|
|
85
|
+
}
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
En proyectos con Tailwind v4, las entradas de `@theme` ya son custom properties
|
|
89
|
+
en `:root`, asi que se pueden enlazar con los tokens de la libreria sin duplicar
|
|
90
|
+
valores.
|
|
91
|
+
|
|
92
|
+
## API publico
|
|
93
|
+
|
|
94
|
+
| Elemento | Tipo | Descripcion |
|
|
95
|
+
| --- | --- | --- |
|
|
96
|
+
| `EcoPruebaInstalacion` | componente | Tarjeta de diagnostico de la instalacion. Temporal. |
|
|
97
|
+
| `EcoInstalacionService` | servicio | Version y entorno detectado. Temporal. |
|
|
98
|
+
| `ECO_VERSION` | constante | Version de la libreria embebida en el bundle. |
|
|
99
|
+
| `styles/eco-tokens.css` | recurso | Tokens de diseno opcionales. |
|
|
100
|
+
|
|
101
|
+
## Documentacion
|
|
102
|
+
|
|
103
|
+
La documentacion detallada vive en la aplicacion `demo` del repositorio, con una
|
|
104
|
+
pagina por componente, ejemplos en vivo y las guias de desarrollo local y
|
|
105
|
+
publicacion:
|
|
106
|
+
|
|
107
|
+
```bash
|
|
108
|
+
git clone https://github.com/EcosistemaUNP/angular-ecosistema-unp.git
|
|
109
|
+
cd angular-ecosistema-unp
|
|
110
|
+
npm install
|
|
111
|
+
npm run build:lib
|
|
112
|
+
npm start
|
|
113
|
+
```
|
|
114
|
+
|
|
115
|
+
## Repositorio
|
|
116
|
+
|
|
117
|
+
<https://github.com/EcosistemaUNP/angular-ecosistema-unp>
|
|
@@ -0,0 +1,108 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { Injectable, inject, input, computed, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* Version de la libreria embebida en el bundle.
|
|
6
|
+
*
|
|
7
|
+
* Se mantiene a mano y debe coincidir con el campo `version` de
|
|
8
|
+
* `projects/angular-ecosistema-unp/package.json`. La usa
|
|
9
|
+
* `EcoPruebaInstalacion` para que una aplicacion pueda confirmar de un vistazo
|
|
10
|
+
* que version esta resolviendo realmente (util cuando se trabaja con `npm link`
|
|
11
|
+
* y se duda de si el bundle es el publicado o el enlazado en local).
|
|
12
|
+
*/
|
|
13
|
+
const ECO_VERSION = '0.1.0-pre.0';
|
|
14
|
+
|
|
15
|
+
/**
|
|
16
|
+
* Servicio minimo de diagnostico.
|
|
17
|
+
*
|
|
18
|
+
* Existe para verificar, desde una aplicacion consumidora, que la inyeccion de
|
|
19
|
+
* dependencias de la libreria funciona sin necesidad de registrar nada: al ser
|
|
20
|
+
* `providedIn: 'root'` se auto-registra y, si no se usa, el bundler lo elimina.
|
|
21
|
+
* Es el mismo patron que usaran los servicios reales de la libreria.
|
|
22
|
+
*/
|
|
23
|
+
class EcoInstalacionService {
|
|
24
|
+
/** Version de la libreria resuelta en tiempo de ejecucion. */
|
|
25
|
+
version = ECO_VERSION;
|
|
26
|
+
/**
|
|
27
|
+
* Entorno deducido del host actual, con el mismo criterio que el menu lateral
|
|
28
|
+
* de la libreria de React (`MenuLateral`): local, desarrollo, pruebas o
|
|
29
|
+
* produccion.
|
|
30
|
+
*/
|
|
31
|
+
entorno() {
|
|
32
|
+
if (typeof window === 'undefined')
|
|
33
|
+
return 'desconocido';
|
|
34
|
+
const host = window.location.host;
|
|
35
|
+
if (host.includes('localhost') || host.includes('127.0.0.1'))
|
|
36
|
+
return 'local';
|
|
37
|
+
if (host.includes('ecosistemadesarrollo'))
|
|
38
|
+
return 'desarrollo';
|
|
39
|
+
if (host.includes('ecosistemapruebas'))
|
|
40
|
+
return 'pruebas';
|
|
41
|
+
return 'produccion';
|
|
42
|
+
}
|
|
43
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: EcoInstalacionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
44
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: EcoInstalacionService, providedIn: 'root' });
|
|
45
|
+
}
|
|
46
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: EcoInstalacionService, decorators: [{
|
|
47
|
+
type: Injectable,
|
|
48
|
+
args: [{ providedIn: 'root' }]
|
|
49
|
+
}] });
|
|
50
|
+
|
|
51
|
+
/**
|
|
52
|
+
* Tarjeta de diagnostico de la instalacion.
|
|
53
|
+
*
|
|
54
|
+
* Es el unico componente de la version 0.1.x y no tiene valor funcional: existe
|
|
55
|
+
* para validar de extremo a extremo que la libreria se resuelve bien en una
|
|
56
|
+
* aplicacion consumidora. Si se pinta con estilos y muestra la version
|
|
57
|
+
* correcta, entonces funcionan las cuatro cosas que importan del empaquetado:
|
|
58
|
+
*
|
|
59
|
+
* 1. El componente se exporta y se importa como standalone.
|
|
60
|
+
* 2. `ng-packagr` incrusto la plantilla externa en el bundle.
|
|
61
|
+
* 3. `ng-packagr` incrusto los estilos externos (no hay CSS que importar).
|
|
62
|
+
* 4. La inyeccion de dependencias de la libreria resuelve (`EcoInstalacionService`).
|
|
63
|
+
*
|
|
64
|
+
* Se retirara del API publico cuando la libreria tenga componentes reales.
|
|
65
|
+
*/
|
|
66
|
+
class EcoPruebaInstalacion {
|
|
67
|
+
instalacion = inject(EcoInstalacionService);
|
|
68
|
+
/** Nombre de la aplicacion que monta el componente. Solo decorativo. */
|
|
69
|
+
aplicacion = input('', ...(ngDevMode ? [{ debugName: "aplicacion" }] : /* istanbul ignore next */ []));
|
|
70
|
+
version = this.instalacion.version;
|
|
71
|
+
entorno = this.instalacion.entorno();
|
|
72
|
+
etiquetaEntorno = computed(() => {
|
|
73
|
+
const etiquetas = {
|
|
74
|
+
local: 'Entorno local',
|
|
75
|
+
desarrollo: 'Entorno de desarrollo',
|
|
76
|
+
pruebas: 'Entorno de pruebas',
|
|
77
|
+
produccion: 'Produccion',
|
|
78
|
+
desconocido: 'Entorno desconocido',
|
|
79
|
+
};
|
|
80
|
+
return etiquetas[this.entorno];
|
|
81
|
+
}, ...(ngDevMode ? [{ debugName: "etiquetaEntorno" }] : /* istanbul ignore next */ []));
|
|
82
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: EcoPruebaInstalacion, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
83
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: EcoPruebaInstalacion, isStandalone: true, selector: "eco-prueba-instalacion", inputs: { aplicacion: { classPropertyName: "aplicacion", publicName: "aplicacion", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<section class=\"eco-prueba\">\n <header class=\"eco-prueba__cabecera\">\n <span class=\"eco-prueba__marca\" aria-hidden=\"true\">EI</span>\n <div>\n <h2 class=\"eco-prueba__titulo\">angular-ecosistema-unp</h2>\n <p class=\"eco-prueba__subtitulo\">La libreria se resolvio correctamente</p>\n </div>\n </header>\n\n <dl class=\"eco-prueba__datos\">\n <div class=\"eco-prueba__dato\">\n <dt>Version</dt>\n <dd>{{ version }}</dd>\n </div>\n <div class=\"eco-prueba__dato\">\n <dt>Entorno</dt>\n <dd>{{ etiquetaEntorno() }}</dd>\n </div>\n @if (aplicacion()) {\n <div class=\"eco-prueba__dato\">\n <dt>Aplicacion</dt>\n <dd>{{ aplicacion() }}</dd>\n </div>\n }\n </dl>\n\n <p class=\"eco-prueba__nota\">\n Si esta tarjeta se ve con colores y bordes, los estilos de la libreria viajan\n incrustados en el bundle y no hay ningun CSS que importar aparte.\n </p>\n</section>\n", styles: [":host{display:block;font-family:var(--eco-fuente, inherit)}.eco-prueba{display:flex;flex-direction:column;gap:1rem;padding:1.25rem;border:1px solid var(--eco-color-borde, #dedede);border-radius:var(--eco-radio-lg, .75rem);background:var(--eco-color-superficie-elevada, #ffffff);box-shadow:var(--eco-sombra-md, 0 4px 6px -1px rgb(0 0 0 / .1));color:var(--eco-color-texto, #303d50)}.eco-prueba__cabecera{display:flex;align-items:center;gap:.75rem}.eco-prueba__marca{display:grid;place-items:center;flex:none;width:2.75rem;height:2.75rem;border-radius:var(--eco-radio-md, .5rem);background:var(--eco-color-menu-fondo, #303d50);color:var(--eco-color-menu-texto, #ffffff);font-size:var(--eco-texto-base, 1rem);font-weight:700;letter-spacing:.05em}.eco-prueba__titulo{margin:0;font-size:var(--eco-texto-lg, 1.125rem);font-weight:600}.eco-prueba__subtitulo{margin:0;font-size:var(--eco-texto-sm, .875rem);color:var(--eco-color-exito, #16a34a);font-weight:600}.eco-prueba__datos{display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));gap:.75rem;margin:0;padding:.875rem;border-radius:var(--eco-radio-md, .5rem);background:var(--eco-color-superficie-alt, #f3f6f9)}.eco-prueba__dato{min-width:0}.eco-prueba__dato dt{font-size:var(--eco-texto-xs, .75rem);text-transform:uppercase;letter-spacing:.04em;color:var(--eco-color-texto-suave, #526581)}.eco-prueba__dato dd{margin:.125rem 0 0;font-size:var(--eco-texto-sm, .875rem);font-weight:600;overflow-wrap:anywhere}.eco-prueba__nota{margin:0;font-size:var(--eco-texto-xs, .75rem);line-height:1.5;color:var(--eco-color-texto-suave, #526581)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
84
|
+
}
|
|
85
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: EcoPruebaInstalacion, decorators: [{
|
|
86
|
+
type: Component,
|
|
87
|
+
args: [{ selector: 'eco-prueba-instalacion', changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"eco-prueba\">\n <header class=\"eco-prueba__cabecera\">\n <span class=\"eco-prueba__marca\" aria-hidden=\"true\">EI</span>\n <div>\n <h2 class=\"eco-prueba__titulo\">angular-ecosistema-unp</h2>\n <p class=\"eco-prueba__subtitulo\">La libreria se resolvio correctamente</p>\n </div>\n </header>\n\n <dl class=\"eco-prueba__datos\">\n <div class=\"eco-prueba__dato\">\n <dt>Version</dt>\n <dd>{{ version }}</dd>\n </div>\n <div class=\"eco-prueba__dato\">\n <dt>Entorno</dt>\n <dd>{{ etiquetaEntorno() }}</dd>\n </div>\n @if (aplicacion()) {\n <div class=\"eco-prueba__dato\">\n <dt>Aplicacion</dt>\n <dd>{{ aplicacion() }}</dd>\n </div>\n }\n </dl>\n\n <p class=\"eco-prueba__nota\">\n Si esta tarjeta se ve con colores y bordes, los estilos de la libreria viajan\n incrustados en el bundle y no hay ningun CSS que importar aparte.\n </p>\n</section>\n", styles: [":host{display:block;font-family:var(--eco-fuente, inherit)}.eco-prueba{display:flex;flex-direction:column;gap:1rem;padding:1.25rem;border:1px solid var(--eco-color-borde, #dedede);border-radius:var(--eco-radio-lg, .75rem);background:var(--eco-color-superficie-elevada, #ffffff);box-shadow:var(--eco-sombra-md, 0 4px 6px -1px rgb(0 0 0 / .1));color:var(--eco-color-texto, #303d50)}.eco-prueba__cabecera{display:flex;align-items:center;gap:.75rem}.eco-prueba__marca{display:grid;place-items:center;flex:none;width:2.75rem;height:2.75rem;border-radius:var(--eco-radio-md, .5rem);background:var(--eco-color-menu-fondo, #303d50);color:var(--eco-color-menu-texto, #ffffff);font-size:var(--eco-texto-base, 1rem);font-weight:700;letter-spacing:.05em}.eco-prueba__titulo{margin:0;font-size:var(--eco-texto-lg, 1.125rem);font-weight:600}.eco-prueba__subtitulo{margin:0;font-size:var(--eco-texto-sm, .875rem);color:var(--eco-color-exito, #16a34a);font-weight:600}.eco-prueba__datos{display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));gap:.75rem;margin:0;padding:.875rem;border-radius:var(--eco-radio-md, .5rem);background:var(--eco-color-superficie-alt, #f3f6f9)}.eco-prueba__dato{min-width:0}.eco-prueba__dato dt{font-size:var(--eco-texto-xs, .75rem);text-transform:uppercase;letter-spacing:.04em;color:var(--eco-color-texto-suave, #526581)}.eco-prueba__dato dd{margin:.125rem 0 0;font-size:var(--eco-texto-sm, .875rem);font-weight:600;overflow-wrap:anywhere}.eco-prueba__nota{margin:0;font-size:var(--eco-texto-xs, .75rem);line-height:1.5;color:var(--eco-color-texto-suave, #526581)}\n"] }]
|
|
88
|
+
}], propDecorators: { aplicacion: [{ type: i0.Input, args: [{ isSignal: true, alias: "aplicacion", required: false }] }] } });
|
|
89
|
+
|
|
90
|
+
/*
|
|
91
|
+
* API publico de angular-ecosistema-unp.
|
|
92
|
+
*
|
|
93
|
+
* Todo lo que se exporte aqui es lo que ven las aplicaciones consumidoras.
|
|
94
|
+
* Nada mas. Antes de anadir una linea conviene preguntarse si esa pieza es
|
|
95
|
+
* "del ecosistema" (chrome institucional, sesion, notificaciones, websockets)
|
|
96
|
+
* o si es logica de una aplicacion concreta, que no deberia salir de ella.
|
|
97
|
+
*
|
|
98
|
+
* Estado actual: version 0.1.x, solo diagnostico de instalacion.
|
|
99
|
+
* Ver docs/hoja-de-ruta.md para lo que entra en cada fase.
|
|
100
|
+
*/
|
|
101
|
+
// Diagnostico de instalacion (se retira cuando entren los componentes reales)
|
|
102
|
+
|
|
103
|
+
/**
|
|
104
|
+
* Generated bundle index. Do not edit.
|
|
105
|
+
*/
|
|
106
|
+
|
|
107
|
+
export { ECO_VERSION, EcoInstalacionService, EcoPruebaInstalacion };
|
|
108
|
+
//# sourceMappingURL=angular-ecosistema-unp.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"angular-ecosistema-unp.mjs","sources":["../../../projects/angular-ecosistema-unp/src/lib/version/eco-version.ts","../../../projects/angular-ecosistema-unp/src/lib/prueba-instalacion/eco-prueba-instalacion.service.ts","../../../projects/angular-ecosistema-unp/src/lib/prueba-instalacion/eco-prueba-instalacion.ts","../../../projects/angular-ecosistema-unp/src/lib/prueba-instalacion/eco-prueba-instalacion.html","../../../projects/angular-ecosistema-unp/src/public-api.ts","../../../projects/angular-ecosistema-unp/src/angular-ecosistema-unp.ts"],"sourcesContent":["/**\n * Version de la libreria embebida en el bundle.\n *\n * Se mantiene a mano y debe coincidir con el campo `version` de\n * `projects/angular-ecosistema-unp/package.json`. La usa\n * `EcoPruebaInstalacion` para que una aplicacion pueda confirmar de un vistazo\n * que version esta resolviendo realmente (util cuando se trabaja con `npm link`\n * y se duda de si el bundle es el publicado o el enlazado en local).\n */\nexport const ECO_VERSION = '0.1.0-pre.0';\n","import { Injectable } from '@angular/core';\nimport { ECO_VERSION } from '../version/eco-version';\n\n/**\n * Servicio minimo de diagnostico.\n *\n * Existe para verificar, desde una aplicacion consumidora, que la inyeccion de\n * dependencias de la libreria funciona sin necesidad de registrar nada: al ser\n * `providedIn: 'root'` se auto-registra y, si no se usa, el bundler lo elimina.\n * Es el mismo patron que usaran los servicios reales de la libreria.\n */\n@Injectable({ providedIn: 'root' })\nexport class EcoInstalacionService {\n /** Version de la libreria resuelta en tiempo de ejecucion. */\n readonly version = ECO_VERSION;\n\n /**\n * Entorno deducido del host actual, con el mismo criterio que el menu lateral\n * de la libreria de React (`MenuLateral`): local, desarrollo, pruebas o\n * produccion.\n */\n entorno(): 'local' | 'desarrollo' | 'pruebas' | 'produccion' | 'desconocido' {\n if (typeof window === 'undefined') return 'desconocido';\n\n const host = window.location.host;\n if (host.includes('localhost') || host.includes('127.0.0.1')) return 'local';\n if (host.includes('ecosistemadesarrollo')) return 'desarrollo';\n if (host.includes('ecosistemapruebas')) return 'pruebas';\n return 'produccion';\n }\n}\n","import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';\nimport { EcoInstalacionService } from './eco-prueba-instalacion.service';\n\n/**\n * Tarjeta de diagnostico de la instalacion.\n *\n * Es el unico componente de la version 0.1.x y no tiene valor funcional: existe\n * para validar de extremo a extremo que la libreria se resuelve bien en una\n * aplicacion consumidora. Si se pinta con estilos y muestra la version\n * correcta, entonces funcionan las cuatro cosas que importan del empaquetado:\n *\n * 1. El componente se exporta y se importa como standalone.\n * 2. `ng-packagr` incrusto la plantilla externa en el bundle.\n * 3. `ng-packagr` incrusto los estilos externos (no hay CSS que importar).\n * 4. La inyeccion de dependencias de la libreria resuelve (`EcoInstalacionService`).\n *\n * Se retirara del API publico cuando la libreria tenga componentes reales.\n */\n@Component({\n selector: 'eco-prueba-instalacion',\n templateUrl: './eco-prueba-instalacion.html',\n styleUrl: './eco-prueba-instalacion.css',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class EcoPruebaInstalacion {\n private readonly instalacion = inject(EcoInstalacionService);\n\n /** Nombre de la aplicacion que monta el componente. Solo decorativo. */\n readonly aplicacion = input<string>('');\n\n readonly version = this.instalacion.version;\n readonly entorno = this.instalacion.entorno();\n\n readonly etiquetaEntorno = computed(() => {\n const etiquetas: Record<string, string> = {\n local: 'Entorno local',\n desarrollo: 'Entorno de desarrollo',\n pruebas: 'Entorno de pruebas',\n produccion: 'Produccion',\n desconocido: 'Entorno desconocido',\n };\n return etiquetas[this.entorno];\n });\n}\n","<section class=\"eco-prueba\">\n <header class=\"eco-prueba__cabecera\">\n <span class=\"eco-prueba__marca\" aria-hidden=\"true\">EI</span>\n <div>\n <h2 class=\"eco-prueba__titulo\">angular-ecosistema-unp</h2>\n <p class=\"eco-prueba__subtitulo\">La libreria se resolvio correctamente</p>\n </div>\n </header>\n\n <dl class=\"eco-prueba__datos\">\n <div class=\"eco-prueba__dato\">\n <dt>Version</dt>\n <dd>{{ version }}</dd>\n </div>\n <div class=\"eco-prueba__dato\">\n <dt>Entorno</dt>\n <dd>{{ etiquetaEntorno() }}</dd>\n </div>\n @if (aplicacion()) {\n <div class=\"eco-prueba__dato\">\n <dt>Aplicacion</dt>\n <dd>{{ aplicacion() }}</dd>\n </div>\n }\n </dl>\n\n <p class=\"eco-prueba__nota\">\n Si esta tarjeta se ve con colores y bordes, los estilos de la libreria viajan\n incrustados en el bundle y no hay ningun CSS que importar aparte.\n </p>\n</section>\n","/*\n * API publico de angular-ecosistema-unp.\n *\n * Todo lo que se exporte aqui es lo que ven las aplicaciones consumidoras.\n * Nada mas. Antes de anadir una linea conviene preguntarse si esa pieza es\n * \"del ecosistema\" (chrome institucional, sesion, notificaciones, websockets)\n * o si es logica de una aplicacion concreta, que no deberia salir de ella.\n *\n * Estado actual: version 0.1.x, solo diagnostico de instalacion.\n * Ver docs/hoja-de-ruta.md para lo que entra en cada fase.\n */\n\n// Diagnostico de instalacion (se retira cuando entren los componentes reales)\nexport { EcoPruebaInstalacion } from './lib/prueba-instalacion/eco-prueba-instalacion';\nexport { EcoInstalacionService } from './lib/prueba-instalacion/eco-prueba-instalacion.service';\n\n// Metadatos\nexport { ECO_VERSION } from './lib/version/eco-version';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;AAAA;;;;;;;;AAQG;AACI,MAAM,WAAW,GAAG;;ACN3B;;;;;;;AAOG;MAEU,qBAAqB,CAAA;;IAEvB,OAAO,GAAG,WAAW;AAE9B;;;;AAIG;IACH,OAAO,GAAA;QACL,IAAI,OAAO,MAAM,KAAK,WAAW;AAAE,YAAA,OAAO,aAAa;AAEvD,QAAA,MAAM,IAAI,GAAG,MAAM,CAAC,QAAQ,CAAC,IAAI;AACjC,QAAA,IAAI,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC;AAAE,YAAA,OAAO,OAAO;AAC5E,QAAA,IAAI,IAAI,CAAC,QAAQ,CAAC,sBAAsB,CAAC;AAAE,YAAA,OAAO,YAAY;AAC9D,QAAA,IAAI,IAAI,CAAC,QAAQ,CAAC,mBAAmB,CAAC;AAAE,YAAA,OAAO,SAAS;AACxD,QAAA,OAAO,YAAY;IACrB;wGAjBW,qBAAqB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA;AAArB,IAAA,OAAA,KAAA,GAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,qBAAqB,cADR,MAAM,EAAA,CAAA;;4FACnB,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBADjC,UAAU;mBAAC,EAAE,UAAU,EAAE,MAAM,EAAE;;;ACRlC;;;;;;;;;;;;;;AAcG;MAOU,oBAAoB,CAAA;AACd,IAAA,WAAW,GAAG,MAAM,CAAC,qBAAqB,CAAC;;AAGnD,IAAA,UAAU,GAAG,KAAK,CAAS,EAAE,iFAAC;AAE9B,IAAA,OAAO,GAAG,IAAI,CAAC,WAAW,CAAC,OAAO;AAClC,IAAA,OAAO,GAAG,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE;AAEpC,IAAA,eAAe,GAAG,QAAQ,CAAC,MAAK;AACvC,QAAA,MAAM,SAAS,GAA2B;AACxC,YAAA,KAAK,EAAE,eAAe;AACtB,YAAA,UAAU,EAAE,uBAAuB;AACnC,YAAA,OAAO,EAAE,oBAAoB;AAC7B,YAAA,UAAU,EAAE,YAAY;AACxB,YAAA,WAAW,EAAE,qBAAqB;SACnC;AACD,QAAA,OAAO,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC;AAChC,IAAA,CAAC,sFAAC;wGAlBS,oBAAoB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAApB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,oBAAoB,qOCxBjC,m8BA+BA,EAAA,MAAA,EAAA,CAAA,4jDAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;4FDPa,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBANhC,SAAS;+BACE,wBAAwB,EAAA,eAAA,EAGjB,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,m8BAAA,EAAA,MAAA,EAAA,CAAA,4jDAAA,CAAA,EAAA;;;AEtBjD;;;;;;;;;;AAUG;AAEH;;ACZA;;AAEG;;"}
|
package/package.json
ADDED
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "angular-ecosistema-unp",
|
|
3
|
+
"version": "0.1.0-pre.0",
|
|
4
|
+
"description": "Libreria de componentes Angular del Ecosistema de Informacion de la Unidad Nacional de Proteccion",
|
|
5
|
+
"author": "Ecosistema de Informacion - Unidad Nacional de Proteccion",
|
|
6
|
+
"keywords": [
|
|
7
|
+
"angular",
|
|
8
|
+
"unp",
|
|
9
|
+
"ecosistema",
|
|
10
|
+
"componentes"
|
|
11
|
+
],
|
|
12
|
+
"repository": {
|
|
13
|
+
"type": "git",
|
|
14
|
+
"url": "https://github.com/EcosistemaUNP/angular-ecosistema-unp.git"
|
|
15
|
+
},
|
|
16
|
+
"homepage": "https://github.com/EcosistemaUNP/angular-ecosistema-unp#readme",
|
|
17
|
+
"bugs": {
|
|
18
|
+
"url": "https://github.com/EcosistemaUNP/angular-ecosistema-unp/issues"
|
|
19
|
+
},
|
|
20
|
+
"publishConfig": {
|
|
21
|
+
"access": "public"
|
|
22
|
+
},
|
|
23
|
+
"peerDependencies": {
|
|
24
|
+
"@angular/common": "^21.0.0",
|
|
25
|
+
"@angular/core": "^21.0.0",
|
|
26
|
+
"@angular/router": "^21.0.0",
|
|
27
|
+
"rxjs": "^7.8.0"
|
|
28
|
+
},
|
|
29
|
+
"dependencies": {
|
|
30
|
+
"tslib": "^2.3.0"
|
|
31
|
+
},
|
|
32
|
+
"exports": {
|
|
33
|
+
"./styles/eco-tokens.css": "./styles/eco-tokens.css",
|
|
34
|
+
"./package.json": {
|
|
35
|
+
"default": "./package.json"
|
|
36
|
+
},
|
|
37
|
+
".": {
|
|
38
|
+
"types": "./types/angular-ecosistema-unp.d.ts",
|
|
39
|
+
"default": "./fesm2022/angular-ecosistema-unp.mjs"
|
|
40
|
+
}
|
|
41
|
+
},
|
|
42
|
+
"sideEffects": false,
|
|
43
|
+
"module": "fesm2022/angular-ecosistema-unp.mjs",
|
|
44
|
+
"typings": "types/angular-ecosistema-unp.d.ts",
|
|
45
|
+
"type": "module"
|
|
46
|
+
}
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* Tokens de diseno del Ecosistema de Informacion (UNP).
|
|
3
|
+
*
|
|
4
|
+
* Los componentes de la libreria leen SIEMPRE estos tokens con un valor por
|
|
5
|
+
* defecto incrustado, por ejemplo:
|
|
6
|
+
*
|
|
7
|
+
* background: var(--eco-color-superficie, #F8F9FA);
|
|
8
|
+
*
|
|
9
|
+
* Por eso este archivo es OPCIONAL: una aplicacion que no lo importe ve la
|
|
10
|
+
* paleta institucional por defecto. Se importa cuando se quiere:
|
|
11
|
+
*
|
|
12
|
+
* 1. Tener los tokens disponibles para el CSS propio de la aplicacion.
|
|
13
|
+
* 2. Sobrescribir la paleta (redefiniendo las variables despues del import).
|
|
14
|
+
*
|
|
15
|
+
* Proyectos con Tailwind v4: el bloque `@theme` ya publica sus colores como
|
|
16
|
+
* custom properties en `:root`, asi que se puede enlazar una paleta con otra
|
|
17
|
+
* sin duplicar valores. Ver docs/estilos.md.
|
|
18
|
+
*/
|
|
19
|
+
|
|
20
|
+
:root {
|
|
21
|
+
/* Superficies */
|
|
22
|
+
--eco-color-superficie: #f8f9fa;
|
|
23
|
+
--eco-color-superficie-alt: #f3f6f9;
|
|
24
|
+
--eco-color-superficie-elevada: #ffffff;
|
|
25
|
+
|
|
26
|
+
/* Texto */
|
|
27
|
+
--eco-color-texto: #303d50;
|
|
28
|
+
--eco-color-texto-suave: #526581;
|
|
29
|
+
--eco-color-texto-inverso: #ffffff;
|
|
30
|
+
|
|
31
|
+
/* Marca */
|
|
32
|
+
--eco-color-primario: #1f3a8a;
|
|
33
|
+
--eco-color-primario-contraste: #ffffff;
|
|
34
|
+
--eco-color-acento: #e8f0f5;
|
|
35
|
+
--eco-color-acento-fuerte: #365072;
|
|
36
|
+
|
|
37
|
+
/* Bordes y separadores */
|
|
38
|
+
--eco-color-borde: #dedede;
|
|
39
|
+
|
|
40
|
+
/* Estado */
|
|
41
|
+
--eco-color-exito: #16a34a;
|
|
42
|
+
--eco-color-advertencia: #d97706;
|
|
43
|
+
--eco-color-error: #dc2626;
|
|
44
|
+
--eco-color-info: #2563eb;
|
|
45
|
+
|
|
46
|
+
/* Chrome institucional */
|
|
47
|
+
--eco-color-menu-fondo: #303d50;
|
|
48
|
+
--eco-color-menu-texto: #ffffff;
|
|
49
|
+
--eco-color-header-fondo: #f8f9fa;
|
|
50
|
+
|
|
51
|
+
/* Formas */
|
|
52
|
+
--eco-radio-sm: 0.375rem;
|
|
53
|
+
--eco-radio-md: 0.5rem;
|
|
54
|
+
--eco-radio-lg: 0.75rem;
|
|
55
|
+
--eco-radio-full: 9999px;
|
|
56
|
+
|
|
57
|
+
/* Sombras */
|
|
58
|
+
--eco-sombra-sm: 0 1px 2px rgb(0 0 0 / 0.05);
|
|
59
|
+
--eco-sombra-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
|
|
60
|
+
--eco-sombra-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
|
|
61
|
+
|
|
62
|
+
/* Tipografia */
|
|
63
|
+
--eco-fuente: inherit;
|
|
64
|
+
--eco-texto-xs: 0.75rem;
|
|
65
|
+
--eco-texto-sm: 0.875rem;
|
|
66
|
+
--eco-texto-base: 1rem;
|
|
67
|
+
--eco-texto-lg: 1.125rem;
|
|
68
|
+
|
|
69
|
+
/* Medidas del chrome */
|
|
70
|
+
--eco-header-alto: 4rem;
|
|
71
|
+
--eco-menu-ancho: 20rem;
|
|
72
|
+
|
|
73
|
+
/* Capas */
|
|
74
|
+
--eco-z-header: 1000;
|
|
75
|
+
--eco-z-overlay: 1100;
|
|
76
|
+
--eco-z-menu: 1200;
|
|
77
|
+
}
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Tarjeta de diagnostico de la instalacion.
|
|
5
|
+
*
|
|
6
|
+
* Es el unico componente de la version 0.1.x y no tiene valor funcional: existe
|
|
7
|
+
* para validar de extremo a extremo que la libreria se resuelve bien en una
|
|
8
|
+
* aplicacion consumidora. Si se pinta con estilos y muestra la version
|
|
9
|
+
* correcta, entonces funcionan las cuatro cosas que importan del empaquetado:
|
|
10
|
+
*
|
|
11
|
+
* 1. El componente se exporta y se importa como standalone.
|
|
12
|
+
* 2. `ng-packagr` incrusto la plantilla externa en el bundle.
|
|
13
|
+
* 3. `ng-packagr` incrusto los estilos externos (no hay CSS que importar).
|
|
14
|
+
* 4. La inyeccion de dependencias de la libreria resuelve (`EcoInstalacionService`).
|
|
15
|
+
*
|
|
16
|
+
* Se retirara del API publico cuando la libreria tenga componentes reales.
|
|
17
|
+
*/
|
|
18
|
+
declare class EcoPruebaInstalacion {
|
|
19
|
+
private readonly instalacion;
|
|
20
|
+
/** Nombre de la aplicacion que monta el componente. Solo decorativo. */
|
|
21
|
+
readonly aplicacion: i0.InputSignal<string>;
|
|
22
|
+
readonly version = "0.1.0-pre.0";
|
|
23
|
+
readonly entorno: "local" | "desarrollo" | "pruebas" | "produccion" | "desconocido";
|
|
24
|
+
readonly etiquetaEntorno: i0.Signal<string>;
|
|
25
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<EcoPruebaInstalacion, never>;
|
|
26
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<EcoPruebaInstalacion, "eco-prueba-instalacion", never, { "aplicacion": { "alias": "aplicacion"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
/**
|
|
30
|
+
* Servicio minimo de diagnostico.
|
|
31
|
+
*
|
|
32
|
+
* Existe para verificar, desde una aplicacion consumidora, que la inyeccion de
|
|
33
|
+
* dependencias de la libreria funciona sin necesidad de registrar nada: al ser
|
|
34
|
+
* `providedIn: 'root'` se auto-registra y, si no se usa, el bundler lo elimina.
|
|
35
|
+
* Es el mismo patron que usaran los servicios reales de la libreria.
|
|
36
|
+
*/
|
|
37
|
+
declare class EcoInstalacionService {
|
|
38
|
+
/** Version de la libreria resuelta en tiempo de ejecucion. */
|
|
39
|
+
readonly version = "0.1.0-pre.0";
|
|
40
|
+
/**
|
|
41
|
+
* Entorno deducido del host actual, con el mismo criterio que el menu lateral
|
|
42
|
+
* de la libreria de React (`MenuLateral`): local, desarrollo, pruebas o
|
|
43
|
+
* produccion.
|
|
44
|
+
*/
|
|
45
|
+
entorno(): 'local' | 'desarrollo' | 'pruebas' | 'produccion' | 'desconocido';
|
|
46
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<EcoInstalacionService, never>;
|
|
47
|
+
static ɵprov: i0.ɵɵInjectableDeclaration<EcoInstalacionService>;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
/**
|
|
51
|
+
* Version de la libreria embebida en el bundle.
|
|
52
|
+
*
|
|
53
|
+
* Se mantiene a mano y debe coincidir con el campo `version` de
|
|
54
|
+
* `projects/angular-ecosistema-unp/package.json`. La usa
|
|
55
|
+
* `EcoPruebaInstalacion` para que una aplicacion pueda confirmar de un vistazo
|
|
56
|
+
* que version esta resolviendo realmente (util cuando se trabaja con `npm link`
|
|
57
|
+
* y se duda de si el bundle es el publicado o el enlazado en local).
|
|
58
|
+
*/
|
|
59
|
+
declare const ECO_VERSION = "0.1.0-pre.0";
|
|
60
|
+
|
|
61
|
+
export { ECO_VERSION, EcoInstalacionService, EcoPruebaInstalacion };
|