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

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

@@ -0,0 +1,55 @@
+@use '../../scss/mixins/buttons.scss' as buttons;
+
+:host {
+  @include buttons.button-host();
+
+  button,
+  a {
+    @include buttons.button-element() {
+      background-color: transparent;
+      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 var(--color-dark-neutral-purewhite);
+        border-radius: var(--border-radius);
+      }
+
+      &:not(.disabled):not(.isLoading):hover {
+        background-color: var(--color-lighter-color-darker);
+      }
+
+      &:not(.disabled):not(.inverted):not(.isLoading):active {
+        background-color: var(--color-light-color-darker);
+      }
+    }
+
+    @include buttons.button-sizes();
+
+    // Children Elements
+    @include buttons.button-container();
+    @include buttons.button-label();
+
+    @include buttons.button-icon();
+
+    // Disabled state
+    @include buttons.button-disabled() {
+      &::before {
+        border-color: var(--neutral-dark);
+      }
+    }
+
+    // FAB / Icon-only
+    @include buttons.button-icon-only-behavior();
+
+    // Loading State
+    @include buttons.button-loading();
+  }
+}

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

@@ -0,0 +1,57 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { CuraButtonOutlineComponent } from './cura-button-outline.component';
+
+describe('CuraButtonOutlineComponent', () => {
+  let component: CuraButtonOutlineComponent;
+  let fixture: ComponentFixture<CuraButtonOutlineComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [CuraButtonOutlineComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(CuraButtonOutlineComponent);
+    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.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 return correct symbol color', () => {
+    component.disabled = true;
+    expect(component.getSymbolColor()).toBe('neutral-dark');
+
+    component.disabled = false;
+    component.fontColor = 'light';
+    expect(component.getSymbolColor()).toBe('neutral-purewhite');
+
+    component.fontColor = 'dark';
+    component.color = 'primary';
+    expect(component.getSymbolColor()).toBe('primary-darker');
+  });
+});

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

@@ -0,0 +1,184 @@
+import { CommonModule } from '@angular/common';
+import { Component, input, output, HostListener, computed, inject } 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 { 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-outline',
+  imports: [CommonModule, CuraIconComponent, CuraLoaderCircleComponent, CuraLabelComponent],
+  templateUrl: './cura-button-outline.component.html',
+  styleUrls: ['./cura-button-outline.component.scss'],
+  host: {
+    '[attr.role]': 'href() ? "link" : type()',
+    '[attr.aria-disabled]': 'disabled()',
+    '[attr.href]': 'href()',
+  },
+})
+export class CuraButtonOutlineComponent {
+  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 background 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['--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();
+
+    const colorMappings = [
+      { name: '--color-dark-neutral-purewhite', theme: this.background() === 'light' ? `${this.color()}-dark` : 'neutral-purewhite' },
+      { name: '--color-lighter-color-darker', theme: this.background() === 'light' ? `${this.color()}-lighter` : `${this.color()}-darker` },
+      { name: '--color-light-color-darker', theme: this.background() === 'light' ? `${this.color()}-light` : `${this.color()}-lighter` },
+      { name: '--neutral-dark', theme: 'neutral-dark' },
+    ];
+
+    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.disabled()) return 'neutral-dark';
+    return this.fontColor() === 'light' ? 'neutral-purewhite' : `${this.color()}-darker`;
+  });
+
+  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-outline/index.ts

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

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

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

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

@@ -0,0 +1,27 @@
+<button
+  [class]="containerClasses()"
+  [ngStyle]="buttonStyles()"
+  [disabled]="disabled()"
+  [attr.aria-label]="ariaLabel()"
+  (click)="handleClick($event)"
+  (mouseenter)="handleMouseEnter()"
+  (mouseleave)="handleMouseLeave()"
+>
+  <div class="button-container">
+    @if (iconName() && iconPosition() !== 'right') {
+      <cura-icon [name]="iconName()" [size]="iconSize()" [color]="iconColor()" [disabled]="disabled()"> </cura-icon>
+    }
+
+    <cura-label class="label" [size]="labelSize()" lineHeight="0%" [color]="labelFontColor()" weight="regular">
+      <ng-content></ng-content>
+    </cura-label>
+
+    @if (counter()) {
+      <cura-badge-counter class="badge-number" [number]="counter()" [color]="color()" [disabled]="disabled()"> </cura-badge-counter>
+    }
+
+    @if (iconPosition() === 'right' && selected()) {
+      <cura-icon name="check" [size]="iconSize()" [color]="iconColor()" [disabled]="disabled()"> </cura-icon>
+    }
+  </div>
+</button>

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

@@ -0,0 +1,76 @@
+@use '../../scss/mixins/buttons.scss' as buttons;
+
+:host {
+  @include buttons.button-host();
+
+  button,
+  a {
+    @include buttons.button-element() {
+      background-color: var(--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 var(--color-border);
+        border-radius: var(--border-radius);
+      }
+
+      &:not(.disabled):hover {
+        background-color: var(--color-background-hover);
+        border-color: var(--color-border-hover-pressed);
+      }
+
+      &:focus {
+        border-color: var(--color-border) !important;
+      }
+    }
+
+    @include buttons.button-sizes();
+
+    @include buttons.button-label();
+
+    // Children Elements
+    @include buttons.button-container() {
+      flex-direction: row !important;
+
+      .badge-number {
+        margin-left: 10px;
+      }
+    }
+
+    @include buttons.button-icon();
+
+    // selected state
+    @include buttons.button-selected() {
+      background-color: var(--color-select);
+      border-color: var(--color-select);
+
+      &:not(.disabled):hover {
+        background-color: var(--color-border-hover-pressed);
+        border-color: var(--color-border-hover-pressed);
+      }
+
+      &:focus {
+        border-color: var(--color-select-focus) !important;
+      }
+
+      &.disabled {
+        background-color: var(--color-disable-select);
+        border-color: var(--color-disable-select);
+      }
+    }
+
+    // Disabled state
+    @include buttons.button-disabled() {
+      background-color: var(--neutral-white-primary-darker);
+      border-color: var(--color-border-disable-unselect);
+    }
+  }
+}

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

@@ -0,0 +1,96 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { CuraButtonSelectComponent } from './cura-button-select.component';
+
+describe('CuraButtonSelectComponent', () => {
+  let component: CuraButtonSelectComponent;
+  let fixture: ComponentFixture<CuraButtonSelectComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [CuraButtonSelectComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(CuraButtonSelectComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should have default properties', () => {
+    expect(component.selected).toBe(false);
+    expect(component.size).toBe('medium');
+    expect(component.disabled).toBe(false);
+    expect(component.background).toBe('light');
+    expect(component.color).toBe('primary');
+    expect(component.iconPosition).toBe('left');
+  });
+
+  it('should toggle selected state when clicked', () => {
+    spyOn(component.onclick, 'emit');
+    const event = new Event('click');
+
+    expect(component.selected).toBe(false);
+
+    component.handleClick(event);
+
+    expect(component.selected).toBe(true);
+    expect(component.onclick.emit).toHaveBeenCalledWith({ selected: true });
+
+    component.handleClick(event);
+
+    expect(component.selected).toBe(false);
+    expect(component.onclick.emit).toHaveBeenCalledWith({ selected: false });
+  });
+
+  it('should not toggle when disabled', () => {
+    component.disabled = true;
+    spyOn(component.onclick, 'emit');
+    const event = new Event('click');
+
+    component.handleClick(event);
+
+    expect(component.selected).toBe(false);
+    expect(component.onclick.emit).not.toHaveBeenCalled();
+  });
+
+  it('should return correct label font color', () => {
+    component.disabled = true;
+    expect(component.getLabelFontColor()).toBe('neutral-dark');
+
+    component.disabled = false;
+    component.background = 'dark';
+    component.selected = true;
+    expect(component.getLabelFontColor()).toBe('neutral-black');
+
+    component.selected = false;
+    expect(component.getLabelFontColor()).toBe('neutral-white');
+
+    component.background = 'light';
+    component.selected = true;
+    expect(component.getLabelFontColor()).toBe('neutral-white');
+
+    component.selected = false;
+    expect(component.getLabelFontColor()).toBe('neutral-black');
+  });
+
+  it('should return correct badge color', () => {
+    component.background = 'dark';
+    component.disabled = true;
+    component.selected = true;
+    expect(component.getColorBadgeNumber()).toBe('neutral-black');
+
+    component.selected = false;
+    expect(component.getColorBadgeNumber()).toBe('neutral-dark');
+
+    component.background = 'light';
+    component.disabled = true;
+    expect(component.getColorBadgeNumber()).toBe('neutral-medium');
+
+    component.disabled = false;
+    component.color = 'primary';
+    expect(component.getColorBadgeNumber()).toBe('primary-darker');
+  });
+});

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

@@ -0,0 +1,140 @@
+import { CommonModule } from '@angular/common';
+import { Component, input, output, model, HostListener, computed, inject } from '@angular/core';
+import { labelSizes, ButtonSize, IconPosition, BackgroundType } 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 { CuraLabelComponent } from '@rededor/site-front-end-lib/cura/forms/cura-label';
+import { LabelSize } from '@rededor/site-front-end-lib/cura/forms';
+import { CuraBadgeCounterComponent } from '@rededor/site-front-end-lib/cura/badges/cura-badge-counter';
+
+@Component({
+  selector: 'cura-button-select',
+  imports: [CommonModule, CuraIconComponent, CuraLabelComponent, CuraBadgeCounterComponent],
+  templateUrl: './cura-button-select.component.html',
+  styleUrls: ['./cura-button-select.component.scss'],
+  host: {
+    '[attr.role]': '"button"',
+    '[attr.aria-disabled]': 'disabled()',
+    '[attr.aria-pressed]': 'selected()',
+  },
+})
+export class CuraButtonSelectComponent {
+  private curaApi: CuraApiService = inject(CuraApiService);
+
+  selected = model<boolean>(false);
+  iconName = input<string>('');
+  size = input<ButtonSize>('medium');
+  counter = input<number | null>(null);
+  disabled = input<boolean>(false);
+  background = input<BackgroundType>('light');
+  color = input<string>('primary');
+  iconPosition = input<IconPosition>();
+
+  /**
+   * Accessible name for the button (aria-label).
+   * Required for icon-only buttons or when button text is not descriptive enough.
+   */
+  ariaLabel = input<string>('');
+
+  onclick = output<{ selected: boolean }>();
+
+  hovered = false;
+
+  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;
+
+    const colorMappings = [
+      { name: '--color-border', theme: this.background() === 'light' ? `${this.color()}-darker` : 'neutral-white' },
+      { name: '--color-border-hover-pressed', theme: this.background() === 'light' ? `${this.color()}-dark` : `${this.color()}-light` },
+      { name: '--color-background-hover', theme: this.background() === 'light' ? `${this.color()}-light` : `${this.color()}-dark` },
+      { name: '--color-select', theme: this.background() === 'light' ? `${this.color()}-base` : 'neutral-white' },
+      { name: '--color-select-hover-pressed', theme: this.background() === 'light' ? `${this.color()}-dark` : `${this.color()}-lighter` },
+      { name: '--color-select-focus', theme: this.background() === 'light' ? `${this.color()}-base` : `${this.color()}-lighter` },
+      { name: '--color-disable-select', theme: this.background() === 'light' ? 'neutral-white' : 'neutral-black' },
+      { name: '--color-border-disable-unselect', theme: 'neutral-dark' },
+      { name: '--color-counter-disabled', theme: this.background() === 'light' ? 'neutral-pale' : 'neutral-black' },
+      { name: '--color-counter', theme: !this.disabled() ? 'primary-lighter' : '' },
+    ];
+
+    colorMappings.forEach((mapping) => {
+      if (mapping.theme) {
+        styles[mapping.name] = this.curaApi.theme.colors.getColor(mapping.theme);
+      }
+    });
+
+    return styles;
+  });
+
+  containerClasses = computed(() => {
+    const classes = [];
+    classes.push(this.size()?.toLowerCase());
+
+    if (this.iconPosition()) {
+      classes.push(`icon-${this.iconPosition()?.toLowerCase()}`);
+    }
+
+    if (this.disabled()) classes.push('disabled');
+    if (this.selected()) classes.push('selected');
+
+    return classes.join(' ');
+  });
+
+  labelFontColor = computed(() => {
+    if (this.disabled()) return 'neutral-dark';
+
+    if (this.background() === 'dark') {
+      return this.selected() ? 'neutral-black' : 'neutral-white';
+    }
+    if (this.background() === 'light') {
+      return this.selected() ? 'neutral-white' : 'neutral-black';
+    }
+    return 'neutral-black';
+  });
+
+  iconSize = computed(() => {
+    return this.size() === 'large' ? '20' : '16';
+  });
+
+  iconColor = computed(() => {
+    if (this.disabled()) return 'neutral-dark';
+
+    if (this.background() === 'dark') {
+      return this.selected() ? 'neutral-black' : 'neutral-white';
+    }
+    if (this.background() === 'light') {
+      return this.selected() ? 'neutral-white' : 'neutral-black';
+    }
+    return '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()) {
+      event.preventDefault();
+    }
+
+    const newSelectedValue = !this.selected();
+    this.selected.set(newSelectedValue);
+    this.onclick.emit({ selected: newSelectedValue });
+  }
+}

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

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

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

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