@sarasanalytics-com/design-system 0.0.43 → 0.0.44

package/projects/component-library/src/lib/component-library.service.spec.ts

@@ -1,16 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-
-import { TestLibraryService } from './component-library.service';
-
-describe('TestLibraryService', () => {
-  let service: TestLibraryService;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-    service = TestBed.inject(TestLibraryService);
-  });
-
-  it('should be created', () => {
-    expect(service).toBeTruthy();
-  });
-});

package/projects/component-library/src/lib/component-library.service.ts

@@ -1,9 +0,0 @@
-import { Injectable } from '@angular/core';
-
-@Injectable({
-  providedIn: 'root'
-})
-export class TestLibraryService {
-
-  constructor() { }
-}

package/projects/component-library/src/lib/datepicker/datepicker.component.css

@@ -1,33 +0,0 @@
-::ng-deep .cdk-overlay-container {
-  --mat-datepicker-calendar-container-elevation-shadow: none;
-  --mat-datepicker-calendar-container-shape: 0px;
-  --mat-datepicker-calendar-date-selected-state-background-color: var(--primary-500);
-  --mat-datepicker-calendar-date-hover-state-background-color: var(--grey-50);
-  --mat-datepicker-calendar-date-in-range-state-background-color: var(--grey-50);
-  --mat-datepicker-calendar-date-focus-state-background-color: var(--grey-50);
-}
-
-::ng-deep .cdk-overlay-container .mat-datepicker-popup {
-  border-top: 1px solid var(--grey-50);
-  border-right: 1px solid var(--grey-50);
-  border-bottom: 1px solid var(--grey-50);
-  border-radius: var(--small-8px, 8px);
-  height: 356px;
-  padding: 12px;
-  margin-top: 0px;
-  margin-left: 180px;
-  background-color: white;
-}
-
-::ng-deep .cdk-overlay-container .mat-datepicker-content .mat-calendar {
-  box-shadow: none;
-  height: 300px;
-}
-
-::ng-deep .mat-calendar-content .mat-calendar-table-header-divider {
-  display: none;
-}
-
-.date-picker {
-  margin: 30px
-}

package/projects/component-library/src/lib/datepicker/datepicker.component.html

@@ -1,11 +0,0 @@
-<mat-form-field class="date-picker">
-  <mat-label>Choose a date</mat-label>
-  <mat-date-range-input [rangePicker]="picker" [formGroup]="range">
-    <input formControlName="start" matStartDate placeholder="Start date">
-    <input formControlName="end" matEndDate placeholder="End date">
-  </mat-date-range-input>
-  <mat-hint>MM/DD/YYYY</mat-hint>
-  <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
-  <mat-date-range-picker [calendarHeaderComponent]="CalendarHeaderComponent" #picker>
-  </mat-date-range-picker>
-</mat-form-field>

package/projects/component-library/src/lib/datepicker/datepicker.component.spec.ts

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

package/projects/component-library/src/lib/datepicker/datepicker.component.ts

@@ -1,36 +0,0 @@
-import { Component, Input } from '@angular/core';
-import { MatDatepickerModule } from '@angular/material/datepicker';
-import { MatInputModule } from '@angular/material/input';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatNativeDateModule } from '@angular/material/core';
-import { NgFor } from '@angular/common';
-import { NgIf } from '@angular/common';
-import { ReactiveFormsModule } from '@angular/forms';
-import { FieldType, FieldTypeConfig } from '@ngx-formly/core';
-import { CalendarHeaderComponent } from '../calendar-header/calendar-header.component';
-import { CommonModule } from '@angular/common';
-
-@Component({
-  selector: 'sa-datepicker',
-  standalone: true,
-  providers: [],
-  imports: [
-    MatFormFieldModule,
-    MatInputModule,
-    MatDatepickerModule,
-    NgFor,
-    NgIf,
-    ReactiveFormsModule,
-    CalendarHeaderComponent,
-    CommonModule,
-    MatNativeDateModule
-  ],
-  templateUrl: './datepicker.component.html',
-  styleUrl: './datepicker.component.css'
-})
-export class DatepickerComponent extends FieldType<FieldTypeConfig> {
-  @Input() range: any;
-
-  readonly CalendarHeaderComponent = CalendarHeaderComponent;
-
-}

package/projects/component-library/src/lib/form-input/form-input.component.css

@@ -1,164 +0,0 @@
-* {
-    --error-red: #e25c61
-}
-
-.idle {
-    --border: 1px solid var(--grey-50);
-}
-
-.focus {
-    --border: 1px solid var(--primary-300);
-}
-.masked{
-    font-size: 28px;
-    font-weight: 500;
-    padding-top: 4px;
-}
-
-.disabled .sa-input-field,
-[disabled] {
-    /* border: 1px solid var(--grey-50) !important; */
-    background-color: #FAFAFA;
-    cursor: not-allowed;
-}
-.disabled .sa-input-field input{
-    color: #989DA3
-}
-
-/* .sa-input-field>input:focus-visible, .sa-input-field>input:focus-visible {
-    --border: 1px solid var(--primary-300);
-} */
-.sa-input-field>input,
-.sa-input-field>input:focus-visible {
-    --border: 1px solid var(--primary-300);
-    border: none;
-    outline: none;
-}
-
-.sa-input-field:hover {
-    --border: 1px solid var(--primary-300);
-    --font-color: var(--text-highemphasis);
-}
-
-.sa-input-field sa-icon{
-    color: var(--icon-grey1);
-}
-
-.sa-input-field>input:focus-visible~sa-icon,
-.sa-input-field:hover sa-icon {
-    color: var(--primary-300);
-}
-
-.sa-input-field.invalid>input,
-.sa-input-field.invalid sa-icon,
-.sa-input-field.invalid .sa-input-pretext {
-    color: #e25c61 !important;
-}
-
-.sa-input-field.invalid {
-    --border: 1px solid #e25c61;
-}
-
-.sa-input-field.invalid sa-icon {
-    --form-email-icon-color: #e25c61;
-}
-
-.sa-input-field.idle sa-icon {
-    --form-email-icon-color: #33961F;
-}
-
-.sa-input {
-    position: relative;
-    padding: 8px 0;
-}
-
-.sa-input-field {
-    width: 100%;
-    box-sizing: border-box;
-    position: relative;
-    display: inline-flex;
-    padding: 0px var(--small-12px);
-    height: 40px;
-    justify-content: center;
-    align-items: center;
-    border: var(--border);
-    border-radius: var(--small-4px);
-    font-size: 14px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 20px;
-    letter-spacing: 0.25px;
-    --font-color: var(--text-lowemphasis);
-}
-
-.sa-input-field input {
-    width: inherit;
-}
-
-.sa-input-tag {
-    position: absolute;
-    background: #fff;
-    padding: 2px 6px;
-    top: -1px;
-    left: 12px;
-    z-index: 2;
-    font-size: 11px;
-    font-weight: 500;
-    line-height: 16px;
-    letter-spacing: 0.5px;
-    text-align: left;
-    color: var(--text-lowemphasis);
-    /*989DA3*/
-}
-
-.support-label {
-    font-family: var(--font);
-    font-size: 11px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 16px;
-    letter-spacing: 0.5px;
-    color: var(--text-lowemphasis);
-    padding: var(--small-4px) var(--small-16px) 0px var(--small-16px);
-}
-
-.support-label.invalid {
-    color: var(--error-red);
-}
-
-.hide {
-    display: none;
-}
-
-.sa-input-big-label-container {
-    display: flex;
-    flex-direction: column;
-    gap: var(--small-8px, 8px);
-}
-
-.sa-input-big-label {
-    color: var(--text-highemphasis, #1C1B20);
-    font-family: var(--font-roboto, Roboto);
-    font-size: var(--medium-22px, 22px);
-    font-style: normal;
-    font-weight: 500;
-    line-height: var(--medium-28px, 28px);
-    margin: 0;
-}
-
-.sa-input-big-description {
-    color: var(--text-mediumemphasis, #6D6979);
-    font-family: var(--font-roboto, Roboto);
-    font-size: var(--small-14px, 14px);
-    font-style: normal;
-    font-weight: 400;
-    line-height: var(--medium-20px, 20px);
-    letter-spacing: 0.25px;
-    margin: 0;
-}
-
-.sa-input-container {
-    display: flex;
-    flex-direction: column;
-    gap: var(--medium-20px, 20px);
-}

package/projects/component-library/src/lib/form-input/form-input.component.html

@@ -1,55 +0,0 @@
-<div class="sa-input-container">
-    @if (!!props?.['bigLabel'] || !!props?.['bigDescription']) {
-        <div class="sa-input-big-label-container" [ngClass]="disabled ? 'disabled' : '' ">
-            <h2 class="sa-input-big-label">
-                {{props?.['bigLabel']}}
-            </h2>
-            <p class="sa-input-big-description">
-                {{props?.['bigDescription']}}
-            </p>
-        </div>
-    }
-    <div class="sa-input" [ngClass]="disabled ? 'disabled' : '' ">
-        @if(pretext || (!!inputVal?.length && (!!params?.placeholder || !!props?.placeholder))){
-        <span class="sa-input-tag">{{params?.placeholder || props?.placeholder}}</span>
-        }
-        <div class="sa-input-field" [ngClass]="formControl.invalid && formControl.touched ? 'invalid' : 'idle' "
-            (click)="onInputFieldClick($event)">
-            @if(pretext){
-            <div class="sa-input-pretext">
-                {{pretext}}
-            </div>
-            }
-    
-            <input
-                [ngClass]="(!!inputVal && (params?.type === 'password' || props?.type === 'password') && icon.name !== 'eyeOff') ? 'masked' : ''"
-                matInput [type]="type" value="" [pattern]="type==='tel' ? '[0-9]' : '' "
-                [disabled]="field.props.disabled || false"
-                [placeholder]="!pretext && props?.placeholder || params?.placeholder || ''" (focus)="onFocus()"
-                (blur)="onBlur()" (input)="onInput($event)" [(ngModel)]="inputVal" #formInput />
-    
-            @if(params?.type === 'password'){
-            <sa-icon class="flex" icon="eyeOutlined" [size]="icon.size || '24'" (click)="inputIconClick()"
-                [ngClass]="!icon.name || icon.name === 'eyeOutlined' ? '' : 'hide'"></sa-icon>
-            <sa-icon class="flex" icon="eyeOff" [size]="icon.size || '24'" (click)="inputIconClick()"
-                [ngClass]="icon.name === 'eyeOff' ? '' : 'hide'"></sa-icon>
-            }@else if(params?.type === 'email' && icon.show){
-            <sa-icon class="flex" [icon]="icon.name || 'checkCircleOutlined'" [size]="icon.size || '24'"
-                (click)="inputIconClick()" [ngClass]="showEmailIcon ? '' : 'hide'"></sa-icon>
-            }
-            @else if(icon.name){
-            <sa-icon class="flex" [icon]="icon.name" [size]="icon.size || '24'" [color]="icon.color || ''"
-                [ngClass]="icon.show ? '' : 'hide'"></sa-icon>
-            }
-    
-    
-            <!-- <sa-icon [icon]="icon" size="24" (click)="inputIconClick()"></sa-icon> -->
-        </div>
-        @if((!formControl.valid) || (params?.supportText)){
-        <div class="support-label" [ngClass]="formControl.invalid && formControl.touched ? 'invalid' : 'idle'">
-            <!-- {{!formControl.valid ? inputErrorText : params.supportText}} -->
-            {{getFormSupportText()}}
-        </div>
-        }
-    </div>
-</div>

package/projects/component-library/src/lib/form-input/form-input.component.spec.ts

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

package/projects/component-library/src/lib/form-input/form-input.component.ts

@@ -1,282 +0,0 @@
-import { Component, ElementRef, Input, ViewChild } from '@angular/core';
-import {
-  AbstractControl,
-  FormControl,
-  FormsModule,
-  ReactiveFormsModule,
-  Validators,
-} from '@angular/forms';
-import { FormlyModule } from '@ngx-formly/core';
-import { FieldType, FieldTypeConfig } from '@ngx-formly/core';
-import { NgSelectModule } from '@ng-select/ng-select';
-import { CommonModule } from '@angular/common';
-import {
-  getValidationMessage,
-  phoneNumberValidator,
-} from '../../utils/validators';
-import { IconComponent } from '../icon/icon.component';
-
-@Component({
-  selector: 'sa-input',
-  standalone: true,
-  imports: [
-    CommonModule,
-    FormsModule,
-    ReactiveFormsModule,
-    FormlyModule,
-    IconComponent,
-  ],
-  templateUrl: './form-input.component.html',
-  styleUrl: './form-input.component.css',
-})
-export class FormInputComponent extends FieldType<FieldTypeConfig> {
-  @ViewChild('formInput') formInput!: ElementRef;
-
-  @Input('icon') icon: IInputIcon;
-
-  pretext: string;
-
-  inputState = 'idle';
-  inputVal = '';
-  params: IInputParam | null;
-  dependent: AbstractControl<any, any> | null;
-  dependentVal: any = null;
-  // dynamicIcon: DynamicIcon | null;
-  // icon: IInputIcon | null;
-
-  type: string = '';
-  validators: any[];
-  asyncValidators: any[];
-
-  inputErrorText: string = 'invalid input';
-
-  showEmailIcon: boolean = false;
-  disabled: boolean = false;
-
-  private suppressOnBlur = false;
-
-  constructor() {
-    super();
-  }
-
-  ngOnInit() {
-    this.inputVal = this.field.props['value'] || this.model[this.key as string] || '';
-    this.disabled = this.field.props.disabled || false;
-    this.formControl?.setValue(this.inputVal);
-
-    this.params = this.field.props['params'];
-    this.icon = this.field.props['icon'] || {};
-    this.type = this.params?.type || '';
-
-    // this.dynamicIcon = this.field.props['dynamicIcon'];
-    this.setValidators();
-    this.setDependents();
-
-    this.formControl.statusChanges.subscribe((state) => {
-      if (this.type === 'email') {
-        if (!!this.inputVal && !this.formControl.touched) {
-          this.formControl.markAsTouched();
-        }
-        this.showEmailIcon =
-          state === 'VALID' ||
-          (state === 'INVALID' &&
-            this.formControl.hasError('invalid') &&
-            !!this.formControl.value);
-      }
-    });
-    this.formControl.valueChanges.subscribe((val) => {
-      this.formInput.nativeElement.value = val;
-    });
-  }
-
-  setValidators() {
-    this.validators = this.params?.validators || [];
-    this.asyncValidators = this.params?.asyncValidators || [];
-    this.formControl?.setValidators([
-      ...(this.type ? this.predefinedValidators[this.type] || [] : []),
-      ...this.validators,
-    ]);
-    if (this.asyncValidators)
-      this.formControl?.setAsyncValidators(this.asyncValidators);
-  }
-
-  /*
-    Assuming dependent field is a single select dropdown
-  */
-  setDependents() {
-    if (this.params?.dependent) {
-      this.dependent = this.form.get([this.params?.dependent]);
-
-      this.dependentVal = this.getDependentVal(this.dependent.value);
-      if (this.type === 'tel') {
-        this.pretext = this.dependentVal?.dial_code;
-      }
-
-      this.dependent?.valueChanges.subscribe((val) => {
-        this.dependentVal = this.getDependentVal(val);
-        this.formControl.reset();
-        this.formControl.setValue(this.inputVal);
-        if (this.type === 'tel') {
-          this.pretext = this.dependentVal?.dial_code;
-        }
-      });
-    }
-  }
-  getDependentVal(value: any) {
-    let dependentValue: any;
-    if (Array.isArray(value)) {
-      dependentValue = value.length ? value[0] : null;
-    } else {
-      dependentValue = value;
-    }
-    return dependentValue;
-  }
-
-  checkValidity(defaultInputState = 'focus') {
-    if (
-      this.formControl &&
-      !this.formControl.valid &&
-      this.formControl.touched &&
-      !this.formControl.pending
-    ) {
-      this.inputState = 'invalid';
-      this.inputErrorText =
-        getValidationMessage(this.formControl.errors) || 'invalid input';
-    } else {
-      this.inputState = defaultInputState;
-    }
-  }
-
-  onFocus() {
-    if (this.formControl.valid) this.inputState = 'focus';
-  }
-  onBlur() {
-    setTimeout(() => {
-      if (!this.suppressOnBlur) {
-        this.formControl.markAsTouched();
-        this.checkValidity('idle');
-      }
-      this.suppressOnBlur = false;
-    }, 200);
-  }
-
-  onInput(event: any) {
-    if (this.params?.type === 'tel') {
-      this.inputVal = this.inputVal.replace(/[^0-9()+\- ]/g, '');
-      this.inputVal = this.hyphenatePhoneNumber();
-    }
-
-    this.formControl?.setValue(this.inputVal);
-    this.checkValidity();
-    /*if (this.params?.eventListener) {
-      this.params?.eventListener({
-        type: IInputEventType.INPUT_CHANGE,
-        value: this.inputVal,
-        formControl: this.formControl
-      } as IInputEvent).then(this.onFieldCallback.bind(this));
-    }*/
-  }
-
-  hyphenatePhoneNumber() {
-    let newStr = '';
-    let i = 0;
-    let hyphenatedCount = 1;
-    const value = this.inputVal.replaceAll('-', '');
-    for (; i < value.length; i++) {
-      newStr = newStr + value.charAt(i);
-      if (!(hyphenatedCount % 3)) {
-        if (!((i + 1) % 10)) {
-          newStr = newStr + '-';
-          hyphenatedCount++;
-        }
-      } else if (
-        !((i + 1 - Math.floor(hyphenatedCount / 3)) % 3) &&
-        i + 1 < value.length
-      ) {
-        newStr = newStr + '-';
-        hyphenatedCount++;
-      }
-    }
-
-    return newStr;
-  }
-
-  onInputFieldClick(event: any = 'input') {
-    if (
-      event === 'input' ||
-      event.target.classList.contains('sa-input-field')
-    ) {
-      this.formInput.nativeElement.focus();
-      if (this.params?.type !== 'email')
-        setTimeout(() => {
-          this.formInput.nativeElement.setSelectionRange(
-            this.inputVal.length,
-            this.inputVal.length,
-          );
-        }, 10);
-    }
-  }
-
-  inputIconClick() {
-    if (this.params?.type === 'password') {
-      this.suppressOnBlur = true;
-      if (this.type === 'password') {
-        this.type = 'text';
-        this.icon.name = 'eyeOff';
-      } else {
-        this.type = 'password';
-        this.icon.name = 'eyeOutlined';
-      }
-      this.onInputFieldClick();
-    }
-  }
-
-  /*onFieldCallback(param: IInputParam) {
-    this.icon = param.icon || this.icon;
-    this.checkValidity();
-  }*/
-
-  getFormSupportText() {
-    if (this.formControl.invalid && this.formControl.touched) {
-      return getValidationMessage(this.formControl.errors) || 'invalid input';
-    } else {
-      return this.params?.supportText || '';
-    }
-  }
-
-  predefinedValidators: any = {
-    email: [Validators.email, Validators.required],
-    password: [Validators.required],
-    tel: [Validators.pattern('^[0-9 +\\-()]*$')],
-  };
-}
-
-export interface IInputIcon {
-  name: string;
-  show?: boolean;
-  color?: string;
-  size?: string;
-}
-
-export interface IInputParam {
-  validators?: any[];
-  asyncValidators?: any[];
-  supportText?: string;
-  placeholder?: string;
-  type?: string;
-  dependent?: string;
-  eventListener?: Function;
-  icon?: IInputIcon;
-  errors?: { [key: string]: any };
-}
-export interface IInputEvent {
-  type: IInputEventType;
-  value: string;
-  callBack: any;
-  formControl: FormControl;
-}
-export enum IInputEventType {
-  INPUT_CHANGE = 'INPUT_CHANGE',
-  STATE_CHANGE = 'STATE_CHANGE',
-  ICON_CLICK = 'ICON_CLICK',
-}