\n \n \n ![]()
\n \n \n \n \n \n \n \n ![]()
\n \n \n \n \n
\n","import {Component, EventEmitter, Input, Output} from '@angular/core';\nimport {NavigationEnd, Router} from '@angular/router';\nimport {MenuItem} from '../shared/models/menu-item';\n\n@Component({\n selector: 'cauca-menu-vertical',\n templateUrl: './cauca-menu-vertical.component.html',\n styleUrls: ['./cauca-menu-vertical.component.scss'],\n standalone: false\n})\nexport class CaucaMenuVerticalComponent {\n @Output()\n public itemClick = new EventEmitter();\n @Input()\n public menuItems: MenuItem[] = [];\n\n public constructor(\n private router: Router,\n ) {\n this.router.events.subscribe((route: NavigationEnd) => {\n if (route instanceof NavigationEnd) {\n this.selectActiveRoute(route);\n }\n });\n }\n\n public goTo(path: string, e: any): void {\n this.router.navigate([path]);\n this.itemClick.emit();\n\n e.stopPropagation();\n }\n\n private selectActiveRoute(route: NavigationEnd): void {\n this.menuItems.forEach((menu: MenuItem) => {\n if (route.url) {\n menu.activated = (route.url === menu.path || (menu.childs.length && route.url.indexOf(menu.path) > -1));\n }\n\n menu.childs.forEach((subMenu: MenuItem) => {\n if (route.url) {\n subMenu.activated = (route.url === subMenu.path || route.urlAfterRedirects === subMenu.path);\n }\n });\n });\n }\n}\n","\n ![]()
\n
\n \n \n ![]()
\n
\n \n \n \n
\n\n
\n\n\n \n {{'material.version' | translate}} {{version}}\n {{version}}\n
\n","import { Component, ElementRef, HostListener, Input } from '@angular/core';\nimport { MenuItem } from '../shared/models/menu-item';\n\n@Component({\n selector: 'cauca-menu-sidebar',\n templateUrl: './cauca-menu-sidebar.component.html',\n styleUrls: ['./cauca-menu-sidebar.component.scss'],\n standalone: false\n})\nexport class CaucaMenuSidebarComponent {\n @Input()\n public menuItems: MenuItem[] = [];\n @Input()\n public version = '';\n\n private hostElement: HTMLDivElement;\n private keepMenuExpanded = false;\n\n public constructor(element: ElementRef) {\n this.hostElement = element.nativeElement as HTMLDivElement;\n this.hostElement.addEventListener('mouseover', (e: any) => this.onMouseOver(e));\n this.hostElement.addEventListener('mouseout', (e: any) => this.onMouseOut(e));\n\n this.setDisplayMenu();\n }\n\n @HostListener('window:resize', ['$event'])\n public onResize(_e: any): void {\n this.setDisplayMenu();\n }\n\n public onMenuItemClick(): void {\n if (window.innerWidth < 1000) {\n this.hideOnMobile();\n }\n }\n\n public hideOnMobile(): void {\n this.hostElement.classList.remove('mobile');\n this.hostElement.classList.add('hidden');\n }\n\n public showOnMobile(): void {\n this.hostElement.classList.remove('hidden');\n this.hostElement.classList.add('mobile');\n }\n\n public onToggleCollapse(): void {\n if (this.keepMenuExpanded) {\n this.onCollapseMenu();\n this.hostElement.classList.remove('keepExpanded');\n } else {\n this.onExpandedMenu();\n this.hostElement.classList.add('keepExpanded');\n }\n\n this.keepMenuExpanded = !this.keepMenuExpanded;\n localStorage.setItem('cauca-menu-status', this.keepMenuExpanded ? 'expanded' : 'collapsed');\n }\n\n private setDisplayMenu(): void {\n this.hostElement.className = '';\n\n if (window.innerWidth < 1000) {\n this.hostElement.classList.add('hidden');\n } else {\n if (localStorage.getItem('cauca-menu-status') === 'expanded') {\n this.keepMenuExpanded = true;\n this.hostElement.classList.add('keepExpanded');\n }\n\n this.hostElement.classList.add(this.keepMenuExpanded ? 'expanded' : 'collapsed');\n }\n }\n\n private onMouseOver(e: any): void {\n if (!this.keepMenuExpanded) {\n this.onExpandedMenu();\n }\n\n e.stopPropagation();\n }\n\n private onMouseOut(e: any): void {\n if (!this.keepMenuExpanded) {\n this.onCollapseMenu();\n }\n\n e.stopPropagation();\n }\n\n private onExpandedMenu(): void {\n if (window.innerWidth >= 1000) {\n this.hostElement.classList.remove('collapsed');\n this.hostElement.classList.add('expanded');\n }\n }\n\n private onCollapseMenu(): void {\n if (window.innerWidth >= 1000) {\n this.hostElement.classList.remove('expanded');\n this.hostElement.classList.add('collapsed');\n }\n }\n}\n","\n
","import { Component, OnInit, ElementRef, Input, ViewChild } from '@angular/core';\nimport { animate, state, style, transition, trigger } from '@angular/animations';\n\n@Component({\n selector: 'cauca-slideshow',\n templateUrl: './cauca-slideshow.component.html',\n styleUrls: ['./cauca-slideshow.component.scss'],\n animations: [\n trigger('slideUpDown', [\n state('in', style({ transform: 'translateY(0%)' })),\n state('out', style({ transform: 'translateY(-100%)' })),\n transition('in => out', [\n animate('500ms ease-in')\n ]),\n transition('out => in', [\n style({ transform: 'translateY(100%)' }),\n animate('500ms ease-in')\n ]),\n ]),\n trigger('slideLeftRight', [\n state('in', style({ transform: 'translateX(0%)' })),\n state('out', style({ transform: 'translateX(-100%)' })),\n transition('in => out', [\n animate('500ms ease-in')\n ]),\n transition('out => in', [\n style({ transform: 'translateX(100%)' }),\n animate('500ms ease-in')\n ]),\n ]),\n ],\n standalone: false\n})\nexport class CaucaSlideshowComponent implements OnInit {\n @ViewChild('container', { static: true })\n public container: ElementRef;\n @Input()\n public height = '150px';\n @Input()\n public autoPlay = true;\n\n private timer = null;\n private items = [];\n private states = [];\n private selectedIndex = 0;\n\n @Input()\n public set images(list: string[]) {\n this.items = list;\n this.restart();\n }\n public get images(): string[] {\n return this.items;\n }\n\n public ngOnInit(): void {\n this.container.nativeElement.style.height = this.height;\n this.container.nativeElement.style.width = '100%';\n }\n\n public getState(index: number): string {\n if (this.states[index]) {\n return this.states[index];\n }\n\n return (this.selectedIndex === index ? 'in' : 'out');\n }\n\n public restart(): void {\n if (this.timer) {\n window.clearInterval(this.timer);\n }\n if (this.images && this.images.length) {\n this.timer = window.setInterval(() => this.changed('next'), 5000);\n }\n }\n\n public next(): void {\n if (this.selectedIndex < this.items.length - 1) {\n this.selectedIndex++;\n } else {\n this.selectedIndex = 0;\n }\n }\n\n private changed(action: string): void {\n this.states[this.selectedIndex] = 'out';\n this[action]();\n this.states[this.selectedIndex] = 'in';\n }\n}\n","import { Component, EventEmitter, Input, Output } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'cauca-test-component-with-classic-input',\r\n imports: [],\r\n templateUrl: './test-component-with-classic-input.component.html',\r\n styleUrl: './test-component-with-classic-input.component.scss'\r\n})\r\nexport class TestComponentWithClassicInputComponent {\r\n @Input() public value: string;\r\n @Output() public valueChange = new EventEmitter\n ![]()
\n
\n{{value}}
\r\n","import { Component, model } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'cauca-test-component-with-model-signal',\r\n imports: [],\r\n templateUrl: './test-component-with-model-signal.component.html',\r\n styleUrl: './test-component-with-model-signal.component.scss'\r\n})\r\nexport class TestComponentWithModelSignalComponent {\r\n public value = model{{value()}}
\r\n","import { Component, input, output } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'cauca-test-component-with-signal-input',\r\n imports: [],\r\n templateUrl: './test-component-with-signal-input.component.html',\r\n styleUrl: './test-component-with-signal-input.component.scss'\r\n})\r\nexport class TestComponentWithSignalInputComponent {\r\n public value = input{{value()}}
","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatInputModule } from '@angular/material/input';\nimport { MatTabsModule } from '@angular/material/tabs';\nimport { FontAwesomeModule } from '@fortawesome/angular-fontawesome';\nimport { CaucaCoreForChildModule } from '@cauca-911/core';\nimport { MatDialogModule } from '@angular/material/dialog';\nimport { CaucaMaterialComponent } from './cauca-material.component';\nimport { CaucaInputFileComponent } from './cauca-input-file/cauca-input-file.component';\nimport { CaucaInputMultipleLangueComponent } from './cauca-input-multiple-langue/cauca-input-multiple-langue.component';\nimport { CaucaMenuSidebarComponent } from './cauca-menu-sidebar/cauca-menu-sidebar.component';\nimport { CaucaMenuVerticalComponent } from './cauca-menu-vertical/cauca-menu-vertical.component';\nimport { CaucaSimpleDialogComponent } from './cauca-simple-dialog/cauca-simple-dialog.component';\nimport { CaucaSlideshowComponent } from './cauca-slideshow/cauca-slideshow.component';\nimport { TestComponentWithClassicInputComponent } from './test-component-with-classic-input/test-component-with-classic-input.component';\nimport { TestComponentWithModelSignalComponent } from './test-component-with-model-signal/test-component-with-model-signal.component';\nimport { TestComponentWithSignalInputComponent } from './test-component-with-signal-input/test-component-with-signal-input.component';\n\n@NgModule({\n declarations: [\n CaucaMaterialComponent,\n CaucaInputFileComponent,\n CaucaInputMultipleLangueComponent,\n CaucaMenuSidebarComponent,\n CaucaMenuVerticalComponent,\n CaucaSimpleDialogComponent,\n CaucaSlideshowComponent,\n ],\n imports: [\n CommonModule,\n CaucaCoreForChildModule,\n FontAwesomeModule,\n FormsModule,\n ReactiveFormsModule,\n MatButtonModule,\n MatFormFieldModule,\n MatIconModule,\n MatInputModule,\n MatTabsModule,\n MatDialogModule,\n TestComponentWithClassicInputComponent,\n TestComponentWithModelSignalComponent,\n TestComponentWithSignalInputComponent,\n ],\n exports: [\n CaucaMaterialComponent,\n CaucaInputFileComponent,\n CaucaInputMultipleLangueComponent,\n CaucaMenuSidebarComponent,\n CaucaMenuVerticalComponent,\n CaucaSimpleDialogComponent,\n CaucaSlideshowComponent,\n TestComponentWithClassicInputComponent,\n TestComponentWithModelSignalComponent,\n TestComponentWithSignalInputComponent,\n ],\n})\nexport class CaucaMaterialModule { }\n","import { Component, EventEmitter, Input, Output } from '@angular/core';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatInputModule } from '@angular/material/input';\n\n@Component({\n selector: 'cauca-mobile-time-picker',\n imports: [\n MatButtonModule,\n MatIconModule,\n MatFormFieldModule,\n MatInputModule\n ],\n templateUrl: './mobile-time-picker.component.html',\n styleUrl: './mobile-time-picker.component.scss'\n})\nexport class MobileTimePickerComponent {\n @Input({required: true}) public value: number;\n @Input({ required: true }) public options: number[];\n\n @Output() public valueChange = new EventEmitter\n{{(value < 10 ? '0' : '' ) + value}}\n
\n\n","\n
\n\n\n
\n\n \n
\n\n @if (showTime()) {\n \n \n
\n \n
\n \n :
\n \n \n \n
\n \n
\n \n :
\n \n \n
\n \n
\n }\n \n \n \n \n
","import { Component, HostListener, Inject, OnInit, signal, WritableSignal } from '@angular/core';\nimport { provideNativeDateAdapter } from '@angular/material/core';\nimport { MatDatepickerModule } from '@angular/material/datepicker';\nimport { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';\nimport { MatListModule } from '@angular/material/list';\nimport { DialogDateTimePickerOptions, DialogDateTimePickerDataDisabled, DialogDateTimePickerDataStep } from '../../models/dialog-date-time-picker-data';\nimport { CaucaCoreForChildModule } from '@cauca-911/core';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatIconModule } from '@angular/material/icon';\nimport { CommonModule } from '@angular/common';\nimport { MobileTimePickerComponent } from '../mobile-time-picker/mobile-time-picker.component';\nimport { DesktopTimePickerComponent } from '../desktop-time-picker/desktop-time-picker.component';\n\n@Component({\n selector: 'cauca-dialog-date-time-picker',\n imports: [\n CommonModule,\n CaucaCoreForChildModule,\n MatButtonModule,\n MatDatepickerModule,\n MatIconModule,\n MatListModule,\n MobileTimePickerComponent,\n DesktopTimePickerComponent\n ],\n providers: [provideNativeDateAdapter()],\n templateUrl: './dialog-date-time-picker.component.html',\n styleUrl: './dialog-date-time-picker.component.scss'\n})\nexport class DialogDateTimePickerComponent implements OnInit {\n public selectedHour = 0;\n public selectedMinute = 0;\n public selectedSecond = 0;\n public initialDate: Date = null;\n public selectedDate: Date = null;\n public minimumDate = new Date();\n public maximumDate = new Date();\n public showSeconds: boolean = false;\n public showClearButton: boolean = true;\n public showButtonIcons: boolean = true;\n\n public hours = [...Array(24).keys()];\n public minutes = [...Array(60).keys()];\n public seconds = [...Array(60).keys()];\n public showMobileUi: boolean = false;\n\n public showTime: WritableSignal