@maro-tech/core

Reusable Angular UI components, directives, and services for Maro Tech applications.

Installation

npm install @maro-tech/core lucide-angular

Exports

• UiModalComponent (core-modal) — centered and right-side modal layouts;
• UiConfirmService and UiConfirmHostComponent — promise-like confirmation flow;
• UiToastService and UiToastStackComponent — application toast notifications;
• ImageLoaderDirective (coreImageLoader) — image loading overlay with a spinner.
• UiButtonComponent, UiBadgeComponent, and UiCardComponent — base UI components.

Modal

import { UiModalComponent } from '@maro-tech/core';

@Component({
  standalone: true,
  imports: [UiModalComponent],
  template: `
    <core-modal
      title="Edit profile"
      size="md"
      [isOpen]="isOpen"
      (closed)="isOpen = false">
      <p>Modal content</p>

      <div slot="footer">
        <button type="button" (click)="isOpen = false">Cancel</button>
      </div>
    </core-modal>
  `,
})
export class ExampleComponent {
  isOpen = true;
}

Confirmations and toasts

Place core-confirm-host and core-toast-stack once in the application shell, then inject the services where needed:

const confirmed = await firstValueFrom(
  confirm.open({ title: 'Delete item?', danger: true })
);

toast.show('Item saved', 'success');

Image loader

<div class="relative">
  <img coreImageLoader src="/api/files/123/preview" alt="Preview">
</div>

The consuming application should include the package in its Tailwind content paths when it uses the provided utility classes.

Local checks

npm run build
npm run test:ci