chrv-components 1.12.108 → 1.12.109

package/ng-package.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/chrv-components",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  },
+  "assets": ["styles.scss", "src/lib/styles/**/*.css"],
+  "allowedNonPeerDependencies": [
+    "@angular/material",
+    "ngx-pagination",
+    "chrv-pipes",
+    "@microsoft/signalr",
+    "material-symbols",
+    "date-fns",
+    "ngx-mask"
+  ]
+}

package/package.json

@@ -1,33 +1,21 @@
-{
-  "name": "chrv-components",
-  "version": "1.12.108",
-  "peerDependencies": {
-    "@angular/common": ">=22.0.0",
-    "@angular/core": ">=22.0.0",
-    "@angular/forms": ">=22.0.0",
-    "tailwindcss": ">=3.2.4"
-  },
-  "dependencies": {
-    "tslib": ">=2.3.0",
-    "@angular/material": ">=22.0.0",
-    "material-symbols": ">=0.38.0",
-    "ngx-pagination": ">=6.0.3",
-    "chrv-pipes": ">=1.3.5",
-    "date-fns": ">=4.1.0",
-    "@microsoft/signalr": ">=8.0.7",
-    "ngx-mask": ">=20.0.3"
-  },
-  "sideEffects": false,
-  "module": "fesm2022/chrv-components.mjs",
-  "typings": "types/chrv-components.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./types/chrv-components.d.ts",
-      "default": "./fesm2022/chrv-components.mjs"
-    }
-  },
-  "type": "module"
-}
+{
+  "name": "chrv-components",
+  "version": "1.12.109",
+  "peerDependencies": {
+    "@angular/common": ">=22.0.0",
+    "@angular/core": ">=22.0.0",
+    "@angular/forms": ">=22.0.0",
+    "tailwindcss": ">=3.2.4"
+  },
+  "dependencies": {
+    "tslib": ">=2.3.0",
+    "@angular/material": ">=22.0.0",
+    "material-symbols": ">=0.38.0",
+    "ngx-pagination": ">=6.0.3",
+    "chrv-pipes": ">=1.3.5",
+    "date-fns": ">=4.1.0",
+    "@microsoft/signalr": ">=8.0.7",
+    "ngx-mask": ">=20.0.3"
+  },
+  "sideEffects": false
+}

package/src/lib/animations/in-out.animation.ts

@@ -0,0 +1,13 @@
+// import { animate, style, transition, trigger } from '@angular/animations';
+
+// export const inOutAnimation = (duration: number = 500) =>
+//   trigger('inOutAnimation', [
+//     transition(':enter', [
+//       style({ opacity: 0 }),
+//       animate(`${duration}ms ease-out`, style({ opacity: 1 })),
+//     ]),
+//     transition(':leave', [
+//       style({ opacity: 1 }),
+//       animate(`${duration}ms ease-in`, style({ opacity: 0 })),
+//     ]),
+//   ]);

package/src/lib/animations/rotation.animation.ts

@@ -0,0 +1,35 @@
+// import {
+//   animate,
+//   style,
+//   transition,
+//   trigger,
+//   state,
+// } from '@angular/animations';
+
+// export const rotationAnimation = (
+//   initialAngle: number = 0,
+//   endAngle: number = 360,
+//   duration: number = 500
+// ) =>
+//   trigger('rotationAnimation', [
+//     state(
+//       'initial',
+//       style({
+//         transform: `rotate(${initialAngle}deg)`,
+//       })
+//     ),
+//     state(
+//       'rotated',
+//       style({
+//         transform: `rotate(${endAngle}deg)`,
+//       })
+//     ),
+//     transition('initial => rotated', [
+//       //style({ opacity: 0 }),
+//       animate(`${duration}ms ease`),
+//     ]),
+//     transition('rotated => initial', [
+//       //style({ opacity: 1 }),
+//       animate(`${duration}ms ease`),
+//     ]),
+//   ]);

package/src/lib/animations/rotation.scss

@@ -0,0 +1,8 @@
+.rotate{
+    transform: rotate(attr(data-initial-angle deg));
+    transition: transform attr(data-duration ms) ease-in-out;
+}
+.rotate.rotated{
+    transform: rotate(attr(data-end-angle deg));
+    transition: transform attr(data-duration ms) ease-in-out;
+}

package/src/lib/chr-breadcrumb/chr-breadcrumb.component.html

@@ -0,0 +1,13 @@
+<div class="w-full flex flex-row flex-wrap dark:!text-gray-400">
+  @for (crumb of crumbs(); track crumb; let index = $index) {
+    <div class="w-fit min-w-fit">
+      <button class="dark:!text-gray-400" [disabled]="!crumb.link && !crumb.callback" mat-button
+        (click)="crumb.callback?.() || crumb.link && navigateTo(crumb.link)">
+        {{ crumb.display }}
+      </button>
+      @if (index < (crumbs()?.length || 1) - 1) {
+        <span>></span>
+      }
+    </div>
+  }
+</div>

package/src/lib/chr-breadcrumb/chr-breadcrumb.component.spec.ts

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

package/src/lib/chr-breadcrumb/chr-breadcrumb.component.ts

@@ -0,0 +1,29 @@
+import { Component, inject, input, ChangeDetectionStrategy } from '@angular/core';
+import { Router } from '@angular/router';
+import { MatButton } from '@angular/material/button';
+
+export interface Breadcrumb {
+  display: string;
+  link?: string;
+  callback?: Function;
+}
+
+@Component({
+  selector: 'app-chr-breadcrumb, chr-breadcrumb',
+  templateUrl: './chr-breadcrumb.component.html',
+  styleUrls: [
+    './chr-breadcrumb.component.scss',
+    '../../../../../tailwindbuild.css',
+  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  imports: [MatButton],
+})
+export class BreadcrumbComponent {
+  router = inject(Router);
+
+  readonly crumbs = input<Breadcrumb[]>();
+
+  navigateTo = (uri: string, data?: any) => {
+    this.router.navigate([uri], { state: data });
+  };
+}

package/src/lib/chr-button/button.component.css

@@ -0,0 +1,185 @@
+:host {
+  display: block;
+}
+
+button {
+  font-size: inherit;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  text-align: center;
+
+  .material-symbols {
+    font-size:  inherit;
+
+    &[data-size="small"]{
+      font-size: 0.85rem;
+    }
+    &[data-size="medium"] {
+      font-size: 1rem;
+    }
+    &[data-size="large"] {
+      font-size: 1.25rem;
+    }
+    &[data-size="inherit"] {
+      font-size: inherit;
+    }
+  }
+  
+  .spinner-wrapper {
+      display: flex;
+      flex: 1 1 auto;
+      justify-content: center;
+      align-items: center;
+
+      &[data-size="medium"] {
+        --btn-spinner-size: 1rem;
+      }
+  
+      &[data-size="large"] {
+        --btn-spinner-size: 1.25rem;
+      }
+    
+      &[data-size="inherit"] {
+        --btn-spinner-size: inherit;
+      }
+
+      height: var(--btn-spinner-size);
+      width: var(--btn-spinner-size);
+
+      .spinner {
+        aspect-ratio: 1 / 1;
+        height: var(--btn-spinner-size);
+        width: var(--btn-spinner-size);
+        /* border: 0.125rem solid color-mix(in srgb, var(--btn-bg-color) 20%, var(--background-color) 80%);
+        border-top: 0.125rem solid var(--btn-bg-contrast-color); */
+        border: 0.125rem solid color-mix(in srgb, var(--btn-bg-color) 60%, var(--background-color) 40%);
+        border-top: 0.125rem solid var(--btn-bg-contrast-color);
+        border-radius: 50%;
+        animation: spin 0.7s linear infinite;
+      }
+  }
+
+  &:hover{
+    .spinner{
+      border-color: var(--btn-bg-color);
+    }
+  }
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  border: none;
+  border-radius: 0.5rem;
+  cursor: pointer;
+  user-select: none;
+  padding: 0.5rem 1rem;
+  background: var(--btn-bg-color, var(--background-color));
+  color: var(--btn-bg-contrast-color, var(--text-color));
+  transition: background 0.2s, color 0.2s;
+
+  &:hover {
+    background: color-mix(in srgb, var(--btn-bg-contrast-color, var(--background-color)) 10%, var(--btn-bg-color, var(--neutral-color)) 90%);
+    color: color-mix(in srgb, var(--btn-bg-color, var(--background-color)) 10%, var(--btn-bg-contrast-color, var(--text-color)) 90%);
+    cursor: pointer;
+  }
+}
+
+.btn-outlined {
+  background: none;
+  border: 1px solid var(--btn-bg-color, var(--neutral-color));
+  color: var(--btn-bg-color, var(--text-color));
+
+  &:hover {
+    background: var(--btn-bg-color, var(--neutral-color));
+    color: var(--btn-bg-contrast-color, var(--text-color));
+  }
+}
+
+.btn-ghost {
+  background: none;
+  color: var(--btn-bg-color, var(--text-color));
+
+  &:hover {
+    background: color-mix(in srgb, var(--btn-bg-color, var(--text-color)) 10%, transparent 90%);
+    color: var(--btn-bg-color, var(--text-color));
+  }
+}
+
+.btn-min-pdg {
+  padding: 0.125rem 0.125rem;
+}
+
+.btn-med-pdg {
+  padding: 0.375rem 0.75rem;
+}
+
+.btn-fixed {
+  width: 8rem;
+  text-align: center;
+}
+
+.btn-primary {
+  --btn-bg-color: var(--primary-color);
+  --btn-bg-contrast-color: var(--primary-contrast-color);
+}
+
+.btn-secondary {
+  --btn-bg-color: var(--secondary-color);
+  --btn-bg-contrast-color: var(--secondary-contrast-color);
+}
+
+.btn-tertiary {
+  --btn-bg-color: var(--tertiary-color);
+  --btn-bg-contrast-color: var(--tertiary-contrast-color);
+}
+
+.btn-warning {
+  --btn-bg-color: var(--warn-color);
+  --btn-bg-contrast-color: var(--warn-contrast-color);
+}
+
+.btn-error {
+  --btn-bg-color: var(--error-color);
+  --btn-bg-contrast-color: var(--error-contrast-color);
+}
+
+.btn-success {
+  --btn-bg-color: var(--success-color);
+  --btn-bg-contrast-color: var(--success-contrast-color);
+}
+
+.btn-disabled,
+.btn[disabled] {
+  --btn-bg-color: color-mix(in srgb, var(--neutral-color) 50%, var(--btn-bg-color) 50%);
+  --btn-bg-contrast-color: color-mix(in srgb, var(--text-color) 50%, var(--btn-bg-contrast-color) 50%);
+
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.btn-link {
+  background: none;
+  border: none;
+  color: var(--link-color);
+  text-decoration: underline;
+  padding: 0;
+
+  /* font-size: 1rem; */
+  &:hover {
+    color: var(--link-hover-color);
+    cursor: pointer;
+  }
+}

package/src/lib/chr-button/button.component.html

@@ -0,0 +1,20 @@
+<button [type]="type()" class="btn btn-{{color()}}" [class.btn-outlined]="variant() == 'outlined'"
+    [class.btn-ghost]="variant() == 'ghost'" [class.btn-med-pdg]="padding() == 'medium'"
+    [class.btn-min-pdg]="padding() == 'none'" [disabled]="disabled()" [style.width.rem]="fixed()"
+    (click)="handleClick($event)">
+    @if(loading()){
+    <div class="spinner-wrapper" [attr.data-size]="iconSize()">
+        <div class="spinner"></div>
+    </div>
+    } @else {
+    @let text = display();
+    @if(text){
+    <span>{{text}}</span>
+    } @else {
+    <ng-content></ng-content>
+    }
+    @if(icon()){
+    <span [attr.data-size]="iconSize()" class="material-symbols">{{icon()}}</span>
+    }
+    }
+</button>

package/src/lib/chr-button/button.component.ts

@@ -0,0 +1,116 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  inject,
+  input,
+  model,
+  OnInit,
+  output,
+} from '@angular/core';
+import { MaybeAsync } from '@angular/router';
+import { from, Observable } from 'rxjs';
+
+export type ButtonColors =
+  | 'primary'
+  | 'secondary'
+  | 'tertiary'
+  | 'error'
+  | 'warning'
+  | 'success'
+  | 'none';
+
+@Component({
+  selector: 'chr-button',
+  imports: [],
+  templateUrl: './button.component.html',
+  styleUrl: './button.component.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ChrButtonComponent implements OnInit {
+  private elementRef = inject(ElementRef);
+
+  /**
+   * Button's text
+   */
+  public display = input<string>();
+
+  public variant = input<'filled' | 'outlined' | 'ghost'>('filled');
+
+  public padding = input<'large' | 'medium' | 'none'>('large');
+
+  /**
+   * Name of the Google Material Symbols icon
+   */
+  public icon = input<string>();
+  public iconSize = input<'small' | 'medium' | 'large' | 'inherit'>('medium');
+
+  /**
+   * Button's color. It will affect both the text and the icon
+   */
+  public color = input<ButtonColors>('none');
+
+  /**
+   * HTML Button type
+   */
+  public type = input<'submit' | 'button'>('button');
+
+  /**
+   * Whether or not the button is disabled
+   */
+  public disabled = input<boolean>(false);
+
+  /**
+   * Fixed width in REM
+   */
+  public fixed = input<number | null>(null);
+
+  /**
+   * The input may be either a function that returns a value or an observable, or a value that will be wrapped in a click event.
+   * If the value is an observable the button will enter a loading state during the observable's execution. Otherwise, the function will be executed and it's return value directly returned.
+   * If the value is not a function, the value will be directly returned.
+   * @param The function the value to be handled on click
+   */
+  public action = input<any | (() => MaybeAsync<any>)>();
+
+  /**
+   * Trigger a click programmatically.
+   */
+  public click = () => {
+    this.elementRef.nativeElement.click();
+  };
+
+  /**
+   * The event that will be thrown when the button is clicked
+   */
+  public onAction = output<{ event: MouseEvent; value: any }>();
+
+  public loading = model<true | false>(false);
+
+  ngOnInit(): void {}
+
+  public handleClick = (
+    event: MouseEvent | Event | null = null,
+  ): { event: MouseEvent | Event | null; value: any } => {
+    this.loading.set(true);
+    const click = this.action();
+    const result = typeof click === 'function' ? click() : click;
+
+    const obs: Observable<any> | any =
+      result instanceof Promise || (result && typeof result.then === 'function')
+        ? from(result)
+        : result instanceof Observable
+          ? result
+          : result;
+
+    if (result)
+      (result as Observable<any>).subscribe({
+        complete: () => this.loading.set(false),
+        error: () => this.loading.set(false),
+      });
+    else {
+      this.loading.set(false);
+    }
+    return { event: event, value: obs };
+  };
+}

package/src/lib/chr-button-legacy/chr-button.component.html

@@ -0,0 +1,11 @@
+<a class="flex flex-row cursor-pointer items-center justify-center align-middle h-9 m-0 p-2 rounded-md"
+  style="--color: {{getBackgroundColor(color())}};" [ngClass]="[getBackgroundColor(color()), getWidth(), getShadow()]"
+  [attr.disabled]="disabled() || false" (click)="doClick()" [attr.href]="href() && href()"
+  [attr.target]="target() && target()" [chrTitle]="tooltip()||''" [chrTitlePosition]="tooltipPosition()||'above'">
+  @if (display()) {
+  <span [ngClass]="getTextColor(color())" class="text-nowrap overflow-hidden text-ellipsis">{{display()}}</span>
+  }
+  @if (icon()) {
+  <mat-icon class="!m-0" [ngClass]="getTextColor(color())">{{ icon() }}</mat-icon>
+  }
+</a>

package/src/lib/chr-button-legacy/chr-button.component.scss

@@ -0,0 +1,53 @@
+@use '../../../styles.scss';
+
+.icon-button {
+    width: 20px !important;
+}
+.icon-button > *{
+    width: min-content;
+    margin: 0 !important;
+}
+
+.chr-button{
+    color: var(--textcolor) !important;
+}
+
+.chr-button.mat-mdc-button-disabled {
+    color: rgba(0, 0, 0, 0.26);
+}
+
+.small-button {
+    @apply sm:w-9;
+    @apply sm:h-9;
+    min-width: 38px !important;
+    padding: 0px !important;
+}
+
+a:hover{
+    filter: brightness(120%);
+}
+
+a[disabled=true]{
+    background-color: rgba(0, 0, 0, 0.26) !important;
+    cursor: not-allowed;
+}
+
+.button-shadow{
+    box-shadow: 1px 6px 10px 0px rgba(black, $alpha: 0.2);
+}
+
+@media (prefers-color-scheme: dark) {
+    a[disabled=true] {
+        background-color: rgba(250, 250, 250, 0.26) !important;
+    }
+    a[disabled=true]>* {
+        color: rgba(200, 200, 200, .54) !important;
+    }
+    a:hover {
+        filter: brightness(80%);
+    }
+}
+
+a[disabled=true] > * {
+    color: rgba(0, 0, 0, .54) !important;
+}

package/src/lib/chr-button-legacy/chr-button.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ChrButtonLegacyComponent } from './chr-button.component';
+
+describe('ChrButtonComponent', () => {
+  let component: ChrButtonLegacyComponent;
+  let fixture: ComponentFixture<ChrButtonLegacyComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ChrButtonLegacyComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ChrButtonLegacyComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});