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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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