angular-matecu 4.0.7 → 4.1.0

package/package.json

@@ -1,27 +1,12 @@
 {
   "name": "angular-matecu",
-  "version": "4.0.7",
+  "version": "4.1.0",
   "license": "MIT",
   "peerDependencies": {
-    "@angular/common": "^15.x || ^16.x || ^17.x || ^18.x || 19.x",
-    "@angular/core": "^15.x || ^16.x || ^17.x || ^18.x || 19.x",
-    "@angular/material": "^15.x || ^16.x || ^17.x || ^18.x || 19.x"
+    "@angular/common": ">=17.0.0",
+    "@angular/core": ">=17.0.0",
+    "@angular/material": ">=17.0.0"
   },
-  "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 @@
+@if (icon && iconValue) {
+<div class="matecu-alert-box__icon">
+  <mat-icon>{{iconValue}}</mat-icon>
+</div>
+}
+<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,24 @@
+@if (hasTitle) {
+
+<h2 mat-dialog-title>{{dialogData.title}}</h2>
+}
+<mat-dialog-content>
+
+  <matecu-alert-box [color]="dialogData.type" [icon]="!!dialogData.icon">
+    {{dialogData.message}}
+  </matecu-alert-box>
+
+</mat-dialog-content>
+@if (showActions) {
+
+<mat-dialog-actions align="end">
+  @if (hasDismissBtn) {
+  <button mat-button color="primary" tabindex="-1" mat-dialog-close>{{dialogData.dismissText}}
+  </button>
+  }
+  @if(hasActionBtn) {
+  <button mat-button color="primary" tabindex="-2" (click)="activateAction()">{{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,10 @@
+<div>
+    <strong>{{title}}</strong> &nbsp;
+    <span>{{message}}</span>
+</div>
+@if(action?.length){
+
+<div>
+    <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-autocomplete/matecu-autocomplete.html

@@ -0,0 +1,36 @@
+<input matInput type="text" matInput [formControl]="inputControl" [matAutocomplete]="auto" [class.loading]="loading"
+    [disabled]="disabled" [readonly]="readonly" />
+
+
+<mat-autocomplete #auto="matAutocomplete" (optionSelected)="onOptionSelected($event.option.value)"
+    [displayWith]="displayLabel">
+
+    @for (option of filteredOptions$ | async; track $index) {
+
+    <mat-option [value]="option[0]">
+        {{ option[1] }}
+    </mat-option>
+
+    }
+
+    <!-- Crear nuevo -->
+    @if(allowCreate){
+
+    <mat-divider></mat-divider>
+
+    @if(showCreateOption ){
+    <mat-option (click)="onCreateClick()" class="create-option">
+        <span>➕</span><span>" {{ inputControl.value }}"</span>
+
+    </mat-option>
+    }
+    }
+
+</mat-autocomplete>
+
+<!-- Spinner -->
+@if(loading){
+<mat-progress-spinner class="loading-spinner" diameter="20" mode="indeterminate"
+    style="position:absolute; right:10px; top:50%; transform:translateY(-50%);">
+</mat-progress-spinner>
+}

package/src/lib/components/matecu-autocomplete/matecu-autocomplete.scss

@@ -0,0 +1,56 @@
+:host {
+  display: block;
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  input {
+    border: none;
+    background-color: transparent;
+    outline: none;
+  }
+  .create-option {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    &:first-child {
+      margin-right: auto;
+      color: green;
+    }
+  }
+}
+
+// /* Spinner alineado como suffix de Material */
+.loading-spinner {
+  position: absolute;
+  right: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+  pointer-events: none;
+}
+
+// /* Ajuste para que no choque con el spinner */
+input.loading {
+  padding-right: 40px;
+}
+
+// /* Opción de crear */
+.create-option {
+  font-style: italic;
+  opacity: 0.85;
+}
+
+/* Hover más suave */
+::ng-deep .mat-mdc-option.create-option:hover {
+  background: rgba(0, 0, 0, 0.04);
+}
+
+/* Divider más discreto */
+::ng-deep .mat-mdc-autocomplete-panel mat-divider {
+  margin: 4px 0;
+}
+
+/* Estado disabled */
+:host(.mat-mdc-input-disabled) {
+  opacity: 0.6;
+  pointer-events: none;
+}

package/src/lib/components/matecu-autocomplete/matecu-autocomplete.spec.ts

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