@cauca-911/material 20.2.12 → 20.2.13

package/src/lib/components/deprecated-components/cauca-input-multiple-langue/cauca-input-multiple-langue.component.ts

@@ -0,0 +1,57 @@
+import { Component, Input, OnInit, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import {ReactiveFormsModule, UntypedFormControl, Validators} from '@angular/forms';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInput } from '@angular/material/input';
+import { MatTab, MatTabGroup } from '@angular/material/tabs';
+import {Configuration, CaucaCoreService, TranslateService} from '@cauca-911/core';
+import { TranslateModule } from '@ngx-translate/core';
+
+@Component({
+    selector: 'cauca-input-multiple-langue',
+    templateUrl: './cauca-input-multiple-langue.component.html',
+    styleUrls: ['./cauca-input-multiple-langue.component.scss'],
+    imports: [CommonModule, MatTabGroup, MatTab, MatInput, MatFormFieldModule, ReactiveFormsModule, TranslateModule]
+})
+export class CaucaInputMultipleLangueComponent implements OnInit {
+
+    @Input()
+    public value: string[] = [];
+    public config: Configuration;
+    public forms: UntypedFormControl[] = [];
+    public labels: string[] = [];
+    public selectedIndex = 0;
+
+    private readonly translate = inject(TranslateService);
+
+    public constructor() {
+        const coreService = inject(CaucaCoreService);
+        this.config = coreService.getConfig();
+    }
+
+    public ngOnInit(): void {
+        this.translate.get(this.config.languages).subscribe((labels: any) => {
+            for (const i in labels) {
+                if (labels[i]) {
+                    this.labels.push(labels[i]);
+                }
+            }
+            this.initializeForms();
+        });
+    }
+
+    public onTagChanged(tabIndex: number): void {
+        console.log('cauca-material, onTabChanged', tabIndex);
+    }
+
+    public getErrorMessage(index: any): string {
+        return this.forms[index].hasError('required') ? 'error.required' : '';
+    }
+
+    private initializeForms(): void {
+        this.labels.forEach((item: any, index: number) => {
+            this.forms[index] = new UntypedFormControl('', [Validators.required]);
+            this.forms[index].setValue(this.value[index] || '');
+        });
+    }
+}

package/src/lib/components/deprecated-components/cauca-menu-sidebar/cauca-menu-sidebar.component.html

@@ -0,0 +1,19 @@
+<div class="header">
+    <button mat-icon-button class="close" (click)="hideOnMobile()">
+        <mat-icon>clear</mat-icon>
+    </button>
+    <ng-content select="[header]"></ng-content>
+</div>
+<div class="content">
+    <ng-content select="[beforeMenu]"></ng-content>
+    <cauca-menu-vertical #menu [menuItems]="menuItems" (itemClick)="onMenuItemClick()"></cauca-menu-vertical>
+    <ng-content select="[afterMenu]"></ng-content>
+</div>
+<div class="footer">
+    <ng-content select="[footer]"></ng-content>
+</div>
+<div *ngIf="version" class="version">
+    <div class="double-arrow" (click)="onToggleCollapse()"></div>
+    <span class="full">{{'material.version' | translate}} {{version}}</span>
+    <span class="abbr">{{version}}</span>
+</div>

package/src/lib/components/deprecated-components/cauca-menu-sidebar/cauca-menu-sidebar.component.scss

@@ -0,0 +1,142 @@
+:host {
+    height: 100%;
+    flex-direction: column;
+    display: flex;
+    transition: all 0.1s ease-out;
+    overflow: hidden;
+    scrollbar-width: 5px;
+    scrollbar-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2);
+}
+
+::-webkit-scrollbar {
+    width: 5px;
+}
+::-webkit-scrollbar-track {
+    border-radius: 5px;
+    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
+}
+::-webkit-scrollbar-thumb {
+    border-radius: 5px;
+    background-color: rgba(0, 0, 0, 0.2);
+    outline: 1px solid slategrey;
+}
+
+:host {
+    > div {
+        flex: 1;
+    }
+
+    > .header, > .footer {
+        flex: 0 0 auto;
+    }
+
+    > .content {
+        flex-grow: 1;
+        overflow: hidden auto;
+    }
+
+    > .version {
+        max-height: 1em;
+    }
+}
+
+:host.hidden {
+    width: 0;
+    min-width: 0;
+    max-width: 0;
+}
+
+:host.mobile {
+    width: 275px;
+    min-width: 275px;
+    max-width: 275px;
+    position: absolute;
+    z-index: 10;
+}
+
+:host.collapsed {
+    width: 75px;
+    min-width: 75px;
+    max-width: 75px;
+}
+
+:host.expanded {
+    width: 275px;
+    min-width: 275px;
+    max-width: 275px;
+}
+
+:host .close {
+    display: none;
+}
+
+:host.mobile .close {
+    right: 0;
+    display: inline-block;
+    position: absolute;
+}
+
+.double-arrow {
+    height: 3em;
+    line-height: 3em;
+    cursor: pointer;
+    position: fixed;
+    opacity: 0.25;
+    margin-top: -1em;
+}
+
+.double-arrow:hover {
+    opacity: 1;
+}
+
+:host.expanded .double-arrow,
+:host.collapsed .double-arrow {
+    &:before {
+        font-family: "Material Icons";
+        content: 'double_arrow';
+        font-size: 3em;
+        text-align: right;
+    }
+}
+
+:host.collapsed .double-arrow {
+    margin-left: 10px;
+}
+
+:host.expanded .double-arrow {
+    margin-left: 200px;
+}
+
+:host.collapsed ::ng-deep .menu-caption,
+:host.collapsed ::ng-deep .submenu {
+    display: none;
+}
+
+:host.keepExpanded .double-arrow {
+    transform: rotate(180deg);
+    opacity: 1;
+}
+
+.version {
+    bottom: 0;
+    padding: 1em;
+}
+
+.full, .abbr {
+    display: none;
+}
+
+:host.collapsed .abbr {
+    display: inline;
+}
+
+:host.mobile .full,
+:host.expanded .full {
+    display: inline;
+}
+
+@media only screen and (max-width: 1000px) {
+    .double-arrow {
+        display: none;
+    }
+}

package/src/lib/components/deprecated-components/cauca-menu-sidebar/cauca-menu-sidebar.component.spec.ts

@@ -0,0 +1,30 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { MatIconModule } from '@angular/material/icon';
+import { CaucaMenuSidebarComponent } from './cauca-menu-sidebar.component';
+import { CaucaMenuVerticalComponent } from '../cauca-menu-vertical/cauca-menu-vertical.component';
+
+describe('CaucaSidebarMenuComponent', () => {
+  let component: CaucaMenuSidebarComponent;
+  let fixture: ComponentFixture<CaucaMenuSidebarComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        CaucaMenuSidebarComponent,
+        CaucaMenuVerticalComponent,
+        MatIconModule,
+      ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CaucaMenuSidebarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/components/deprecated-components/cauca-menu-sidebar/cauca-menu-sidebar.component.ts

@@ -0,0 +1,112 @@
+import { Component, ElementRef, HostListener, Input, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MenuItem } from '../shared/models/menu-item';
+import { MatIconButton } from '@angular/material/button';
+import { MatIcon } from '@angular/material/icon';
+import { TranslateModule } from '@ngx-translate/core';
+import { CaucaMenuVerticalComponent } from '../cauca-menu-vertical/cauca-menu-vertical.component';
+
+@Component({
+    selector: 'cauca-menu-sidebar',
+    templateUrl: './cauca-menu-sidebar.component.html',
+    styleUrls: ['./cauca-menu-sidebar.component.scss'],
+    imports: [CommonModule, MatIconButton, MatIcon, CaucaMenuVerticalComponent, TranslateModule]
+})
+export class CaucaMenuSidebarComponent {
+    @Input()
+    public menuItems: MenuItem[] = [];
+    @Input()
+    public version = '';
+
+    private hostElement: HTMLDivElement;
+    private keepMenuExpanded = false;
+
+    public constructor() {
+        const element = inject(ElementRef);
+
+        this.hostElement = element.nativeElement as HTMLDivElement;
+        this.hostElement.addEventListener('mouseover', (e: any) => this.onMouseOver(e));
+        this.hostElement.addEventListener('mouseout', (e: any) => this.onMouseOut(e));
+
+        this.setDisplayMenu();
+    }
+
+    @HostListener('window:resize', ['$event'])
+    public onResize(_e: any): void {
+        this.setDisplayMenu();
+    }
+
+    public onMenuItemClick(): void {
+        if (window.innerWidth < 1000) {
+            this.hideOnMobile();
+        }
+    }
+
+    public hideOnMobile(): void {
+        this.hostElement.classList.remove('mobile');
+        this.hostElement.classList.add('hidden');
+    }
+
+    public showOnMobile(): void {
+        this.hostElement.classList.remove('hidden');
+        this.hostElement.classList.add('mobile');
+    }
+
+    public onToggleCollapse(): void {
+        if (this.keepMenuExpanded) {
+            this.onCollapseMenu();
+            this.hostElement.classList.remove('keepExpanded');
+        } else {
+            this.onExpandedMenu();
+            this.hostElement.classList.add('keepExpanded');
+        }
+
+        this.keepMenuExpanded = !this.keepMenuExpanded;
+        localStorage.setItem('cauca-menu-status', this.keepMenuExpanded ? 'expanded' : 'collapsed');
+    }
+
+    private setDisplayMenu(): void {
+        this.hostElement.className = '';
+
+        if (window.innerWidth < 1000) {
+            this.hostElement.classList.add('hidden');
+        } else {
+            if (localStorage.getItem('cauca-menu-status') === 'expanded') {
+                this.keepMenuExpanded = true;
+                this.hostElement.classList.add('keepExpanded');
+            }
+
+            this.hostElement.classList.add(this.keepMenuExpanded ? 'expanded' : 'collapsed');
+        }
+    }
+
+    private onMouseOver(e: any): void {
+        if (!this.keepMenuExpanded) {
+            this.onExpandedMenu();
+        }
+
+        e.stopPropagation();
+    }
+
+    private onMouseOut(e: any): void {
+        if (!this.keepMenuExpanded) {
+            this.onCollapseMenu();
+        }
+
+        e.stopPropagation();
+    }
+
+    private onExpandedMenu(): void {
+        if (window.innerWidth >= 1000) {
+            this.hostElement.classList.remove('collapsed');
+            this.hostElement.classList.add('expanded');
+        }
+    }
+
+    private onCollapseMenu(): void {
+        if (window.innerWidth >= 1000) {
+            this.hostElement.classList.remove('expanded');
+            this.hostElement.classList.add('collapsed');
+        }
+    }
+}

package/src/lib/components/deprecated-components/cauca-menu-vertical/cauca-menu-vertical.component.html

@@ -0,0 +1,26 @@
+<h4 *ngFor="let menu of menuItems" [class]="menu.activated ? 'selected' : ''">
+    <div (click)="goTo(menu.path, $event)" class="menu">
+        <div *ngIf="menu.icon" class="menu-icon">
+            <fa-icon *ngIf="menu.icon.filter !== undefined" [icon]="menu.icon"></fa-icon>
+            <img *ngIf="menu.icon.filter === undefined" [src]="menu.icon" />
+        </div>
+        <div *ngIf="menu.label" class="menu-caption">
+            <span>{{menu.label | translate}}</span>
+        </div>
+    </div>
+    <div *ngIf="menu.childs.length && menu.activated" class="submenu">
+        <div
+            *ngFor="let submenu of menu.childs"
+            [class]="submenu.activated ? 'menu selected' : 'menu'"
+            (click)="goTo(submenu.path, $event)">
+            <div *ngIf="!submenu.icon" class="menu-dot">&bull;</div>
+            <div *ngIf="submenu.icon" class="menu-icon">
+                <fa-icon *ngIf="submenu.icon.filter !== undefined" [icon]="submenu.icon"></fa-icon>
+                <img *ngIf="submenu.icon.filter === undefined" [src]="submenu.icon" />
+            </div>
+            <div *ngIf="submenu.label" class="menu-caption">
+                <span>{{submenu.label | translate}}</span>
+            </div>
+        </div>
+    </div>
+</h4>

package/src/lib/components/deprecated-components/cauca-menu-vertical/cauca-menu-vertical.component.scss

@@ -0,0 +1,52 @@
+.menu, .submenu {
+    cursor: pointer;
+}
+
+h4 {
+    margin: 0;
+    padding: 0;
+}
+
+h4 .menu {
+    padding: 1em 0;
+    display: flex;
+    flex-direction: row;
+}
+
+h4 .menu > div {
+    flex: 1 1 auto;
+    align-self: center;
+}
+
+.menu-dot {
+    max-width: 1.1em;
+    text-align: center;
+    margin-right: 0.5em;
+    font-size: 2em;
+}
+
+.menu-icon {
+    max-width: 60px;
+    text-align: center;
+    margin-right: 0.5em;
+}
+
+.submenu {
+    margin-left: 1em;
+}
+
+.submenu .menu {
+    padding: 0;
+    font-size: 0.9em;
+    line-height: 2.2em;
+}
+
+.submenu .menu::before {
+    content: "";
+    margin-left: 1.1em;
+    width: 0.1em;
+    height: 2.5em;
+    position: relative;
+    background: #ffffff;
+    margin-right: -1.17em;
+}

package/src/lib/components/deprecated-components/cauca-menu-vertical/cauca-menu-vertical.component.spec.ts

@@ -0,0 +1,28 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { CaucaMenuVerticalComponent } from './cauca-menu-vertical.component';
+
+describe('CaucaVerticalMenuComponent', () => {
+  let component: CaucaMenuVerticalComponent;
+  let fixture: ComponentFixture<CaucaMenuVerticalComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [ 
+        CaucaMenuVerticalComponent,
+        RouterTestingModule,
+      ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CaucaMenuVerticalComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/components/deprecated-components/cauca-menu-vertical/cauca-menu-vertical.component.ts

@@ -0,0 +1,53 @@
+import { Component, EventEmitter, Input, Output, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import {NavigationEnd, Router} from '@angular/router';
+import {MenuItem} from '../shared/models/menu-item';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import { TranslateModule } from '@ngx-translate/core';
+
+@Component({
+    selector: 'cauca-menu-vertical',
+    templateUrl: './cauca-menu-vertical.component.html',
+    styleUrls: ['./cauca-menu-vertical.component.scss'],
+    imports: [
+        CommonModule,
+        FaIconComponent,
+        TranslateModule,
+    ]
+})
+export class CaucaMenuVerticalComponent {
+
+    @Output() public itemClick = new EventEmitter();
+    @Input() public menuItems: MenuItem[] = [];
+
+    private readonly router = inject(Router);
+
+    public constructor() {
+        this.router.events.subscribe((route: NavigationEnd) => {
+            if (route instanceof NavigationEnd) {
+                this.selectActiveRoute(route);
+            }
+        });
+    }
+
+    public goTo(path: string, e: any): void {
+        this.router.navigate([path]);
+        this.itemClick.emit();
+
+        e.stopPropagation();
+    }
+
+    private selectActiveRoute(route: NavigationEnd): void {
+        this.menuItems.forEach((menu: MenuItem) => {
+            if (route.url) {
+                menu.activated = (route.url === menu.path || (menu.childs.length && route.url.indexOf(menu.path) > -1));
+            }
+
+            menu.childs.forEach((subMenu: MenuItem) => {
+                if (route.url) {
+                    subMenu.activated = (route.url === subMenu.path || route.urlAfterRedirects === subMenu.path);
+                }
+            });
+        });
+    }
+}

package/src/lib/components/deprecated-components/cauca-simple-dialog/cauca-simple-dialog.component.html

@@ -0,0 +1,7 @@
+<h1 mat-dialog-title>{{data.title}}</h1>
+<div mat-dialog-content>
+  <div [innerHTML]="data.message"></div>
+</div>
+<div mat-dialog-actions *ngIf="data.buttons">
+  <button *ngFor="let label of data.buttons; let i = index" mat-raised-button (click)="onClick(i)">{{label}}</button>
+</div>

package/src/lib/components/deprecated-components/cauca-simple-dialog/cauca-simple-dialog.component.scss

@@ -0,0 +1,4 @@
+div[mat-dialog-actions] {
+  margin-top: 20px;
+  text-align: center;
+}

package/src/lib/components/deprecated-components/cauca-simple-dialog/cauca-simple-dialog.component.spec.ts

@@ -0,0 +1,39 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import {
+  MAT_DIALOG_DATA,
+  MatDialogModule,
+  MatDialogRef
+} from '@angular/material/dialog';
+import { CaucaSimpleDialogComponent } from './cauca-simple-dialog.component';
+
+describe('CaucaSimpleDialogComponent', () => {
+  let component: CaucaSimpleDialogComponent;
+  let fixture: ComponentFixture<CaucaSimpleDialogComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [ 
+        CaucaSimpleDialogComponent,
+        MatDialogModule,
+      ],
+      providers: [{
+        provide: MatDialogRef,
+        useValue: {}
+      }, {
+          provide: MAT_DIALOG_DATA,
+          useValue: {}
+      }]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CaucaSimpleDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/components/deprecated-components/cauca-simple-dialog/cauca-simple-dialog.component.ts

@@ -0,0 +1,20 @@
+import { Component, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MAT_DIALOG_DATA, MatDialogActions, MatDialogContent, MatDialogRef, MatDialogTitle } from '@angular/material/dialog';
+import { SimpleDialogData } from '../shared/models/simple-dialog-data';
+import { MatButtonModule } from '@angular/material/button';
+
+@Component({
+    selector: 'cauca-simple-dialog',
+    templateUrl: './cauca-simple-dialog.component.html',
+    styleUrls: ['./cauca-simple-dialog.component.scss'],
+    imports: [CommonModule, MatDialogTitle, MatDialogContent, MatDialogActions, MatButtonModule]
+})
+export class CaucaSimpleDialogComponent{
+  public readonly data = inject<SimpleDialogData>(MAT_DIALOG_DATA);
+  private readonly dialogRef = inject<MatDialogRef<CaucaSimpleDialogComponent>>(MatDialogRef);
+
+  public onClick(buttonIndex: number): void {
+    this.dialogRef.close(buttonIndex);
+  }
+}

package/src/lib/components/deprecated-components/cauca-slideshow/cauca-slideshow.component.html

@@ -0,0 +1,7 @@
+<div #container class="slideshow">
+  @for (url of images; track url; let index = $index) {
+    <div [class.active]="index === selectedIndex" [class.entering]="states[index] === 'in'" [class.leaving]="states[index] === 'out'">
+      <img [src]="url" />
+    </div>
+  }
+</div>

package/src/lib/components/deprecated-components/cauca-slideshow/cauca-slideshow.component.scss

@@ -0,0 +1,41 @@
+.slideshow {
+  margin: 0 auto;
+  position: relative;
+  overflow: hidden;
+}
+
+.slideshow > div {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  transition: transform 500ms ease-in, opacity 500ms ease-in;
+
+  /* Default state - off-screen to the right, ready to enter */
+  transform: translateX(100%);
+  opacity: 0;
+
+  &.active {
+    /* Active slide - centered */
+    transform: translateX(0%);
+    opacity: 1;
+  }
+
+  &.leaving {
+    /* Leaving slide - move off-screen to the left */
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+
+  &.entering {
+    /* Entering slide - animate from right to center */
+    transform: translateX(0%);
+    opacity: 1;
+  }
+}
+
+img {
+  max-height: 100%;
+  max-width: 100%;
+  margin: 0 auto;
+  display: block;
+}

package/src/lib/components/deprecated-components/cauca-slideshow/cauca-slideshow.component.spec.ts

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