Lacuna Material

lacuna-material is a consolidated Angular package created to centralize and unify several UI components that were previously maintained across different Lacuna's internal repositories. Its purpose is to improve portability, maintainability, and overall consistency by offering a single, cohesive module structure.

This package brings together the following components:

• LacunaMatImageViewerModule, originating from the former ngx-image-viewer project
• LacunaMatTableModule, migrated from the internal lac-mat-table project
• LacunaMatLoadingModule, based on the external ngx-loading library

All modules are now organized under the unified LacunaMatModule.

Installation

npm install @lacuna/material

Getting started

To import all modules import LacunaMatModule in your root application module:

@NgModule({
	imports: [
		LacunaMatModule,
	],
})
export class AppModule {}

Alternatively you can import only specific modules

• LacunaMatImageViewerModule
• LacunaMatLoadingModule
• LacunaMatTableModule

Building

To build the library, run:

npm run build:material:prod

This command will compile your project, and the build artifacts will be placed in the dist/ directory.

Publishing the Library

Once the project is built, you can publish your library by following these steps:

1. Navigate to the dist directory:

   cd dist/lacuna-material

2. Run the npm publish command to publish your library to the npm registry:

   npm publish

Config options

LacunaMatModule()

LacunaMatTableModule

Responsive table directive (lacmResponsiveTable)

The lacmResponsiveTable attribute directive turns a lacm-table into a card-based layout on small screens. Apply it directly to the element:

<lacm-table lacmResponsiveTable ...>
  ...
</lacm-table>

Per-instance inputs

| Input | Type | Default | Description | |---|---|---|---| | responsiveTableBreakpoint | number | 992 | Viewport width (px) below which the responsive layout is activated. | | showRowDecoration | boolean | true | When false, hides the colored top bar rendered above each card row. |

<lacm-table lacmResponsiveTable
            [responsiveTableBreakpoint]="768"
            [showRowDecoration]="false">
  ...
</lacm-table>

Global configuration via LACUNA_MAT_RESPONSIVE_TABLE_CONFIG

Defaults can be set application-wide by providing LACUNA_MAT_RESPONSIVE_TABLE_CONFIG. Per-instance inputs always take precedence over the global config.

NgModule-based app:

import { LACUNA_MAT_RESPONSIVE_TABLE_CONFIG } from '@lacuna/material';

@NgModule({
  providers: [
    {
      provide: LACUNA_MAT_RESPONSIVE_TABLE_CONFIG,
      useValue: {
        breakpoint: 768,
        showRowDecoration: false,
      },
    },
  ],
})
export class AppModule {}

Standalone app (bootstrapApplication):

import { LACUNA_MAT_RESPONSIVE_TABLE_CONFIG } from '@lacuna/material';

bootstrapApplication(AppComponent, {
  providers: [
    {
      provide: LACUNA_MAT_RESPONSIVE_TABLE_CONFIG,
      useValue: {
        breakpoint: 768,
        showRowDecoration: false,
      },
    },
  ],
});

ILacunaMatResponsiveTableConfig interface

| Property | Type | Description | |---|---|---| | breakpoint | number | Viewport width (px) below which the responsive layout is activated. | | showRowDecoration | boolean | Whether to show the colored top bar above each card row. |

Priority order

For each option, the resolved value follows this priority:

1. Per-instance @Input (if explicitly set)
2. LACUNA_MAT_RESPONSIVE_TABLE_CONFIG global value (if provided)
3. Built-in default (breakpoint: 992, showRowDecoration: true)