angular-matecu 4.0.0 → 4.0.2

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>

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

@@ -0,0 +1,14 @@
+:host,
+.matecu-topbar-body {
+  display: block;
+  &,
+  * {
+    box-sizing: border-box;
+    outline: none;
+  }
+
+  padding: var(--mtb-body-padding, 30px);
+  background-color: var(--mtb-body-background, auto);
+  overflow-y: auto;
+  padding-bottom: var(--mtb-body-padding-button, 60px);
+}

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

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

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

@@ -0,0 +1,11 @@
+import { Component, HostBinding } from '@angular/core';
+
+@Component({
+  selector: 'matecu-topbar-body',
+  templateUrl: './matecu-topbar-body.component.html',
+  styleUrls: ['./matecu-topbar-body.component.scss'],
+  standalone: true,
+})
+export class MatecuTopbarBodyComponent {
+  @HostBinding('class') className = 'matecu-topbar-body';
+}

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

@@ -0,0 +1,3 @@
+<ng-container *ngIf="display">
+  <ng-content></ng-content>
+</ng-container>

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

@@ -0,0 +1,19 @@
+:host,
+.matecu-topbar-fab {
+  &,
+  * {
+    box-sizing: border-box;
+    outline: none;
+  }
+  display: flex;
+  align-self: flex-end;
+  align-items: flex-start;
+  transform: translateY(50%);
+  transition: all 300ms ease-in-out;
+  &.mobile-style {
+    position: absolute;
+    transform: translate(0);
+    bottom: var(--mtb-fab-mobile-bottom-position, 20px);
+    right: var(--mtb-fab-mobile-right-position, 20px);
+  }
+}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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