af-connect-components 0.0.25 → 0.0.26

package/projects/af-connect-components/src/lib/af-connect-progress-bar/af-connect-progress-bar.component.ts

@@ -0,0 +1,34 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input } from '@angular/core';
+import { Subscription, interval, take } from 'rxjs';
+
+@Component({
+  selector: 'lib-af-connect-progress-bar',
+  templateUrl: './af-connect-progress-bar.component.html',
+  styleUrls: ['./af-connect-progress-bar.component.scss']
+})
+export class AfConnectProgressBarComponent {
+  constructor(private cdr: ChangeDetectorRef) {}
+  public progressBarTreshold = 30;
+  public progressCounter = 0;
+  public minimumProgressAnimation = 30;
+  @Input() withProgressAnimation = false;
+  public subscription = new Subscription();
+
+  @Input() progress: number;
+  @Input() primaryColor: 'primary-green' | 'primary-orange' = 'primary-green';
+  @Input() secondaryColor: 'orange' | 'transparent' | 'grey' = 'grey';
+
+  public ngAfterViewInit(): void {
+    this.minimumProgressAnimation = this.progress < this.progressBarTreshold ? this.progressBarTreshold : this.progress;
+    interval(11)
+      .pipe(take(this.minimumProgressAnimation || 100))
+      .subscribe(() => {
+        if (!this.withProgressAnimation) {
+          this.progressCounter = this.progress;
+        } else {
+          this.progressCounter++;
+        }
+        this.cdr.detectChanges();
+      });
+  }
+}

package/projects/af-connect-components/src/lib/af-connect-radio-button/af-connect-radio-button.component.html

@@ -0,0 +1,28 @@
+<div
+  class="field-container"
+  [ngClass]="{ 'label-before': labelPosition === 'before', 'size-box': size === 'box', checked: checked, disabled: disabled }"
+  [ngStyle]="{ 'flex-direction': itemOrder === 'left-to-right' ? 'row' : 'row-reverse' }"
+>
+  <div [ngClass]="['radio-container', variant]">
+    <input
+      #input
+      type="radio"
+      class="input"
+      [id]="inputId"
+      [checked]="checked"
+      [disabled]="disabled"
+      [attr.value]="value"
+      (change)="onChange($event)"
+      (blur)="onBlur()"
+    />
+    <div class="touch-target" (click)="onTouchTargetClick($event)"></div>
+    <div class="radio-visualization">
+      <span [class]="['outer-circle', variant]"></span>
+      <span *ngIf="variant === 'default'" class="inner-circle"></span>
+      <span *ngIf="variant === 'checkbox' || variant === 'cube'" class="check-mark"></span>
+    </div>
+  </div>
+  <label class="label" [for]="inputId">
+    <ng-content></ng-content>
+  </label>
+</div>

package/projects/af-connect-components/src/lib/af-connect-radio-button/af-connect-radio-button.component.scss

@@ -0,0 +1,204 @@
+.field-container {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  
+    &.label-before {
+      flex-direction: row-reverse;
+      justify-content: flex-end;
+    }
+  
+    &.size-box {
+      padding: 1.25rem;
+      justify-content: space-between;
+      border-radius: 5px;
+      box-shadow: 0px 1px 5px var(--box-shadow-black-color);
+      outline: 1px solid transparent;
+  
+      &.checked {
+        outline-color: var(--primary-dark-teal-color);
+        transition: outline-color 200ms;
+  
+        &.disabled {
+          outline-color: var(--disabled-radio-color);
+        }
+      }
+  
+      .label {
+        font-size: 1rem;
+      }
+    }
+  }
+  
+  .radio-container {
+    position: relative;
+    flex: 0 0 auto;
+    box-sizing: content-box;
+    width: 22px;
+    height: 22px;
+    
+    .touch-target {
+      position: absolute;
+      z-index: 10;
+      inset: 0;
+      cursor: pointer;
+    }
+  }
+  
+  .radio-visualization {
+    width: 22px;
+    height: 22px;
+    z-index: 2;
+    inset: 0;
+  
+    .inner-circle,
+    .outer-circle {
+      position: absolute;
+      z-index: 3;
+      display: inline-block;
+  
+      &.checkbox {
+        border-radius: 50%;
+      }
+  
+      &.cube {
+        border-radius: 20%;
+      }
+    }
+  
+    .outer-circle {
+      box-sizing: border-box;
+      width: 100%;
+      height: 100%;
+      top: 0;
+      left: 0;
+      border: 1px solid transparent;
+      background-color: var(--neutral-button-color);
+      transition-property: border-color, background-color;
+      transition-duration: 250ms;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    }
+  
+    .inner-circle {
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%) scale(0);
+      width: 10px;
+      height: 10px;
+      background-color: var(--primary-connected-orange-color);
+      transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
+    }
+  
+    .check-mark {
+      position: absolute;
+      z-index: 3;
+      display: inline-block;
+      top: 5px;
+      left: 12px;
+      width: 2px;
+      height: 12px;
+      background-color: transparent;
+      border-radius: 1px;
+      transform: rotate(35deg);
+  
+      &::before {
+        content: '';
+        position: absolute;
+        top: 8px;
+        right: 3px;
+        display: inline-block;
+        width: 2px;
+        height: 6px;
+        border-radius: 1px;
+        background-color: transparent;
+        transform: rotate(-80deg);
+      }
+    }
+  }
+  
+  .radio-container.checkbox,
+  .radio-container.cube {
+    .outer-circle {
+      border-color: var(--primary-dark-teal-color);
+      background-color: var(--main-white-color);
+    }
+  }
+  
+  .input {
+    appearance: none;
+    opacity: 0;
+    margin: 0;
+  
+    &:disabled~.touch-target {
+      cursor: auto;
+      pointer-events: none;
+    }
+  }
+  
+  .default .input {
+    &:checked~.radio-visualization .outer-circle {
+      border-color: var(--primary-connected-orange-color);
+      background-color: var(--radio-background-color);
+    }
+  
+    &:checked~.radio-visualization .inner-circle {
+      transform: translate(-50%, -50%) scale(1);
+    }
+  
+    &:disabled~.radio-visualization .outer-circle {
+      background-color: var(--neutral-button-color);
+      border-color: transparent;
+    }
+  
+    &:disabled:checked~.radio-visualization .inner-circle {
+      background-color: var(--disabled-radio-color);
+    }
+  }
+  
+  .checkbox .input,
+  .cube .input {
+    &:checked~.radio-visualization {
+      & .outer-circle {
+        background-color: var(--primary-dark-teal-color);
+      }
+  
+      & .check-mark {
+        background-color: var(--main-white-color);
+      }
+  
+      & .check-mark::before {
+        background-color: var(--main-white-color);
+      }
+    }
+  
+    &:disabled~.radio-visualization .outer-circle {
+      background-color: var(--neutral-button-color);
+      border-color: var(--neutral-button-color);
+    }
+  
+    &:disabled:checked~.radio-visualization {
+      & .check-mark {
+        background-color: var(--disabled-radio-color);
+      }
+  
+      & .check-mark::before {
+        background-color: var(--disabled-radio-color);
+      }
+    }
+  }
+  
+  .cube .input {
+    &:checked~.radio-visualization {
+      & .outer-circle {
+        background-color: var(--primary-connected-orange-color);
+        border: none;
+      }
+    }
+  }
+  
+  .label {
+    cursor: inherit;
+    font-size: 0.875rem;
+    font-family: var(--standard-font-family-hero-new);
+    color: var(--secondary-space-color);
+  }

package/projects/af-connect-components/src/lib/af-connect-radio-button/af-connect-radio-button.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AfConnectRadioButtonComponent } from './af-connect-radio-button.component';
+
+describe('AfConnectRadioButtonComponent', () => {
+  let component: AfConnectRadioButtonComponent;
+  let fixture: ComponentFixture<AfConnectRadioButtonComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ AfConnectRadioButtonComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(AfConnectRadioButtonComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/projects/af-connect-components/src/lib/af-connect-radio-button/af-connect-radio-button.component.ts

@@ -0,0 +1,101 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Input, ViewChild } from '@angular/core';
+import { AfConnectRadioGroupComponent } from '../af-connect-radio-group/af-connect-radio-group.component';
+import { RadioButtonLabelPosition, RadioButtonSize, RadioButtonVariant } from '../models/radio.model';
+
+// Increasing integer for generating unique ids for all afc-radio-button instances.
+let nextUniqueId = 0;
+
+@Component({
+  selector: 'lib-af-connect-radio-button',
+  templateUrl: './af-connect-radio-button.component.html',
+  styleUrls: ['./af-connect-radio-button.component.scss']
+})
+export class AfConnectRadioButtonComponent {
+  private _uniqueId: string = `afc-radio-${++nextUniqueId}`;
+  private _checked: boolean = false;
+  private _disabled: boolean = false;
+  private _variant: RadioButtonVariant = 'default';
+  private _labelPosition: RadioButtonLabelPosition = 'after';
+  private _size: RadioButtonSize = 'inline';
+
+  @Input() id: string = this._uniqueId;
+  @Input() value: string;
+  @Input() itemOrder: 'left-to-right' | 'right-to-left' = 'left-to-right';
+
+  @Input()
+  get checked(): boolean {
+    return this._checked;
+  }
+  set checked(newCheckedState: boolean) {
+    if (this._checked !== newCheckedState) {
+      this._checked = newCheckedState;
+      if (newCheckedState && this.radioGroup && this.radioGroup.value !== this.value) {
+        this.radioGroup.selected = this;
+      }
+      this.markForCheck();
+    }
+  }
+
+  @Input()
+  get disabled(): boolean {
+    return this._disabled || (this.radioGroup !== null && this.radioGroup.disabled);
+  }
+  set disabled(newValue: boolean) {
+    this._disabled = newValue;
+  }
+
+  @ViewChild('input') inputElement: ElementRef<HTMLInputElement>;
+
+  constructor(private radioGroup: AfConnectRadioGroupComponent, private changeDetector: ChangeDetectorRef) {}
+
+  get inputId(): string {
+    return `${this.id}-input`;
+  }
+
+  get variant(): RadioButtonVariant {
+    return this._variant;
+  }
+
+  get labelPosition(): RadioButtonLabelPosition {
+    return this._labelPosition;
+  }
+
+  get size(): RadioButtonSize {
+    return this._size;
+  }
+
+  ngOnInit() {
+    if (!this.radioGroup) {
+      this._variant = 'checkbox';
+    }
+    if (this.radioGroup) {
+      this.checked = this.radioGroup.value === this.value;
+      this._variant = this.radioGroup.variant;
+      this._labelPosition = this.radioGroup.labelPosition;
+      this._size = this.radioGroup.size;
+    }
+  }
+
+  markForCheck() {
+    this.changeDetector.markForCheck();
+  }
+
+  onTouchTargetClick(event: Event) {
+    this.onChange(event);
+
+    // Since the click comes from the touch target, we need
+    // to focus the native input element manually.
+    this.inputElement.nativeElement.focus();
+  }
+
+  onBlur(): void {
+    this.radioGroup.propagateTouch();
+  }
+
+  onChange(event: Event) {
+    event.stopPropagation();
+    if (!this.checked && !this.disabled) {
+      this.checked = true;
+    }
+  }
+}

package/projects/af-connect-components/src/lib/af-connect-radio-group/af-connect-radio-group.component.html

@@ -0,0 +1,6 @@
+<span *ngIf="label" class="label">
+  {{ label }}<span *ngIf="withAsterisk" class="asterisk">*</span>
+</span>
+<div class="radio-buttons-container" [class.column]="direction === 'column'">
+  <ng-content></ng-content>
+</div>

package/projects/af-connect-components/src/lib/af-connect-radio-group/af-connect-radio-group.component.scss

@@ -0,0 +1,28 @@
+:host {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+  
+  .radio-buttons-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 2rem;
+  
+    &.column {
+      flex-direction: column;
+      gap: 1rem;
+    }
+  }
+  
+  .label {
+    cursor: inherit;
+    display: block;
+    font-family: var(--standard-font-family-hero-new);
+    font-size: 12px;
+    color: var(--main-black-color);
+  
+    .asterisk {
+      color: var(--primary-orange-mobile-color);
+    }
+  }

package/projects/af-connect-components/src/lib/af-connect-radio-group/af-connect-radio-group.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AfConnectRadioGroupComponent } from './af-connect-radio-group.component';
+
+describe('AfConnectRadioGroupComponent', () => {
+  let component: AfConnectRadioGroupComponent;
+  let fixture: ComponentFixture<AfConnectRadioGroupComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ AfConnectRadioGroupComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(AfConnectRadioGroupComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/projects/af-connect-components/src/lib/af-connect-radio-group/af-connect-radio-group.component.ts

@@ -0,0 +1,111 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ContentChildren,
+  EventEmitter,
+  forwardRef,
+  Input,
+  Output,
+  QueryList
+} from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { AfConnectRadioButtonComponent } from '../af-connect-radio-button/af-connect-radio-button.component';
+import { RadioButtonLabelPosition, RadioButtonSize, RadioButtonVariant } from '../models/radio.model';
+
+@Component({
+  selector: 'lib-af-connect-radio-group',
+  templateUrl: './af-connect-radio-group.component.html',
+  styleUrls: ['./af-connect-radio-group.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => AfConnectRadioGroupComponent),
+      multi: true
+    }
+  ]
+})
+export class AfConnectRadioGroupComponent implements ControlValueAccessor {
+  private _value: string | null;
+  private _selected: AfConnectRadioButtonComponent | null = null;
+  private _disabled: boolean = false;
+  @Input() label: string;
+  @Input() direction: 'row' | 'column' = 'row';
+  @Input() withAsterisk: boolean = false;
+  @Input() variant: RadioButtonVariant = 'default';
+  @Input() labelPosition: RadioButtonLabelPosition = 'after';
+  @Input() size: RadioButtonSize = 'inline';
+
+  @Input()
+  get value(): string | null {
+    return this._value;
+  }
+  set value(newValue: string | null) {
+    if (this._value !== newValue) {
+      this._value = newValue;
+      this.updateRadioButtonsState();
+      this.propagateChange(this._value);
+      this.valueChange.emit(this._value);
+    }
+  }
+
+  @Input()
+  get selected() {
+    return this._selected;
+  }
+  set selected(newSelected: AfConnectRadioButtonComponent | null) {
+    this._selected = newSelected;
+    this.value = newSelected ? newSelected.value : null;
+  }
+
+  @Input()
+  get disabled(): boolean {
+    return this._disabled;
+  }
+  set disabled(newValue: boolean) {
+    this._disabled = newValue;
+    this.markRadiosForCheck();
+  }
+
+  @Output() readonly valueChange: EventEmitter<any> = new EventEmitter();
+  @ContentChildren(forwardRef(() => AfConnectRadioButtonComponent), { descendants: true })
+  radios: QueryList<AfConnectRadioButtonComponent>;
+
+  propagateChange: Function = (_: string) => {};
+  propagateTouch: Function = (_: string) => {};
+
+  writeValue(value: any) {
+    this.value = value;
+  }
+
+  registerOnChange(fn: (value: any) => void) {
+    this.propagateChange = fn;
+  }
+
+  registerOnTouched(fn: any) {
+    this.propagateTouch = fn;
+  }
+
+  setDisabledState?(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+  }
+
+  emitChangeEvent(): void {
+    this.valueChange.emit(this._value);
+  }
+
+  markRadiosForCheck() {
+    if (this.radios) {
+      this.radios.forEach((radio) => radio.markForCheck());
+    }
+  }
+
+  private updateRadioButtonsState(): void {
+    this.radios?.forEach((radio) => {
+      radio.checked = this._value === radio.value;
+      if (radio.checked) {
+        this._selected = radio;
+      }
+    });
+  }
+}

package/projects/af-connect-components/src/lib/af-connect-section/af-connect-section.component.html

@@ -0,0 +1 @@
+<ng-content></ng-content>

package/projects/af-connect-components/src/lib/af-connect-section/af-connect-section.component.scss

@@ -0,0 +1,8 @@
+:host {
+    display: block;
+    background-color: transparent;
+    height: fit-content;
+    opacity: 1;
+    box-sizing: border-box;
+    border-radius: var(--section-border-radius);
+  }

package/projects/af-connect-components/src/lib/af-connect-section/af-connect-section.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AfConnectSectionComponent } from './af-connect-section.component';
+
+describe('AfConnectSectionComponent', () => {
+  let component: AfConnectSectionComponent;
+  let fixture: ComponentFixture<AfConnectSectionComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ AfConnectSectionComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(AfConnectSectionComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/projects/af-connect-components/src/lib/af-connect-section/af-connect-section.component.ts

@@ -0,0 +1,13 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'lib-af-connect-section',
+  templateUrl: './af-connect-section.component.html',
+  styleUrls: ['./af-connect-section.component.scss']
+})
+export class AfConnectSectionComponent implements OnInit  {
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+}

package/projects/af-connect-components/src/lib/af-connect-section-header/af-connect-section-header.component.html

@@ -0,0 +1,17 @@
+<div class="header-container" [ngClass]="[
+ variant,
+    isStatic ? 'isStatic' : 'isExpandable',
+    (wrapper && wrapper.isExpanded$ | async) === true ? 'expanded' : '',
+    (wrapper && wrapper.isExpanded$ | async) === false ? 'collapsed' : ''
+  ]" (click)="toggleMobileContent()">
+  <div class="section-wrapper">
+    <div class="{{variant}}">
+      {{ title }}
+    </div>
+    <ng-content select="[icon]"></ng-content>
+    <div class="buttons-container">
+      <ng-content></ng-content>
+    </div>
+  </div>
+  <div *ngIf="isStatic" class="border-line"></div>
+</div>