angular-matecu 4.0.0 → 4.0.2

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

@@ -0,0 +1,90 @@
+$search-text-color: var(--mtb-bar-color, #fff);
+$mtb-search-margin: var(--mtb-search-margin, 10px);
+.matecu-topbar-search-mobile-only {
+  display: none;
+  border: none;
+  background: none;
+  cursor: pointer;
+  color: var(--mtb-search-color, $search-text-color);
+  margin: $mtb-search-margin;
+  &.mobile-style {
+    display: block;
+  }
+}
+.matecu-topbar-search {
+  &,
+  * {
+    box-sizing: border-box;
+    outline: none;
+  }
+  margin: $mtb-search-margin;
+  position: relative;
+  display: flex;
+  align-items: center;
+  color: var(--mtb-search-color, $search-text-color);
+  max-height: var(--bar-height, 64px);
+
+  input {
+    width: var(--mtb-search-width, 200px);
+    min-width: var(--mtb-search-width, 200px);
+    height: var(--mtb-search-height, 40px);
+    padding: var(--mtb-search-pading, 3px 35px);
+    border-radius: 4px;
+    border: 1px solid;
+    border: var(--mtb-search-border, none);
+    background-color: var(--search-background-color, #ffffff4d);
+    color: currentColor;
+    transition: all 300ms ease-in-out;
+    &::placeholder {
+      color: var(--mtb-search-color, $search-text-color);
+      opacity: 1; /* Firefox */
+    }
+    &:focus {
+      min-width: var(--mtb-search-width-large, 290px);
+    }
+  }
+
+  &__icon {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    padding: 0px;
+    &--search {
+      left: 6px;
+    }
+    &--clear {
+      border: 0px;
+      background: 0px;
+      cursor: pointer;
+      color: currentColor;
+      right: 6px;
+    }
+  }
+}
+.mobile-style.matecu-topbar-search {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  right: 0px;
+  border-bottom: 1px solid;
+  border-bottom-color: var(--mtb-search-border-bottom-color, #ededed);
+  z-index: 3;
+  padding: 0px;
+  margin: 0px;
+  height: 64px;
+  color: var(--mtb-search-mobile-color, #000);
+  transform: translateY(-120%);
+  transition: all 300ms ease-in-out;
+  &.active-mobile {
+    transform: translateY(0);
+  }
+  input {
+    background-color: #fff;
+    height: 100%;
+    width: 100%;
+    border-radius: 0px;
+    &::placeholder {
+      color: var(--mtb-search-mobile-color, #000);
+    }
+  }
+}

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

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

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

@@ -0,0 +1,92 @@
+import { CommonModule } from '@angular/common';
+import {
+  Component,
+  EventEmitter,
+  HostBinding,
+  Input,
+  OnInit,
+  Output,
+} from '@angular/core';
+import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { Subject } from 'rxjs';
+import {
+  debounceTime,
+  distinctUntilChanged,
+  map,
+  takeUntil,
+  tap,
+} from 'rxjs/operators';
+
+@Component({
+  selector: 'matecu-topbar-search',
+  templateUrl: './matecu-topbar-search.component.html',
+  styleUrls: ['./matecu-topbar-search.component.scss'],
+  standalone: true,
+  imports: [
+    CommonModule,
+    FormsModule,
+    ReactiveFormsModule,
+    MatIconModule,
+    MatButtonModule,
+  ],
+})
+export class MatecuTopbarSearchComponent implements OnInit {
+  hasValue = false;
+  activeMobileSearch = false;
+  inputCtrl = new FormControl('');
+  private _value = '';
+  private _mobileStyle = false;
+
+  private destroy$ = new Subject<void>();
+  @Input() display = true;
+  @Input() placeholder = '';
+  @Input() delyValueChanges = 300; // valor en milisegundos
+  @Input() get value() {
+    return this._value;
+  }
+  set value(v: string) {
+    this._value = v;
+    this.inputCtrl.setValue(v);
+  }
+  @Input() get mobileStyle() {
+    return this._mobileStyle;
+  }
+  set mobileStyle(value: boolean) {
+    this._mobileStyle = value;
+    this.className = this.className.replace(/mobile-style/g, '').trim();
+    if (this._mobileStyle) {
+      this.className = `${this.className} mobile-style`;
+    }
+  }
+  @Output() valueChange = new EventEmitter<string>();
+  @HostBinding() className = 'matecu-topbar-search';
+  @HostBinding('style.display') get color() {
+    return this.display ? 'flex' : 'none';
+  }
+  ngOnInit(): void {
+    this.inputCtrl.valueChanges
+      .pipe(
+        map((value) => value ?? ''),
+        tap(this.updateHasValueFn()),
+        debounceTime(this.delyValueChanges),
+        distinctUntilChanged(),
+        tap((value) => this.valueChange.emit(value!)),
+        takeUntil(this.destroy$)
+      )
+      .subscribe();
+  }
+  toggleActiveMobildeSearch() {
+    this.activeMobileSearch = !this.activeMobileSearch;
+  }
+  clearSearch() {
+    this.inputCtrl.setValue('');
+    this.activeMobileSearch = false;
+  }
+  updateHasValueFn() {
+    return (value: string): void => {
+      this.hasValue = value.length > 0;
+    };
+  }
+}

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

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

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

@@ -0,0 +1,91 @@
+$search-text-color: var(--mtb-bar-color, #fff);
+$mtb-search-margin: var(--mtb-search-margin, 10px);
+.matecu-topbar-search-mobile-only {
+  display: none;
+  border: none;
+  background: none;
+  cursor: pointer;
+  color: var(--mtb-search-color, $search-text-color);
+  margin: $mtb-search-margin;
+  &.mobile-style {
+    display: block;
+  }
+}
+:host,
+.matecu-topbar-search {
+  &,
+  * {
+    box-sizing: border-box;
+    outline: none;
+  }
+  margin: $mtb-search-margin;
+  position: relative;
+  display: flex;
+  align-items: center;
+  color: var(--mtb-search-color, $search-text-color);
+  max-height: var(--bar-height, 64px);
+
+  input {
+    width: var(--mtb-search-width, 200px);
+    min-width: var(--mtb-search-width, 200px);
+    height: var(--mtb-search-height, 40px);
+    padding: var(--mtb-search-pading, 3px 35px);
+    border-radius: 4px;
+    border: 1px solid;
+    border: var(--mtb-search-border, none);
+    background-color: var(--search-background-color, #ffffff4d);
+    color: currentColor;
+    transition: all 300ms ease-in-out;
+    &::placeholder {
+      color: var(--mtb-search-color, $search-text-color);
+      opacity: 1; /* Firefox */
+    }
+    &:focus {
+      min-width: var(--mtb-search-width-large, 290px);
+    }
+  }
+
+  &__icon {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    padding: 0px;
+    &--search {
+      left: 6px;
+    }
+    &--clear {
+      border: 0px;
+      background: 0px;
+      cursor: pointer;
+      color: currentColor;
+      right: 6px;
+    }
+  }
+}
+.mobile-style.matecu-topbar-search {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  right: 0px;
+  border-bottom: 1px solid;
+  border-bottom-color: var(--mtb-search-border-bottom-color, #ededed);
+  z-index: 3;
+  padding: 0px;
+  margin: 0px;
+  height: 64px;
+  color: var(--mtb-search-mobile-color, #000);
+  transform: translateY(-120%);
+  transition: all 300ms ease-in-out;
+  &.active-mobile {
+    transform: translateY(0);
+  }
+  input {
+    background-color: #fff;
+    height: 100%;
+    width: 100%;
+    border-radius: 0px;
+    &::placeholder {
+      color: var(--mtb-search-mobile-color, #000);
+    }
+  }
+}

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

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

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

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

package/src/lib/modules/matecu-alert-box/matecu-alert-box.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatecuAlertBoxComponent } from '../../components/matecu-alert-box/matecu-alert-box.component';
+import { MatIconModule } from '@angular/material/icon';
+import { MatecuAlertDialogComponent } from '../../components/matecu-alert-dialog/matecu-alert-dialog.component';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatButtonModule } from '@angular/material/button';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { MatecuAlertSnackBarComponent } from '../../components/matecu-alert-snack-bar/matecu-alert-snack-bar.component';
+
+@NgModule({
+    declarations: [],
+    imports: [CommonModule, MatIconModule, MatDialogModule, MatButtonModule, MatSnackBarModule, MatecuAlertBoxComponent, MatecuAlertDialogComponent, MatecuAlertSnackBarComponent],
+    exports: [MatecuAlertBoxComponent]
+})
+export class MatecuAlertBoxModule { }

package/src/lib/modules/matecu-spinner/matecu-spinner.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatecuSpinnerComponent } from '../../components/matecu-spinner/matecu-spinner.component';
+
+@NgModule({
+  declarations: [],
+  imports: [
+    CommonModule, MatecuSpinnerComponent
+  ],
+  exports: [
+    MatecuSpinnerComponent
+  ]
+})
+export class MatecuSpinnerModule { }

package/src/lib/modules/matecu-topbar-layout/matecu-topbar-layout.module.ts

@@ -0,0 +1,45 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatecuTopbarLayoutComponent } from '../../components/matecu-topbar-layout/matecu-topbar-layout.component';
+import { MatecuTopbarTitleComponent } from '../../components/matecu-topbar-title/matecu-topbar-title.component';
+import { MatecuTopbarBodyComponent } from '../../components/matecu-topbar-body/matecu-topbar-body.component';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatIconModule } from '@angular/material/icon';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatecuTopbarFabComponent } from '../../components/matecu-topbar-fab/matecu-topbar-fab.component';
+import { MatecuTopbarSearchComponent } from '../../components/matecu-topbar-search/matecu-topbar-search.component';
+import { MatecuTopbarActionComponent } from '../../components/matecu-topbar-action/matecu-topbar-action.component';
+import { MatecuTopbarHeaderRowComponent } from '../../components/matecu-topbar-header-row/matecu-topbar-header-row.component';
+import { MatecuTopbarHeaderColumnComponent } from '../../components/matecu-topbar-header-column/matecu-topbar-header-column.component';
+
+@NgModule({
+  declarations: [],
+  imports: [
+    CommonModule,
+    MatToolbarModule,
+    MatIconModule,
+    FormsModule,
+    ReactiveFormsModule,
+    MatButtonModule,
+    MatecuTopbarLayoutComponent,
+    MatecuTopbarTitleComponent,
+    MatecuTopbarBodyComponent,
+    MatecuTopbarFabComponent,
+    MatecuTopbarSearchComponent,
+    MatecuTopbarActionComponent,
+    MatecuTopbarHeaderRowComponent,
+    MatecuTopbarHeaderColumnComponent,
+  ],
+  exports: [
+    MatecuTopbarLayoutComponent,
+    MatecuTopbarTitleComponent,
+    MatecuTopbarBodyComponent,
+    MatecuTopbarFabComponent,
+    MatecuTopbarSearchComponent,
+    MatecuTopbarActionComponent,
+    MatecuTopbarHeaderRowComponent,
+    MatecuTopbarHeaderColumnComponent,
+  ],
+})
+export class MatecuTopbarLayoutModule {}

package/src/lib/services/matecu-snack-bar.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { MatecuSnackBarService } from './matecu-snack-bar.service';
+
+describe('MatecuSnackBarService', () => {
+  let service: MatecuSnackBarService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(MatecuSnackBarService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

package/src/lib/services/matecu-snack-bar.service.ts

@@ -0,0 +1,66 @@
+import { Injectable } from '@angular/core';
+import { MatSnackBar, MatSnackBarConfig, MatSnackBarRef, TextOnlySnackBar } from '@angular/material/snack-bar';
+import { MatecuAlertSnackBarComponent } from '../components/matecu-alert-snack-bar/matecu-alert-snack-bar.component';
+import { MatecuAlertSnackBarData } from '../types/matecu-alert-snackbar';
+import { MatecuAlertBoxType } from '../types/matecu-altert-box-type';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class MatecuSnackBarService {
+
+  constructor(private snackBar: MatSnackBar) { }
+
+
+
+  openError(error: string | Error, title?: string | null, action?: string, config?: MatSnackBarConfig<any>): MatSnackBarRef<MatecuAlertSnackBarComponent> {
+    const message = this.getErrorMessage(error);
+    const titleStr = title || 'ERROR';
+    const type = MatecuAlertBoxType.danger;
+    return this.openAlert(message, titleStr, type, action, config);
+  }
+  openSuccess(message: string, title?: string | null, action?: string, config?: MatSnackBarConfig<any>): MatSnackBarRef<MatecuAlertSnackBarComponent> {
+    const titleStr = title || 'OK';
+    const type = MatecuAlertBoxType.success;
+    return this.openAlert(message, titleStr, type, action, config);
+  }
+  openWarning(message: string, title?: string | null, action?: string, config?: MatSnackBarConfig<any>): MatSnackBarRef<MatecuAlertSnackBarComponent> {
+    const titleStr = title || 'WARNING';
+    const type = MatecuAlertBoxType.warning;
+    return this.openAlert(message, titleStr, type, action, config);
+  }
+  openInfo(message: string, title?: string | null, action?: string, config?: MatSnackBarConfig<any>): MatSnackBarRef<MatecuAlertSnackBarComponent> {
+    const titleStr = title || 'INFO';
+    const type = MatecuAlertBoxType.info;
+    return this.openAlert(message, titleStr, type, action, config);
+  }
+  open(message: string, action?: string, config?: MatSnackBarConfig<any>): MatSnackBarRef<TextOnlySnackBar> {
+    return this.snackBar.open(message, action, config);
+  }
+  dismiss(): void {
+    this.snackBar.dismiss()
+  }
+  private openAlert(message: string, title: string, type: MatecuAlertBoxType, action?: string, config?: MatSnackBarConfig<any>) {
+
+    const data: MatecuAlertSnackBarData = {
+      message,
+      title,
+      action,
+      type
+    }
+    const dialogConfig = { ...config, data }
+
+    return this.snackBar.openFromComponent(MatecuAlertSnackBarComponent, dialogConfig);
+  }
+
+  private getErrorMessage(err: string | Error): string {
+    const error = new Error()
+    if (typeof err === 'string') {
+      return err;
+    }
+    if (err instanceof Error) {
+      return err.message;
+    }
+    return '';
+  }
+}

package/src/lib/services/matecu-spinner.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { MatecuSpinnerService } from './matecu-spinner.service';
+
+describe('MatecuSpinnerService', () => {
+  let service: MatecuSpinnerService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(MatecuSpinnerService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

package/src/lib/services/matecu-spinner.service.ts

@@ -0,0 +1,40 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject, Observable } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class MatecuSpinnerService {
+  private active$ = new BehaviorSubject<boolean>(false);
+  private requestsKeys: string[] = [];
+  constructor() {}
+
+  watch(): Observable<boolean> {
+    return this.active$.pipe();
+  }
+  add(customKey?: string): string {
+    const key = (typeof(customKey) === 'string' && customKey.length > 0) ? customKey : this.createKey();
+    this.requestsKeys.push(key);
+    this.updateStatus();
+    return key;
+  }
+  remove(key: string): void {
+    this.requestsKeys = this.requestsKeys.filter(
+      (requestKey) => requestKey !== key
+    );
+    this.updateStatus();
+  }
+  clear(): void {
+    this.requestsKeys = [];
+    this.updateStatus();
+  }
+  private updateStatus(): void {
+    const active = this.requestsKeys.length > 0;
+    this.active$.next(active);
+  }
+  private createKey(): string {
+    const time = new Date().getTime();
+    const complement = Math.random();
+    return `${time}__${complement}`;
+  }
+}

package/src/lib/types/matecu-alert-dialog.ts

@@ -0,0 +1,10 @@
+import { MatecuAlertBoxType } from './matecu-altert-box-type';
+
+export interface MatecuAlertDialogData {
+  message: string;
+  title?: string | null | undefined;
+  action?: string | null | undefined;
+  icon?: boolean | null | undefined;
+  type?: MatecuAlertBoxType | string | null | undefined;
+  dismissText?: string | null | undefined;
+}

package/{lib/types/matecu-alert-snackbar.d.ts → src/lib/types/matecu-alert-snackbar.ts}

@@ -1,7 +1,8 @@
 import { MatecuAlertBoxType } from './matecu-altert-box-type';
+
 export interface MatecuAlertSnackBarData {
-    message: string;
-    title: string;
-    action?: string;
-    type: MatecuAlertBoxType;
+  message: string;
+  title: string;
+  action?: string;
+  type: MatecuAlertBoxType
 }

package/src/lib/types/matecu-altert-box-type.ts

@@ -0,0 +1,6 @@
+export enum MatecuAlertBoxType {
+  warning = 'warning',
+  success = 'success',
+  danger = 'danger',
+  info = 'info',
+}

package/{public-api.d.ts → src/public-api.ts}

@@ -1,9 +1,14 @@
+/*
+ * Public API Surface of angular-matecu
+ */
+
 /**
  *  spinner
  */
 export * from './lib/modules/matecu-spinner/matecu-spinner.module';
 export * from './lib/components/matecu-spinner/matecu-spinner.component';
 export * from './lib/services/matecu-spinner.service';
+
 /**
  *  topbar-layout
  */
@@ -16,9 +21,11 @@ export * from './lib/components/matecu-topbar-search/matecu-topbar-search.compon
 export * from './lib/components/matecu-topbar-action/matecu-topbar-action.component';
 export * from './lib/components/matecu-topbar-header-row/matecu-topbar-header-row.component';
 export * from './lib/components/matecu-topbar-header-column/matecu-topbar-header-column.component';
+
 /**
  *  alert-box
  */
+
 export * from './lib/modules/matecu-alert-box/matecu-alert-box.module';
 export * from './lib/components/matecu-alert-box/matecu-alert-box.component';
 export * from './lib/components/matecu-alert-dialog/matecu-alert-dialog.component';

package/src/test.ts

@@ -0,0 +1,17 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js';
+import 'zone.js/testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting(), {
+    teardown: { destroyAfterEach: false }
+}
+);

package/tsconfig.lib.json

@@ -0,0 +1,24 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": [],
+    "lib": [
+      "dom",
+      "es2018"
+    ]
+  },
+  "angularCompilerOptions": {
+    "skipTemplateCodegen": true,
+    "strictMetadataEmit": true,
+    "enableResourceInlining": true
+  },
+  "exclude": [
+    "src/test.ts",
+    "**/*.spec.ts"
+  ]
+}

package/tsconfig.lib.prod.json

@@ -0,0 +1,10 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  }
+}