angular-matecu 4.0.4 → 4.0.5

package/karma.conf.js

@@ -0,0 +1,44 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      jasmine: {
+        // you can add configuration options for Jasmine here
+        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+        // for example, you can disable the random execution with `random: false`
+        // or set a specific seed with `seed: 4321`
+      },
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    jasmineHtmlReporter: {
+      suppressAll: true // removes the duplicated traces
+    },
+    coverageReporter: {
+      dir: require('path').join(__dirname, '../../coverage/angular-matecu'),
+      subdir: '.',
+      reporters: [
+        { type: 'html' },
+        { type: 'text-summary' }
+      ]
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};

package/ng-package.json

@@ -0,0 +1,13 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/angular-matecu",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  },
+  "assets": [
+    "src/scss/**/*.scss",
+    "src/css/**/*.css"
+
+  ]
+  
+}

package/package.json

@@ -1,27 +1,12 @@
 {
   "name": "angular-matecu",
-  "version": "4.0.4",
+  "version": "4.0.5",
   "license": "MIT",
   "peerDependencies": {
-    "@angular/common": "^15.x || ^16.x || ^17.x",
-    "@angular/core": "^15.x || ^16.x || ^17.x",
-    "@angular/material": "^15.x || ^16.x || ^17.x"
+    "@angular/common": "^15.x || ^16.x || ^17.x || ^18.x",
+    "@angular/core": "^15.x || ^16.x || ^17.x || ^18.x",
+    "@angular/material": "^15.x || ^16.x || ^17.x || ^18.x"
   },
-  "dependencies": {
-    "tslib": "^2.3.0"
-  },
-  "module": "fesm2022/angular-matecu.mjs",
-  "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "esm2022": "./esm2022/angular-matecu.mjs",
-      "esm": "./esm2022/angular-matecu.mjs",
-      "default": "./fesm2022/angular-matecu.mjs"
-    }
-  },
-  "sideEffects": false
-}
+  "dependencies": {},
+  "devDependencies": {}
+}

package/src/lib/components/matecu-alert-box/matecu-alert-box.component.html

@@ -0,0 +1,11 @@
+<ng-container *ngIf="icon && iconValue">
+  <div class="matecu-alert-box__icon">
+    <mat-icon>{{iconValue}}</mat-icon>
+  </div>
+</ng-container>
+<div class="matecu-alert-box__content">
+  <ng-content>
+
+
+  </ng-content>
+</div>

package/src/lib/components/matecu-alert-box/matecu-alert-box.component.scss

@@ -0,0 +1,39 @@
+:host.matecu-alert-box {
+  display: flex;
+  padding: 1rem;
+  border-radius: 0.25rem;
+  position: relative;
+  border: 1px solid rgb(224, 224, 224);
+  box-sizing: border-box;
+  margin: 1rem 0;
+
+  &--success {
+    color: rgb(15, 80, 50);
+    background-color: rgb(210, 230, 220);
+    border-color: rgb(186, 220, 205);
+  }
+  &--danger {
+    color: rgb(130, 30, 40);
+    background-color: rgb(248, 215, 218);
+    border-color: rgb(245, 194, 199);
+  }
+  &--warning {
+    color: rgb(100, 77, 3);
+    background-color: rgb(255, 243, 205);
+    border-color: rgb(255, 236, 180);
+  }
+  &--info {
+    color: rgb(5, 81, 96);
+    background-color: rgb(207, 244, 252);
+    border-color: rgb(182, 239, 251);
+  }
+  .matecu-alert-box {
+    &__icon {
+      display: flex;
+      margin-right: 1rem;
+    }
+    &__content {
+      align-self: center;
+    }
+  }
+}

package/src/lib/components/matecu-alert-box/matecu-alert-box.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MatecuAlertBoxComponent } from './matecu-alert-box.component';
+
+describe('MatecuAlertBoxComponent', () => {
+  let component: MatecuAlertBoxComponent;
+  let fixture: ComponentFixture<MatecuAlertBoxComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ MatecuAlertBoxComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MatecuAlertBoxComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/components/matecu-alert-box/matecu-alert-box.component.ts

@@ -0,0 +1,60 @@
+import { CommonModule } from '@angular/common';
+import { Component, HostBinding, Input, OnInit } from '@angular/core';
+import { MatIconModule } from '@angular/material/icon';
+import { MatecuAlertBoxType } from '../../types/matecu-altert-box-type';
+
+@Component({
+  selector: 'matecu-alert-box',
+  templateUrl: './matecu-alert-box.component.html',
+  styleUrls: ['./matecu-alert-box.component.scss'],
+  standalone: true,
+  imports: [CommonModule, MatIconModule]
+})
+export class MatecuAlertBoxComponent implements OnInit {
+  classNameBase = 'matecu-alert-box';
+  alertColor?: MatecuAlertBoxType | undefined | string | null;
+  iconValue?: string | null | undefined;
+  private alertIcon = false;
+  get color(): MatecuAlertBoxType | undefined | string | null {
+    return this.alertColor;
+  }
+  @Input() set color(value: MatecuAlertBoxType | undefined | string | null) {
+    this.alertColor = value;
+    if (!!value) {
+      this.className = `${this.classNameBase} ${this.classNameBase}--${value}`;
+    } else {
+      this.className = this.classNameBase;
+    }
+    this.updateIcon();
+  }
+  get icon(): boolean {
+    return this.alertIcon;
+  }
+  @Input() set icon(value: boolean) {
+    this.alertIcon = value;
+  }
+  @HostBinding('class') className = this.classNameBase;
+  constructor() { }
+
+  ngOnInit(): void { }
+
+  private updateIcon(): void {
+    switch (this.color) {
+      case MatecuAlertBoxType.danger:
+        this.iconValue = 'dangerous';
+        break;
+      case MatecuAlertBoxType.warning:
+        this.iconValue = 'warning';
+        break;
+      case MatecuAlertBoxType.success:
+        this.iconValue = 'check_circle';
+        break;
+      case MatecuAlertBoxType.info:
+        this.iconValue = 'info';
+        break;
+      default:
+        this.iconValue = null;
+        break;
+    }
+  }
+}

package/src/lib/components/matecu-alert-dialog/matecu-alert-dialog.component.html

@@ -0,0 +1,14 @@
+<h2 mat-dialog-title *ngIf="hasTitle">{{dialogData.title}}</h2>
+<mat-dialog-content>
+
+  <matecu-alert-box [color]="dialogData.type" [icon]="!!dialogData.icon">
+    {{dialogData.message}}
+  </matecu-alert-box>
+
+</mat-dialog-content>
+<mat-dialog-actions *ngIf="showActions" align="end">
+  <button mat-button color="primary" tabindex="-1" mat-dialog-close
+    *ngIf="hasDismissBtn">{{dialogData.dismissText}}</button>
+  <button mat-button color="primary" tabindex="-2" (click)="activateAction()"
+    *ngIf="hasActionBtn">{{dialogData.action}}</button>
+</mat-dialog-actions>

package/src/lib/components/matecu-alert-dialog/matecu-alert-dialog.component.scss

@@ -0,0 +1,5 @@
+:host {
+  matecu-alert-box {
+    max-width: 900px;
+  }
+}

package/src/lib/components/matecu-alert-dialog/matecu-alert-dialog.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MatecuAlertDialogComponent } from './matecu-alert-dialog.component';
+
+describe('MatecuAlertDialogComponent', () => {
+  let component: MatecuAlertDialogComponent;
+  let fixture: ComponentFixture<MatecuAlertDialogComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ MatecuAlertDialogComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MatecuAlertDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/components/matecu-alert-dialog/matecu-alert-dialog.component.ts

@@ -0,0 +1,53 @@
+import { CommonModule } from '@angular/common';
+import { Component, Inject, OnInit } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MAT_DIALOG_DATA, MatDialogRef, MatDialogModule } from '@angular/material/dialog';
+import { MatIconModule } from '@angular/material/icon';
+import { MatecuAlertDialogData } from '../../types/matecu-alert-dialog';
+import { MatecuAlertBoxComponent } from '../matecu-alert-box/matecu-alert-box.component';
+@Component({
+  selector: 'matecu-alert-dialog',
+  templateUrl: './matecu-alert-dialog.component.html',
+  styleUrls: ['./matecu-alert-dialog.component.scss'],
+  standalone: true,
+  imports: [CommonModule, MatDialogModule, MatIconModule, MatecuAlertBoxComponent, MatButtonModule]
+})
+export class MatecuAlertDialogComponent implements OnInit {
+  hasTitle = false;
+  hasDismissBtn = false;
+  hasActionBtn = false;
+  showActions = false;
+  constructor(
+    @Inject(MAT_DIALOG_DATA) public dialogData: MatecuAlertDialogData,
+    public dialogRef: MatDialogRef<MatecuAlertDialogComponent>
+  ) {
+    this.setHasTitle();
+    this.setHasDismissBtn();
+    this.setHasActionBtn();
+    this.setShowActions();
+  }
+
+  ngOnInit(): void { }
+
+  activateAction(): void {
+    this.dialogRef.close(true);
+  }
+
+  private setHasTitle(): void {
+    this.hasTitle = this.isValidString(this.dialogData.title);
+  }
+  private setHasDismissBtn(): void {
+    this.hasDismissBtn = this.isValidString(this.dialogData.dismissText);
+  }
+
+  private setHasActionBtn(): void {
+    this.hasActionBtn = this.isValidString(this.dialogData.action);
+  }
+  private setShowActions(): void {
+    this.showActions = this.hasActionBtn || this.hasDismissBtn;
+  }
+  private isValidString(str: string | null | undefined): boolean {
+    const isValid = typeof str === 'string' && str.trim().length > 0;
+    return isValid;
+  }
+}

package/src/lib/components/matecu-alert-snack-bar/matecu-alert-snack-bar.component.html

@@ -0,0 +1,8 @@
+<div>
+    <strong>{{title}}</strong> &nbsp;
+    <span>{{message}}</span>
+</div>
+<div *ngIf="!!action?.length">
+
+    <button mat-button color="accent" (click)="dismiss()">{{action}}</button>
+</div>

package/src/lib/components/matecu-alert-snack-bar/matecu-alert-snack-bar.component.scss

@@ -0,0 +1,34 @@
+:host.matecu-alert-snackbar {
+    display: flex;
+    align-items: center;
+    > * {
+        &:not(:first-child) {
+            margin-left: 10px;
+            
+        }
+
+    }
+    &--success {
+        strong {
+
+            color: rgb(32, 219, 32);
+        }
+      }
+      &--danger {
+        strong {
+            color: red;
+        }
+      }
+      &--warning {
+        strong {
+            color: orange;
+        }
+      }
+      &--info {
+        strong {
+            color: rgb(7, 160, 237)
+        }
+      }
+  
+   
+}

package/src/lib/components/matecu-alert-snack-bar/matecu-alert-snack-bar.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MatecuAlertSnackBarComponent } from './matecu-alert-snack-bar.component';
+
+describe('MatecuAlertSnackBarComponent', () => {
+  let component: MatecuAlertSnackBarComponent;
+  let fixture: ComponentFixture<MatecuAlertSnackBarComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ MatecuAlertSnackBarComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MatecuAlertSnackBarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/components/matecu-alert-snack-bar/matecu-alert-snack-bar.component.ts

@@ -0,0 +1,45 @@
+import { CommonModule } from '@angular/common';
+import { Component, HostBinding, Inject, OnInit } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatSnackBarModule, MatSnackBarRef, MAT_SNACK_BAR_DATA } from '@angular/material/snack-bar';
+import { MatecuAlertSnackBarData } from '../../types/matecu-alert-snackbar';
+import { MatecuAlertBoxType } from '../../types/matecu-altert-box-type';
+
+@Component({
+  selector: 'matecu-alert-snack-bar',
+  templateUrl: './matecu-alert-snack-bar.component.html',
+  styleUrls: ['./matecu-alert-snack-bar.component.scss'],
+  standalone: true,
+  imports: [CommonModule, MatButtonModule, MatSnackBarModule]
+})
+export class MatecuAlertSnackBarComponent {
+
+  title: string;
+  message: string;
+  action?: string;
+  classNameBase = 'matecu-alert-snackbar';
+  alertColor!: MatecuAlertBoxType;
+  get color(): MatecuAlertBoxType {
+    return this.alertColor;
+  }
+  set color(value: MatecuAlertBoxType) {
+    this.alertColor = value;
+    this.className = `${this.classNameBase} ${this.classNameBase}--${value}`;
+  }
+  @HostBinding('class') className = this.classNameBase;
+  constructor(
+    @Inject(MAT_SNACK_BAR_DATA) public data: MatecuAlertSnackBarData,
+    private snackBarRef: MatSnackBarRef<MatecuAlertSnackBarComponent>) {
+    this.title = data.title;
+    this.message = data.message;
+    this.action = data.action;
+    this.color = data.type;
+
+  }
+
+  dismiss(): void {
+    this.snackBarRef.dismissWithAction();
+  }
+
+
+}

package/src/lib/components/matecu-spinner/matecu-spinner.component.css

@@ -0,0 +1,15 @@
+
+.matecu-spinner {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    
+}
+.matecu-spinner     > svg {
+    width: 80px;;
+    height: 80px;;
+}
+.matecu-spinner__hidden {
+    display: none;
+}

package/src/lib/components/matecu-spinner/matecu-spinner.component.html

@@ -0,0 +1,35 @@
+<ng-container *ngIf="active">
+    <svg xmlns:svg="http://www.w3.org/2000/svg" [attr.width]="size" [attr.height]="size"
+    xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" viewBox="0 0 128 128" xml:space="preserve">
+    <rect x="0" y="0" width="100%" height="100%" fill="transparent" />
+    <g>
+        <path class="matecu-spinner__100" d="M122.5 69.25H96.47a33.1 33.1 0 0 0 0-10.5h26.05a5.25 5.25 0 0 1 0 10.5z" [attr.fill]="color"
+            fill-opacity="1" />
+        <path class="matecu-spinner__30" d="M112.04 97.83L89.47 84.8a33.1 33.1 0 0 0 5.25-9.1l22.57 13.03a5.25 5.25 0 0 1-5.28 9.1z" [attr.fill]="color"
+            fill-opacity="0.3" />
+        <path class="matecu-spinner__30" d="M88.68 117.35L75.65 94.78a33.1 33.1 0 0 0 9.1-5.25l13.02 22.57a5.25 5.25 0 1 1-9.1 5.25z"
+            [attr.fill]="color" fill-opacity="0.3" />
+        <path class="matecu-spinner__30" d="M58.7 122.57V96.5a33.1 33.1 0 0 0 10.5 0v26.07a5.25 5.25 0 0 1-10.5 0z" [attr.fill]="color"
+            fill-opacity="0.3" />
+        <path class="matecu-spinner__30" d="M30.1 112.1l13.04-22.57a33.1 33.1 0 0 0 9.1 5.25L39.2 117.35a5.25 5.25 0 1 1-9.1-5.25z" [attr.fill]="color"
+            fill-opacity="0.3" />
+        <path class="matecu-spinner__30" d="M10.6 88.74L33.16 75.7a33.1 33.1 0 0 0 5.25 9.1L15.88 97.83a5.25 5.25 0 1 1-5.25-9.1z" [attr.fill]="color"
+            fill-opacity="0.3" />
+        <path class="matecu-spinner__40" d="M5.37 58.75h26.06a33.1 33.1 0 0 0 0 10.5H5.37a5.25 5.25 0 0 1 0-10.5z" [attr.fill]="color"
+            fill-opacity="0.4" />
+        <path class="matecu-spinner__50" d="M15.85 30.17L38.4 43.2a33.1 33.1 0 0 0-5.24 9.1L10.6 39.25a5.25 5.25 0 1 1 5.25-9.1z" [attr.fill]="color"
+            fill-opacity="0.5" />
+        <path class="matecu-spinner__60" d="M39.2 10.65l13.03 22.57a33.1 33.1 0 0 0-9.1 5.25l-13-22.57a5.25 5.25 0 1 1 9.1-5.25z" [attr.fill]="color"
+            fill-opacity="0.6" />
+        <path class="matecu-spinner__70" d="M69.2 5.43V31.5a33.1 33.1 0 0 0-10.5 0V5.42a5.25 5.25 0 1 1 10.5 0z" [attr.fill]="color"
+            fill-opacity="0.7" />
+        <path class="matecu-spinner__80" d="M97.77 15.9L84.75 38.47a33.1 33.1 0 0 0-9.1-5.25l13.03-22.57a5.25 5.25 0 1 1 9.1 5.25z" [attr.fill]="color"
+            fill-opacity="0.8" />
+        <path class="matecu-spinner__90" d="M117.3 39.26L94.7 52.3a33.1 33.1 0 0 0-5.25-9.1l22.57-13.03a5.25 5.25 0 0 1 5.25 9.1z" [attr.fill]="color"
+            fill-opacity="0.9" />
+        <animateTransform attributeName="transform" type="rotate"
+            values="0 64 64;30 64 64;60 64 64;90 64 64;120 64 64;150 64 64;180 64 64;210 64 64;240 64 64;270 64 64;300 64 64;330 64 64"
+            calcMode="discrete" dur="600ms" repeatCount="indefinite"></animateTransform>
+    </g>
+</svg>
+</ng-container>

package/src/lib/components/matecu-spinner/matecu-spinner.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MatecuSpinnerComponent } from './matecu-spinner.component';
+
+describe('MatecuSpinnerComponent', () => {
+  let component: MatecuSpinnerComponent;
+  let fixture: ComponentFixture<MatecuSpinnerComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ MatecuSpinnerComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MatecuSpinnerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/components/matecu-spinner/matecu-spinner.component.ts

@@ -0,0 +1,50 @@
+import { CommonModule } from '@angular/common';
+import { Component, HostBinding, Input, OnDestroy, OnInit } from '@angular/core';
+import { Subject } from 'rxjs';
+import { takeUntil, tap } from 'rxjs/operators';
+import { MatecuSpinnerService } from '../../services/matecu-spinner.service';
+@Component({
+  selector: 'matecu-spinner',
+  templateUrl: './matecu-spinner.component.html',
+  styleUrls: ['./matecu-spinner.component.css'],
+  standalone: true,
+  imports: [CommonModule]
+})
+export class MatecuSpinnerComponent implements OnInit, OnDestroy {
+
+  private destroy$ = new Subject();
+  private hiddenClass = 'matecu-spinner--hidden';
+  private activeCache = false;
+  @HostBinding('class') className = 'matecu-spinner';
+  @Input() color = '#2196F3';
+  @Input() global = false;
+  get active(): boolean {
+    return this.activeCache;
+  }
+  @Input() set active(value: boolean) {
+    if (this.global) {
+      return;
+    }
+    this.activeCache = value;
+    this.className = value
+      ? this.className.replace(` ${this.hiddenClass}`, '')
+      : (this.className += ` ${this.hiddenClass}`);
+  }
+  @Input() size = '70px';
+
+  constructor(
+    private spinnerService: MatecuSpinnerService,
+  ) { }
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+  ngOnInit(): void {
+    if (this.global) {
+      this.spinnerService.watch().pipe(
+        tap(value => this.activeCache = value),
+        takeUntil(this.destroy$)
+      ).subscribe();
+    }
+  }
+}

package/src/lib/components/matecu-spinner/spinner-loader.component.scss

@@ -0,0 +1,13 @@
+$size: 80px;
+:host, .matecu-spinner {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    > svg {
+        width: $size;
+        height: $size;
+    }
+    &__hidden {
+        display: none;
+    }
+}

package/src/lib/components/matecu-topbar-action/matecu-topbar-action.component.html

@@ -0,0 +1 @@
+<ng-content></ng-content>

package/src/lib/components/matecu-topbar-action/matecu-topbar-action.component.scss

@@ -0,0 +1,19 @@
+:host {
+  --mtb-bar-height: 64px;
+  --mtb-action-padding: 10px;
+  --mtb-action-margin: 0px;
+}
+:host,
+.matecu-topbar-action {
+  &,
+  * {
+    box-sizing: border-box;
+    outline: none;
+  }
+  height: 100%;
+  display: flex;
+  align-items: flex-start;
+  max-height: var(--mtb-bar-height);
+  padding: var(--mtb-action-padding);
+  margin: var(--mtb-action-margin);
+}

package/src/lib/components/matecu-topbar-action/matecu-topbar-action.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MatecuTopbarActionComponent } from './matecu-topbar-action.component';
+
+describe('MatecuTopbarActionsComponent', () => {
+  let component: MatecuTopbarActionComponent;
+  let fixture: ComponentFixture<MatecuTopbarActionComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [MatecuTopbarActionComponent]
+    })
+      .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MatecuTopbarActionComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/components/matecu-topbar-action/matecu-topbar-action.component.ts

@@ -0,0 +1,14 @@
+import { Component, HostBinding, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'matecu-topbar-action',
+  templateUrl: './matecu-topbar-action.component.html',
+  styleUrls: ['./matecu-topbar-action.component.scss'],
+  standalone: true,
+})
+export class MatecuTopbarActionComponent implements OnInit {
+  @HostBinding('class') className = 'matecu-topbar-action';
+  constructor() {}
+
+  ngOnInit(): void {}
+}

package/src/lib/components/matecu-topbar-body/matecu-topbar-body.component.html

@@ -0,0 +1 @@
+<ng-content></ng-content>