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

package/cura/feedback/cura-alert/cura-alert.component.scss

@@ -1,32 +0,0 @@
-@use '../../scss/mixins/spacing.scss' as spacing;
-
-:host {
-  display: block;
-  box-sizing: border-box;
-
-  .conteiner {
-    display: flex;
-    box-sizing: border-box;
-    padding: #{spacing.$spacing-xxxs};
-    gap: #{spacing.$spacing-xxxs};
-    flex-shrink: 0;
-    border: 1px solid var(--color-base);
-    border-radius: 4px;
-    background-color: var(--color-lighter);
-
-    &.floating {
-      box-shadow: 0px 4px 8px 0px rgba(38, 38, 38, 0.16);
-    }
-  }
-
-  .content {
-    flex: 1;
-    flex-direction: column;
-    display: flex;
-    gap: #{spacing.$spacing-tiny};
-  }
-
-  .icon-right {
-    cursor: pointer;
-  }
-}

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

@@ -1,94 +0,0 @@
-import { Component, input, output, inject, computed } 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 { AlertType } from './cura-alert.definitions';
-
-@Component({
-  selector: 'cura-alert',
-  imports: [CommonModule, CuraIconComponent, CuraHeadingComponent, CuraParagraphComponent],
-  templateUrl: './cura-alert.component.html',
-  styleUrls: ['./cura-alert.component.scss'],
-  host: {
-    role: 'alert',
-    'aria-live': 'polite',
-    'aria-atomic': 'true',
-    '[attr.aria-label]': 'label()',
-  },
-})
-export class CuraAlertComponent {
-  private curaApi: CuraApiService = inject(CuraApiService);
-
-  /**
-   * Alert type: info (default) | success | warning | error
-   */
-  type = input<AlertType>('info');
-
-  /**
-   * Floating state. Boolean.
-   */
-  floating = input<boolean>(false);
-
-  /**
-   * Alert label/title
-   */
-  label = input<string>('');
-
-  /**
-   * Closeable state. Boolean.
-   */
-  closeable = input<boolean>(true);
-
-  /**
-   * Custom icon name
-   */
-  icon = input<string>('');
-
-  /**
-   * Close event emitter
-   */
-  close = output<void>();
-
-  alertStyles = computed(() => {
-    if (!this.curaApi) return {};
-
-    const colors = [
-      { name: '--color-lighter', theme: `${this.type()}-lighter` },
-      { name: '--neutral-black', theme: 'neutral-black' },
-      { name: '--color-light', theme: `${this.type()}-light` },
-      { name: '--color-base', theme: `${this.type()}-base` },
-    ];
-
-    const styles: { [key: string]: string } = {};
-
-    styles['--base-spacing'] = this.curaApi.theme.spacing.getSpacing();
-
-    colors.forEach((color) => {
-      styles[color.name] = this.curaApi.theme.colors.getColor(color.theme);
-    });
-
-    return styles;
-  });
-
-  containerClasses = computed(() => {
-    const classes = [];
-    if (this.floating()) classes.push('floating');
-    return classes.join(' ');
-  });
-
-  iconName = computed(() => {
-    const iconMapping: { [key in AlertType]: string } = {
-      info: 'infoCircle',
-      success: 'checkCircle',
-      warning: 'alertCircle',
-      error: 'alertTriangle',
-    };
-    return this.icon() || iconMapping[this.type()];
-  });
-
-  handleClose(): void {
-    this.close.emit();
-  }
-}

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

@@ -1,15 +0,0 @@
-/**
- * Alert types available
- */
-export type AlertType = 'info' | 'success' | 'warning' | 'error';
-
-/**
- * Alert configuration interface
- */
-export interface AlertConfig {
-  type?: AlertType;
-  floating?: boolean;
-  label?: string;
-  closeable?: boolean;
-  icon?: string;
-}

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

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

package/cura/feedback/cura-alert/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-alert/public-api.ts

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

package/cura/feedback/cura-modal/cura-modal.component.html

@@ -1,20 +0,0 @@
-<div class="modal container" [class.open]="open()" [style]="styles()">
-  <div class="modal backdrop" [class.open]="open()" (click)="handleClose()"></div>
-
-  <div class="wrapper">
-    <!-- Desktop close button -->
-    <button class="close desktop" type="button" (click)="handleClose()">
-      <cura-icon name="close" color="error-dark" size="small"> </cura-icon>
-    </button>
-
-    <ng-content></ng-content>
-
-    <!-- Mobile close button -->
-    <button class="close mobile" type="button" (click)="handleClose()">
-      <cura-icon name="close" color="error-dark" [size]="16"> </cura-icon>
-      <cura-paragraph color="error-dark" size="small" marginBlock="0">
-        {{ mobileCloseLabel() }}
-      </cura-paragraph>
-    </button>
-  </div>
-</div>

package/cura/feedback/cura-modal/cura-modal.component.scss

@@ -1,149 +0,0 @@
-:host {
-  display: block;
-}
-
-.modal {
-  position: fixed;
-  height: 100%;
-  width: 100%;
-  top: var(--top-offset);
-  bottom: var(--bottom-offset);
-  left: var(--left-offset);
-  right: var(--right-offset);
-  z-index: -1;
-  margin-top: var(--offset-top);
-
-  &.open {
-    z-index: var(--zIndex);
-
-    .backdrop,
-    .wrapper {
-      opacity: 1;
-      visibility: visible;
-      animation: fadeIn 0.3s ease-out;
-    }
-  }
-}
-
-.container {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.backdrop,
-.wrapper {
-  opacity: 0;
-  visibility: hidden;
-  transition:
-    opacity 0.3s ease,
-    visibility 0.3s ease;
-}
-
-.backdrop {
-  background-color: var(--background-color);
-  z-index: calc(var(--zIndex) - 10);
-  animation: fadeIn 0.3s ease-out;
-}
-
-.wrapper {
-  position: fixed;
-  background-color: var(--neutral-purewhite);
-  border: 2px solid var(--neutral-light);
-  border-radius: 4px; // Equivalent to $spacing-xxxs
-  max-width: 600px;
-  min-width: 200px;
-  padding: 0 8px 8px 8px; // Equivalent to $spacing-none $spacing-xxs $spacing-xxs $spacing-xxs
-  z-index: var(--zIndex);
-
-  // Shadow level 4 equivalent
-  box-shadow:
-    0 8px 32px rgba(0, 0, 0, 0.12),
-    0 4px 16px rgba(0, 0, 0, 0.08);
-
-  transform: scale(0.95);
-  transition:
-    transform 0.3s ease-out,
-    opacity 0.3s ease,
-    visibility 0.3s ease;
-
-  ::ng-deep > *:not(button) {
-    max-height: 80vh;
-    overflow: auto;
-    padding-right: 12px; // Equivalent to $spacing-xs
-  }
-}
-
-.modal.open .wrapper {
-  transform: scale(1);
-  opacity: 1;
-  visibility: visible;
-}
-
-.close {
-  justify-self: flex-end;
-  padding-top: 8px; // Equivalent to $spacing-xxs
-  background: none;
-  border: none;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-
-  &.mobile {
-    display: none;
-  }
-
-  &.desktop {
-    display: flex;
-  }
-}
-
-// Mobile styles
-@media (max-width: 768px) {
-  .wrapper {
-    position: fixed;
-    bottom: 0;
-    width: 80%;
-    padding-top: 8px; // $spacing-xxs
-    padding-bottom: 0;
-    border-radius: 4px 4px 0 0; // $spacing-xxxs $spacing-xxxs $spacing-none $spacing-none
-    border-bottom: none;
-  }
-
-  .close {
-    align-items: center;
-    border-top: 1px dashed var(--neutral-light);
-    margin-top: 8px; // $spacing-xxs
-    padding: 8px 0; // $spacing-xxs $spacing-none
-    justify-content: center;
-    width: 100%;
-
-    &.mobile {
-      display: flex;
-      gap: 4px; // $spacing-mini
-    }
-
-    &.desktop {
-      display: none;
-    }
-  }
-}
-
-// Animations
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes fadeOut {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
-}

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

@@ -1,112 +0,0 @@
-import { Component, input, output, computed, inject, model, OnInit, OnDestroy, PLATFORM_ID } from '@angular/core';
-import { isPlatformBrowser } 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 { CuraParagraphComponent } from '@rededor/site-front-end-lib/cura/texts/cura-paragraph';
-import { ModalBackground } from './cura-modal.definitions';
-
-@Component({
-  selector: 'cura-modal',
-  imports: [CuraIconComponent, CuraParagraphComponent],
-  templateUrl: './cura-modal.component.html',
-  styleUrls: ['./cura-modal.component.scss'],
-  host: {
-    role: 'dialog',
-    'aria-modal': 'true',
-    '[style.--zIndex]': 'zindex()',
-  },
-})
-export class CuraModalComponent implements OnInit, OnDestroy {
-  private curaApi = inject(CuraApiService);
-  private platformId = inject(PLATFORM_ID);
-
-  /**
-   * Property open to control modal visibility
-   */
-  open = model<boolean>(false);
-
-  /**
-   * Property background to control modal backdrop color
-   */
-  background = input<ModalBackground>('light');
-
-  /**
-   * Property top to control modal top position
-   */
-  top = input<number>(0);
-
-  /**
-   * Property bottom to control modal bottom position
-   */
-  bottom = input<number>(0);
-
-  /**
-   * Property left to control modal left position
-   */
-  left = input<number>(0);
-
-  /**
-   * Property right to control modal right position
-   */
-  right = input<number>(0);
-
-  /**
-   * Defines the label for the close button when the modal is viewed on mobile
-   */
-  mobileCloseLabel = input<string>('Fechar');
-
-  /**
-   * Property zindex to control the z-index value of the component
-   */
-  zindex = input<string>('100');
-
-  /**
-   * Event close to handle modal close
-   */
-  modalClose = output<void>();
-
-  // Computed styles
-  styles = computed(() => {
-    const backgroundTheme = {
-      dark: this.curaApi?.theme?.colors?.getColor('neutral-black', 0.4) || 'rgba(0, 0, 0, 0.4)',
-      light: this.curaApi?.theme?.colors?.getColor('primary-darker', 0.8) || 'rgba(0, 0, 0, 0.8)',
-    };
-
-    return {
-      '--background-color': backgroundTheme[this.background()],
-      '--top-offset': `${this.top()}px`,
-      '--bottom-offset': `${this.bottom()}px`,
-      '--left-offset': `${this.left()}px`,
-      '--right-offset': `${this.right()}px`,
-      '--neutral-purewhite': this.curaApi?.theme?.colors?.getColor('neutral-purewhite') || '#ffffff',
-      '--neutral-light': this.curaApi?.theme?.colors?.getColor('neutral-light') || '#f5f5f5',
-      '--base-spacing': this.curaApi?.theme?.spacing?.getSpacing() || '16px',
-    };
-  });
-
-  ngOnInit(): void {
-    if (isPlatformBrowser(this.platformId)) {
-      window.addEventListener('keydown', this.handleCloseOnEsc);
-    }
-  }
-
-  ngOnDestroy(): void {
-    if (isPlatformBrowser(this.platformId)) {
-      window.removeEventListener('keydown', this.handleCloseOnEsc);
-    }
-  }
-
-  handleCloseOnEsc = (evt: KeyboardEvent): void => {
-    if (evt.key !== 'Escape' || !this.open()) {
-      return;
-    }
-    this.open.set(false);
-    this.modalClose.emit();
-  };
-
-  // Handle close method
-  handleClose = (): void => {
-    this.modalClose.emit();
-    this.open.set(false);
-  };
-}

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

@@ -1,36 +0,0 @@
-/**
- * Background options for the modal component
- */
-export type ModalBackground = 'dark' | 'light';
-
-/**
- * Event payload emitted when the modal is closed
- */
-export interface ModalCloseEvent {
-  /**
-   * Indicates that the modal was closed
-   */
-  closed: boolean;
-}
-
-/**
- * Modal position configuration
- */
-export interface ModalPosition {
-  /**
-   * Top offset in pixels
-   */
-  top?: number;
-  /**
-   * Bottom offset in pixels
-   */
-  bottom?: number;
-  /**
-   * Left offset in pixels
-   */
-  left?: number;
-  /**
-   * Right offset in pixels
-   */
-  right?: number;
-}

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

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

package/cura/feedback/cura-modal/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-modal/public-api.ts

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

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

@@ -1,23 +0,0 @@
-<div [ngClass]="containerClasses()" [ngStyle]="toastStyles()">
-  <cura-icon class="default-icon" [name]="iconName()" [size]="16" [color]="type() + '-dark'"></cura-icon>
-
-  <div class="content">
-    <cura-heading [level]="4" size="xsmall" [color]="type() + '-dark'" weight="bold" marginBlock="0">
-      {{ label() }}
-    </cura-heading>
-
-    <cura-paragraph [color]="type() + '-darker'" size="xsmall" marginBlock="0" lineHeight="133.33%">
-      <ng-content></ng-content>
-    </cura-paragraph>
-
-    <ng-content select="[slot=actions]"></ng-content>
-  </div>
-
-  @if (closeButton()) {
-    <cura-icon class="close-icon" name="close" [size]="16" color="error-dark" (click)="handleClose()"></cura-icon>
-  }
-
-  @if (loader() && autoCloseDelay()) {
-    <cura-loader-bar [color]="type() + '-base'" [progress]="progress()"></cura-loader-bar>
-  }
-</div>

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

@@ -1,96 +0,0 @@
-@use '../../scss/mixins/responsive.scss' as responsive;
-@use '../../scss/mixins/shadows.scss' as shadows;
-
-@mixin horizontalConfig($property) {
-  #{$property}: 24px;
-
-  &.center {
-    #{$property}: -100%;
-    left: 50%;
-    transform: translateX(-50%);
-    opacity: 0;
-    transition:
-      opacity 0.5s ease-in-out,
-      #{$property} 0.5s ease-in-out;
-
-    &.active {
-      #{$property}: 24px;
-      opacity: 1;
-    }
-  }
-}
-
-@mixin verticalConfig($property) {
-  #{$property}: -100%;
-  opacity: 0;
-  transition:
-    opacity 0.5s ease-in-out,
-    #{$property} 0.5s ease-in-out;
-
-  @include responsive.mobile-only() {
-    right: unset;
-    left: 50%;
-    transform: translateX(-50%);
-  }
-
-  &.active {
-    #{$property}: 24px;
-    opacity: 1;
-  }
-}
-
-:host {
-  display: block;
-  box-sizing: border-box;
-
-  .container {
-    position: fixed;
-    z-index: 99999;
-    display: flex;
-    box-sizing: border-box;
-    min-width: 320px;
-    height: fit-content;
-    padding: 16px;
-    border: 1px solid var(--color-base);
-    border-radius: 12px;
-    background-color: var(--neutral-purewhite);
-    overflow: hidden;
-    @include shadows.shadow-level4();
-
-    &.loader {
-      padding: 16px 16px 20px;
-    }
-
-    &.top {
-      @include horizontalConfig(top);
-    }
-
-    &.bottom {
-      @include horizontalConfig(bottom);
-    }
-
-    &.left {
-      @include verticalConfig(left);
-    }
-
-    &.right {
-      @include verticalConfig(right);
-    }
-
-    .content {
-      flex: 1 1 0;
-      display: flex;
-      flex-direction: column;
-      gap: 4px;
-    }
-
-    .default-icon {
-      margin-right: 12px;
-    }
-
-    .close-icon {
-      margin-left: 12px;
-      cursor: pointer;
-    }
-  }
-}