af-connect-components 0.0.26 → 0.0.28

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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