@jvsoft/components 1.0.0-alpha.5 → 1.0.0-alpha.6
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/dialog-flotante/README.md +169 -0
- package/dialog-flotante/dialog-flotante.component.d.ts +13 -22
- package/fesm2022/jvsoft-components-dialog-flotante.mjs +51 -84
- package/fesm2022/jvsoft-components-dialog-flotante.mjs.map +1 -1
- package/fesm2022/jvsoft-components-lista-arbol.mjs +3 -3
- package/fesm2022/jvsoft-components-lista-arbol.mjs.map +1 -1
- package/fesm2022/jvsoft-components-luces-navidad.mjs +3 -3
- package/fesm2022/jvsoft-components-luces-navidad.mjs.map +1 -1
- package/fesm2022/jvsoft-components-mat-suffix-search-button.mjs +3 -3
- package/fesm2022/jvsoft-components-mat-suffix-search-button.mjs.map +1 -1
- package/fesm2022/jvsoft-components-menu.mjs +3 -3
- package/fesm2022/jvsoft-components-menu.mjs.map +1 -1
- package/fesm2022/jvsoft-components-tabla-mantenimiento-components-progress-bar.mjs +3 -3
- package/fesm2022/jvsoft-components-tabla-mantenimiento-components-progress-bar.mjs.map +1 -1
- package/fesm2022/jvsoft-components-tabla-mantenimiento.mjs +54 -54
- package/fesm2022/jvsoft-components-tabla-mantenimiento.mjs.map +1 -1
- package/fesm2022/jvsoft-components.mjs +117 -150
- package/fesm2022/jvsoft-components.mjs.map +1 -1
- package/package.json +2 -2
|
@@ -0,0 +1,169 @@
|
|
|
1
|
+
# Dialog Flotante Component
|
|
2
|
+
|
|
3
|
+
El `DialogFlotanteComponent` es un componente contenedor estandarizado para diálogos de Angular Material. Proporciona una estructura consistente con barra de título arrastrable (`cdkDrag`), área de contenido y barra de acciones inferior, todo altamente configurable.
|
|
4
|
+
|
|
5
|
+
## 📦 Características
|
|
6
|
+
|
|
7
|
+
- **Arrastrable**: Integra `cdkDrag` para permitir mover el diálogo desde el título.
|
|
8
|
+
- **Estructura Estándar**: Título, Cuerpo y Pie de página (acciones).
|
|
9
|
+
- **Configurable**: Permite ocultar título, barra de acciones, personalizar botones por defecto.
|
|
10
|
+
- **Content Projection**: Múltiples slots para inyectar contenido en título, cuerpo y pie.
|
|
11
|
+
- **Responsive**: Adaptado para móviles y escritorio.
|
|
12
|
+
|
|
13
|
+
## 🚀 Uso Básico
|
|
14
|
+
|
|
15
|
+
Importa el componente en tu módulo o componente standalone:
|
|
16
|
+
|
|
17
|
+
```typescript
|
|
18
|
+
import { DialogFlotanteComponent } from '@jvsoft/components/dialog-flotante';
|
|
19
|
+
|
|
20
|
+
@Component({
|
|
21
|
+
imports: [DialogFlotanteComponent, ...],
|
|
22
|
+
// ...
|
|
23
|
+
})
|
|
24
|
+
export class MiDialogoComponent {
|
|
25
|
+
constructor(public dialogRef: MatDialogRef<MiDialogoComponent>) {}
|
|
26
|
+
}
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
Úsalo en la plantilla de tu componente de diálogo:
|
|
30
|
+
|
|
31
|
+
```html
|
|
32
|
+
<div jvsDialogFlotante [matDialogRefActual]="dialogRef" [btnGuardar]="true" (btnGuardarClick)="guardar()">
|
|
33
|
+
<span titulo>Título del Diálogo</span>
|
|
34
|
+
|
|
35
|
+
<div cuerpo>
|
|
36
|
+
<p>Contenido principal del diálogo...</p>
|
|
37
|
+
</div>
|
|
38
|
+
</div>
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
## 🛠 API
|
|
42
|
+
|
|
43
|
+
### Inputs
|
|
44
|
+
|
|
45
|
+
| Input | Tipo | Default | Descripción |
|
|
46
|
+
|-------|------|---------|-------------|
|
|
47
|
+
| `matDialogRefActual` | `MatDialogRef<any>` | `undefined` | Referencia al diálogo actual. Necesario para la funcionalidad de cerrar. |
|
|
48
|
+
| `sinTitulo` | `boolean` | `false` | Si es `true`, oculta la barra de título y deshabilita el arrastre. |
|
|
49
|
+
| `sinBarraDeAccion` | `boolean` | `false` | Si es `true`, oculta la barra de botones inferior. |
|
|
50
|
+
| `btnCerrarBarra` | `boolean` | `false` | Muestra un botón "X" de cierre en la barra de título. |
|
|
51
|
+
| `iconoTitulo` | `string` | `undefined` | Nombre del icono SVG para mostrar en el título. |
|
|
52
|
+
| `btnGuardar` | `BotonDialog \| boolean \| string` | `undefined` | Configuración del botón "Guardar". Ver [Configuración de Botones](#configuración-de-botones). |
|
|
53
|
+
| `btnCerrar` | `BotonDialog \| boolean \| string` | `undefined` | Configuración del botón "Cerrar". Ver [Configuración de Botones](#configuración-de-botones). |
|
|
54
|
+
| `cssClases` | `Record<string, string>` | `{}` | Clases CSS personalizadas para partes del componente. |
|
|
55
|
+
|
|
56
|
+
### Outputs
|
|
57
|
+
|
|
58
|
+
| Output | Evento | Descripción |
|
|
59
|
+
|--------|--------|-------------|
|
|
60
|
+
| `btnGuardarClick` | `any` | Se emite al hacer clic en el botón "Guardar" por defecto. |
|
|
61
|
+
| `btnCerrarClick` | `any` | Se emite al hacer clic en el botón "Cerrar" por defecto. |
|
|
62
|
+
|
|
63
|
+
### Content Projection (Slots)
|
|
64
|
+
|
|
65
|
+
El componente utiliza selectores de atributos para proyectar contenido en áreas específicas:
|
|
66
|
+
|
|
67
|
+
| Selector | Ubicación | Descripción |
|
|
68
|
+
|----------|-----------|-------------|
|
|
69
|
+
| `[titulo]` | Barra de Título | Texto o contenido principal del título. |
|
|
70
|
+
| `[tituloImagen]` | Barra de Título | Imagen o icono adicional a la izquierda del título. |
|
|
71
|
+
| `[selectTitulo]` | Barra de Título | Contenido a la derecha del título (ej. un selector). |
|
|
72
|
+
| `[cuerpo]` | Centro | Contenido principal del diálogo (dentro de `mat-dialog-content`). |
|
|
73
|
+
| `[pieIzquierda]` | Pie de Página | Contenido alineado a la izquierda en la barra de acciones. |
|
|
74
|
+
| `[pieCentro]` | Pie de Página | Contenido centrado en la barra de acciones. |
|
|
75
|
+
| `[pieDerecha]` | Pie de Página | Contenido a la derecha, antes de los botones por defecto. |
|
|
76
|
+
|
|
77
|
+
## ⚙️ Configuración de Botones
|
|
78
|
+
|
|
79
|
+
Los inputs `btnGuardar` y `btnCerrar` aceptan varios tipos de valores para máxima flexibilidad:
|
|
80
|
+
|
|
81
|
+
- **`boolean`**:
|
|
82
|
+
- `true`: Muestra el botón con configuración por defecto.
|
|
83
|
+
- `false`: Oculta el botón.
|
|
84
|
+
- **`string`**: Muestra el botón cambiando solo su etiqueta (label).
|
|
85
|
+
- **`BotonDialog`**: Objeto de configuración completa.
|
|
86
|
+
|
|
87
|
+
### Interfaz `BotonDialog`
|
|
88
|
+
|
|
89
|
+
```typescript
|
|
90
|
+
interface BotonDialog {
|
|
91
|
+
label?: string; // Texto del botón
|
|
92
|
+
class?: string; // Clases CSS (ej. colores Tailwind)
|
|
93
|
+
icono?: string; // Icono SVG
|
|
94
|
+
tipo?: string; // Tipo de acción (opcional)
|
|
95
|
+
sinCondicion?: boolean; // (Uso interno)
|
|
96
|
+
}
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
#### Valores por Defecto
|
|
100
|
+
|
|
101
|
+
- **Guardar**: Label "GUARDAR", Clase `text-blue-700 border-blue-700`, Icono `roundSave`.
|
|
102
|
+
- **Cerrar**: Label "CERRAR", Clase `text-gray-700 border-gray-700`, Icono `roundClose`.
|
|
103
|
+
|
|
104
|
+
## 🎨 Personalización de Estilos (`cssClases`)
|
|
105
|
+
|
|
106
|
+
Puedes pasar un objeto para sobrescribir clases de secciones específicas:
|
|
107
|
+
|
|
108
|
+
```typescript
|
|
109
|
+
cssClases = {
|
|
110
|
+
titulo: 'bg-red-500 text-white', // Cambia color de barra de título
|
|
111
|
+
btnGuardar: 'bg-green-600 text-white' // Estilo extra para botón guardar
|
|
112
|
+
}
|
|
113
|
+
```
|
|
114
|
+
|
|
115
|
+
## 📝 Ejemplos
|
|
116
|
+
|
|
117
|
+
### 1. Diálogo Completo
|
|
118
|
+
|
|
119
|
+
```html
|
|
120
|
+
<div jvsDialogFlotante
|
|
121
|
+
[matDialogRefActual]="dialogRef"
|
|
122
|
+
[btnGuardar]="'ACEPTAR'"
|
|
123
|
+
[btnCerrar]="true"
|
|
124
|
+
[btnCerrarBarra]="true"
|
|
125
|
+
iconoTitulo="roundInfo"
|
|
126
|
+
(btnGuardarClick)="procesar()">
|
|
127
|
+
|
|
128
|
+
<span titulo>Confirmación Requerida</span>
|
|
129
|
+
|
|
130
|
+
<div cuerpo class="p-4">
|
|
131
|
+
¿Está seguro que desea realizar esta acción?
|
|
132
|
+
</div>
|
|
133
|
+
|
|
134
|
+
<div pieIzquierda>
|
|
135
|
+
<small class="text-gray-500">Ref: 12345</small>
|
|
136
|
+
</div>
|
|
137
|
+
</div>
|
|
138
|
+
```
|
|
139
|
+
|
|
140
|
+
### 2. Diálogo Simple (Solo Contenido)
|
|
141
|
+
|
|
142
|
+
```html
|
|
143
|
+
<div jvsDialogFlotante
|
|
144
|
+
[sinTitulo]="true"
|
|
145
|
+
[sinBarraDeAccion]="true">
|
|
146
|
+
|
|
147
|
+
<div cuerpo>
|
|
148
|
+
<app-mi-contenido-custom></app-mi-contenido-custom>
|
|
149
|
+
</div>
|
|
150
|
+
</div>
|
|
151
|
+
```
|
|
152
|
+
|
|
153
|
+
### 3. Botones Personalizados
|
|
154
|
+
|
|
155
|
+
```typescript
|
|
156
|
+
configGuardar: BotonDialog = {
|
|
157
|
+
label: 'ENVIAR',
|
|
158
|
+
icono: 'roundSend',
|
|
159
|
+
class: 'bg-indigo-600 text-white hover:bg-indigo-700'
|
|
160
|
+
};
|
|
161
|
+
```
|
|
162
|
+
|
|
163
|
+
```html
|
|
164
|
+
<div jvsDialogFlotante
|
|
165
|
+
[matDialogRefActual]="dialogRef"
|
|
166
|
+
[btnGuardar]="configGuardar">
|
|
167
|
+
<!-- ... -->
|
|
168
|
+
</div>
|
|
169
|
+
```
|
|
@@ -1,32 +1,23 @@
|
|
|
1
|
-
import { EventEmitter } from '@angular/core';
|
|
2
1
|
import { MatDialogRef } from '@angular/material/dialog';
|
|
3
2
|
import { BotonDialog } from './dialog-flotante.interface';
|
|
4
3
|
import * as i0 from "@angular/core";
|
|
5
4
|
export declare class DialogFlotanteComponent {
|
|
6
|
-
cssClases: Record<string, string
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
5
|
+
cssClases: import("@angular/core").InputSignal<Record<string, string>>;
|
|
6
|
+
sinTitulo: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
|
|
7
|
+
sinBarraDeAccion: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
|
|
8
|
+
btnCerrarBarra: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
|
|
9
|
+
iconoTitulo: import("@angular/core").InputSignal<string | undefined>;
|
|
10
|
+
matDialogRefActual: import("@angular/core").InputSignal<MatDialogRef<any, any> | undefined>;
|
|
11
|
+
btnGuardarInput: import("@angular/core").InputSignal<string | boolean | BotonDialog | undefined>;
|
|
12
|
+
btnCerrarInput: import("@angular/core").InputSignal<string | boolean | BotonDialog | undefined>;
|
|
13
|
+
btnGuardarClick: import("@angular/core").OutputEmitterRef<any>;
|
|
14
|
+
btnCerrarClick: import("@angular/core").OutputEmitterRef<any>;
|
|
13
15
|
private readonly defaultBtnCerrar;
|
|
14
|
-
private _btnCerrar;
|
|
15
|
-
get btnCerrar(): BotonDialog;
|
|
16
|
-
set btnCerrar(val: BotonDialog | boolean | string | '');
|
|
17
|
-
private _btnCerrarBarra;
|
|
18
|
-
get btnCerrarBarra(): boolean;
|
|
19
|
-
set btnCerrarBarra(val: boolean | '');
|
|
20
16
|
private readonly defaultBtnGuardar;
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
set btnGuardar(val: BotonDialog | boolean | string | '');
|
|
24
|
-
iconoTitulo?: string;
|
|
25
|
-
matDialogRefActual: MatDialogRef<any>;
|
|
26
|
-
btnGuardarClick: EventEmitter<any>;
|
|
27
|
-
btnCerrarClick: EventEmitter<any>;
|
|
17
|
+
btnCerrar: import("@angular/core").Signal<BotonDialog | undefined>;
|
|
18
|
+
btnGuardar: import("@angular/core").Signal<BotonDialog | undefined>;
|
|
28
19
|
guardarDialogo(): void;
|
|
29
20
|
cerrarDialogo(): void;
|
|
30
21
|
static ɵfac: i0.ɵɵFactoryDeclaration<DialogFlotanteComponent, never>;
|
|
31
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<DialogFlotanteComponent, "[jvsDialogFlotante]", never, { "cssClases": { "alias": "cssClases"; "required": false; }; "sinTitulo": { "alias": "sinTitulo"; "required": false; }; "sinBarraDeAccion": { "alias": "sinBarraDeAccion"; "required": false; }; "
|
|
22
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<DialogFlotanteComponent, "[jvsDialogFlotante]", never, { "cssClases": { "alias": "cssClases"; "required": false; "isSignal": true; }; "sinTitulo": { "alias": "sinTitulo"; "required": false; "isSignal": true; }; "sinBarraDeAccion": { "alias": "sinBarraDeAccion"; "required": false; "isSignal": true; }; "btnCerrarBarra": { "alias": "btnCerrarBarra"; "required": false; "isSignal": true; }; "iconoTitulo": { "alias": "iconoTitulo"; "required": false; "isSignal": true; }; "matDialogRefActual": { "alias": "matDialogRefActual"; "required": false; "isSignal": true; }; "btnGuardarInput": { "alias": "btnGuardar"; "required": false; "isSignal": true; }; "btnCerrarInput": { "alias": "btnCerrar"; "required": false; "isSignal": true; }; }, { "btnGuardarClick": "btnGuardarClick"; "btnCerrarClick": "btnCerrarClick"; }, never, ["[tituloImagen]", "[titulo]", "[selectTitulo]", "[cuerpo]", "[pieIzquierda]", "[pieCentro]", "[pieDerecha]"], true, never>;
|
|
32
23
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import {
|
|
2
|
+
import { input, booleanAttribute, output, computed, Component } from '@angular/core';
|
|
3
3
|
import * as i3 from '@angular/material/dialog';
|
|
4
4
|
import { MatDialogModule } from '@angular/material/dialog';
|
|
5
5
|
import * as i2 from '@angular/material/icon';
|
|
@@ -11,82 +11,69 @@ import { MatRipple } from '@angular/material/core';
|
|
|
11
11
|
import { MatDivider } from '@angular/material/divider';
|
|
12
12
|
|
|
13
13
|
class DialogFlotanteComponent {
|
|
14
|
-
cssClases = {};
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
}
|
|
26
|
-
set sinBarraDeAccion(val) {
|
|
27
|
-
this._sinBarraDeAccion = val == '';
|
|
28
|
-
}
|
|
14
|
+
cssClases = input({});
|
|
15
|
+
sinTitulo = input(false, { transform: booleanAttribute });
|
|
16
|
+
sinBarraDeAccion = input(false, { transform: booleanAttribute });
|
|
17
|
+
btnCerrarBarra = input(false, { transform: booleanAttribute });
|
|
18
|
+
iconoTitulo = input(undefined);
|
|
19
|
+
matDialogRefActual = input(undefined);
|
|
20
|
+
// Inputs crudos para botones (string | boolean | object)
|
|
21
|
+
btnGuardarInput = input(undefined, { alias: 'btnGuardar' });
|
|
22
|
+
btnCerrarInput = input(undefined, { alias: 'btnCerrar' });
|
|
23
|
+
btnGuardarClick = output();
|
|
24
|
+
btnCerrarClick = output();
|
|
29
25
|
defaultBtnCerrar = { label: 'CERRAR', class: 'text-gray-700 border-gray-700' };
|
|
30
|
-
_btnCerrar = this.defaultBtnCerrar;
|
|
31
|
-
get btnCerrar() {
|
|
32
|
-
return this._btnCerrar;
|
|
33
|
-
}
|
|
34
|
-
set btnCerrar(val) {
|
|
35
|
-
if (val == null || val === '') {
|
|
36
|
-
this._btnCerrar = this.defaultBtnCerrar;
|
|
37
|
-
}
|
|
38
|
-
else {
|
|
39
|
-
this._btnCerrar = (typeof val === 'string' && val !== '') ? { ...this.defaultBtnCerrar, label: val } :
|
|
40
|
-
(typeof val === 'boolean' && val) ? this.defaultBtnCerrar :
|
|
41
|
-
val ?? this.defaultBtnCerrar;
|
|
42
|
-
}
|
|
43
|
-
}
|
|
44
|
-
_btnCerrarBarra = true;
|
|
45
|
-
get btnCerrarBarra() {
|
|
46
|
-
return this._btnCerrarBarra;
|
|
47
|
-
}
|
|
48
|
-
set btnCerrarBarra(val) {
|
|
49
|
-
this._btnCerrarBarra = val || true;
|
|
50
|
-
}
|
|
51
26
|
defaultBtnGuardar = {
|
|
52
27
|
label: 'GUARDAR', class: 'text-blue-700 border-blue-700', icono: 'roundSave'
|
|
53
28
|
};
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
29
|
+
// Computed signals para normalizar la configuración de botones
|
|
30
|
+
btnCerrar = computed(() => {
|
|
31
|
+
const val = this.btnCerrarInput();
|
|
32
|
+
// Si es false, null o undefined -> NO MOSTRAR
|
|
33
|
+
if (val === false || val === null || val === undefined)
|
|
34
|
+
return undefined;
|
|
35
|
+
// Si es string vacío (atributo presente sin valor) o true -> MOSTRAR DEFAULT
|
|
36
|
+
if (val === '' || val === true)
|
|
37
|
+
return this.defaultBtnCerrar;
|
|
38
|
+
// Si es string con valor -> MOSTRAR DEFAULT CON LABEL
|
|
39
|
+
if (typeof val === 'string')
|
|
40
|
+
return { ...this.defaultBtnCerrar, label: val };
|
|
41
|
+
// Si es objeto -> USAR EL OBJETO
|
|
42
|
+
return val;
|
|
43
|
+
});
|
|
44
|
+
btnGuardar = computed(() => {
|
|
45
|
+
const val = this.btnGuardarInput();
|
|
46
|
+
// Si es false, null o undefined -> NO MOSTRAR
|
|
47
|
+
if (val === false || val === null || val === undefined)
|
|
48
|
+
return undefined;
|
|
49
|
+
// Si es string vacío (atributo presente sin valor) o true -> MOSTRAR DEFAULT
|
|
50
|
+
if (val === '' || val === true)
|
|
51
|
+
return this.defaultBtnGuardar;
|
|
52
|
+
// Si es string con valor -> MOSTRAR DEFAULT CON LABEL
|
|
53
|
+
if (typeof val === 'string')
|
|
54
|
+
return { ...this.defaultBtnGuardar, label: val };
|
|
55
|
+
// Si es objeto -> USAR EL OBJETO
|
|
56
|
+
return val;
|
|
57
|
+
});
|
|
72
58
|
guardarDialogo() {
|
|
73
59
|
this.btnGuardarClick.emit(true);
|
|
74
60
|
}
|
|
75
61
|
cerrarDialogo() {
|
|
76
62
|
this.btnCerrarClick.emit(true);
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
63
|
+
const ref = this.matDialogRefActual();
|
|
64
|
+
if (ref) {
|
|
65
|
+
if (ref.componentInstance?.validarCerrarDialog) {
|
|
66
|
+
ref.componentInstance?.validarCerrarDialog();
|
|
80
67
|
}
|
|
81
68
|
else {
|
|
82
|
-
|
|
69
|
+
ref.close('Cerrado GDLG');
|
|
83
70
|
}
|
|
84
71
|
}
|
|
85
72
|
}
|
|
86
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
87
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
73
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DialogFlotanteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
74
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.14", type: DialogFlotanteComponent, isStandalone: true, selector: "[jvsDialogFlotante]", inputs: { cssClases: { classPropertyName: "cssClases", publicName: "cssClases", isSignal: true, isRequired: false, transformFunction: null }, sinTitulo: { classPropertyName: "sinTitulo", publicName: "sinTitulo", isSignal: true, isRequired: false, transformFunction: null }, sinBarraDeAccion: { classPropertyName: "sinBarraDeAccion", publicName: "sinBarraDeAccion", isSignal: true, isRequired: false, transformFunction: null }, btnCerrarBarra: { classPropertyName: "btnCerrarBarra", publicName: "btnCerrarBarra", isSignal: true, isRequired: false, transformFunction: null }, iconoTitulo: { classPropertyName: "iconoTitulo", publicName: "iconoTitulo", isSignal: true, isRequired: false, transformFunction: null }, matDialogRefActual: { classPropertyName: "matDialogRefActual", publicName: "matDialogRefActual", isSignal: true, isRequired: false, transformFunction: null }, btnGuardarInput: { classPropertyName: "btnGuardarInput", publicName: "btnGuardar", isSignal: true, isRequired: false, transformFunction: null }, btnCerrarInput: { classPropertyName: "btnCerrarInput", publicName: "btnCerrar", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { btnGuardarClick: "btnGuardarClick", btnCerrarClick: "btnCerrarClick" }, host: { classAttribute: "jvs-dialog-flotante" }, ngImport: i0, template: "<ng-container *ngIf=\"sinTitulo(); else conTitulo\">\n <ng-container [ngTemplateOutlet]=\"parteComun\"></ng-container>\n</ng-container>\n\n<ng-template #conTitulo>\n <div cdkDrag class=\"block h-full\" cdkDragRootElement=\".cdk-overlay-pane\" cdkDragBoundary=\"body\">\n <div class=\"flex-auto flex items-center justify-between hover:cursor-move gap-1\"\n [ngClass]=\"cssClases()['titulo'] ?? 'bg-primary text-primary-contrast'\"\n mat-dialog-title cdkDragHandle>\n\n <mat-icon *ngIf=\"iconoTitulo()\" class=\"flex-none icon-xs\" [svgIcon]=\"iconoTitulo()!\"></mat-icon>\n <ng-content select=\"[tituloImagen]\"></ng-content>\n <h5 class=\"flex-1 m-0\">\n <ng-content select=\"[titulo]\"></ng-content>\n </h5>\n <ng-content select=\"[selectTitulo]\"></ng-content>\n\n <ng-container *ngIf=\"btnCerrar() || btnCerrarBarra()\">\n <button matRipple class=\"flex items-center justify-center ml-2 h-6 w-6 bg-red-700 rounded-md text-white\"\n type=\"button\" [mat-dialog-close]=\"!matDialogRefActual()\"\n (click)=\"matDialogRefActual() ? cerrarDialogo() : null\">\n <mat-icon svgIcon=\"roundClose\"></mat-icon>\n </button>\n </ng-container>\n </div>\n\n <mat-divider class=\"flex-auto bg-primary\"></mat-divider>\n <ng-container [ngTemplateOutlet]=\"parteComun\"></ng-container>\n </div>\n</ng-template>\n\n<ng-template #parteComun>\n <mat-dialog-content class=\"flex-1\">\n <div class=\"contenedor-cuerpo\">\n <ng-content select=\"[cuerpo]\"></ng-content>\n </div>\n </mat-dialog-content>\n\n <mat-dialog-actions class=\"flex-auto flex items-center justify-between gap-1 pt-0 mt-0\" *ngIf=\"!sinBarraDeAccion()\">\n <div class=\"flex items-start justify-start gap-1\">\n <ng-content select=\"[pieIzquierda]\"></ng-content>\n </div>\n <div class=\"flex items-center justify-center gap-1\">\n <ng-content select=\"[pieCentro]\"></ng-content>\n </div>\n <div class=\"flex items-end justify-end gap-1\">\n <ng-content select=\"[pieDerecha]\"></ng-content>\n\n <!-- Bot\u00F3n Guardar -->\n <button matRipple *ngIf=\"btnGuardar()\" type=\"submit\"\n class=\"boton-dialog-flotante\" [ngClass]=\"btnGuardar()!.class\"\n [class]=\"cssClases()['btnGuardar']\" (click)=\"guardarDialogo()\">\n <mat-icon class=\"icon-xs\" [svgIcon]=\"btnGuardar()?.icono ?? ''\"></mat-icon>\n <span>{{ btnGuardar()!.label }}</span>\n </button>\n\n <!-- Bot\u00F3n Cerrar -->\n <button matRipple *ngIf=\"btnCerrar()\" type=\"button\"\n class=\"boton-dialog-flotante\" [ngClass]=\"btnCerrar()!.class\"\n [mat-dialog-close]=\"!matDialogRefActual()\" (click)=\"matDialogRefActual() ? cerrarDialogo() : null\">\n <mat-icon class=\"icon-xs\" svgIcon=\"roundClose\"></mat-icon>\n <span>{{ btnCerrar()!.label }}</span>\n </button>\n </div>\n </mat-dialog-actions>\n</ng-template>\n", styles: [".jvs-dialog-flotante{max-width:98vw}.jvs-dialog-flotante .mat-mdc-dialog-title .mat-mdc-checkbox .mdc-form-field{color:unset}.jvs-dialog-flotante .mat-mdc-dialog-title .mat-mdc-checkbox .mdc-checkbox__native-control:enabled:focus:focus:not(:checked):not(:indeterminate)~.mdc-checkbox__background{border-color:var(--color-prnpx tailwindcss init --fullimary-contrast)!important}.jvs-dialog-flotante fieldset{@apply w-full sm:w-auto rounded-sm bg-transparent pt-0 pb-1 px-1 border;}.jvs-dialog-flotante fieldset legend{@apply px-2 font-bold border-0 bg-transparent;width:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i3.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i3.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i3.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }] });
|
|
88
75
|
}
|
|
89
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
76
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DialogFlotanteComponent, decorators: [{
|
|
90
77
|
type: Component,
|
|
91
78
|
args: [{ selector: '[jvsDialogFlotante]', imports: [
|
|
92
79
|
CommonModule,
|
|
@@ -98,28 +85,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImpo
|
|
|
98
85
|
MatDivider,
|
|
99
86
|
], host: {
|
|
100
87
|
class: 'jvs-dialog-flotante',
|
|
101
|
-
}, template: "<ng-container *ngIf=\"sinTitulo; else conTitulo\">\n <ng-container [ngTemplateOutlet]=\"parteComun\"></ng-container>\n</ng-container>\n\n<ng-template #conTitulo>\n <div cdkDrag class=\"block h-full\" cdkDragRootElement=\".cdk-overlay-pane\" cdkDragBoundary=\"body\">\n <div class=\"flex-auto flex items-center justify-between hover:cursor-move gap-1\"\n [ngClass]=\"cssClases['titulo'] ?? 'bg-primary text-primary-contrast'\"\n mat-dialog-title cdkDragHandle>\n\n <mat-icon *ngIf=\"iconoTitulo\" class=\"flex-none icon-xs\" [svgIcon]=\"iconoTitulo
|
|
102
|
-
}]
|
|
103
|
-
type: Input
|
|
104
|
-
}], sinTitulo: [{
|
|
105
|
-
type: Input
|
|
106
|
-
}], sinBarraDeAccion: [{
|
|
107
|
-
type: Input
|
|
108
|
-
}], btnCerrar: [{
|
|
109
|
-
type: Input
|
|
110
|
-
}], btnCerrarBarra: [{
|
|
111
|
-
type: Input
|
|
112
|
-
}], btnGuardar: [{
|
|
113
|
-
type: Input
|
|
114
|
-
}], iconoTitulo: [{
|
|
115
|
-
type: Input
|
|
116
|
-
}], matDialogRefActual: [{
|
|
117
|
-
type: Input
|
|
118
|
-
}], btnGuardarClick: [{
|
|
119
|
-
type: Output
|
|
120
|
-
}], btnCerrarClick: [{
|
|
121
|
-
type: Output
|
|
122
|
-
}] } });
|
|
88
|
+
}, template: "<ng-container *ngIf=\"sinTitulo(); else conTitulo\">\n <ng-container [ngTemplateOutlet]=\"parteComun\"></ng-container>\n</ng-container>\n\n<ng-template #conTitulo>\n <div cdkDrag class=\"block h-full\" cdkDragRootElement=\".cdk-overlay-pane\" cdkDragBoundary=\"body\">\n <div class=\"flex-auto flex items-center justify-between hover:cursor-move gap-1\"\n [ngClass]=\"cssClases()['titulo'] ?? 'bg-primary text-primary-contrast'\"\n mat-dialog-title cdkDragHandle>\n\n <mat-icon *ngIf=\"iconoTitulo()\" class=\"flex-none icon-xs\" [svgIcon]=\"iconoTitulo()!\"></mat-icon>\n <ng-content select=\"[tituloImagen]\"></ng-content>\n <h5 class=\"flex-1 m-0\">\n <ng-content select=\"[titulo]\"></ng-content>\n </h5>\n <ng-content select=\"[selectTitulo]\"></ng-content>\n\n <ng-container *ngIf=\"btnCerrar() || btnCerrarBarra()\">\n <button matRipple class=\"flex items-center justify-center ml-2 h-6 w-6 bg-red-700 rounded-md text-white\"\n type=\"button\" [mat-dialog-close]=\"!matDialogRefActual()\"\n (click)=\"matDialogRefActual() ? cerrarDialogo() : null\">\n <mat-icon svgIcon=\"roundClose\"></mat-icon>\n </button>\n </ng-container>\n </div>\n\n <mat-divider class=\"flex-auto bg-primary\"></mat-divider>\n <ng-container [ngTemplateOutlet]=\"parteComun\"></ng-container>\n </div>\n</ng-template>\n\n<ng-template #parteComun>\n <mat-dialog-content class=\"flex-1\">\n <div class=\"contenedor-cuerpo\">\n <ng-content select=\"[cuerpo]\"></ng-content>\n </div>\n </mat-dialog-content>\n\n <mat-dialog-actions class=\"flex-auto flex items-center justify-between gap-1 pt-0 mt-0\" *ngIf=\"!sinBarraDeAccion()\">\n <div class=\"flex items-start justify-start gap-1\">\n <ng-content select=\"[pieIzquierda]\"></ng-content>\n </div>\n <div class=\"flex items-center justify-center gap-1\">\n <ng-content select=\"[pieCentro]\"></ng-content>\n </div>\n <div class=\"flex items-end justify-end gap-1\">\n <ng-content select=\"[pieDerecha]\"></ng-content>\n\n <!-- Bot\u00F3n Guardar -->\n <button matRipple *ngIf=\"btnGuardar()\" type=\"submit\"\n class=\"boton-dialog-flotante\" [ngClass]=\"btnGuardar()!.class\"\n [class]=\"cssClases()['btnGuardar']\" (click)=\"guardarDialogo()\">\n <mat-icon class=\"icon-xs\" [svgIcon]=\"btnGuardar()?.icono ?? ''\"></mat-icon>\n <span>{{ btnGuardar()!.label }}</span>\n </button>\n\n <!-- Bot\u00F3n Cerrar -->\n <button matRipple *ngIf=\"btnCerrar()\" type=\"button\"\n class=\"boton-dialog-flotante\" [ngClass]=\"btnCerrar()!.class\"\n [mat-dialog-close]=\"!matDialogRefActual()\" (click)=\"matDialogRefActual() ? cerrarDialogo() : null\">\n <mat-icon class=\"icon-xs\" svgIcon=\"roundClose\"></mat-icon>\n <span>{{ btnCerrar()!.label }}</span>\n </button>\n </div>\n </mat-dialog-actions>\n</ng-template>\n", styles: [".jvs-dialog-flotante{max-width:98vw}.jvs-dialog-flotante .mat-mdc-dialog-title .mat-mdc-checkbox .mdc-form-field{color:unset}.jvs-dialog-flotante .mat-mdc-dialog-title .mat-mdc-checkbox .mdc-checkbox__native-control:enabled:focus:focus:not(:checked):not(:indeterminate)~.mdc-checkbox__background{border-color:var(--color-prnpx tailwindcss init --fullimary-contrast)!important}.jvs-dialog-flotante fieldset{@apply w-full sm:w-auto rounded-sm bg-transparent pt-0 pb-1 px-1 border;}.jvs-dialog-flotante fieldset legend{@apply px-2 font-bold border-0 bg-transparent;width:auto}\n"] }]
|
|
89
|
+
}] });
|
|
123
90
|
|
|
124
91
|
/**
|
|
125
92
|
* Generated bundle index. Do not edit.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"jvsoft-components-dialog-flotante.mjs","sources":["../../../projects/components/dialog-flotante/dialog-flotante.component.ts","../../../projects/components/dialog-flotante/dialog-flotante.component.html","../../../projects/components/dialog-flotante/jvsoft-components-dialog-flotante.ts"],"sourcesContent":["import {Component, EventEmitter, Input, Output} from '@angular/core';\nimport {MatDialogModule, MatDialogRef} from '@angular/material/dialog';\nimport {BotonDialog} from './dialog-flotante.interface';\nimport {MatIconModule} from '@angular/material/icon';\nimport {CommonModule} from '@angular/common';\nimport {CdkDrag, CdkDragHandle} from '@angular/cdk/drag-drop';\nimport {MatRipple} from '@angular/material/core';\nimport {MatDivider} from '@angular/material/divider';\n\n@Component({\n selector: '[jvsDialogFlotante]',\n imports: [\n CommonModule,\n MatIconModule,\n MatDialogModule,\n CdkDrag,\n CdkDragHandle,\n MatRipple,\n MatDivider,\n\n ],\n templateUrl: './dialog-flotante.component.html',\n styleUrls: ['./dialog-flotante.component.scss'],\n host: {\n class: 'jvs-dialog-flotante',\n }\n})\nexport class DialogFlotanteComponent {\n @Input() cssClases: Record<string, string> = {};\n\n private _sinTitulo: boolean | '' = false;\n get sinTitulo(): boolean {\n return !!this._sinTitulo;\n }\n\n @Input() set sinTitulo(val: boolean | '') {\n this._sinTitulo = val == '';\n }\n\n private _sinBarraDeAccion: boolean | '' = false;\n get sinBarraDeAccion(): boolean {\n return !!this._sinBarraDeAccion;\n }\n\n @Input() set sinBarraDeAccion(val: boolean | '') {\n this._sinBarraDeAccion = val == '';\n }\n\n private readonly defaultBtnCerrar: BotonDialog = {label: 'CERRAR', class: 'text-gray-700 border-gray-700'};\n private _btnCerrar: BotonDialog = this.defaultBtnCerrar;\n get btnCerrar(): BotonDialog {\n return this._btnCerrar;\n }\n\n @Input() set btnCerrar(val: BotonDialog | boolean | string | '') {\n if (val == null || val === '') {\n this._btnCerrar = this.defaultBtnCerrar;\n }\n else {\n this._btnCerrar = (typeof val === 'string' && val !== '') ? {...this.defaultBtnCerrar, label: val}:\n (typeof val === 'boolean' && val) ? this.defaultBtnCerrar:\n (val as BotonDialog) ?? this.defaultBtnCerrar;\n }\n }\n\n private _btnCerrarBarra: boolean = true;\n get btnCerrarBarra(): boolean {\n return this._btnCerrarBarra;\n }\n\n @Input() set btnCerrarBarra(val: boolean | '') {\n this._btnCerrarBarra = val || true;\n }\n\n private readonly defaultBtnGuardar: BotonDialog = {\n label: 'GUARDAR', class: 'text-blue-700 border-blue-700', icono: 'roundSave'\n };\n private _btnGuardar: BotonDialog = this.defaultBtnGuardar;\n get btnGuardar(): BotonDialog {\n return this._btnGuardar;\n }\n\n @Input() set btnGuardar(val: BotonDialog | boolean | string | '') {\n if (val == null || val === '') {\n this._btnGuardar = this.defaultBtnGuardar;\n }\n else {\n this._btnGuardar = (typeof val === 'string' && val !== '') ? {...this.defaultBtnGuardar, label: val}:\n (typeof val === 'boolean' && val) ? this.defaultBtnGuardar:\n (val as BotonDialog) ?? this.defaultBtnGuardar;\n }\n }\n\n @Input() iconoTitulo?: string;\n @Input() matDialogRefActual!: MatDialogRef<any>;\n @Output() btnGuardarClick = new EventEmitter<any>();\n @Output() btnCerrarClick = new EventEmitter<any>();\n\n guardarDialogo() {\n this.btnGuardarClick.emit(true);\n }\n\n cerrarDialogo() {\n this.btnCerrarClick.emit(true);\n if (this.matDialogRefActual) {\n if (this.matDialogRefActual.componentInstance?.validarCerrarDialog) {\n this.matDialogRefActual.componentInstance?.validarCerrarDialog();\n }\n else {\n this.matDialogRefActual.close('Cerrado GDLG');\n }\n }\n }\n\n}\n","<ng-container *ngIf=\"sinTitulo; else conTitulo\">\n <ng-container [ngTemplateOutlet]=\"parteComun\"></ng-container>\n</ng-container>\n\n<ng-template #conTitulo>\n <div cdkDrag class=\"block h-full\" cdkDragRootElement=\".cdk-overlay-pane\" cdkDragBoundary=\"body\">\n <div class=\"flex-auto flex items-center justify-between hover:cursor-move gap-1\"\n [ngClass]=\"cssClases['titulo'] ?? 'bg-primary text-primary-contrast'\"\n mat-dialog-title cdkDragHandle>\n\n <mat-icon *ngIf=\"iconoTitulo\" class=\"flex-none icon-xs\" [svgIcon]=\"iconoTitulo\"></mat-icon>\n <ng-content select=\"[tituloImagen]\"></ng-content>\n <h5 class=\"flex-1 m-0\">\n <ng-content select=\"[titulo]\"></ng-content>\n </h5>\n <ng-content select=\"[selectTitulo]\"></ng-content>\n\n <ng-container *ngIf=\"btnCerrar || btnCerrarBarra\">\n <button matRipple class=\"flex items-center justify-center ml-2 h-6 w-6 bg-red-700 rounded-md text-white\"\n type=\"button\" [mat-dialog-close]=\"!matDialogRefActual\"\n (click)=\"matDialogRefActual ? cerrarDialogo() : null\">\n <mat-icon svgIcon=\"roundClose\"></mat-icon>\n </button>\n </ng-container>\n </div>\n\n <mat-divider class=\"flex-auto bg-primary\"></mat-divider>\n <ng-container [ngTemplateOutlet]=\"parteComun\"></ng-container>\n </div>\n</ng-template>\n\n<ng-template #parteComun>\n <mat-dialog-content class=\"flex-1\">\n <div class=\"contenedor-cuerpo\">\n <ng-content select=\"[cuerpo]\"></ng-content>\n </div>\n </mat-dialog-content>\n\n <mat-dialog-actions class=\"flex-auto flex items-center justify-between gap-1 pt-0 mt-0\" *ngIf=\"!sinBarraDeAccion\">\n <div class=\"flex items-start justify-start gap-1\">\n <ng-content select=\"[pieIzquierda]\"></ng-content>\n </div>\n <div class=\"flex items-center justify-center gap-1\">\n <ng-content select=\"[pieCentro]\"></ng-content>\n </div>\n <div class=\"flex items-end justify-end gap-1\">\n <ng-content select=\"[pieDerecha]\"></ng-content>\n\n <!-- Botón Guardar -->\n <button matRipple *ngIf=\"btnGuardar\" type=\"submit\"\n class=\"boton-dialog-flotante\" [ngClass]=\"btnGuardar.class\"\n [class]=\"cssClases['btnGuardar']\" (click)=\"guardarDialogo()\">\n <mat-icon class=\"icon-xs\" [svgIcon]=\"btnGuardar?.icono ?? ''\"></mat-icon>\n <span>{{ btnGuardar.label }}</span>\n </button>\n\n <!-- Botón Cerrar -->\n <button matRipple *ngIf=\"btnCerrar\" type=\"button\"\n class=\"boton-dialog-flotante\" [ngClass]=\"btnCerrar.class\"\n [mat-dialog-close]=\"!matDialogRefActual\" (click)=\"matDialogRefActual ? cerrarDialogo() : null\">\n <mat-icon class=\"icon-xs\" svgIcon=\"roundClose\"></mat-icon>\n <span>{{ btnCerrar.label }}</span>\n </button>\n </div>\n </mat-dialog-actions>\n</ng-template>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"jvsoft-components-dialog-flotante.mjs","sources":["../../../projects/components/dialog-flotante/dialog-flotante.component.ts","../../../projects/components/dialog-flotante/dialog-flotante.component.html","../../../projects/components/dialog-flotante/jvsoft-components-dialog-flotante.ts"],"sourcesContent":["import { booleanAttribute, Component, computed, input, output } from '@angular/core';\nimport { MatDialogModule, MatDialogRef } from '@angular/material/dialog';\nimport { BotonDialog } from './dialog-flotante.interface';\nimport { MatIconModule } from '@angular/material/icon';\nimport { CommonModule } from '@angular/common';\nimport { CdkDrag, CdkDragHandle } from '@angular/cdk/drag-drop';\nimport { MatRipple } from '@angular/material/core';\nimport { MatDivider } from '@angular/material/divider';\n\n@Component({\n selector: '[jvsDialogFlotante]',\n imports: [\n CommonModule,\n MatIconModule,\n MatDialogModule,\n CdkDrag,\n CdkDragHandle,\n MatRipple,\n MatDivider,\n\n ],\n templateUrl: './dialog-flotante.component.html',\n styleUrls: ['./dialog-flotante.component.scss'],\n host: {\n class: 'jvs-dialog-flotante',\n }\n})\nexport class DialogFlotanteComponent {\n cssClases = input<Record<string, string>>({});\n sinTitulo = input(false, { transform: booleanAttribute });\n sinBarraDeAccion = input(false, { transform: booleanAttribute });\n btnCerrarBarra = input(false, { transform: booleanAttribute });\n iconoTitulo = input<string | undefined>(undefined);\n matDialogRefActual = input<MatDialogRef<any> | undefined>(undefined);\n\n // Inputs crudos para botones (string | boolean | object)\n btnGuardarInput = input<BotonDialog | boolean | string | undefined>(undefined, { alias: 'btnGuardar' });\n btnCerrarInput = input<BotonDialog | boolean | string | undefined>(undefined, { alias: 'btnCerrar' });\n\n btnGuardarClick = output<any>();\n btnCerrarClick = output<any>();\n\n private readonly defaultBtnCerrar: BotonDialog = { label: 'CERRAR', class: 'text-gray-700 border-gray-700' };\n private readonly defaultBtnGuardar: BotonDialog = {\n label: 'GUARDAR', class: 'text-blue-700 border-blue-700', icono: 'roundSave'\n };\n\n // Computed signals para normalizar la configuración de botones\n btnCerrar = computed(() => {\n const val = this.btnCerrarInput();\n // Si es false, null o undefined -> NO MOSTRAR\n if (val === false || val === null || val === undefined) return undefined;\n // Si es string vacío (atributo presente sin valor) o true -> MOSTRAR DEFAULT\n if (val === '' || val === true) return this.defaultBtnCerrar;\n // Si es string con valor -> MOSTRAR DEFAULT CON LABEL\n if (typeof val === 'string') return { ...this.defaultBtnCerrar, label: val };\n // Si es objeto -> USAR EL OBJETO\n return val as BotonDialog;\n });\n\n btnGuardar = computed(() => {\n const val = this.btnGuardarInput();\n // Si es false, null o undefined -> NO MOSTRAR\n if (val === false || val === null || val === undefined) return undefined;\n // Si es string vacío (atributo presente sin valor) o true -> MOSTRAR DEFAULT\n if (val === '' || val === true) return this.defaultBtnGuardar;\n // Si es string con valor -> MOSTRAR DEFAULT CON LABEL\n if (typeof val === 'string') return { ...this.defaultBtnGuardar, label: val };\n // Si es objeto -> USAR EL OBJETO\n return val as BotonDialog;\n });\n\n guardarDialogo() {\n this.btnGuardarClick.emit(true);\n }\n\n cerrarDialogo() {\n this.btnCerrarClick.emit(true);\n const ref = this.matDialogRefActual();\n if (ref) {\n if (ref.componentInstance?.validarCerrarDialog) {\n ref.componentInstance?.validarCerrarDialog();\n } else {\n ref.close('Cerrado GDLG');\n }\n }\n }\n}\n","<ng-container *ngIf=\"sinTitulo(); else conTitulo\">\n <ng-container [ngTemplateOutlet]=\"parteComun\"></ng-container>\n</ng-container>\n\n<ng-template #conTitulo>\n <div cdkDrag class=\"block h-full\" cdkDragRootElement=\".cdk-overlay-pane\" cdkDragBoundary=\"body\">\n <div class=\"flex-auto flex items-center justify-between hover:cursor-move gap-1\"\n [ngClass]=\"cssClases()['titulo'] ?? 'bg-primary text-primary-contrast'\"\n mat-dialog-title cdkDragHandle>\n\n <mat-icon *ngIf=\"iconoTitulo()\" class=\"flex-none icon-xs\" [svgIcon]=\"iconoTitulo()!\"></mat-icon>\n <ng-content select=\"[tituloImagen]\"></ng-content>\n <h5 class=\"flex-1 m-0\">\n <ng-content select=\"[titulo]\"></ng-content>\n </h5>\n <ng-content select=\"[selectTitulo]\"></ng-content>\n\n <ng-container *ngIf=\"btnCerrar() || btnCerrarBarra()\">\n <button matRipple class=\"flex items-center justify-center ml-2 h-6 w-6 bg-red-700 rounded-md text-white\"\n type=\"button\" [mat-dialog-close]=\"!matDialogRefActual()\"\n (click)=\"matDialogRefActual() ? cerrarDialogo() : null\">\n <mat-icon svgIcon=\"roundClose\"></mat-icon>\n </button>\n </ng-container>\n </div>\n\n <mat-divider class=\"flex-auto bg-primary\"></mat-divider>\n <ng-container [ngTemplateOutlet]=\"parteComun\"></ng-container>\n </div>\n</ng-template>\n\n<ng-template #parteComun>\n <mat-dialog-content class=\"flex-1\">\n <div class=\"contenedor-cuerpo\">\n <ng-content select=\"[cuerpo]\"></ng-content>\n </div>\n </mat-dialog-content>\n\n <mat-dialog-actions class=\"flex-auto flex items-center justify-between gap-1 pt-0 mt-0\" *ngIf=\"!sinBarraDeAccion()\">\n <div class=\"flex items-start justify-start gap-1\">\n <ng-content select=\"[pieIzquierda]\"></ng-content>\n </div>\n <div class=\"flex items-center justify-center gap-1\">\n <ng-content select=\"[pieCentro]\"></ng-content>\n </div>\n <div class=\"flex items-end justify-end gap-1\">\n <ng-content select=\"[pieDerecha]\"></ng-content>\n\n <!-- Botón Guardar -->\n <button matRipple *ngIf=\"btnGuardar()\" type=\"submit\"\n class=\"boton-dialog-flotante\" [ngClass]=\"btnGuardar()!.class\"\n [class]=\"cssClases()['btnGuardar']\" (click)=\"guardarDialogo()\">\n <mat-icon class=\"icon-xs\" [svgIcon]=\"btnGuardar()?.icono ?? ''\"></mat-icon>\n <span>{{ btnGuardar()!.label }}</span>\n </button>\n\n <!-- Botón Cerrar -->\n <button matRipple *ngIf=\"btnCerrar()\" type=\"button\"\n class=\"boton-dialog-flotante\" [ngClass]=\"btnCerrar()!.class\"\n [mat-dialog-close]=\"!matDialogRefActual()\" (click)=\"matDialogRefActual() ? cerrarDialogo() : null\">\n <mat-icon class=\"icon-xs\" svgIcon=\"roundClose\"></mat-icon>\n <span>{{ btnCerrar()!.label }}</span>\n </button>\n </div>\n </mat-dialog-actions>\n</ng-template>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
@@ -213,10 +213,10 @@ class ListaArbolComponent {
|
|
|
213
213
|
item.claseFinal = claseFinal;
|
|
214
214
|
return claseFinal;
|
|
215
215
|
}
|
|
216
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
217
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
216
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ListaArbolComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
217
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: ListaArbolComponent, isStandalone: true, selector: "jvs-lista-arbol", inputs: { listaSuscription: "listaSuscription", nombreColeccion: "nombreColeccion", checkbox: "checkbox", expandirRecursivo: "expandirRecursivo", checkboxSeleccionados: "checkboxSeleccionados", campoId: "campoId", campoIdPadre: "campoIdPadre", campoStr: "campoStr", campoOrden: "campoOrden", strHijoContainer: "strHijoContainer", menuContextual: "menuContextual", classSeleccionado: "classSeleccionado", classAnulado: "classAnulado", campoAnulado: "campoAnulado", templateTxtData: "templateTxtData", condicionMostrar: "condicionMostrar", condicionesClaseFila: "condicionesClaseFila", selectionModel: "selectionModel", idTabla: "idTabla" }, outputs: { selectionModelChange: "selectionModelChange", seleccionado: "seleccionado", listaCheck: "listaCheck", listaCheckObj: "listaCheckObj" }, ngImport: i0, template: "<mat-tree [dataSource]=\"listaMuestraArbol\" [treeControl]=\"treeControl\">\n <mat-nested-tree-node *matTreeNodeDef=\"let node; when: hasChild\">\n <div class=\"flex flex-col trans-ease-out cursor-pointer\" matTreeNodeToggle\n [matTreeNodeToggleRecursive]=\"expandirRecursivo\">\n <ng-container [ngTemplateOutlet]=\"liDat\"\n [ngTemplateOutletContext]=\"{ node: node, nested: true }\"></ng-container>\n <div class=\"pl-4\" [class.tree-invisible]=\"!treeControl.isExpanded(node)\">\n <ng-container matTreeNodeOutlet></ng-container>\n </div>\n </div>\n </mat-nested-tree-node>\n\n <!-- Cambiar mat-tree-node plano por mat-nested-tree-node sin hijos -->\n <mat-nested-tree-node *matTreeNodeDef=\"let node\">\n <div class=\"flex flex-col trans-ease-out\">\n <ng-container [ngTemplateOutlet]=\"liDat\"\n [ngTemplateOutletContext]=\"{ node: node, nested: false }\"></ng-container>\n </div>\n </mat-nested-tree-node>\n</mat-tree>\n\n<ng-template #liDat let-node=\"node\" let-nested=\"nested\">\n <div class=\"flex items-center gap-0 text-sm trans-ease-out cursor-pointer p-0 w-full\"\n (contextmenu)=\"menuContextual?.abrirMenuContextual($event, node); $event.preventDefault();\"\n (click)=\"seleccionarItem(node); opcMenu({ seccion: nombreColeccion, tipo: 'ver', item: node }); menuContextual?.cerrarMenuContextual(); (nested === false) && $event.stopPropagation();\"\n [ngClass]=\"classFila(node)\">\n <mat-icon *ngIf=\"!nested\"></mat-icon>\n <mat-icon *ngIf=\"nested\"\n [svgIcon]=\"treeControl.isExpanded(node) ? 'roundExpandMore' : 'roundChevronRight'\"></mat-icon>\n\n <mat-checkbox *ngIf=\"checkbox\"\n [(ngModel)]=\"chkLista.modelosChk[node[campoId]]\"\n [ngModelOptions]=\"{ standalone: true }\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"cambiarCheck(node, $event.checked); emitirModeloCheck()\"\n [checked]=\"nested ? hijosActivos('checked', node) : false\"\n [indeterminate]=\"nested ? hijosActivos('indeterminate', node) : false\">\n </mat-checkbox>\n\n <span *ngIf=\"!templateTxtData\" class=\"w-full\">{{ node[campoStr] }}</span>\n <ng-container *ngIf=\"templateTxtData\" [ngTemplateOutlet]=\"templateTxtData\"\n [ngTemplateOutletContext]=\"{ data: node, treeControl }\"></ng-container>\n </div>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatTreeModule }, { kind: "directive", type: i3.MatNestedTreeNode, selector: "mat-nested-tree-node", inputs: ["matNestedTreeNode", "disabled", "tabIndex"], outputs: ["activation", "expandedChange"], exportAs: ["matNestedTreeNode"] }, { kind: "directive", type: i3.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: i3.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "component", type: i3.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i3.MatTreeNodeOutlet, selector: "[matTreeNodeOutlet]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }] });
|
|
218
218
|
}
|
|
219
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
219
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ListaArbolComponent, decorators: [{
|
|
220
220
|
type: Component,
|
|
221
221
|
args: [{ selector: 'jvs-lista-arbol', standalone: true, imports: [
|
|
222
222
|
CommonModule,
|