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

package/cura/badges/cura-badge-pill/cura-badge-pill.component.scss

@@ -0,0 +1,74 @@
+@use '../../scss/mixins/spacing.scss' as spacing;
+
+:host {
+  display: inline-block;
+
+  .badge-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: #{spacing.$spacing-tiny};
+    padding: #{spacing.$spacing-tiny};
+    border-radius: var(--border-radius);
+    font-family: var(--cura-font-body); // var(--font-family);
+    font-size: var(--cura-font-size); // var(--font-size-base);
+    position: relative;
+    box-sizing: border-box;
+    width: fit-content;
+    height: #{spacing.$spacing-xs};
+    min-width: #{spacing.$spacing-xs};
+
+    background-color: var(--color-background);
+
+    &::before {
+      content: '';
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      left: 0px;
+      top: 0px;
+      box-sizing: border-box;
+      border: 1px solid transparent;
+      border-radius: var(--border-radius);
+      pointer-events: none;
+    }
+
+    &.icon-only {
+      cura-label {
+        display: none !important;
+      }
+    }
+
+    &.disabled {
+      background-color: rgb(233, 233, 233); // var(--color-background-disabled);
+    }
+
+    &.outline {
+      background-color: transparent;
+
+      &::before {
+        border: 1px solid var(--color-base);
+      }
+
+      &.disabled::before {
+        border: 1px solid rgb(146, 146, 146); // var(--color-outline-disabled);
+      }
+    }
+
+    &.transparent {
+      background-color: transparent;
+
+      &::before {
+        border: 1px solid transparent;
+      }
+
+      &.disabled {
+        background-color: transparent;
+      }
+    }
+
+    cura-icon {
+      display: flex;
+    }
+  }
+}

package/cura/badges/cura-badge-pill/cura-badge-pill.component.ts

@@ -0,0 +1,105 @@
+import { Component, inject, input, computed } from '@angular/core';
+import { CuraApiService } from '@rededor/site-front-end-lib/cura/api';
+import { CuraIconComponent } from '@rededor/site-front-end-lib/cura/icons/cura-icon';
+import { CuraLabelComponent } from '@rededor/site-front-end-lib/cura/forms/cura-label';
+import { BadgeType, BadgeColor } from '@rededor/site-front-end-lib/cura/badges';
+
+@Component({
+  selector: 'cura-badge-pill',
+  imports: [CuraIconComponent, CuraLabelComponent],
+  templateUrl: './cura-badge-pill.component.html',
+  styleUrls: ['./cura-badge-pill.component.scss'],
+  host: {
+    '[style.--border-radius]': 'borderRadius() || "2px"',
+    '[style.--color-background]': 'colorBackground()',
+    '[style.--color-base]': 'colorBase()',
+  },
+  // '[style.--base-spacing]': 'baseSpacing()',
+  // '[style.--font-family]': 'fontFamily()',
+  // '[style.--font-size]': 'fontSize()',
+  // '[style.--color-background-disabled]': 'colorBackgroundDisabled()',
+  // '[style.--color-outline-disabled]': 'colorOutlineDisabled()',
+})
+export class CuraBadgePillComponent {
+  private curaApi = inject(CuraApiService);
+
+  /**
+   * Badge type: solid | outline | transparent
+   */
+  type = input<BadgeType>('solid');
+
+  /**
+   * Color base from color scheme. Default: primary
+   */
+  color = input<BadgeColor>('primary');
+
+  /**
+   * Name of the icon to be used from iconset
+   */
+  iconName = input<string>('');
+
+  /**
+   * Custom iconset if needed
+   */
+  iconset = input<string>('default');
+
+  /**
+   * Disabled state. Boolean
+   */
+  disabled = input<boolean>(false);
+
+  /**
+   * Set badge to icon only. Boolean
+   */
+  iconOnly = input<boolean>(false);
+
+  /**
+   * Set border-radius.
+   */
+  borderRadius = input<string>('2px');
+
+  // Computed signals
+  colorBackground = computed(() => {
+    return this.curaApi.theme.colors.getColor(`${this.color()}-lighter`);
+  });
+
+  colorBase = computed(() => {
+    return this.curaApi.theme.colors.getColor(`${this.color()}-dark`);
+  });
+
+  // colorBackgroundDisabled = computed(() => {
+  //   return this.curaApi.theme.colors.getColor('neutral-pale');
+  // });
+
+  // colorOutlineDisabled = computed(() => {
+  //   return this.curaApi.theme.colors.getColor('neutral-medium');
+  // });
+
+  // baseSpacing = computed(() => {
+  //   return this.curaApi.theme.spacing.getSpacing();
+  // });
+
+  // fontFamily = computed(() => {
+  //   return this.curaApi.theme.fonts.getFamily();
+  // });
+
+  // fontSize = computed(() => {
+  //   return this.curaApi.theme.fonts.getSize();
+  // });
+
+  containerClasses = computed(() => {
+    const classes = [];
+
+    classes.push('badge-container');
+    classes.push(this.type());
+
+    if (this.iconOnly()) classes.push('icon-only');
+    if (this.disabled()) classes.push('disabled');
+
+    return classes.join(' ');
+  });
+
+  symbolColor = computed(() => {
+    return this.disabled() ? 'neutral-medium' : `${this.color()}-dark`;
+  });
+}

package/cura/badges/cura-badge-pill/index.ts

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

package/cura/badges/cura-badge-pill/ng-package.json

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

package/cura/badges/cura-badge-pill/public-api.ts

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

package/cura/badges/cura-badges.definitions.ts

@@ -0,0 +1,5 @@
+export type BadgeType = 'solid' | 'outline' | 'transparent';
+
+export type BadgeColor = 'primary' | 'secondary' | 'accent' | 'neutral' | 'info' | 'success' | 'warning' | 'error';
+
+export type BadgeSize = 'micro' | 'xsmall' | 'small' | 'medium' | 'large';

package/cura/badges/index.ts

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

package/cura/badges/ng-package.json

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

package/cura/badges/public-api.ts

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

package/cura/buttons/cura-button/cura-button.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/cura-button.component.scss

@@ -0,0 +1,66 @@
+@use '../../scss/mixins/buttons.scss' as buttons;
+
+:host {
+  @include buttons.button-host();
+
+  button,
+  a {
+    @include buttons.button-element() {
+      background-color: var(--color-base-neutral-purewhite);
+      box-sizing: border-box;
+      border: none;
+
+      &::before {
+        content: '';
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        left: 0px;
+        top: 0px;
+        box-sizing: border-box;
+        border: 2px solid transparent;
+        border-radius: var(--border-radius);
+      }
+
+      &:not(.disabled) {
+        &:not(.isLoading)::before {
+          border: 2px solid var(--color-base-color-light);
+        }
+
+        &:hover {
+          background: var(--color-base-color-light);
+          box-shadow: 0px 4px 8px 0px rgba(38, 38, 38, 0.16);
+        }
+        &:not(.isLoading):hover::before {
+          border-color: var(--color-dark-color-base);
+        }
+      }
+
+      &:not(.isLoading):not(.disabled):active {
+        background-color: var(--color-dark-color-light);
+      }
+      &:not(.isLoading):not(.disabled):active::before {
+        border-color: var(--color-dark-color-light);
+      }
+    }
+
+    @include buttons.button-shadow-behavior();
+    @include buttons.button-sizes();
+
+    // Children Elements
+    @include buttons.button-container();
+    @include buttons.button-label();
+    @include buttons.button-icon();
+
+    // Disabled state
+    @include buttons.button-disabled() {
+      background-color: var(--neutral-pale-neutral-black);
+    }
+
+    // FAB / Icon-only
+    @include buttons.button-icon-only-behavior();
+
+    // Loading State
+    @include buttons.button-loading();
+  }
+}

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

@@ -0,0 +1,105 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { CuraButtonComponent } from './cura-button.component';
+
+describe('CuraButtonComponent', () => {
+  let component: CuraButtonComponent;
+  let fixture: ComponentFixture<CuraButtonComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [CuraButtonComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(CuraButtonComponent);
+    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('accent');
+    expect(component.background).toBe('light');
+    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 not emit event when disabled', () => {
+    component.disabled = true;
+    spyOn(component.buttonClick, 'emit');
+    const event = new Event('click');
+
+    component.handleClick(event);
+
+    expect(component.buttonClick.emit).not.toHaveBeenCalled();
+  });
+
+  it('should not emit event when loading', () => {
+    component.isLoading = true;
+    spyOn(component.buttonClick, 'emit');
+    const event = new Event('click');
+
+    component.handleClick(event);
+
+    expect(component.buttonClick.emit).not.toHaveBeenCalled();
+  });
+
+  it('should generate correct classes', () => {
+    component.size = 'medium';
+    component.iconPosition = 'right';
+    component.iconOnly = true;
+    component.disabled = true;
+    component.isLoading = true;
+    component.justify = true;
+
+    const classes = component.getClasses();
+
+    expect(classes).toContain('medium');
+    expect(classes).toContain('icon-right');
+    expect(classes).toContain('icon-only');
+    expect(classes).toContain('disabled');
+    expect(classes).toContain('isLoading');
+    expect(classes).toContain('justify');
+  });
+
+  it('should return correct icon size', () => {
+    component.size = 'large';
+    expect(component.getIconSize()).toBe(20);
+
+    component.size = 'medium';
+    expect(component.getIconSize()).toBe(16);
+
+    component.size = 'small';
+    expect(component.getIconSize()).toBe(16);
+  });
+
+  it('should return correct symbol color', () => {
+    component.disabled = true;
+    expect(component.getSymbolColor()).toBe('neutral-dark');
+
+    component.disabled = false;
+    component.fontColor = 'light';
+    expect(component.getSymbolColor()).toBe('neutral-white');
+
+    component.fontColor = 'dark';
+    expect(component.getSymbolColor()).toBe('neutral-black');
+  });
+});

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

@@ -0,0 +1,184 @@
+import { Component, HostListener, input, output, inject, computed } from '@angular/core';
+import { labelSizes, ButtonType, ButtonSize, IconPosition, BackgroundType, FontColor, TextAlign } from '@rededor/site-front-end-lib/cura/buttons';
+import { CuraApiService } from '@rededor/site-front-end-lib/cura/api';
+import { CommonModule } from '@angular/common';
+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',
+  imports: [CommonModule, CuraIconComponent, CuraLoaderCircleComponent, CuraLabelComponent],
+  templateUrl: './cura-button.component.html',
+  styleUrls: ['./cura-button.component.scss'],
+  host: {
+    '[attr.role]': 'href() ? "link" : type()',
+    '[attr.aria-disabled]': 'disabled()',
+    '[attr.href]': 'href()',
+  },
+})
+export class CuraButtonComponent {
+  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: accent.
+   */
+  color = input<string>('accent');
+
+  /**
+   * Set the background color to dark or light.
+   */
+  background = input<BackgroundType>('light');
+
+  /**
+   * Set the font color to dark or light.
+   */
+  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['--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();
+
+    const colorMappings = [
+      { name: '--color-base-neutral-purewhite', theme: this.background() === 'light' ? `${this.color()}-base` : 'neutral-pale' },
+      { name: '--color-base-color-light', theme: this.background() === 'light' ? `${this.color()}-base` : `${this.color()}-lighter` },
+      { name: '--color-dark-color-light', theme: this.background() === 'light' ? `${this.color()}-dark` : `${this.color()}-light` },
+      { name: '--color-dark-color-base', theme: this.background() === 'light' ? `${this.color()}-dark` : `${this.color()}-base` },
+      { name: '--neutral-pale-neutral-black', theme: this.background() === 'light' ? 'neutral-pale' : 'neutral-black' },
+    ];
+
+    colorMappings.forEach((mapping) => {
+      styles[mapping.name] = this.curaApi.theme.colors.getColor(mapping.theme);
+    });
+
+    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.isLoading() && this.fontColor() === 'light') return 'neutral-white';
+    if (this.isLoading() && this.fontColor() === 'dark') return 'neutral-black';
+
+    return this.disabled() ? 'neutral-dark' : this.fontColor() === 'light' ? 'neutral-white' : 'neutral-black';
+  });
+
+  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/index.ts

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

package/cura/buttons/cura-button/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/public-api.ts

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

package/cura/buttons/cura-button-outline/cura-button-outline.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>
+}