@jvsoft/components 0.0.9 → 0.0.11

package/CHANGELOG.md

@@ -0,0 +1,9 @@
+# @jvsoft/components
+
+## 0.0.11
+
+### Patch Changes
+
+- WSpace
+- Updated dependencies
+  - @jvsoft/utils@0.0.11

package/build.js

@@ -0,0 +1,20 @@
+const {execSync} = require('child_process');
+const fs = require('fs');
+const path = require('path');
+
+// 1. Generar estilos Tailwind
+execSync('npx tailwindcss -i ./projects/components/src/styles/base.scss -o ./projects/components/src/styles/base-jvsoft-components.css');
+
+// 2. Reemplazar en componentes
+const componentsDir = path.join(__dirname);
+fs.readdirSync(componentsDir).forEach(file => {
+  if (file.endsWith('.component.ts')) {
+    const filePath = path.join(componentsDir, file);
+    let content = fs.readFileSync(filePath, 'utf8');
+    content = content.replace(
+      /styleUrls: \[.*\]/,
+      `styles: [require('./${file.replace('.ts', '.scss')}').default]`
+    );
+    fs.writeFileSync(filePath, content);
+  }
+});

package/dialog-flotante/dialog-flotante.component.html

@@ -0,0 +1,66 @@
+<ng-container *ngIf="sinTitulo; else conTitulo">
+    <ng-container [ngTemplateOutlet]="parteComun"></ng-container>
+</ng-container>
+
+<ng-template #conTitulo>
+    <div cdkDrag class="block h-full" cdkDragRootElement=".cdk-overlay-pane" cdkDragBoundary="body">
+        <div class="flex-auto flex items-center justify-between hover:cursor-move gap-1"
+            [ngClass]="cssClases['titulo'] ?? 'bg-primary text-primary-contrast'"
+            mat-dialog-title cdkDragHandle>
+
+            <mat-icon *ngIf="iconoTitulo" class="flex-none icon-xs" [svgIcon]="iconoTitulo"></mat-icon>
+            <ng-content select="[tituloImagen]"></ng-content>
+            <h5 class="flex-1 m-0">
+                <ng-content select="[titulo]"></ng-content>
+            </h5>
+            <ng-content select="[selectTitulo]"></ng-content>
+
+            <ng-container *ngIf="btnCerrar || btnCerrarBarra">
+                <button matRipple class="flex items-center justify-center ml-2 h-6 w-6 bg-red-700 rounded-md text-white"
+                    type="button" [mat-dialog-close]="!matDialogRefActual"
+                    (click)="matDialogRefActual ? cerrarDialogo() : null">
+                    <mat-icon svgIcon="roundClose"></mat-icon>
+                </button>
+            </ng-container>
+        </div>
+
+        <mat-divider class="flex-auto bg-primary"></mat-divider>
+        <ng-container [ngTemplateOutlet]="parteComun"></ng-container>
+    </div>
+</ng-template>
+
+<ng-template #parteComun>
+    <mat-dialog-content class="flex-1">
+        <div class="contenedor-cuerpo">
+            <ng-content select="[cuerpo]"></ng-content>
+        </div>
+    </mat-dialog-content>
+
+    <mat-dialog-actions class="flex-auto flex items-center justify-between gap-1 pt-0 mt-0" *ngIf="!sinBarraDeAccion">
+        <div class="flex items-start justify-start gap-1">
+            <ng-content select="[pieIzquierda]"></ng-content>
+        </div>
+        <div class="flex items-center justify-center gap-1">
+            <ng-content select="[pieCentro]"></ng-content>
+        </div>
+        <div class="flex items-end justify-end gap-1">
+            <ng-content select="[pieDerecha]"></ng-content>
+
+            <!-- Botón Guardar -->
+            <button matRipple *ngIf="btnGuardar" type="submit"
+                class="boton-dialog-flotante" [ngClass]="btnGuardar.class"
+                [class]="cssClases['btnGuardar']" (click)="guardarDialogo()">
+                <mat-icon class="icon-xs" [svgIcon]="btnGuardar?.icono ?? ''"></mat-icon>
+                <span>{{ btnGuardar.label }}</span>
+            </button>
+
+            <!-- Botón Cerrar -->
+            <button matRipple *ngIf="btnCerrar" type="button"
+                class="boton-dialog-flotante" [ngClass]="btnCerrar.class"
+                [mat-dialog-close]="!matDialogRefActual" (click)="matDialogRefActual ? cerrarDialogo() : null">
+                <mat-icon class="icon-xs" svgIcon="roundClose"></mat-icon>
+                <span>{{ btnCerrar.label }}</span>
+            </button>
+        </div>
+    </mat-dialog-actions>
+</ng-template>

package/dialog-flotante/dialog-flotante.component.ts

@@ -0,0 +1,115 @@
+import {Component, EventEmitter, Input, Output} from '@angular/core';
+import {MatDialogModule, MatDialogRef} from '@angular/material/dialog';
+import {BotonDialog} from './dialog-flotante.interface';
+import {MatIconModule} from '@angular/material/icon';
+import {CommonModule} from '@angular/common';
+import {CdkDrag, CdkDragHandle} from '@angular/cdk/drag-drop';
+import {MatRipple} from '@angular/material/core';
+import {MatDivider} from '@angular/material/divider';
+
+@Component({
+    selector: '[jvsDialogFlotante]',
+    imports: [
+        CommonModule,
+        MatIconModule,
+        MatDialogModule,
+        CdkDrag,
+        CdkDragHandle,
+        MatRipple,
+        MatDivider,
+
+    ],
+    templateUrl: './dialog-flotante.component.html',
+    styleUrls: ['./dialog-flotante.component.scss'],
+    host: {
+        class: 'jvs-dialog-flotante',
+    }
+})
+export class DialogFlotanteComponent {
+    @Input() cssClases: Record<string, string> = {};
+
+    private _sinTitulo: boolean | '' = false;
+    get sinTitulo(): boolean {
+        return !!this._sinTitulo;
+    }
+
+    @Input() set sinTitulo(val: boolean | '') {
+        this._sinTitulo = val == '';
+    }
+
+    private _sinBarraDeAccion: boolean | '' = false;
+    get sinBarraDeAccion(): boolean {
+        return !!this._sinBarraDeAccion;
+    }
+
+    @Input() set sinBarraDeAccion(val: boolean | '') {
+        this._sinBarraDeAccion = val == '';
+    }
+
+    private readonly defaultBtnCerrar: BotonDialog = {label: 'CERRAR', class: 'text-gray-700 border-gray-700'};
+    private _btnCerrar: BotonDialog = this.defaultBtnCerrar;
+    get btnCerrar(): BotonDialog {
+        return this._btnCerrar;
+    }
+
+    @Input() set btnCerrar(val: BotonDialog | boolean | string | '') {
+        if (val == null || val === '') {
+            this._btnCerrar = this.defaultBtnCerrar;
+        }
+        else {
+            this._btnCerrar = (typeof val === 'string' && val !== '') ? {...this.defaultBtnCerrar, label: val}:
+                (typeof val === 'boolean' && val) ? this.defaultBtnCerrar:
+                    (val as BotonDialog) ?? this.defaultBtnCerrar;
+        }
+    }
+
+    private _btnCerrarBarra: boolean = true;
+    get btnCerrarBarra(): boolean {
+        return this._btnCerrarBarra;
+    }
+
+    @Input() set btnCerrarBarra(val: boolean | '') {
+        this._btnCerrarBarra = val || true;
+    }
+
+    private readonly defaultBtnGuardar: BotonDialog = {
+        label: 'GUARDAR', class: 'text-blue-700 border-blue-700', icono: 'roundSave'
+    };
+    private _btnGuardar: BotonDialog = this.defaultBtnGuardar;
+    get btnGuardar(): BotonDialog {
+        return this._btnGuardar;
+    }
+
+    @Input() set btnGuardar(val: BotonDialog | boolean | string | '') {
+        if (val == null || val === '') {
+            this._btnGuardar = this.defaultBtnGuardar;
+        }
+        else {
+            this._btnGuardar = (typeof val === 'string' && val !== '') ? {...this.defaultBtnGuardar, label: val}:
+                (typeof val === 'boolean' && val) ? this.defaultBtnGuardar:
+                    (val as BotonDialog) ?? this.defaultBtnGuardar;
+        }
+    }
+
+    @Input() iconoTitulo?: string;
+    @Input() matDialogRefActual!: MatDialogRef<any>;
+    @Output() btnGuardarClick = new EventEmitter<any>();
+    @Output() btnCerrarClick = new EventEmitter<any>();
+
+    guardarDialogo() {
+        this.btnGuardarClick.emit(true);
+    }
+
+    cerrarDialogo() {
+        this.btnCerrarClick.emit(true);
+        if (this.matDialogRefActual) {
+            if (this.matDialogRefActual.componentInstance?.validarCerrarDialog) {
+                this.matDialogRefActual.componentInstance?.validarCerrarDialog();
+            }
+            else {
+                this.matDialogRefActual.close('Cerrado GDLG');
+            }
+        }
+    }
+
+}

package/dialog-flotante/dialog-flotante.interface.ts

@@ -0,0 +1,13 @@
+export interface DialogFlotanteInterface {
+
+}
+
+type TiposOpciones = 'ver' | 'nuevo' | 'editar' | 'guardar' | 'eliminar' | 'seleccionar' | 'editar_item' | 'detalle' |
+  'ver_archivos' | 'eliminar_fila' | 'imprimir' | 'descargar' | 'exportar_pdf' | 'exportar_excel' | string;
+export interface BotonDialog {
+  tipo?: TiposOpciones;
+  class?: string;
+  icono?: string;
+  label?: string;
+  sinCondicion?: boolean;
+}

package/dialog-flotante/index.ts

@@ -0,0 +1 @@
+export * from './public-api'

package/dialog-flotante/ng-package.json

@@ -0,0 +1,5 @@
+{
+  "lib": {
+    "entryFile": "public-api.ts"
+  }
+}

package/{index.d.ts → index.ts}

@@ -1,6 +1,14 @@
+// export {};
+// import './src/styles.scss';
+
 export * from './dialog-flotante';
+// export * from './progress-spinner';
 export * from './tabla-mantenimiento';
 export * from './tabla-mantenimiento/components/progress-bar';
 export * from './luces-navidad';
 export * from './mat-suffix-search-button';
 export * from './menu';
+export * from './lista-arbol/public-api'
+
+
+

package/lista-arbol/lista-arbol.component.html

@@ -0,0 +1,66 @@
+<mat-tree [dataSource]="listaMuestraArbol" [treeControl]="treeControl">
+    <mat-nested-tree-node *matTreeNodeDef="let node; when: hasChild">
+        <div class="flex flex-col trans-ease-out cursor-pointer" matTreeNodeToggle
+            [matTreeNodeToggleRecursive]="expandirRecursivo">
+            <ng-container [ngTemplateOutlet]="liDat"
+                [ngTemplateOutletContext]="{ node: node, nested: true }"></ng-container>
+            <div class="pl-4" [class.tree-invisible]="!treeControl.isExpanded(node)">
+                <ng-container matTreeNodeOutlet></ng-container>
+            </div>
+        </div>
+    </mat-nested-tree-node>
+
+    <!-- Cambiar mat-tree-node plano por mat-nested-tree-node sin hijos -->
+    <mat-nested-tree-node *matTreeNodeDef="let node">
+        <div class="flex flex-col trans-ease-out cursor-pointer">
+            <ng-container [ngTemplateOutlet]="liDat"
+                [ngTemplateOutletContext]="{ node: node, nested: false }"></ng-container>
+        </div>
+    </mat-nested-tree-node>
+</mat-tree>
+
+<!--
+
+
+<mat-tree [dataSource]="listaMuestraArbol" [treeControl]="treeControl">
+    <mat-tree-node class="!pl-0 min-h-0" *matTreeNodeDef="let node" matTreeNodeToggle matTreeNodePadding
+        [matTreeNodeToggleRecursive]="expandirRecursivo">
+        <ng-container [ngTemplateOutlet]="liDat"
+            [ngTemplateOutletContext]="{ node: node, nested: false }"></ng-container>
+    </mat-tree-node>
+
+    <mat-nested-tree-node *matTreeNodeDef="let node; when: hasChild">
+        <div class="flex flex-col trans-ease-out cursor-pointer" matTreeNodeToggle [matTreeNodeToggleRecursive]="expandirRecursivo">
+            <ng-container [ngTemplateOutlet]="liDat"
+                [ngTemplateOutletContext]="{ node: node, nested: true }"></ng-container>
+            <div class="pl-4" [class.tree-invisible]="!treeControl.isExpanded(node)">
+                <ng-container matTreeNodeOutlet></ng-container>
+            </div>
+        </div>
+    </mat-nested-tree-node>
+</mat-tree>
+-->
+
+<ng-template #liDat let-node="node" let-nested="nested">
+    <div class="flex items-center gap-0 text-sm trans-ease-out cursor-pointer p-0 w-full"
+        (contextmenu)="menuContextual?.abrirMenuContextual($event, node); $event.preventDefault();"
+        (click)="seleccionarItem(node); opcMenu({ seccion: nombreColeccion, tipo: 'ver', item: node }); menuContextual?.cerrarMenuContextual();"
+        [ngClass]="classFila(node)">
+        <mat-icon *ngIf="!nested"></mat-icon>
+        <mat-icon *ngIf="nested"
+            [svgIcon]="treeControl.isExpanded(node) ? 'roundExpandMore' : 'roundChevronRight'"></mat-icon>
+
+        <mat-checkbox *ngIf="checkbox"
+            [(ngModel)]="chkLista.modelosChk[node[campoId]]"
+            [ngModelOptions]="{ standalone: true }"
+            (click)="$event.stopPropagation()"
+            (change)="cambiarCheck(node, $event.checked); emitirModeloCheck()"
+            [checked]="nested ? hijosActivos('checked', node) : false"
+            [indeterminate]="nested ? hijosActivos('indeterminate', node) : false">
+        </mat-checkbox>
+
+        <span *ngIf="!templateTxtData" class="w-full">{{ node[campoStr] }}</span>
+        <ng-container *ngIf="templateTxtData" [ngTemplateOutlet]="templateTxtData"
+            [ngTemplateOutletContext]="{ data: node, treeControl }"></ng-container>
+    </div>
+</ng-template>

package/lista-arbol/lista-arbol.component.ts

@@ -0,0 +1,238 @@
+import {Component, EventEmitter, Input, OnInit, Output, TemplateRef} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {MatTreeModule} from '@angular/material/tree';
+import {MatIconModule} from '@angular/material/icon';
+import {MatCheckboxModule} from '@angular/material/checkbox';
+import {FormsModule} from '@angular/forms';
+import {Observable} from 'rxjs';
+import {NestedTreeControl} from '@angular/cdk/tree';
+import {generarArbol} from './lista-arbol.functions';
+import {DataModel} from '@jvsoft/utils';
+import {SelectionModel} from '@angular/cdk/collections';
+import shortHash from 'shorthash2';
+
+@Component({
+    selector: 'jvs-lista-arbol',
+    standalone: true,
+    imports: [
+        CommonModule,
+        FormsModule,
+        MatTreeModule,
+        MatIconModule,
+        MatCheckboxModule,
+    ],
+    templateUrl: './lista-arbol.component.html',
+})
+export class ListaArbolComponent<T = any> implements OnInit {
+    @Input() listaSuscription!: Observable<T[]>;
+    @Input() nombreColeccion!: string;
+    @Input() checkbox = false;
+    @Input() expandirRecursivo = false;
+    @Input() checkboxSeleccionados: T[] = [];
+
+    @Input() campoId!: string;
+    @Input() campoIdPadre!: string;
+    @Input() campoStr!: string;
+    @Input() campoOrden?: string;
+    @Input() strHijoContainer = 'hijos';
+    @Input() menuContextual?: { abrirMenuContextual: Function; cerrarMenuContextual: Function };
+    @Input() classSeleccionado: string[] = ['bg-primary-activo', 'text-primary', 'dark:!bg-primary-dark-activo'];
+    @Input() classAnulado: string[] = ['line-through', 'text-red', 'italic'];
+    @Input() campoAnulado?: string | null;
+    @Input() templateTxtData?: TemplateRef<any>;
+    @Input() condicionMostrar?: (item: T) => boolean;
+    @Input() condicionesClaseFila: (item: T) => string[] = () => [];
+
+    @Input() set selectionModel(val: SelectionModel<any>) {
+        this.objSeleccionado = val;
+    }
+    @Output() selectionModelChange = new EventEmitter<SelectionModel<any>>();
+
+    @Output() seleccionado = new EventEmitter<any>();
+    @Output() listaCheck = new EventEmitter<T[]>();
+    @Output() listaCheckObj = new EventEmitter<Record<string, any>>();
+
+    private _idTabla: string[] = [];
+
+    get idTabla(): string[] {
+        return this._idTabla;
+    }
+
+    @Input({required: true}) set idTabla(val: string[] | string) {
+        if (Array.isArray(val)) {
+            this._idTabla = val;
+        }
+        else {
+            this._idTabla.push(val);
+        }
+    }
+
+    get buscarItemSeleccionado(): any {
+        const dRet = this.listaOriginal.find(itm => this._seleccionado === this.propiedadSeleccion(itm));
+        return dRet ?? null;
+    }
+    get objSeleccionado() {
+        return this.buscarItemSeleccionado; // ?? this.objThis?.['seleccionados']?.[this.nombreColeccion];
+    }
+
+    set objSeleccionado(val: any) {
+        this.seleccionarItem(val, true);
+    }
+
+    chkLista = new DataModel();
+    listaMuestraArbol: T[] = [];
+    listaOriginal: T[] = [];
+
+    treeControl = new NestedTreeControl((node: any) => node[this.strHijoContainer]);
+
+    _seleccionado: any = {};
+
+    ngOnInit(): void {
+        this.listaSuscription.subscribe(res => {
+            if (res) {
+                this.listaOriginal = res;
+                const listaAs = generarArbol({
+                    lista: res,
+                    campoId: this.campoId,
+                    campoIdPadre: this.campoIdPadre,
+                    idPadre: null,
+                    strChildren: this.strHijoContainer,
+                    campoOrden: this.campoOrden
+                });
+                this.listaMuestraArbol = [];
+                setTimeout(() => {
+                    this.listaMuestraArbol = listaAs;
+                }, 1);
+                if (this.checkbox) {
+                    this.chkLista.agregarControles(res, this.campoId);
+                    this.checkboxSeleccionados.forEach((chkSel: any) => {
+                        this.chkLista.setState(chkSel[this.campoId], true);
+                    });
+                    this.emitirModeloCheck();
+                }
+            }
+        });
+    }
+
+
+    idTablaValor(data: any): string {
+        if (data) {
+            if (this.idTabla.length < 1) {
+                return shortHash(JSON.stringify({data, claseFinal: undefined}))
+            }
+            return this.idTabla.map(d => data[d]).join('-');
+        }
+        return '';
+    }
+
+    propiedadSeleccion(item: any): string {
+        return `${this.nombreColeccion}_${this.idTablaValor(item)}`;
+    }
+
+    esSeleccionActual(item: any): boolean {
+        return this._seleccionado === this.propiedadSeleccion(item);
+    }
+    seleccionarItem(item?: any, forzado: boolean = false): void {
+        const idItem = this.propiedadSeleccion(item);
+        if (forzado) {
+            this._seleccionado = idItem;
+        }
+        else {
+            this._seleccionado = this._seleccionado === idItem ? null:idItem;
+        }
+        this.selectionModelChange.emit(this.objSeleccionado);
+        this.seleccionado.emit(this.objSeleccionado);
+    }
+
+
+    hasChild = (_: number, node: any) => !!node[this.strHijoContainer] && node[this.strHijoContainer].length > 0;
+
+
+    opcMenu(v: any) {
+        // console.warn(v);
+        // console.warn(this.objSeleccionado);
+        const opAdic: any = {seccion: this.nombreColeccion};
+        opAdic['itemSeleccionado'] = this.objSeleccionado;
+        // v = {...v, ...opAdic};
+        // this.seleccionado.emit(v);
+    }
+
+    emitirModeloCheck() {
+        this.listaCheck.emit(<any[]>this.chkLista.generarLista());
+        this.listaCheckObj.emit(<object>this.chkLista.generarLista('object'));
+    }
+
+
+    cambiarPadre(checkActual: T, estado: boolean): void {
+        const parentId = (checkActual as any)[this.campoIdPadre];
+        if (parentId) {
+            const padreAct = this.listaMuestraArbol.find((itm: any) => itm[this.campoId] == parentId);
+            if (padreAct) {
+                this.chkLista.setState(parentId, this.hijosActivos('checked', padreAct) || this.hijosActivos('indeterminate', padreAct));
+                this.cambiarPadre(padreAct, estado);
+            }
+        }
+    }
+
+    cambiarCheck(checkActual: T, estado: boolean): void {
+        if (this.hasChild(0, checkActual)) {
+            (this.treeControl.getChildren(checkActual) ?? []).forEach((vas: any) => {
+                this.cambiarCheck(vas, estado);
+            });
+        }
+        this.cambiarPadre(checkActual, estado);
+        this.chkLista.setState((checkActual as any)[this.campoId], estado);
+    }
+
+    hijosActivos(tipo: 'checked' | 'indeterminate', checkActual: T): boolean {
+        let totalHijos = 0;
+        let cantActivo = 0;
+        if (this.hasChild(0, checkActual)) {
+            (this.treeControl.getChildren(checkActual) ?? []).forEach((vas: any) => {
+                if (this.chkLista.getState(vas[this.campoId] + '')) {
+                    cantActivo++;
+                }
+                totalHijos++;
+            });
+        }
+
+        switch (tipo) {
+            case 'checked':
+                return (cantActivo == totalHijos);
+            case 'indeterminate':
+                if (cantActivo == totalHijos) {
+                    this.chkLista.setState((checkActual as any)[this.campoId], true);
+                }
+                return ((cantActivo > 0) && (cantActivo != totalHijos));
+        }
+        return false;
+    }
+
+
+    classFila2(item: T): string[] {
+        let clases: string[] = [];
+        if (this.campoAnulado && (item as any)[this.campoAnulado] === 1) {
+            clases = clases.concat(this.classAnulado);
+        }
+        if ((item as any)?.seleccionado) {
+            clases = clases.concat(this.classSeleccionado);
+        }
+        clases = clases.concat(this.condicionesClaseFila(item));
+        (item as any).claseFinal = clases;
+        return clases;
+    }
+
+    classFila(item: any) {
+        let claseFinal: any[] = [];
+        if (this.campoAnulado && (item[this.campoAnulado] == 1)) {
+            claseFinal = claseFinal.concat(this.classAnulado);
+        }
+        if (this.objSeleccionado == item || this.esSeleccionActual(item)) {
+            claseFinal = claseFinal.concat(this.classSeleccionado);
+        }
+        claseFinal = claseFinal.concat(this.condicionesClaseFila(item));
+        item.claseFinal = claseFinal;
+        return claseFinal;
+    }
+}
+

package/lista-arbol/lista-arbol.functions.ts

@@ -0,0 +1,46 @@
+export function generarArbol(params: {
+    lista: any[],
+    campoId: string,
+    campoIdPadre: string,
+    idPadre?: any,
+    strChildren?: string,
+    campoOrden?: string
+}): any[] {
+    const {
+        lista,
+        campoId,
+        campoIdPadre,
+        idPadre = null,
+        strChildren = 'hijos',
+        campoOrden,
+    } = params;
+
+    const hijos = lista.filter(n => n[campoIdPadre] === idPadre);
+
+    if (campoOrden) {
+        hijos.sort((a, b) => {
+            const va = a[campoOrden];
+            const vb = b[campoOrden];
+
+            if (typeof va === 'string' && typeof vb === 'string') {
+                return va.localeCompare(vb);
+            }
+            if (typeof va === 'number' && typeof vb === 'number') {
+                return va - vb;
+            }
+            return 0;
+        });
+    }
+
+    return hijos.map(n => ({
+        ...n,
+        [strChildren]: generarArbol({
+            lista,
+            campoId,
+            campoIdPadre,
+            idPadre: n[campoId],
+            strChildren,
+            campoOrden,
+        }),
+    }));
+}

package/lista-arbol/ng-package.json

@@ -0,0 +1,5 @@
+{
+  "lib": {
+    "entryFile": "public-api.ts"
+  }
+}

package/lista-arbol/public-api.ts

@@ -0,0 +1 @@
+export * from './lista-arbol.component';

package/luces-navidad/index.ts

@@ -0,0 +1 @@
+export * from './public-api'

package/luces-navidad/luces-navidad.component.html

@@ -0,0 +1,6 @@
+<ng-container *ngIf="forzarMuestra || (mesActual == 12 && enProduccion)">
+    <ul class="lightrope">
+        <li *ngFor="let e of [].constructor(100); let i = index"></li>
+    </ul>
+    <div class="christmas-tree"></div>
+</ng-container>

package/luces-navidad/luces-navidad.component.ts

@@ -0,0 +1,24 @@
+import {Component, Input, OnInit} from '@angular/core';
+import {NgForOf, NgIf} from '@angular/common';
+
+@Component({
+    selector: 'jvs-luces-navidad, [jvsLucesNavidad]',
+    templateUrl: './luces-navidad.component.html',
+    imports: [
+        NgIf,
+        NgForOf
+    ],
+    styleUrls: ['./luces-navidad.component.scss']
+})
+export class LucesNavidadComponent implements OnInit {
+	@Input() enProduccion = true;
+	@Input() forzarMuestra = false;
+	mesActual = new Date().getMonth() + 1;
+
+	constructor() {
+	}
+
+	ngOnInit(): void {
+	}
+
+}

package/luces-navidad/ng-package.json

@@ -0,0 +1,5 @@
+{
+  "lib": {
+    "entryFile": "public-api.ts"
+  }
+}

package/mat-suffix-search-button/index.ts

@@ -0,0 +1 @@
+export * from './public-api'

package/mat-suffix-search-button/mat-suffix-search-button.component.html

@@ -0,0 +1,5 @@
+<button matRipple type="button" class="boton-circular-gris"
+    (click)="emitirClick(); $event.preventDefault();"
+>
+    <mat-icon [svgIcon]="(control.value ? 'roundCancel' : 'roundSearch')" class="icon-xs"></mat-icon>
+</button>