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

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

@@ -1,213 +0,0 @@
-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

@@ -1,22 +0,0 @@
-/**
- * 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

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

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

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

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

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

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

@@ -1,35 +0,0 @@
-<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

@@ -1,219 +0,0 @@
-: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;
-}