angular-matecu 4.0.2 → 4.0.3

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

@@ -1,31 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component, HostBinding, Input } from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
-
-@Component({
-  selector: 'matecu-topbar-fab',
-  templateUrl: './matecu-topbar-fab.component.html',
-  styleUrls: ['./matecu-topbar-fab.component.scss'],
-  standalone: true,
-  imports: [CommonModule, MatButtonModule],
-})
-export class MatecuTopbarFabComponent {
-  private _mobileStyle = false;
-  private mainClassName = 'matecu-topbar-fab';
-  @Input() display = true;
-  @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`;
-    }
-  }
-
-  @HostBinding('class') className = this.mainClassName;
-  @HostBinding('style.display') get color() {
-    return this.display ? 'flex' : 'none';
-  }
-}

package/src/lib/components/matecu-topbar-header-column/matecu-topbar-header-column.component.html

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

package/src/lib/components/matecu-topbar-header-column/matecu-topbar-header-column.component.scss

@@ -1,8 +0,0 @@
-:host {
-  display: flex;
-  height: 100%;
-  min-height: var(--mtb-bar-height, 64px);
-  &[right-row] {
-    justify-content: flex-end;
-  }
-}

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

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

package/src/lib/components/matecu-topbar-header-column/matecu-topbar-header-column.component.ts

@@ -1,11 +0,0 @@
-import { Component } from '@angular/core';
-import { CommonModule } from '@angular/common';
-
-@Component({
-  selector: 'matecu-topbar-header-column',
-  standalone: true,
-  imports: [CommonModule],
-  templateUrl: './matecu-topbar-header-column.component.html',
-  styleUrls: ['./matecu-topbar-header-column.component.scss'],
-})
-export class MatecuTopbarHeaderColumnComponent {}

package/src/lib/components/matecu-topbar-header-row/matecu-topbar-header-row.component.html

@@ -1,13 +0,0 @@
-<ng-container *ngIf="display">
-  <div
-    class="matecu-topbar-header-row__column matecu-topbar-header-row__column--left"
-  >
-    <ng-content select="matecu-topbar-header-column[left-column]"></ng-content>
-  </div>
-
-  <div
-    class="matecu-topbar-header-row__column matecu-topbar-header-row__column--right"
-  >
-    <ng-content select="matecu-topbar-header-column[right-column]"></ng-content>
-  </div>
-</ng-container>

package/src/lib/components/matecu-topbar-header-row/matecu-topbar-header-row.component.scss

@@ -1,34 +0,0 @@
-:host {
-  --mtb-row-padding: 0px;
-  --mtb-row-margin: 0;
-  --mtb-row-max-width: 100%;
-  --mtb-row-min-width: 320px;
-}
-:host,
-.matecu-topbar-header-row {
-  &,
-  * {
-    box-sizing: border-box;
-    outline: none;
-  }
-  padding: var(--mtb-row-padding);
-  margin: var(--mtb-row-margin);
-  display: flex;
-  align-items: flex-start;
-  justify-content: flex-start;
-  box-sizing: border-box;
-  width: 100%;
-  height: 100%;
-  max-width: var(--mtb-row-max-width);
-  min-width: var(--mtb-row-min-width);
-  &__column {
-    display: flex;
-    height: 100%;
-    min-height: var(--mtb-bar-height, 64px);
-    align-items: flex-start;
-    &--right {
-      margin-left: auto;
-      justify-content: flex-end;
-    }
-  }
-}

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

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

package/src/lib/components/matecu-topbar-header-row/matecu-topbar-header-row.component.ts

@@ -1,18 +0,0 @@
-import { Component, HostBinding, Input } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { MatToolbarModule } from '@angular/material/toolbar';
-
-@Component({
-  selector: 'matecu-topbar-header-row',
-  standalone: true,
-  imports: [CommonModule, MatToolbarModule],
-  templateUrl: './matecu-topbar-header-row.component.html',
-  styleUrls: ['./matecu-topbar-header-row.component.scss'],
-})
-export class MatecuTopbarHeaderRowComponent {
-  @Input() display = true;
-  @HostBinding('class') className = 'matecu-topbar-header-row';
-  @HostBinding('style.display') get color() {
-    return this.display ? 'flex' : 'none';
-  }
-}

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

@@ -1,7 +0,0 @@
-<div class="matecu-topbar-layout__bar">
-  <ng-content select="matecu-topbar-header-row[first-row]"></ng-content>
-  <ng-content select="matecu-topbar-header-row[second-row]"></ng-content>
-</div>
-<div class="matecu-topbar-layout__body" #mtbBody>
-  <ng-content select="matecu-topbar-body"></ng-content>
-</div>

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

@@ -1,49 +0,0 @@
-:host,
-.matecu-topbar-layout {
-  position: relative;
-  box-sizing: border-box;
-  * {
-    box-sizing: border-box;
-  }
-  display: grid;
-  grid-template-rows: auto 1fr;
-  box-sizing: border-box;
-  border: var(--mtb-border, none);
-  margin: var(--mtb-margin, 0px);
-  padding: 0px;
-  width: var(--mtb-width, 100%);
-  height: var(--mtb-height, 100vh);
-  overflow: hidden;
-
-  &__bar {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: flex-start;
-    background-color: var(--mtb-primary-color, #3f51b5);
-    color: var(--mtb-bar-color, #fff);
-    width: 100%;
-    padding: 0px;
-    margin: 0px;
-    min-height: var(--mtb-bar-height, 64px);
-    transition: all 300ms;
-  }
-  &__body {
-    padding: 0px;
-    margin: 0px;
-    overflow-y: auto;
-  }
-  &.prominent {
-    .matecu-topbar-layout__bar {
-      min-height: var(--mtb-bar-prominent-height, 128px);
-    }
-  }
-  &.scrolled {
-    .matecu-topbar-layout__bar {
-      box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
-        0px 6px 10px 0px rgba(0, 0, 0, 0.14),
-        0px 1px 18px 0px rgba(0, 0, 0, 0.12);
-      min-height: var(--mtb-bar-height, 64px);
-    }
-  }
-}

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

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

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

@@ -1,112 +0,0 @@
-import { CommonModule } from '@angular/common';
-import {
-  AfterViewInit,
-  ChangeDetectorRef,
-  Component,
-  ElementRef,
-  EventEmitter,
-  HostBinding,
-  Input,
-  NgZone,
-  OnDestroy,
-  Output,
-  ViewChild,
-} from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
-import { MatIconModule } from '@angular/material/icon';
-import { MatToolbarModule } from '@angular/material/toolbar';
-import { fromEvent, Subject } from 'rxjs';
-import { takeUntil, tap } from 'rxjs/operators';
-@Component({
-  selector: 'matecu-topbar-layout',
-  templateUrl: './matecu-topbar-layout.component.html',
-  styleUrls: ['./matecu-topbar-layout.component.scss'],
-  standalone: true,
-  imports: [CommonModule, MatButtonModule, MatIconModule, MatToolbarModule],
-})
-export class MatecuTopbarLayoutComponent implements AfterViewInit, OnDestroy {
-  private _scrolled = false;
-  private _prominent = false;
-  get scrolled() {
-    return this._scrolled;
-  }
-  set scrolled(value: boolean) {
-    this._scrolled = value;
-    this.className = this.className.replace(/scrolled/g, '').trim();
-    if (this.scrolled) {
-      this.className = `${this.className} scrolled`;
-    }
-  }
-  private destroy$ = new Subject<void>();
-  @Input() mobileStyle = false;
-  @Output() mobileStyleChange = new EventEmitter<boolean>();
-  @Input() mobileWidth = 768;
-  @Output() whenResize = new EventEmitter<number>();
-  @Input() get prominent() {
-    return this._prominent;
-  }
-  set prominent(value: boolean) {
-    this._prominent = value;
-    this.className = this.className.replace(/prominent/g, '').trim();
-    if (this.prominent) {
-      this.className = `${this.className} prominent`;
-    }
-  }
-  @HostBinding('class') className = 'matecu-topbar-layout';
-  @ViewChild('mtbBody') bodyElement?: ElementRef;
-
-  constructor(
-    private elementRef: ElementRef,
-    private changeDetector: ChangeDetectorRef,
-    private zone: NgZone
-  ) {}
-  ngOnDestroy(): void {
-    this.destroy$.next();
-    this.destroy$.complete();
-  }
-  private spyScroll(scrollabe: HTMLElement) {
-    if (!scrollabe) {
-      return;
-    }
-    const maxScrollHeight = scrollabe.scrollHeight;
-    const scrollableHeight = scrollabe.clientHeight;
-    if (scrollableHeight > maxScrollHeight) {
-      return;
-    }
-    const scrollPosition = scrollabe.scrollTop;
-    this.scrolled = scrollPosition > 20;
-  }
-  ngAfterViewInit(): void {
-    const layoutElement = this.elementRef.nativeElement;
-    const resizeObserver = new ResizeObserver(() => {
-      const width = layoutElement?.clientWidth;
-      if (!width) {
-        return;
-      }
-      this.mobileStyle = width <= this.mobileWidth;
-      this.zone.run(() => {
-        this.mobileStyleChange.emit(this.mobileStyle);
-        this.whenResize.emit(width);
-      });
-    });
-    resizeObserver.observe(layoutElement!);
-    this.destroy$.pipe(tap(() => resizeObserver.disconnect())).subscribe();
-    if (this.bodyElement) {
-      fromEvent(this.bodyElement.nativeElement, 'scroll')
-        .pipe(
-          tap(() => this.spyScroll(this.bodyElement?.nativeElement!)),
-          takeUntil(this.destroy$)
-        )
-        .subscribe();
-    }
-  }
-  scrollTop() {
-    if (!this.bodyElement) {
-      return;
-    }
-    this.bodyElement.nativeElement.scroll({
-      top: 0,
-      behavior: 'smooth',
-    });
-  }
-}

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

@@ -1,29 +0,0 @@
-<ng-container *ngIf="display">
-  <button
-    class="matecu-topbar-search-mobile-only"
-    [ngClass]="{ 'mobile-style': mobileStyle }"
-    (click)="toggleActiveMobildeSearch()"
-  >
-    <mat-icon>search</mat-icon>
-  </button>
-  <div
-    class="matecu-topbar-search"
-    [ngClass]="{
-      'mobile-style': mobileStyle,
-      'active-mobile': activeMobileSearch
-    }"
-  >
-    <span class="matecu-topbar-search__icon matecu-topbar-search__icon--search">
-      <mat-icon>search</mat-icon>
-    </span>
-    <ng-container *ngIf="hasValue || mobileStyle">
-      <button
-        class="matecu-topbar-search__icon matecu-topbar-search__icon--clear"
-        (click)="clearSearch()"
-      >
-        <mat-icon>close</mat-icon>
-      </button>
-    </ng-container>
-    <input type="text" [placeholder]="placeholder" [formControl]="inputCtrl" />
-  </div>
-</ng-container>

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

@@ -1,90 +0,0 @@
-$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

@@ -1,25 +0,0 @@
-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

@@ -1,92 +0,0 @@
-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

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