angular-matecu 2.0.6 → 2.0.9

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

@@ -0,0 +1,101 @@
+@import '../../scss/variables.scss';
+:host {
+  display: flex;
+  align-items: center;
+  position: relative;
+  padding: 7px;
+  min-height: $toolbar-height;
+  box-sizing: border-box;
+  .matecu-topbar-search {
+    &__input {
+      display: block;
+      position: relative;
+      z-index: 2;
+      input {
+        border: transparent;
+        border-radius: 4px;
+        padding: 5px 35px 5px 40px;
+        background-color: rgba($color: #ffffff, $alpha: 0.3);
+        min-width: 200px;
+        width: 200px;
+        transition: all 300ms ease-in-out;
+        height: 39px;
+        color: currentColor;
+        &:focus {
+          min-width: 290px;
+        }
+        &::placeholder {
+          color: currentColor;
+        }
+      }
+      input[type='search']::-webkit-search-decoration,
+      input[type='search']::-webkit-search-cancel-button,
+      input[type='search']::-webkit-search-results-button,
+      input[type='search']::-webkit-search-results-decoration {
+        -webkit-appearance: none;
+      }
+
+      > mat-icon {
+        position: absolute;
+        left: 12px;
+        top: 10px;
+      }
+      button {
+        position: absolute;
+        right: 0px;
+        top: 0;
+        mat-icon {
+          font-size: 20px;
+        }
+        transform: scale(0);
+        transition: transform 300ms ease-in-out;
+        &.show-btn {
+          transform: scale(100%);
+        }
+      }
+      @media screen and (max-width: 768px) {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        height: $toolbar-height;
+        color: #333;
+        transform: translateY(-110%);
+        transition: all 300ms ease-in-out;
+        input {
+          width: 100%;
+          height: 100%;
+          background-color: #ffffff;
+          border-radius: 0;
+          padding-right: 30px;
+
+          &:focus {
+            min-width: 100%;
+          }
+        }
+        > mat-icon {
+          top: 20px;
+        }
+        button {
+          position: absolute;
+          right: 5px;
+          top: 10px;
+          transform: scale(100%);
+        }
+      }
+      &.mobile-input-active {
+        transform: translateY(0%);
+        @media screen and (max-width: 768px) {
+          display: block;
+        }
+      }
+    }
+  }
+
+  .only-mobile {
+    display: none;
+    @media screen and (max-width: 768px) {
+      display: block;
+    }
+  }
+}

package/src/lib/modules/matecu-topbar-layout/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/modules/matecu-topbar-layout/components/matecu-topbar-search/matecu-topbar-search.component.ts

@@ -0,0 +1,79 @@
+import {
+  Component,
+  EventEmitter,
+  HostBinding,
+  Input,
+  OnInit,
+  Output,
+  ViewEncapsulation,
+} from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { Subject } from 'rxjs';
+import {
+  debounceTime,
+  distinctUntilChanged,
+  takeUntil,
+  tap,
+} from 'rxjs/operators';
+
+@Component({
+  selector: 'matecu-topbar-search',
+  templateUrl: './matecu-topbar-search.component.html',
+  styleUrls: ['./matecu-topbar-search.component.scss'],
+})
+export class MatecuTopbarSearchComponent implements OnInit {
+  showMobileInput = false;
+  searchInput = new FormControl();
+  showDescktopCleanBtn = false;
+  private destroy = new Subject();
+  @Input() searchPlaceholder = 'Buscar';
+  @Input() debounceTime = 500;
+  @Input() inputType: 'text' | 'search' = 'text';
+  @Input() cleanWhenClose = true;
+  @Input() set value(val: string | null | undefined) {
+    if (typeof val === 'string') {
+      this.searchInput.setValue(val);
+    } else {
+      this.searchInput.reset();
+    }
+  }
+  @Output() valueChange = new EventEmitter<string>();
+  @Output() whenSearchChanges = new EventEmitter<string>();
+  @HostBinding('class') className = 'matecu-topbar-search';
+  constructor() {}
+
+  ngOnInit(): void {
+    this.watchSearch();
+  }
+
+  toogleSearch(): void {
+    this.showMobileInput = !this.showMobileInput;
+  }
+  closeMobile(): void {
+    if (this.cleanWhenClose) {
+      this.searchInput.reset();
+    }
+    this.showMobileInput = false;
+  }
+
+  private watchSearch(): void {
+    this.searchInput.valueChanges
+      .pipe(
+        tap((value) => this.setShowDescktopCleanBtn(value)),
+        debounceTime(this.debounceTime),
+        distinctUntilChanged(),
+        tap((value) => this.searchChanges(value)),
+        takeUntil(this.destroy)
+      )
+      .subscribe();
+  }
+  private searchChanges(searchVal?: string | null): void {
+    const value =
+      typeof searchVal === 'string' && searchVal.length > 0 ? searchVal : '';
+    this.whenSearchChanges.emit(value);
+    this.valueChange.emit(value);
+  }
+  private setShowDescktopCleanBtn(value: string | null | undefined): void {
+    this.showDescktopCleanBtn = typeof value === 'string' && value.length > 0;
+  }
+}

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

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

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

@@ -0,0 +1,13 @@
+@import '../../scss/variables.scss';
+:host {
+  display: flex;
+  align-items: center;
+  margin-right: auto;
+  padding: 7px 1rem;
+  min-height: $toolbar-height;
+  box-sizing: border-box;
+  align-self: center;
+  @media screen and (max-width: 425px) {
+    display: none;
+  }
+}

package/src/lib/modules/matecu-topbar-layout/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/modules/matecu-topbar-layout/components/matecu-topbar-title/matecu-topbar-title.component.ts

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

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

@@ -0,0 +1,40 @@
+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 { MatecuTopbarActionsComponent } from './components/matecu-topbar-actions/matecu-topbar-actions.component';
+
+@NgModule({
+  declarations: [
+    MatecuTopbarLayoutComponent,
+    MatecuTopbarTitleComponent,
+    MatecuTopbarBodyComponent,
+    MatecuTopbarFabComponent,
+    MatecuTopbarSearchComponent,
+    MatecuTopbarActionsComponent,
+  ],
+  imports: [
+    CommonModule,
+    MatToolbarModule,
+    MatIconModule,
+    FormsModule,
+    ReactiveFormsModule,
+    MatButtonModule,
+  ],
+  exports: [
+    MatecuTopbarLayoutComponent,
+    MatecuTopbarTitleComponent,
+    MatecuTopbarBodyComponent,
+    MatecuTopbarFabComponent,
+    MatecuTopbarSearchComponent,
+    MatecuTopbarActionsComponent,
+  ],
+})
+export class MatecuTopbarLayoutModule {}

package/src/lib/modules/matecu-topbar-layout/scss/variables.scss

@@ -0,0 +1,2 @@
+$toolbar-height: 64px;
+$toolbar-prominent-height: 128px;

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

@@ -1,12 +1,18 @@
+/*
+ * Public API Surface of angular-matecu
+ */
+
 /**
  * Modulo spinner
  */
 export * from './lib/modules/matecu-spinner/matecu-spinner.module';
 export * from './lib/modules/matecu-spinner/components/matecu-spinner/matecu-spinner.component';
 export * from './lib/modules/matecu-spinner/services/matecu-spinner.service';
+
 /**
  * Módulo topbar-layout
  */
+
 export * from './lib/modules/matecu-topbar-layout/matecu-topbar-layout.module';
 export * from './lib/modules/matecu-topbar-layout/components/matecu-topbar-body/matecu-topbar-body.component';
 export * from './lib/modules/matecu-topbar-layout/components/matecu-topbar-fab/matecu-topbar-fab.component';
@@ -14,9 +20,11 @@ export * from './lib/modules/matecu-topbar-layout/components/matecu-topbar-layou
 export * from './lib/modules/matecu-topbar-layout/components/matecu-topbar-title/matecu-topbar-title.component';
 export * from './lib/modules/matecu-topbar-layout/components/matecu-topbar-search/matecu-topbar-search.component';
 export * from './lib/modules/matecu-topbar-layout/components/matecu-topbar-actions/matecu-topbar-actions.component';
+
 /**
  * Módulo alert-box
  */
+
 export * from './lib/modules/matecu-alert-box/matecu-alert-box.module';
 export * from './lib/modules/matecu-alert-box/components/matecu-alert-box/matecu-alert-box.component';
 export * from './lib/modules/matecu-alert-box/components/matecu-alert-dialog/matecu-alert-dialog.component';

package/src/test.ts

@@ -0,0 +1,28 @@
+// 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';
+
+declare const require: {
+  context(path: string, deep?: boolean, filter?: RegExp): {
+    keys(): string[];
+    <T>(id: string): T;
+  };
+};
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting(), {
+    teardown: { destroyAfterEach: false }
+}
+);
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);

package/tsconfig.lib.json

@@ -0,0 +1,25 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "target": "es2015",
+    "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"
+  }
+}

package/tsconfig.spec.json

@@ -0,0 +1,17 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "files": [
+    "src/test.ts"
+  ],
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}

package/tslint.json

@@ -0,0 +1,17 @@
+{
+  "extends": "../../tslint.json",
+  "rules": {
+    "directive-selector": [
+      true,
+      "attribute",
+      "matecu",
+      "camelCase"
+    ],
+    "component-selector": [
+      true,
+      "element",
+      "matecu",
+      "kebab-case"
+    ]
+  }
+}

package/angular-matecu.d.ts

@@ -1,5 +0,0 @@
-/**
- * Generated bundle index. Do not edit.
- */
-/// <amd-module name="angular-matecu" />
-export * from './public-api';