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

package/cura/buttons/cura-button-transparent/cura-button-transparent.component.html

@@ -0,0 +1,47 @@
+<ng-template #button>
+  <ng-content></ng-content>
+</ng-template>
+
+@if (href()) {
+  <a
+    [href]="disabled() ? '' : href()"
+    [target]="target()"
+    [class]="containerClasses()"
+    [ngStyle]="buttonStyles()"
+    [attr.aria-label]="ariaLabel()"
+    (click)="handleClick($event)"
+    (mouseenter)="handleMouseEnter()"
+    (mouseleave)="handleMouseLeave()"
+  >
+    <span class="button-container">
+      @if (iconName()) {
+        <cura-icon [name]="iconName()" [size]="iconSize()" [color]="symbolColor()" [iconset]="iconset()" [disabled]="disabled()"> </cura-icon>
+      }
+      <cura-label class="label" [size]="labelSize()" lineHeight="normal" [color]="symbolColor()">
+        <ng-container *ngTemplateOutlet="button"></ng-container>
+      </cura-label>
+    </span>
+    <cura-loader-circle [size]="size()" [color]="symbolColor()"> </cura-loader-circle>
+  </a>
+} @else {
+  <button
+    [type]="type()"
+    [class]="containerClasses()"
+    [ngStyle]="buttonStyles()"
+    [disabled]="disabled()"
+    [attr.aria-label]="ariaLabel()"
+    (click)="handleClick($event)"
+    (mouseenter)="handleMouseEnter()"
+    (mouseleave)="handleMouseLeave()"
+  >
+    <span class="button-container">
+      @if (iconName()) {
+        <cura-icon [name]="iconName()" [size]="iconSize()" [color]="symbolColor()" [iconset]="iconset()" [disabled]="disabled()"> </cura-icon>
+      }
+      <cura-label class="label" [size]="labelSize()" lineHeight="normal" [color]="symbolColor()">
+        <ng-container *ngTemplateOutlet="button"></ng-container>
+      </cura-label>
+    </span>
+    <cura-loader-circle [size]="size()" [color]="symbolColor()"> </cura-loader-circle>
+  </button>
+}

package/cura/buttons/cura-button-transparent/cura-button-transparent.component.scss

@@ -0,0 +1,29 @@
+@use '../../scss/mixins/buttons.scss' as buttons;
+
+:host {
+  @include buttons.button-host();
+
+  button,
+  a {
+    @include buttons.button-element() {
+      background-color: transparent;
+      border: none;
+    }
+
+    @include buttons.button-sizes();
+
+    // Children Elements
+    @include buttons.button-container();
+    @include buttons.button-label();
+    @include buttons.button-icon();
+
+    // Disabled state
+    @include buttons.button-disabled();
+
+    // FAB / Icon-only
+    @include buttons.button-icon-only-behavior();
+
+    // Loading State
+    @include buttons.button-loading();
+  }
+}

package/cura/buttons/cura-button-transparent/cura-button-transparent.component.spec.ts

@@ -0,0 +1,63 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { CuraButtonTransparentComponent } from './cura-button-transparent.component';
+
+describe('CuraButtonTransparentComponent', () => {
+  let component: CuraButtonTransparentComponent;
+  let fixture: ComponentFixture<CuraButtonTransparentComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [CuraButtonTransparentComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(CuraButtonTransparentComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should have default properties', () => {
+    expect(component.type).toBe('button');
+    expect(component.size).toBe('large');
+    expect(component.disabled).toBe(false);
+    expect(component.isLoading).toBe(false);
+    expect(component.iconPosition).toBe('left');
+    expect(component.iconOnly).toBe(false);
+    expect(component.color).toBe('primary');
+    expect(component.fontColor).toBe('dark');
+    expect(component.textAlign).toBe('left');
+    expect(component.justify).toBe(false);
+  });
+
+  it('should emit buttonClick event when clicked', () => {
+    spyOn(component.buttonClick, 'emit');
+    const event = new Event('click');
+
+    component.handleClick(event);
+
+    expect(component.buttonClick.emit).toHaveBeenCalledWith(event);
+  });
+
+  it('should return correct symbol color based on state', () => {
+    component.disabled = true;
+    expect(component.getSymbolColor()).toBe('neutral-dark');
+
+    component.disabled = false;
+    component.hovered = true;
+    component.isLoading = false;
+    component.fontColor = 'light';
+    component.color = 'primary';
+    expect(component.getSymbolColor()).toBe('primary-light');
+
+    component.hovered = false;
+    component.fontColor = 'light';
+    expect(component.getSymbolColor()).toBe('neutral-white');
+
+    component.fontColor = 'dark';
+    component.color = 'primary';
+    expect(component.getSymbolColor()).toBe('primary-dark');
+  });
+});

package/cura/buttons/cura-button-transparent/cura-button-transparent.component.ts

@@ -0,0 +1,172 @@
+import { CommonModule } from '@angular/common';
+import { Component, input, output, HostListener, computed, inject } from '@angular/core';
+import { labelSizes, ButtonType, ButtonSize, IconPosition, FontColor, TextAlign } from '@rededor/site-front-end-lib/cura/buttons';
+import { CuraApiService } from '@rededor/site-front-end-lib/cura/api';
+import { CuraIconComponent } from '@rededor/site-front-end-lib/cura/icons/cura-icon';
+import { CuraLoaderCircleComponent } from '@rededor/site-front-end-lib/cura/loaders/cura-loader-circle';
+import { CuraLabelComponent } from '@rededor/site-front-end-lib/cura/forms/cura-label';
+import { LabelSize } from '@rededor/site-front-end-lib/cura/forms';
+
+@Component({
+  selector: 'cura-button-transparent',
+  imports: [CommonModule, CuraIconComponent, CuraLoaderCircleComponent, CuraLabelComponent],
+  templateUrl: './cura-button-transparent.component.html',
+  styleUrls: ['./cura-button-transparent.component.scss'],
+  host: {
+    '[attr.role]': 'href() ? "link" : type()',
+    '[attr.aria-disabled]': 'disabled()',
+    '[attr.href]': 'href()',
+  },
+})
+export class CuraButtonTransparentComponent {
+  private curaApi: CuraApiService = inject(CuraApiService);
+
+  /**
+   * Button type: button (default) | submit | reset
+   */
+  type = input<ButtonType>('button');
+
+  /**
+   * Button size: small | medium | large (default)
+   */
+  size = input<ButtonSize>('large');
+
+  /**
+   * Disabled state. Boolean.
+   */
+  disabled = input<boolean>(false);
+
+  /**
+   * Loading state. Boolean.
+   */
+  isLoading = input<boolean>(false);
+
+  /**
+   * Name of the icon to be used from iconset.
+   */
+  iconName = input<string>('');
+
+  /**
+   * Custom iconset if needed.
+   */
+  iconset = input<string>('default');
+
+  /**
+   * Icon position: left (default) | right.
+   */
+  iconPosition = input<IconPosition>('left');
+
+  /**
+   * Set button to FAB/icon only.
+   */
+  iconOnly = input<boolean>(false);
+
+  /**
+   * Property href switch button to link.
+   */
+  href = input<string>('');
+
+  /**
+   * Set target if link.
+   */
+  target = input<string>('_self');
+
+  /**
+   * Color base from color scheme. Default: primary.
+   */
+  color = input<string>('primary');
+
+  /**
+   * Set the font color to dark or light.
+   * Default: dark.
+   */
+  fontColor = input<FontColor>('dark');
+
+  /**
+   * Set text alignment for the button label.
+   * Values: left (default) | center | right.
+   */
+  textAlign = input<TextAlign>('left');
+
+  /**
+   * Justify icons and label inside the button.
+   * Values: false (default) | true.
+   */
+  justify = input<boolean>(false);
+
+  /**
+   * Accessible name for the button (aria-label).
+   * Required for icon-only buttons or when button text is not descriptive enough.
+   */
+  ariaLabel = input<string>('');
+
+  buttonClick = output<Event>();
+
+  hovered = false;
+
+  // Computed signal
+  buttonStyles = computed(() => {
+    const styles: { [key: string]: string } = {};
+
+    styles['--base-spacing'] = this.curaApi.theme.spacing.getSpacing();
+    styles['--neutral-white'] = this.curaApi.theme.colors.getColor('neutral-white');
+    styles['--neutral-base'] = this.curaApi.theme.colors.getColor('neutral-base');
+    styles['--neutral-dark'] = this.curaApi.theme.colors.getColor('neutral-dark');
+    styles['--font-size'] = this.curaApi.theme.fonts.getSize();
+    styles['--font-family'] = this.curaApi.theme.fonts.getFamily();
+    const weights = this.curaApi.theme.fonts.getWeights();
+    styles['--font-weight-medium'] = weights.medium;
+    styles['--text-align'] = this.textAlign();
+
+    return styles;
+  });
+
+  containerClasses = computed(() => {
+    const classes = [];
+    classes.push(this.size()?.toLowerCase());
+    classes.push(`icon-${this.iconPosition()?.toLowerCase()}`);
+
+    if (this.iconOnly()) classes.push('icon-only');
+    if (this.disabled()) classes.push('disabled');
+    if (this.isLoading()) classes.push('isLoading');
+    if (this.justify()) classes.push('justify');
+
+    return classes.join(' ');
+  });
+
+  iconSize = computed(() => {
+    return this.size() === 'large' ? '20' : '16';
+  });
+
+  symbolColor = computed(() => {
+    if (this.disabled()) return 'neutral-dark';
+    if (this.hovered && !this.isLoading()) {
+      return this.fontColor() === 'light' ? `${this.color()}-light` : `${this.color()}-darker`;
+    }
+    return this.fontColor() === 'light' ? 'neutral-white' : `${this.color()}-dark`;
+  });
+
+  labelSize = computed(() => {
+    return (labelSizes[this.size()] || labelSizes['default']) as LabelSize;
+  });
+
+  @HostListener('mouseenter')
+  handleMouseEnter() {
+    if (this.disabled()) return;
+    this.hovered = true;
+  }
+
+  @HostListener('mouseleave')
+  handleMouseLeave() {
+    this.hovered = false;
+  }
+
+  handleClick(event: Event) {
+    if (this.disabled() || this.isLoading()) {
+      event.preventDefault();
+      return;
+    }
+
+    this.buttonClick.emit(event);
+  }
+}

package/cura/buttons/cura-button-transparent/index.ts

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

package/cura/buttons/cura-button-transparent/ng-package.json

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

package/cura/buttons/cura-button-transparent/public-api.ts

@@ -0,0 +1 @@
+export * from './cura-button-transparent.component';

package/cura/buttons/cura-button.definitions.ts

@@ -0,0 +1,13 @@
+export const labelSizes = {
+  small: 'xsmall',
+  medium: 'small',
+  large: 'medium',
+  default: 'medium',
+};
+
+export type ButtonType = 'button' | 'reset' | 'submit';
+export type ButtonSize = 'small' | 'medium' | 'large';
+export type IconPosition = 'left' | 'right';
+export type BackgroundType = 'dark' | 'light';
+export type FontColor = 'dark' | 'light';
+export type TextAlign = 'left' | 'center' | 'right';

package/cura/buttons/index.ts

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

package/cura/buttons/ng-package.json

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

package/cura/buttons/public-api.ts

@@ -0,0 +1 @@
+export * from './cura-button.definitions';

package/cura/cards/cura-card/cura-card.component.html

@@ -0,0 +1,11 @@
+@if (isLink()) {
+  <!-- <a [class]="containerClasses()" [ngStyle]="cardStyles()" [target]="target()" [href]="href()"> -->
+  <a [class]="containerClasses()" [target]="target()" [href]="href()">
+    <ng-content></ng-content>
+  </a>
+} @else {
+  <!-- <div [class]="containerClasses()" [ngStyle]="cardStyles()"> -->
+  <div [class]="containerClasses()">
+    <ng-content></ng-content>
+  </div>
+}

package/cura/cards/cura-card/cura-card.component.scss

@@ -0,0 +1,167 @@
+@use '../../scss/mixins/shadows.scss' as shadows;
+
+:host {
+  display: block;
+  box-sizing: border-box;
+  font-size: var(--cura-font-size); // var(--font-size);
+  font-family: var(--cura-font-body); // var(--font-family);
+}
+
+a::ng-deep > *,
+div::ng-deep > * {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--cura-font-size); // var(--font-size);
+  font-family: var(--cura-font-body); // var(--font-family);
+}
+
+a {
+  display: block;
+  text-decoration: none !important;
+  color: inherit;
+}
+
+.solid {
+  background-color: rgb(255, 255, 255); // var(--neutral-purewhite);
+  border: 2px solid rgb(183, 183, 183); // var(--neutral-base);
+  border-radius: 12px;
+  overflow: hidden;
+  padding: 0px;
+  box-shadow: none;
+
+  ::ng-deep > * {
+    border-radius: 0;
+  }
+
+  &.hasPadding {
+    padding: 20px;
+
+    ::ng-deep > * {
+      border-radius: 4px !important;
+    }
+  }
+
+  &.hasShadow {
+    border: 2px solid rgb(183, 183, 183); // var(--neutral-base);
+    @include shadows.shadow-level2(rgb(38, 38, 38, 0.16));
+    // @include shadows.shadow-level2(--neutral-black-shadow);
+  }
+
+  &.cardLink {
+    background-color: rgb(255, 255, 255); // var(--neutral-purewhite);
+    border: 2px solid var(--cura-color-primary-500); // var(--primary-base);
+    border-radius: 12px;
+    padding: 0px;
+    box-shadow: none;
+    cursor: pointer;
+
+    ::ng-deep > * {
+      border-radius: 0px;
+    }
+
+    &:hover {
+      border: 2px solid var(--cura-color-primary-100) !important; // var(--primary-lighter) !important;
+    }
+
+    &.hasPadding {
+      padding: 20px;
+
+      ::ng-deep > * {
+        border-radius: 4px !important;
+      }
+
+      &:hover {
+        border: 2px solid var(--cura-color-primary-100) !important; // var(--primary-lighter) !important;
+      }
+    }
+
+    &.hasShadow {
+      border: 2px solid var(--cura-color-primary-500); // var(--primary-base);
+      @include shadows.shadow-level3(rgb(38, 38, 38, 0.16));
+      // @include shadows.shadow-level3(--neutral-black-shadow);
+    }
+
+    &:not(.hasPadding).hasShadow {
+      ::ng-deep > * {
+        border-radius: 12px !important;
+      }
+    }
+
+    &.dark {
+      background-color: rgb(255, 255, 255); // var(--neutral-purewhite);
+      border: 2px solid rgb(255, 255, 255); // var(--neutral-purewhite);
+
+      &:hover {
+        border: 2px solid var(--cura-color-primary-100); // var(--primary-lighter);
+      }
+    }
+  }
+}
+
+.transparent {
+  background-color: transparent;
+  border: 0;
+  border-radius: 12px;
+  padding: 0px;
+  overflow: hidden;
+
+  ::ng-deep > * {
+    border-radius: 12px;
+  }
+
+  &.hasPadding {
+    padding: 20px;
+
+    ::ng-deep > * {
+      border-radius: 4px;
+    }
+  }
+
+  &.cardLink {
+    background-color: transparent;
+    border: 2px solid var(--cura-color-primary-500); // var(--primary-base);
+    overflow: hidden;
+    border-radius: 12px;
+    padding: 0px;
+    box-shadow: none;
+
+    ::ng-deep > * {
+      border-radius: 0px !important;
+    }
+
+    &:hover {
+      border: 2px solid var(--cura-color-primary-100) !important; // var(--primary-lighter) !important;
+    }
+
+    &.light {
+      background-color: rgb(255, 255, 255); // var(--neutral-purewhite);
+      border: 2px solid var(--cura-color-primary-500); // var(--primary-base);
+
+      ::ng-deep > * {
+        border-radius: 12px !important;
+      }
+
+      &:hover {
+        border-color: var(--cura-color-primary-100) !important; // var(--primary-lighter) !important;
+      }
+    }
+
+    &.dark {
+      background-color: transparent;
+      border: 2px solid rgb(255, 255, 255); // var(--neutral-purewhite);
+
+      &:hover {
+        border: 0;
+      }
+    }
+
+    &.hasPadding {
+      padding: 20px;
+
+      ::ng-deep > * {
+        border-radius: 4px !important;
+      }
+    }
+  }
+}

package/cura/cards/cura-card/cura-card.component.ts

@@ -0,0 +1,89 @@
+import { Component, input, computed } from '@angular/core';
+import { CommonModule } from '@angular/common';
+// import { CuraApiService } from '@rededor/site-front-end-lib/cura/api';
+import { CardType, CardColorMode, CardTarget } from './cura-cards.definitions';
+
+@Component({
+  selector: 'cura-card',
+  imports: [CommonModule],
+  templateUrl: './cura-card.component.html',
+  styleUrls: ['./cura-card.component.scss'],
+})
+export class CuraCardComponent {
+  // private curaApi = inject(CuraApiService);
+
+  /**
+   * Determines whether the card should have padding.
+   * @default true
+   */
+  hasPadding = input<boolean>(true);
+
+  /**
+   * Determines whether the card should have a shadow effect.
+   * @default false
+   */
+  hasShadow = input<boolean>(false);
+
+  /**
+   * Sets the type of the card background.
+   * - 'solid': A solid background.
+   * - 'transparent': A transparent background.
+   * @default 'solid'
+   */
+  type = input<CardType>('solid');
+
+  /**
+   * Sets the color mode of the card.
+   * - 'light': Light mode for the card.
+   * - 'dark': Dark mode for the card.
+   * @default 'light'
+   */
+  colorMode = input<CardColorMode>('light');
+
+  /**
+   * The URL that the card should link to (if set).
+   * If not set, the card acts as a normal card.
+   */
+  href = input<string>('');
+
+  /**
+   * The target attribute for the link.
+   * Applicable only if `href` is set.
+   * @default '_self'
+   */
+  target = input<CardTarget>('_self');
+
+  containerClasses = computed(() => {
+    const classes = [];
+
+    classes.push(this.type());
+    classes.push(this.colorMode());
+
+    if (this.href()) classes.push('cardLink');
+    if (this.hasPadding()) classes.push('hasPadding');
+    if (this.hasShadow()) classes.push('hasShadow');
+
+    return classes.join(' ');
+  });
+
+  isLink = computed(() => {
+    return !!this.href();
+  });
+
+  // // Computed signal
+  // cardStyles = computed(() => {
+  //   const styles: { [key: string]: string } = {};
+
+  //   styles['--base-spacing'] = this.curaApi.theme.spacing.getSpacing();
+  //   styles['--neutral-purewhite'] = this.curaApi.theme.colors.getColor('neutral-purewhite');
+  //   styles['--neutral-base'] = this.curaApi.theme.colors.getColor('neutral-base');
+  //   styles['--neutral-black-shadow'] = this.curaApi.theme.colors.getColor('neutral-black', 0.16);
+  //   styles['--primary-lighter'] = this.curaApi.theme.colors.getColor('primary-lighter');
+  //   styles['--primary-base'] = this.curaApi.theme.colors.getColor('primary-base');
+  //   styles['--font-size'] = this.curaApi.theme.fonts.getSize();
+  //   styles['--font-family'] = this.curaApi.theme.fonts.getFamily();
+  //   styles['--font-weight-medium'] = this.curaApi.theme.fonts.getWeights().medium;
+
+  //   return styles;
+  // });
+}

package/cura/cards/cura-card/cura-cards.definitions.ts

@@ -0,0 +1,5 @@
+export type CardType = 'solid' | 'transparent';
+
+export type CardColorMode = 'light' | 'dark';
+
+export type CardTarget = '_self' | '_blank' | '_parent' | '_top';

package/cura/cards/cura-card/index.ts

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

package/cura/cards/cura-card/ng-package.json

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

package/cura/cards/cura-card/public-api.ts

@@ -0,0 +1 @@
+export * from './cura-card.component';

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

@@ -0,0 +1,21 @@
+<div [class]="'conteiner ' + containerClasses()" [ngStyle]="alertStyles()">
+  <cura-icon [name]="iconName()" class="icon-left" [size]="16" [color]="type() + '-dark'"> </cura-icon>
+
+  <div class="content">
+    @if (label()) {
+      <cura-heading class="title" size="xsmall" color="neutral-black" weight="bold" marginBlock="1px 0">
+        {{ label() }}
+      </cura-heading>
+    }
+
+    <cura-paragraph class="text" [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 (closeable()) {
+    <cura-icon name="close" [size]="16" color="error-dark" class="icon-right" (click)="handleClose()"> </cura-icon>
+  }
+</div>