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

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

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

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

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

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

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

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

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

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

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

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

package/cura/buttons/ng-package.json

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

package/cura/buttons/public-api.ts

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

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

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

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

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

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

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

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

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

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

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

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

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

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