@rededor/site-front-end-lib 20.0.26 → 20.0.27

package/cura/feedback/cura-toast/cura-toast.component.ts

@@ -0,0 +1,213 @@
+import { Component, input, output, inject, computed, signal, OnInit, OnDestroy, ElementRef, effect } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { CuraApiService } from '@rededor/site-front-end-lib/cura/api';
+import { CuraIconComponent } from '@rededor/site-front-end-lib/cura/icons/cura-icon';
+import { CuraHeadingComponent } from '@rededor/site-front-end-lib/cura/texts/cura-heading';
+import { CuraParagraphComponent } from '@rededor/site-front-end-lib/cura/texts/cura-paragraph';
+import { CuraLoaderBarComponent } from '@rededor/site-front-end-lib/cura/loaders/cura-loader-bar';
+import { ToastType, ToastPosition } from './cura-toast.definitions';
+
+@Component({
+  selector: 'cura-toast',
+  imports: [CommonModule, CuraIconComponent, CuraHeadingComponent, CuraParagraphComponent, CuraLoaderBarComponent],
+  templateUrl: './cura-toast.component.html',
+  styleUrls: ['./cura-toast.component.scss'],
+  host: {
+    role: 'alert',
+    'aria-live': 'polite',
+    'aria-atomic': 'true',
+    '[attr.aria-label]': 'label()',
+  },
+})
+export class CuraToastComponent implements OnInit, OnDestroy {
+  private curaApi: CuraApiService = inject(CuraApiService);
+  private elementRef = inject(ElementRef);
+  private intervalId?: ReturnType<typeof setInterval>;
+
+  /**
+   * Toast type: info (default) | success | warning | error
+   */
+  type = input<ToastType>('info');
+
+  /**
+   * Toast position on screen
+   */
+  position = input<ToastPosition>('top-right');
+
+  /**
+   * Custom icon name
+   */
+  icon = input<string>('');
+
+  /**
+   * Toast label/title
+   */
+  label = input<string>('');
+
+  /**
+   * Show close button. Default: true
+   */
+  closeButton = input<boolean>(true);
+
+  /**
+   * Show loader bar. Default: true
+   */
+  loader = input<boolean>(true);
+
+  /**
+   * Auto close delay in milliseconds. Default: 10000ms (10s)
+   */
+  autoCloseDelay = input<number>(10000);
+
+  /**
+   * Close event emitter
+   */
+  toastClosed = output<void>();
+
+  /**
+   * Progress state for loader animation
+   */
+  progress = signal<number>(0);
+
+  /**
+   * Active state for animation
+   */
+  isActive = signal<boolean>(false);
+
+  constructor() {
+    // Watch for type and position changes to update styles
+    effect(() => {
+      this.type();
+      this.position();
+    });
+  }
+
+  toastStyles = computed(() => {
+    if (!this.curaApi) return {};
+
+    const colors = [
+      { name: '--neutral-purewhite', theme: 'neutral-purewhite' },
+      { name: '--neutral-base', theme: 'neutral-base', opacity: 0.2 },
+      { name: '--primary-base', theme: 'primary-base' },
+      { name: '--color-base', theme: `${this.type()}-base` },
+    ];
+
+    const styles: { [key: string]: string } = {};
+
+    colors.forEach((color) => {
+      if (color.opacity !== undefined) {
+        styles[color.name] = this.curaApi.theme.colors.getColor(color.theme, color.opacity);
+      } else {
+        styles[color.name] = this.curaApi.theme.colors.getColor(color.theme);
+      }
+    });
+
+    return styles;
+  });
+
+  containerClasses = computed(() => {
+    const [firstPosition, secondPosition] = this.position().split('-');
+    const classes: { [key: string]: boolean } = {
+      container: true,
+    };
+
+    if (firstPosition) classes[firstPosition] = true;
+    if (secondPosition) classes[secondPosition] = true;
+    if (this.loader()) classes['loader'] = true;
+    if (this.isActive()) classes['active'] = true;
+
+    return classes;
+  });
+
+  iconName = computed(() => {
+    const iconMapping: { [key in ToastType]: string } = {
+      info: 'infoCircle',
+      success: 'checkCircle',
+      warning: 'alertCircle',
+      error: 'alertTriangle',
+    };
+    return this.icon() || iconMapping[this.type()];
+  });
+
+  ngOnInit(): void {
+    // Activate animation after a small delay to ensure DOM is ready
+    setTimeout(() => {
+      this.openContainer();
+      this.startAnimation();
+    }, 10);
+  }
+
+  ngOnDestroy(): void {
+    if (this.intervalId) {
+      clearInterval(this.intervalId);
+    }
+  }
+
+  /**
+   * Opens the toast container with animation
+   */
+  openContainer(): void {
+    this.isActive.set(true);
+  }
+
+  /**
+   * Closes the toast container with animation
+   */
+  closeContainer(): void {
+    this.isActive.set(false);
+
+    setTimeout(() => {
+      this.toastClosed.emit();
+      // Remove element from DOM
+      const element = this.elementRef.nativeElement;
+      if (element && element.parentNode) {
+        element.parentNode.removeChild(element);
+      }
+    }, 500);
+  }
+
+  /**
+   * Public method to close toast
+   */
+  close(): void {
+    this.closeContainer();
+  }
+
+  /**
+   * Handle close button click
+   */
+  handleClose(): void {
+    this.closeContainer();
+  }
+
+  /**
+   * Starts the auto-close animation
+   */
+  private startAnimation(): void {
+    const delay = this.autoCloseDelay();
+
+    if (!delay) return;
+
+    if (this.loader()) {
+      this.progress.set(0);
+      this.intervalId = setInterval(() => {
+        const currentProgress = this.progress();
+        if (currentProgress >= 100) {
+          if (this.intervalId) {
+            clearInterval(this.intervalId);
+          }
+          this.closeContainer();
+        } else {
+          this.progress.set(currentProgress + 1);
+        }
+      }, delay / 100);
+    } else {
+      this.intervalId = setInterval(() => {
+        if (this.intervalId) {
+          clearInterval(this.intervalId);
+        }
+        this.closeContainer();
+      }, delay);
+    }
+  }
+}

package/cura/feedback/cura-toast/cura-toast.definitions.ts

@@ -0,0 +1,22 @@
+/**
+ * Toast types available
+ */
+export type ToastType = 'info' | 'success' | 'warning' | 'error';
+
+/**
+ * Toast position types
+ */
+export type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+
+/**
+ * Toast configuration interface
+ */
+export interface ToastConfig {
+  type?: ToastType;
+  position?: ToastPosition;
+  icon?: string;
+  label?: string;
+  closeButton?: boolean;
+  loader?: boolean;
+  autoCloseDelay?: number;
+}

package/cura/feedback/cura-toast/index.ts

@@ -0,0 +1 @@
+export * from './public-api';

package/cura/feedback/cura-toast/ng-package.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "../../../../../node_modules/ng-packagr/ng-package.schema.json",
+  "lib": {
+    "entryFile": "public-api.ts"
+  }
+}

package/cura/feedback/cura-toast/public-api.ts

@@ -0,0 +1,2 @@
+export * from './cura-toast.component';
+export * from './cura-toast.definitions';

package/cura/forms/cura-checkbox/cura-checkbox.component.html

@@ -0,0 +1,35 @@
+<div [class]="containerClasses()" [style]="styles()" (click)="$event.preventDefault(); handleClick()">
+  <div class="info">
+    <div class="label-wrapper">
+      <cura-label [textOverflow]="overflowLabel()" [class]="labelClasses()" weight="bold" [size]="labelSize()" [color]="labelColor()">
+        {{ label() }}
+      </cura-label>
+
+      @if (required()) {
+        <cura-paragraph lineHeight="0%" marginBlock="0" color="error-base"> * </cura-paragraph>
+      }
+    </div>
+
+    <cura-label [textOverflow]="overflowHelper()" [color]="messageColor()" size="xsmall" [class]="messageClasses()">
+      <ng-content></ng-content>
+    </cura-label>
+  </div>
+
+  <div class="checkbox" [tabIndex]="ontabindex()">
+    <input
+      type="checkbox"
+      [name]="name()"
+      [value]="value()"
+      [disabled]="disabled()"
+      [required]="required()"
+      [checked]="checked()"
+      [indeterminate]="indeterminate()"
+      (keydown.space)="handleClick()"
+      (keydown.enter)="handleClick()"
+    />
+
+    @if ((checked() || indeterminate()) && !disableCheckIcon()) {
+      <cura-icon class="icon" [name]="iconName()" [size]="iconSizeValue()" [color]="iconColorValue()"> </cura-icon>
+    }
+  </div>
+</div>

package/cura/forms/cura-checkbox/cura-checkbox.component.scss

@@ -0,0 +1,219 @@
+:host {
+  display: block;
+  box-sizing: border-box;
+  min-width: 0;
+}
+
+/* Container e Layout */
+.container {
+  display: flex;
+  align-items: center;
+  flex-direction: row-reverse;
+  justify-content: start;
+  gap: var(--gap);
+  cursor: pointer;
+  font-family: var(--font-family);
+}
+
+.position {
+  &.container {
+    flex-direction: row;
+  }
+
+  .label-wrapper {
+    justify-content: end;
+  }
+
+  .message {
+    text-align: right;
+  }
+
+  .label {
+    order: 1;
+  }
+}
+
+.info {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.label-wrapper {
+  display: flex;
+  justify-content: start;
+  align-items: center;
+  gap: 5px;
+}
+
+/* Control e Checkbox */
+.control {
+  width: fit-content;
+  cursor: pointer;
+  position: relative;
+}
+
+.checkbox {
+  appearance: none;
+  border: 2px solid var(--neutral-base-neutral-medium);
+  border-radius: var(--border-radius, 4px);
+  background: var(--neutral-black-neutral-purewhite);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  cursor: pointer;
+  box-sizing: border-box;
+  width: var(--size);
+  height: var(--size);
+  flex: 0 0 var(--size);
+}
+
+.checked input {
+  position: absolute;
+  inset: 0;
+  appearance: none;
+  -webkit-appearance: none;
+  background: var(--color-light);
+}
+
+.icon {
+  position: absolute;
+  display: flex;
+  opacity: 0;
+  transition: opacity 0.3s;
+}
+
+/* Estados de Foco */
+.checkbox:focus {
+  border-color: var(--info-base) !important;
+}
+
+/* Estado Disabled */
+.disabled .checkbox {
+  background: var(--neutral-black-neutral-white);
+  border-color: var(--neutral-darker-neutral-base);
+  cursor: not-allowed;
+
+  &:hover {
+    border-color: var(--neutral-darker-neutral-base) !important;
+  }
+}
+
+.disabled.checked .checkbox,
+.disabled.indeterminate .checkbox {
+  background: var(--neutral-black-neutral-white);
+  border-color: var(--neutral-darker-neutral-base);
+
+  &:hover {
+    border-color: var(--neutral-base-neutral-white);
+    background: var(--primary-base-neutral-white);
+  }
+}
+
+.disabled .checkbox:focus {
+  border-color: var(--neutral-darker-neutral-base) !important;
+}
+
+/* Estado Checked */
+.checked .checkbox {
+  border-color: var(--color-dark);
+  background: var(--color-base);
+
+  &:hover {
+    border-color: var(--color-base) !important;
+    background: var(--color-light);
+  }
+}
+
+/* Estado Indeterminate */
+.indeterminate .checkbox {
+  border-color: var(--color-base);
+  background: var(--color-light);
+
+  &:hover {
+    border-color: var(--color-dark) !important;
+    background: var(--color-base);
+  }
+}
+
+.checked .icon,
+.indeterminate .icon {
+  opacity: 1;
+}
+
+/* Hover para não disabled, default, checked, indeterminate */
+:not(.disabled):not(.checked):not(.indeterminate) .checkbox:hover {
+  border-color: var(--neutral-purewhite-neutral-dark);
+}
+
+/* Estado Success */
+
+.success.dark .checkbox {
+  background: var(--neutral-black);
+}
+
+.success .checkbox {
+  border-color: var(--success-base);
+  background: var(--success-lighter);
+
+  &:hover {
+    border-color: var(--success-base) !important;
+  }
+}
+
+.success.checked .checkbox {
+  border-color: var(--success-dark-base);
+  background: var(--success-base-lighter);
+
+  &:hover {
+    border-color: var(--success-dark-base);
+  }
+}
+
+/* Estado Error */
+
+.error.dark .checkbox {
+  background: var(--neutral-black);
+}
+
+.error .checkbox {
+  border-color: var(--error-base);
+  background: var(--error-lighter);
+
+  &:hover {
+    border-color: var(--error-base) !important;
+  }
+}
+
+.error.checked .checkbox {
+  border-color: var(--error-dark-base);
+  background: var(--error-base-lighter);
+
+  &:hover {
+    border-color: var(--error-dark-base);
+  }
+}
+
+.label.textoverflow-single {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
+  max-width: 100%;
+}
+
+.message.textoverflow-single {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
+  max-width: 100%;
+}
+
+/* Input */
+input {
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+}