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

package/cura/forms/cura-textarea/cura-textarea.component.scss

@@ -1,173 +0,0 @@
-@use '../../scss/mixins/forms.scss' as forms;
-
-:host {
-  display: block;
-  box-sizing: border-box;
-  width: 100%;
-}
-
-.required {
-  color: var(--error-base);
-}
-
-.cura-input-group {
-  width: 100%;
-  font-family: var(--font-family);
-  text-align: left !important;
-
-  .char-counter {
-    margin-top: 4px;
-    text-align: right;
-    font-size: 12px;
-    color: var(--neutral-dark);
-    font-family: var(--font-family);
-  }
-
-  .helper-text {
-    margin-top: 8px;
-    color: var(--neutral-dark);
-  }
-
-  @include forms.cura-label;
-  @include forms.helper-text();
-
-  .cura-input-field {
-    width: 100%;
-    display: flex;
-    background-color: var(--neutral-purewhite);
-    border: 2px solid var(--neutral-medium);
-    border-radius: 4px;
-    color: var(--primary-base);
-    letter-spacing: 0.32px;
-    box-sizing: border-box;
-    overflow: hidden;
-
-    textarea {
-      flex: 1;
-      width: 100%;
-      background: transparent;
-      border: none;
-      outline: none;
-      color: var(--neutral-dark);
-      font-family: var(--font-family);
-      font-weight: var(--font-weight-medium);
-      font-size: 14px;
-      box-sizing: border-box;
-      padding: 8px 12px;
-      line-height: 20px;
-
-      &::placeholder {
-        color: var(--neutral-dark);
-      }
-    }
-  }
-
-  &:hover:not(.disabled):not(.success):not(.error):not(.isFocused) {
-    .cura-input-field {
-      border-color: var(--neutral-dark);
-
-      textarea {
-        color: var(--neutral-dark);
-
-        &::placeholder {
-          color: var(--neutral-dark);
-        }
-      }
-    }
-  }
-
-  &:focus-within {
-    .cura-input-field {
-      border: 2px solid var(--info-base) !important;
-      background-color: var(--neutral-purewhite);
-      outline: none;
-
-      textarea {
-        color: var(--neutral-black) !important;
-      }
-    }
-  }
-
-  &.small {
-    .cura-input-field textarea {
-      font-size: 12px;
-      line-height: 13px;
-      letter-spacing: 0.72px;
-    }
-
-    @include forms.helper-text() {
-      font-weight: var(--font-weight-regular);
-    }
-  }
-
-  &.medium {
-    .cura-input-field textarea {
-      font-size: 14px;
-      line-height: 16px;
-      letter-spacing: 0.56px;
-    }
-
-    @include forms.helper-text() {
-      font-weight: var(--font-weight-regular);
-    }
-  }
-
-  &.large {
-    .cura-input-field textarea {
-      font-size: 16px;
-    }
-
-    @include forms.helper-text() {
-      font-weight: var(--font-weight-bold);
-    }
-  }
-
-  &.disabled .char-counter {
-    color: var(--neutral-medium);
-  }
-
-  &.disabled {
-    .cura-input-field {
-      background-color: var(--neutral-white);
-      border: 2px solid var(--neutral-base);
-
-      textarea {
-        color: var(--neutral-medium);
-
-        &::placeholder {
-          color: var(--neutral-medium);
-        }
-      }
-    }
-  }
-
-  &.success {
-    .cura-input-field {
-      border: 2px solid var(--success-dark) !important;
-      background-color: var(--success-lighter) !important;
-
-      textarea {
-        color: var(--success-darker) !important;
-
-        &::placeholder {
-          color: var(--success-darker) !important;
-        }
-      }
-    }
-  }
-
-  &.error {
-    .cura-input-field {
-      border: 2px solid var(--error-dark) !important;
-      background-color: var(--error-lighter) !important;
-
-      textarea {
-        color: var(--error-darker) !important;
-
-        &::placeholder {
-          color: var(--error-darker) !important;
-        }
-      }
-    }
-  }
-}

package/cura/forms/cura-textarea/cura-textarea.component.ts

@@ -1,226 +0,0 @@
-import { Component, input, output, signal, computed, inject, forwardRef, model } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { CuraApiService } from '@rededor/site-front-end-lib/cura/api';
-import { CuraLabelComponent } from '@rededor/site-front-end-lib/cura/forms/cura-label';
-import { LabelSize } from '@rededor/site-front-end-lib/cura/forms';
-import { TextareaSize, TextareaStatus, TextareaResize, TextareaValueChangeEvent } from './cura-textarea.definitions';
-
-@Component({
-  selector: 'cura-textarea',
-  imports: [CommonModule, FormsModule, CuraLabelComponent],
-  templateUrl: './cura-textarea.component.html',
-  styleUrls: ['./cura-textarea.component.scss'],
-  host: {
-    role: 'textbox',
-    '[attr.aria-multiline]': 'true',
-    '[attr.aria-disabled]': 'disabled()',
-    '[attr.aria-required]': 'required()',
-    '[attr.aria-invalid]': 'status() === "error"',
-  },
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => CuraTextareaComponent),
-      multi: true,
-    },
-  ],
-})
-export class CuraTextareaComponent implements ControlValueAccessor {
-  private curaApi: CuraApiService = inject(CuraApiService);
-
-  /**
-   * Status of the textarea component
-   */
-  status = input<TextareaStatus>('default');
-
-  /**
-   * Size of the textarea component
-   */
-  size = input<TextareaSize>('medium');
-
-  /**
-   * Label text for the textarea
-   */
-  label = input<string>('');
-
-  /**
-   * Name attribute for the textarea
-   */
-  name = input<string>('');
-
-  /**
-   * Placeholder text for the textarea
-   */
-  placeholder = input<string | null>(null);
-
-  /**
-   * Current value of the textarea
-   */
-  value = model<string>('');
-
-  /**
-   * Whether the textarea is disabled
-   */
-  disabled = input<boolean>(false);
-
-  /**
-   * Whether the textarea is required
-   */
-  required = input<boolean>(false);
-
-  /**
-   * Whether the textarea is read-only
-   */
-  readOnly = input<boolean>(false);
-
-  /**
-   * Maximum length of the textarea value
-   */
-  maxlength = input<number | undefined>(undefined);
-
-  /**
-   * Number of visible text rows
-   */
-  rows = input<number>(3);
-
-  /**
-   * Resize behaviour of the textarea
-   */
-  resize = input<TextareaResize>('none');
-
-  /**
-   * Event emitted when the value changes
-   */
-  valueChange = output<TextareaValueChangeEvent>();
-
-  // Internal state signals
-  private isHovered = signal<boolean>(false);
-  private isFocused = signal<boolean>(false);
-
-  // Form control callbacks
-  private onChange = (value: string) => {};
-  private onTouched = () => {};
-
-  // ControlValueAccessor implementation
-  writeValue(value: string): void {
-    this.value.set(value ?? '');
-  }
-
-  registerOnChange(fn: (value: string) => void): void {
-    this.onChange = fn;
-  }
-
-  registerOnTouched(fn: () => void): void {
-    this.onTouched = fn;
-  }
-
-  currentLength = computed(() => this.value()?.length ?? 0);
-
-  // Computed styles
-  styles = computed(() => {
-    const { fonts, colors } = this.curaApi?.theme || { fonts: null, colors: null };
-
-    const baseStyles: { [key: string]: string } = {};
-
-    if (fonts) {
-      const fontWeights = fonts.getWeights();
-      baseStyles['--font-weight-medium'] = fontWeights.medium;
-      baseStyles['--font-weight-bold'] = fontWeights.bold;
-      baseStyles['--font-weight-regular'] = fontWeights.regular;
-      baseStyles['--font-color'] = fonts.getColor();
-      baseStyles['--font-family'] = fonts.getFamily();
-      baseStyles['--font-size'] = fonts.getSize();
-    }
-
-    if (colors) {
-      const colorKeys = [
-        'primary-base',
-        'neutral-purewhite',
-        'neutral-white',
-        'neutral-black',
-        'neutral-medium',
-        'neutral-base',
-        'neutral-dark',
-        'success-dark',
-        'success-darker',
-        'success-lighter',
-        'error-lighter',
-        'error-dark',
-        'error-darker',
-        'error-base',
-        'info-base',
-      ];
-
-      colorKeys.forEach((key) => {
-        baseStyles[`--${key}`] = colors.getColor(key);
-      });
-    }
-
-    return baseStyles;
-  });
-
-  // Computed signals
-  classes = computed(() => ({
-    [this.size().toLowerCase()]: true,
-    disabled: this.disabled(),
-    isFocused: this.isFocused() && !this.disabled() && !this.readOnly(),
-    isHovered: this.isHovered(),
-    [this.status()]: true,
-  }));
-
-  labelColor = computed(() => {
-    if (this.disabled()) {
-      return 'neutral-medium';
-    } else if ((this.isFocused() || this.isHovered() || this.status() === 'success' || this.status() === 'error') && !this.readOnly()) {
-      return 'neutral-black';
-    } else {
-      return 'neutral-dark';
-    }
-  });
-
-  helperText = computed((): { size: LabelSize; color: string } => {
-    const isError = this.status() === 'error';
-    const isSuccess = this.status() === 'success';
-    const isDefault = this.status() === 'default';
-    const helperTextSize: LabelSize = this.size() === 'large' ? 'small' : 'xsmall';
-
-    const colorText = (() => {
-      if (this.disabled()) return 'neutral-medium';
-      if (this.isFocused() || this.isHovered()) return 'neutral-black';
-      return 'neutral-dark';
-    })();
-
-    return {
-      size: helperTextSize,
-      color: isDefault ? colorText : isError ? 'error-dark' : isSuccess ? 'success-dark' : colorText,
-    };
-  });
-
-  // Event handlers
-  handleMouseEnter(): void {
-    this.isHovered.set(true);
-  }
-
-  handleMouseLeave(): void {
-    this.isHovered.set(false);
-  }
-
-  handleFocus(): void {
-    this.isFocused.set(true);
-  }
-
-  handleBlur(): void {
-    this.onTouched();
-    setTimeout(() => {
-      this.isFocused.set(false);
-    }, 150);
-  }
-
-  handleInputChange(event: Event): void {
-    const newValue = (event.target as HTMLTextAreaElement).value;
-    this.value.set(newValue);
-    this.onChange(newValue);
-    this.valueChange.emit({ value: newValue });
-  }
-}

package/cura/forms/cura-textarea/cura-textarea.definitions.ts

@@ -1,24 +0,0 @@
-/**
- * Size options for the textarea component
- */
-export type TextareaSize = 'small' | 'medium' | 'large';
-
-/**
- * Status options for the textarea component
- */
-export type TextareaStatus = 'success' | 'error' | 'default';
-
-/**
- * Resize behaviour options for the textarea component
- */
-export type TextareaResize = 'none' | 'both' | 'horizontal' | 'vertical';
-
-/**
- * Event payload emitted when the textarea value changes
- */
-export interface TextareaValueChangeEvent {
-  /**
-   * The new value of the textarea
-   */
-  value: string;
-}

package/cura/forms/cura-textarea/index.ts

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

package/cura/forms/cura-textarea/ng-package.json

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

package/cura/forms/cura-textarea/public-api.ts

@@ -1,2 +0,0 @@
-export * from './cura-textarea.component';
-export * from './cura-textarea.definitions';

package/cura/forms/index.ts

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

package/cura/forms/ng-package.json

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

package/cura/forms/public-api.ts

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

package/cura/icons/cura-icon/cura-icon.component.html

@@ -1,3 +0,0 @@
-<svg version="1.1" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg">
-  <use [attr.xlink:href]="iconPath()"></use>
-</svg>

package/cura/icons/cura-icon/cura-icon.component.scss

@@ -1,14 +0,0 @@
-:host {
-  width: var(--size);
-  height: var(--size);
-  display: inline-block;
-
-  svg {
-    display: inline-block;
-    stroke: var(--color);
-    width: var(--size);
-    height: var(--size);
-    stroke-width: var(--stroke);
-    fill: none;
-  }
-}

package/cura/icons/cura-icon/cura-icon.component.spec.ts

@@ -1,89 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { CuraIconComponent } from './cura-icon.component';
-import { CuraApiService } from '@rededor/site-front-end-lib/cura/api';
-
-describe('CuraIconComponent', () => {
-  let component: CuraIconComponent;
-  let fixture: ComponentFixture<CuraIconComponent>;
-  let mockCuraApiService: jasmine.SpyObj<CuraApiService>;
-
-  beforeEach(async () => {
-    const spy = jasmine.createSpyObj('CuraApiService', [], {
-      localAssetsPath: jasmine.createSpy('localAssetsPath').and.returnValue('/assets'),
-      theme: {
-        colors: {
-          getColor: jasmine.createSpy('getColor').and.returnValue('#000000'),
-        },
-      },
-    });
-
-    await TestBed.configureTestingModule({
-      imports: [CuraIconComponent],
-      providers: [{ provide: CuraApiService, useValue: spy }],
-    }).compileComponents();
-
-    mockCuraApiService = TestBed.inject(CuraApiService) as jasmine.SpyObj<CuraApiService>;
-
-    fixture = TestBed.createComponent(CuraIconComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('should have default values', () => {
-    expect(component.name()).toBe('');
-    expect(component.color()).toBe('neutral-base');
-    expect(component.size()).toBe('default');
-    expect(component.iconset()).toBe('default');
-    expect(component.disabled()).toBe(false);
-  });
-
-  it('should set CSS custom properties on initialization', () => {
-    const element = fixture.nativeElement;
-    expect(element.style.getPropertyValue('--size')).toBe('24px');
-    expect(element.style.getPropertyValue('--stroke')).toBe('2px');
-    expect(element.style.getPropertyValue('--color')).toBe('#000000');
-  });
-
-  it('should update CSS properties when size changes', () => {
-    fixture.componentRef.setInput('size', '32');
-    fixture.detectChanges();
-
-    const element = fixture.nativeElement;
-    expect(element.style.getPropertyValue('--size')).toBe('32px');
-    expect(element.style.getPropertyValue('--stroke')).toBe('2.25px');
-  });
-
-  it('should update color when disabled', () => {
-    fixture.componentRef.setInput('disabled', true);
-    fixture.detectChanges();
-
-    expect(mockCuraApiService.theme.colors.getColor).toHaveBeenCalledWith('neutral-light');
-  });
-
-  it('should generate correct SVG content', () => {
-    fixture.componentRef.setInput('name', 'test-icon');
-    fixture.componentRef.setInput('iconset', 'custom');
-    fixture.detectChanges();
-
-    const svgElement = fixture.nativeElement.querySelector('svg');
-    expect(svgElement).toBeTruthy();
-    expect(svgElement.getAttribute('viewBox')).toBe('0 0 24 24');
-
-    const useElement = svgElement.querySelector('use');
-    expect(useElement).toBeTruthy();
-    expect(useElement.getAttribute('xlink:href')).toBe('/assets/icons/iconset-custom.svg#test-icon');
-  });
-
-  it('should handle custom numeric size', () => {
-    fixture.componentRef.setInput('size', 48);
-    fixture.detectChanges();
-
-    const element = fixture.nativeElement;
-    expect(element.style.getPropertyValue('--size')).toBe('48px');
-    expect(element.style.getPropertyValue('--stroke')).toBe('4px'); // 2 * (48/24)
-  });
-});

package/cura/icons/cura-icon/cura-icon.component.ts

@@ -1,79 +0,0 @@
-import { Component, inject, input, computed } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { CuraApiService } from '@rededor/site-front-end-lib/cura/api';
-import { iconSizes, IconSizeType } from './cura-icon.definitions';
-
-@Component({
-  selector: 'cura-icon',
-  imports: [CommonModule],
-  templateUrl: './cura-icon.component.html',
-  styleUrls: ['./cura-icon.component.scss'],
-  host: {
-    role: 'img',
-    '[style.--size]': 'iconStyles().size',
-    '[style.--stroke]': 'iconStyles().stroke',
-    '[style.--color]': 'iconStyles().color',
-  },
-})
-export class CuraIconComponent {
-  private curaApi = inject(CuraApiService);
-
-  /**
-   * Name of the icon to be used from iconset.
-   */
-  name = input<string>('');
-
-  /**
-   * Color of the icon. Uses theme color tokens.
-   */
-  color = input<string>('neutral-base');
-
-  /**
-   * Size of the icon. Can be a predefined size or custom number.
-   */
-  size = input<IconSizeType>('default');
-
-  /**
-   * Custom iconset if needed.
-   */
-  iconset = input<string>('default');
-
-  /**
-   * Disabled state. Boolean.
-   */
-  disabled = input<boolean>(false);
-
-  // Computed signals
-  private assetsPath = computed(() => this.curaApi.localAssetsPath());
-
-  private iconSize = computed(() => {
-    const sizeValue = this.size();
-
-    const scaledStroke = (iconSize: string | number) => {
-      return iconSizes[iconSize].stroke * (iconSizes['default'].size / iconSizes[iconSize].size);
-    };
-
-    const size = iconSizes[`${sizeValue}`] ? iconSizes[sizeValue].size : iconSizes['default'].size;
-    const stroke = iconSizes[`${sizeValue}`] ? scaledStroke(sizeValue) : scaledStroke('default');
-
-    return { size, stroke };
-  });
-
-  private iconColor = computed(() => {
-    const colorValue = this.disabled() ? 'neutral-medium' : this.color();
-    return this.curaApi.theme.colors.getColor(colorValue);
-  });
-
-  iconPath = computed(() => {
-    return `${this.assetsPath()}/icons/iconset-${this.iconset()}.svg#${this.name()}`;
-  });
-
-  iconStyles = computed(() => {
-    const sizeData = this.iconSize();
-    return {
-      size: `${sizeData.size}px`,
-      stroke: `${sizeData.stroke}px`,
-      color: this.iconColor(),
-    };
-  });
-}

package/cura/icons/cura-icon/cura-icon.definitions.ts

@@ -1,20 +0,0 @@
-export interface IconSize {
-  size: number;
-  stroke: number;
-}
-
-export const iconSizes: Record<string, IconSize> = {
-  '128': { size: 128, stroke: 5.25 },
-  '72': { size: 72, stroke: 3.5 },
-  '64': { size: 64, stroke: 3.25 },
-  '48': { size: 48, stroke: 2.75 },
-  '40': { size: 40, stroke: 2.5 },
-  '32': { size: 32, stroke: 2.25 },
-  '24': { size: 24, stroke: 2 },
-  '20': { size: 20, stroke: 1.75 },
-  '16': { size: 16, stroke: 1.5 },
-  micro: { size: 12, stroke: 1.25 },
-  default: { size: 24, stroke: 2 },
-};
-
-export type IconSizeType = keyof typeof iconSizes | string | number;

package/cura/icons/cura-icon/index.ts

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

package/cura/icons/cura-icon/ng-package.json

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

package/cura/icons/cura-icon/public-api.ts

@@ -1,2 +0,0 @@
-export * from './cura-icon.component';
-export * from './cura-icon.definitions';

package/cura/loaders/cura-loader-bar/cura-loader-bar.component.html

@@ -1,3 +0,0 @@
-<div id="progress-bar" class="progress-bar" [ngStyle]="loaderStyles()">
-  <span class="progress-bar-fill"></span>
-</div>