@cauca-911/material 21.0.1 → 21.0.3

package/.eslintrc.json

@@ -1,79 +0,0 @@
-{
-  "extends": "../../.eslintrc.json",
-  "ignorePatterns": [
-    "!**/*",
-    "**/*.spec.ts",
-    "**/test.ts",
-    "build/**/*",
-    "dist/**/*"
-  ],
-  "overrides": [
-    {
-      "files": [
-        "*.ts"
-      ],
-      "parserOptions": {
-        "project": [
-          "projects/cauca-material/tsconfig.lib.json"
-        ]
-      },
-      "rules": {
-        "@angular-eslint/component-selector": [
-          "error",
-          {
-            "type": "element",
-            "prefix": "cauca",
-            "style": "kebab-case"
-          }
-        ],
-        "@angular-eslint/directive-selector": [
-          "error",
-          {
-            "type": "attribute",
-            "prefix": "",
-            "style": "camelCase"
-          }
-        ],
-        "@angular-eslint/prefer-standalone": "off",
-        "@typescript-eslint/consistent-type-definitions": "error",
-        "@typescript-eslint/dot-notation": "off",
-        "@typescript-eslint/explicit-member-accessibility": [
-          "error",
-          {
-            "accessibility": "explicit"
-          }
-        ],
-        "@typescript-eslint/no-inferrable-types": "off",
-        "@typescript-eslint/member-ordering": [
-          "error", {
-            "default": [
-              "signature",
-              "public-field",
-              "protected-field",
-              "private-field",
-              ["get", "set"],
-              "constructor",
-              "public-method",
-              "protected-method",
-              "private-method"
-            ]
-          }
-        ],
-        "brace-style": [
-          "error",
-          "1tbs"
-        ],
-        "id-blacklist": "off",
-        "id-match": "off",
-        "no-underscore-dangle": "off",
-        "@angular-eslint/prefer-inject": "off"
-      }
-    },
-    {
-      "files": [
-        "*.html"
-      ],
-      "rules": {}
-    }
-  ]
-}

package/README_PACKAGE.md

@@ -1,5 +0,0 @@
-# @cauca-911/material
-
-Run `npm install @cauca-911/material --save` to add this library to your project
-
-## To use this library, you need to import the module with specific configuration

package/karma.conf.js

@@ -1,50 +0,0 @@
-// Karma configuration file, see link for more information
-// https://karma-runner.github.io/1.0/config/configuration-file.html
-
-module.exports = function (config) {
-  config.set({
-    basePath: '',
-    frameworks: ['jasmine', '@angular-devkit/build-angular'],
-    plugins: [
-      require('karma-jasmine'),
-      require('karma-chrome-launcher'),
-      require('karma-jasmine-html-reporter'),
-      require('karma-coverage'),
-      require('@angular-devkit/build-angular/plugins/karma')
-    ],
-    client: {
-      clearContext: false // leave Jasmine Spec Runner output visible in browser
-    },
-    coverageReporter: {
-      dir: 'build/reports/coverage',
-      reporters: [
-          { type: 'html', subdir: 'report-html' },
-          { type: 'lcov', subdir: 'report-lcov' }
-      ]
-    },
-    reporters: ['progress', 'kjhtml', 'coverage'],
-    port: 9876,
-    colors: true,
-    logLevel: config.LOG_INFO,
-    autoWatch: true,
-    browsers: ['Chrome'],
-    customLaunchers: {
-      ChromeHeadlessNoSandbox: {
-          base: 'ChromeHeadless',
-          flags: [
-              '--no-sandbox',
-              '--disable-setuid-sandbox',
-              '--disable-extensions',
-              '--disable-web-security',
-              '--disable-gpu',
-              '--no-proxy-server'
-          ]
-      }
-    },
-    singleRun: false,
-    restartOnFileChange: true,
-    captureTimeout: 120000,
-    browserDisconnectTimeout: 20000,
-    browserNoActivityTimeout: 120000,
-  });
-};

package/ng-package.json

@@ -1,7 +0,0 @@
-{
-  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
-  "dest": "../../dist/cauca-material",
-  "lib": {
-    "entryFile": "src/public-api.ts"
-  }
-}

package/src/lib/cauca-material.component.html

@@ -1 +0,0 @@
-<div>{{'core.noGenericComponentOnThisLibrary' | translate}}</div>

package/src/lib/cauca-material.component.spec.ts

@@ -1,29 +0,0 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { TranslateModule } from '@ngx-translate/core';
-
-import { CaucaMaterialComponent } from './cauca-material.component';
-
-describe('CaucaMaterialComponent', () => {
-  let component: CaucaMaterialComponent;
-  let fixture: ComponentFixture<CaucaMaterialComponent>;
-
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      imports: [
-        CaucaMaterialComponent,
-        TranslateModule.forRoot()
-      ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(CaucaMaterialComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/src/lib/cauca-material.component.ts

@@ -1,12 +0,0 @@
-import { Component } from '@angular/core';
-import { TranslateModule } from '@ngx-translate/core';
-
-@Component({
-    selector: 'cauca-material',
-    templateUrl: './cauca-material.component.html',
-    styles: [],
-    imports: [TranslateModule]
-})
-export class CaucaMaterialComponent {
-
-}

package/src/lib/cauca-material.service.spec.ts

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

package/src/lib/cauca-material.service.ts

@@ -1,7 +0,0 @@
-import { Injectable } from '@angular/core';
-
-@Injectable({
-  providedIn: 'root'
-})
-export class CaucaMaterialService {
-}

package/src/lib/components/button/button.component.html

@@ -1,52 +0,0 @@
-@if (type() === 'basic') {
-  <button [ngClass]="class()" mat-button (click)="buttonClick.emit()" [disabled]="disable() || inProgress()" [color]="color()" class="button-basic">
-    @if (inProgress() || icon()) {
-      <mat-icon [class.button-spin]="inProgress()">{{ inProgress() ? 'update' : icon() }}</mat-icon>
-    }
-    <span>{{label()}}</span>
-  </button>
-}
-
-@if (type() === 'raised') {
-  <button [ngClass]="class()" matButton="elevated" (click)="buttonClick.emit()" [disabled]="disable() || inProgress()" [color]="color()" class="button-raised">
-    @if (inProgress() || icon()) {
-      <mat-icon [class.button-spin]="inProgress()">{{ inProgress() ? 'update' : icon() }}</mat-icon>
-    }
-    <span>{{label()}}</span>
-  </button>
-}
-
-@if (type() === 'stroked') {
-  <button [ngClass]="class()" matButton="outlined" (click)="buttonClick.emit()" [disabled]="disable() || inProgress()" [color]="color()" class="button-stroked">
-    @if (inProgress() || icon()) {
-      <mat-icon [class.button-spin]="inProgress()">{{ inProgress() ? 'update' : icon() }}</mat-icon>
-    }
-    <span>{{label()}}</span>
-  </button>
-}
-
-@if (type() === 'flat') {
-  <button [ngClass]="class()" matButton="filled" (click)="buttonClick.emit()" [disabled]="disable() || inProgress()" [color]="color()" class="button-flat">
-    @if (inProgress() || icon()) {
-      <mat-icon [class.button-spin]="inProgress()">{{ inProgress() ? 'update' : icon() }}</mat-icon>
-    }
-    <span>{{label()}}</span>
-  </button>
-}
-
-@if (type() === 'icon') {
-  <button [ngClass]="class()" matIconButton (click)="buttonClick.emit()" [disabled]="disable() || inProgress()" [color]="color()" class="button-icon">
-    @if (inProgress() || icon()) {
-      <mat-icon [class.button-spin]="inProgress()">{{ inProgress() ? 'update' : icon() }}</mat-icon>
-    }
-  </button>
-}
-
-@if (type() === 'fab') {
-  <button [ngClass]="class()" matFab (click)="buttonClick.emit()" [disabled]="disable() || inProgress()" [color]="color()" class="button-icon">
-    @if (inProgress() || icon()) {
-      <mat-icon [class.button-spin]="inProgress()">{{ inProgress() ? 'update' : icon() }}</mat-icon>
-    }
-    <span>{{label()}}</span>
-  </button>
-}

package/src/lib/components/button/button.component.scss

@@ -1,6 +0,0 @@
-@keyframes spinner {
-    to { transform: rotate(360deg); }
-}
-.button-spin {
-    animation: spinner 1s linear infinite;
-}

package/src/lib/components/button/button.component.spec.ts

@@ -1,142 +0,0 @@
-import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
-
-import { ButtonComponent } from './button.component';
-import { HarnessLoader } from '@angular/cdk/testing';
-import { MatButtonModule } from '@angular/material/button';
-import { MatIconModule } from '@angular/material/icon';
-import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
-import { MatButtonHarness } from '@angular/material/button/testing';
-import { MatIconHarness } from '@angular/material/icon/testing';
-
-describe('ButtonWithProgressComponent', () => {
-  let component: ButtonComponent;
-  let fixture: ComponentFixture<ButtonComponent>;
-  let loader: HarnessLoader;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [
-        MatButtonModule,
-        MatIconModule
-      ]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(ButtonComponent);
-    loader = TestbedHarnessEnvironment.loader(fixture);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('should mat-icon-button when type is icon', async () => {
-
-    fixture.componentRef.setInput('type', 'icon');
-    fixture.detectChanges();
-
-    const button = await loader.getHarnessOrNull(MatButtonHarness);
-    expect(await button.getVariant()).toBe('icon');
-  });
-
-  it('should mat-flat-button when type is flat', async () => {
-
-    fixture.componentRef.setInput('type', 'flat');
-    fixture.detectChanges();
-
-    const button = await loader.getHarnessOrNull(MatButtonHarness);
-    expect(await button.getAppearance()).toBe('filled');
-  });
-
-  it('should mat-raised-button when type is raised', async () => {
-
-    fixture.componentRef.setInput('type', 'raised');
-    fixture.detectChanges();
-
-    const button = await loader.getHarnessOrNull(MatButtonHarness);
-    expect(await button.getAppearance()).toBe('elevated');
-  });
-
-  it('should mat-stroked-button when type is stroked', async () => {
-
-    fixture.componentRef.setInput('type', 'stroked');
-
-    fixture.detectChanges();
-
-    const button = await loader.getHarnessOrNull(MatButtonHarness);
-    expect(await button.getAppearance()).toBe('outlined');
-  });
-
-  it('should mat-basic-button when type is basic', async () => {
-
-    fixture.componentRef.setInput('type', 'basic');
-
-    const button = await loader.getHarnessOrNull(MatButtonHarness);
-    expect(await button.getVariant()).toBe('basic');
-  });
-
-  it('should correctly display label', async () => {
-    const someLabel = 'someLabel';
-
-    fixture.componentRef.setInput('label', someLabel);
-    fixture.detectChanges();
-
-    const button = await loader.getHarnessOrNull(MatButtonHarness);
-    expect(await button.getText()).toBe(someLabel);
-  });
-
-  it('should disable button when disabled is set', async () => {
-    fixture.componentRef.setInput('disable', true);
-    fixture.detectChanges();
-
-    const button = await loader.getHarnessOrNull(MatButtonHarness);
-    expect(await button.isDisabled()).toBeTrue();
-  });
-
-  it('should enable button when disabled is not set', async () => {
-    fixture.componentRef.setInput('disable', false);
-    fixture.detectChanges();
-
-    const button = await loader.getHarnessOrNull(MatButtonHarness);
-    expect(await button.isDisabled()).toBeFalse();
-  });
-
-  it('should disable button when disabled is not set and show load icon', async () => {
-    fixture.componentRef.setInput('inProgress', true);
-    fixture.detectChanges();
-
-    const button = await loader.getHarnessOrNull(MatButtonHarness);
-    const icon = await button.getHarness(MatIconHarness);
-    expect(await button.isDisabled()).toBeTrue();
-    expect(await icon.getName()).toBe('update');
-  });
-
-  it('should show correct icon when not loading and icon is set', async () => {
-    fixture.componentRef.setInput('icon', 'test');
-    fixture.detectChanges();
-
-    const button = await loader.getHarnessOrNull(MatButtonHarness);
-    const icon = await button.getHarness(MatIconHarness);
-    expect(await icon.getName()).toBe('test');
-  });
-
-  it('should not show any icon when not set', async () => {
-    fixture.componentRef.setInput('icon', null);
-
-    const button = await loader.getHarnessOrNull(MatButtonHarness);
-    const icon = await button.getHarnessOrNull(MatIconHarness);
-    expect(icon).toBe(null);
-  });
-
-  it('should emit buttonClick event when clicked', fakeAsync(async () => {
-    const clickSpy = spyOn(component.buttonClick, 'emit');
-    const button = await loader.getHarnessOrNull(MatButtonHarness);
-
-    button.click();
-    tick();
-
-    expect(clickSpy).toHaveBeenCalled();
-  }));
-});

package/src/lib/components/button/button.component.ts

@@ -1,22 +0,0 @@
-import { NgClass } from '@angular/common';
-import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
-import { MatIconModule } from '@angular/material/icon';
-
-@Component({
-    selector: 'cauca-button',
-    templateUrl: './button.component.html',
-    styleUrls: ['./button.component.scss'],
-    imports: [MatIconModule, MatButtonModule, NgClass],
-    changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class ButtonComponent {
-  public class = input<string | null>(null);
-  public inProgress = input<boolean>(false);
-  public disable = input<boolean>(false);
-  public label = input<string>('');
-  public icon = input<string | null>(null);
-  public color = input<string>('');
-  public type = input<'basic' | 'raised' | 'stroked' | 'flat' | 'icon' | 'fab'>('basic');
-  public buttonClick = output<void>();
-}

package/src/lib/components/buttons/base-button.ts

@@ -1,35 +0,0 @@
-import { InputSignal, input, computed, output, Directive, OutputEmitterRef, signal } from "@angular/core";
-
-@Directive()
-export abstract class BaseButton {
-  public colorOnHover: InputSignal<string> = input(undefined);
-  public color: InputSignal<string> = input(undefined);
-  public icon: InputSignal<string> = input();
-  public iconAlignment: InputSignal<'left' | 'right'> = input('left');
-  public isDisabled: InputSignal<boolean> = input(false);
-  public isInProgress: InputSignal<boolean> = input(false);
-
-  public iconColor = computed(() => this.isHovered() ? this.colorOnHover() || this.color() : this.color()); 
-  public showIcon = computed(() => !!this.icon() || this.isInProgress());
-  public iconToShow = computed(() => this.isInProgress() ? 'update' : this.icon());
-  public buttonDisabled = computed(() => this.isDisabled() || this.isInProgress());
-
-  public buttonClick: OutputEmitterRef<void> = output();
-
-  public isHovered = signal(false);
-
-  public onMouseEnter(): void {
-    this.isHovered.set(true);
-  }
-
-  public onMouseLeave(): void {
-    this.isHovered.set(false);
-  }
-}
-
-@Directive()
-export abstract class BaseButtonWithLabel extends BaseButton {
-  public translateLabel: InputSignal<boolean> = input(true);
-  public label: InputSignal<string> = input();
-  public small: InputSignal<boolean> = input(false);
-}

package/src/lib/components/buttons/basic-button/basic-button.component.html

@@ -1,5 +0,0 @@
-<button mat-button [ngClass]="small() ? 'small-button' : ''" [color]="color()"  onclick="this.blur()" [disabled]="buttonDisabled()" (click)="buttonClick.emit()">
-    @if(showIcon() && iconAlignment() === 'left') { <mat-icon [class.button-spin]="isInProgress()">{{iconToShow()}}</mat-icon> }
-    @if (translateLabel()) {{{label()|translate}}} @else {{{label()}}}
-    @if(showIcon() && iconAlignment() === 'right') { <mat-icon [class.button-spin]="isInProgress()">{{iconToShow()}}</mat-icon> }
-</button>

package/src/lib/components/buttons/basic-button/basic-button.component.scss

@@ -1,12 +0,0 @@
-.mdc-button.mat-white,
-.mat-stroked-button.mat-white {
-    color: white;
-    border-color: white;
-}
-.mdc-button.mat-white:hover,
-.mat-mdc-outlined-button.mat-white:hover {
-  background-color: transparent;
-}
-mat-icon {
-  color: inherit;
-}

package/src/lib/components/buttons/basic-button/basic-button.component.spec.ts

@@ -1,106 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { BasicButtonComponent } from './basic-button.component';
-import { MatIconHarness } from '@angular/material/icon/testing';
-import { MatButtonHarness } from '@angular/material/button/testing';
-import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
-import { HarnessLoader } from '@angular/cdk/testing';
-import { TranslatePipe } from '@ngx-translate/core';
-import { MockPipe } from 'ng-mocks';
-
-describe('BasicButtonComponent', () => {
-  let component: BasicButtonComponent;
-  let fixture: ComponentFixture<BasicButtonComponent>;
-  let loader: HarnessLoader;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [
-        BasicButtonComponent,
-      ],
-      declarations: [MockPipe(TranslatePipe, key => key)]
-    })
-      .compileComponents();
-
-    fixture = TestBed.createComponent(BasicButtonComponent);
-    loader = TestbedHarnessEnvironment.loader(fixture);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('should display the provided icon', async() => {
-    fixture.componentRef.setInput('icon', 'twidelidou');
-
-    fixture.detectChanges();
-
-    const icon = await loader.getHarness(MatIconHarness);
-    expect(await icon.getName()).toBe(component.icon());
-  });
-
-  it('should display the label', async () => {
-    fixture.componentRef.setInput('label', 'twidelidou');
-
-    fixture.detectChanges();
-
-    const button = await loader.getHarness(MatButtonHarness);
-    expect(await button.getText()).toContain(component.label());
-  });
-
-  it('should disable button when disabled is set', async () => {
-    fixture.componentRef.setInput('isDisabled', true);
-
-    const button = await loader.getHarnessOrNull(MatButtonHarness);
-    expect(await button.isDisabled()).toBeTrue();
-  });
-
-  it('should enable button when disabled is not set', async () => {
-    fixture.componentRef.setInput('isDisabled', false);
-
-    const button = await loader.getHarnessOrNull(MatButtonHarness);
-    expect(await button.isDisabled()).toBeFalse();
-  });
-
-  it('should disable button when disabled is not set and show load icon', async () => {
-    fixture.componentRef.setInput('isInProgress', true);
-
-    const button = await loader.getHarnessOrNull(MatButtonHarness);
-    const icon = await button.getHarness(MatIconHarness);
-    expect(await button.isDisabled()).toBeTrue();
-    expect(await icon.getName()).toBe('update');
-  });
-
-  it('should not show any icon when not set', async () => {
-    fixture.componentRef.setInput('icon', null);
-
-    const button = await loader.getHarnessOrNull(MatButtonHarness);
-    const icon = await button.getHarnessOrNull(MatIconHarness);
-    expect(icon).toBe(null);
-  });
-
-  it('should emit buttonClick event when clicked', async () => {
-    const clickSpy = spyOn(component.buttonClick, 'emit');
-    const button = await loader.getHarness(MatButtonHarness);
-
-    await button.click();
-
-    expect(clickSpy).toHaveBeenCalled();
-  });
-
-  it('should add small-button class when small is set', () => {
-    fixture.componentRef.setInput('small', false);
-
-    fixture.detectChanges();
-
-    expect(fixture.nativeElement.querySelector('button')).not.toHaveClass('small-button');
-    
-    fixture.componentRef.setInput('small', true);
-
-    fixture.detectChanges();
-
-    expect(fixture.nativeElement.querySelector('button')).toHaveClass('small-button');
-  });
-});

package/src/lib/components/buttons/basic-button/basic-button.component.ts

@@ -1,17 +0,0 @@
-import { NgClass } from '@angular/common';
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { MatButton } from '@angular/material/button';
-import { MatIcon } from '@angular/material/icon';
-import { TranslateModule } from '@ngx-translate/core';
-import { BaseButtonWithLabel } from '../base-button';
-
-@Component({
-  selector: 'cauca-basic-button',
-  standalone: true,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [MatIcon, MatButton, TranslateModule, NgClass],
-  templateUrl: './basic-button.component.html',
-  styleUrl: './basic-button.component.scss'
-})
-export class BasicButtonComponent extends BaseButtonWithLabel {
-}

package/src/lib/components/buttons/fab-button/fab-button.component.html

@@ -1,3 +0,0 @@
-<button mat-fab [color]="color()" onclick="this.blur()" [disabled]="buttonDisabled()" (click)="buttonClick.emit()">
-    @if (showIcon()) { <mat-icon [style.color]="iconColor()" [class.button-spin]="isInProgress()">{{iconToShow()}}</mat-icon> }
-</button>

package/src/lib/components/buttons/fab-button/fab-button.component.scss

@@ -1,12 +0,0 @@
-.mdc-button.mat-white,
-.mat-mdc-fab {
-    color: white;
-    border-color: white;
-}
-.mdc-button.mat-white:hover,
-.mat-mdc-outlined-button.mat-white:hover {
-  background-color: transparent;
-}
-mat-icon {
-  color: inherit;
-}