@sarasanalytics-com/design-system 0.0.9 → 0.0.10

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

@@ -1,109 +0,0 @@
-* {
-    --error-red: #e25c61
-}
-
-.idle {
-    --border: 1px solid var(--grey-50);
-}
-
-.focus {
-    --border: 1px solid var(--primary-300);
-}
-
-.disabled,
-[disabled] {
-    border: 1px solid var(--grey-50) !important;
-}
-
-/* .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>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 {
-    color: #e25c61 !important;
-}
-
-.sa-input-field.invalid {
-    --border: 1px solid #e25c61;
-}
-
-.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;
-}

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

@@ -1,27 +0,0 @@
-<div class="sa-input">
-    @if(!!inputVal.length && !!params?.placeholder){
-    <span class="sa-input-tag">{{params?.placeholder}}</span>
-    }
-    <div class="sa-input-field" [ngClass]="inputState" (click)="onInputFieldClick($event)">
-        <input matInput [type]="type" value="" [pattern]="type==='tel' ? '[0-9]' : '' "
-            [placeholder]="params?.placeholder || '' " (focus)="onFocus()" (blur)="onBlur()" (input)="onInput($event)"
-            [(ngModel)]="inputVal" #formInput />
-        @if(params?.type === 'password'){
-        <sa-icon icon="eye" size="24" (click)="inputIconClick()"
-            [ngClass]="!icon.name || icon.name === 'eye' ? '' : 'hide'"></sa-icon>
-        <sa-icon icon="eye_filled" size="24" (click)="inputIconClick()"
-            [ngClass]="icon.name === 'eye_filled' ? '' : 'hide'"></sa-icon>
-        } @else if(icon.name){
-        <sa-icon [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((inputState === 'invalid') || (params && params.supportText)){
-    <div class="support-label" [ngClass]="inputState === 'invalid' ? inputState : '' ">
-        {{inputState === 'invalid' ? inputErrorText : params.supportText}}
-    </div>
-    }
-</div>

package/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/src/lib/form-input/form-input.component.ts

@@ -1,196 +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 { BrowserModule } from '@angular/platform-browser';
-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;
-
-  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';
-
-  private suppressOnBlur = false;
-
-  constructor() {
-    super();
-
-  }
-
-  ngOnInit() {
-    this.inputVal = this.field.props['value'];
-    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) => {
-      // console.log(state, this.formControl.pending, this.formControl.valid);
-    })
-    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.dependent?.valueChanges.subscribe((val) => {
-        this.dependentVal = val.length ? val[0] : null;
-        this.formControl.reset();
-      })
-    }
-  }
-
-  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.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));
-    }
-  }
-
-  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 = 'eye_filled';
-      } else {
-        this.type = 'password';
-        this.icon.name = 'eye';
-      }
-      this.onInputFieldClick();
-    }
-  }
-
-  onFieldCallback(param: IInputParam) {
-    console.log(this.icon, param.icon);
-    this.icon = param.icon || this.icon;
-    this.checkValidity();
-  }
-
-  predefinedValidators: any = {
-    email: [Validators.email, Validators.required],
-    password: [Validators.minLength(8), 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'
-}

package/src/lib/form-select/form-select.component.css

@@ -1,157 +0,0 @@
-.idle {
-  --border: 1px solid var(--grey-50);
-}
-
-.activated {
-  --border: 1px solid var(--primary-300);
-}
-
-.disabled {
-  border: 1px solid var(--grey-50) !important;
-}
-
-.ng-select-field:hover {
-  --border: 1px solid var(--primary-300);
-  --font-color: var(--text-highemphasis);
-}
-
-.ng-select-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-family: var(--font);
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 20px;
-  letter-spacing: 0.25px;
-  --font-color: var(--text-lowemphasis);
-}
-
-.ng-select {
-  width: inherit;
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  flex-shrink: 0;
-}
-
-.ng-select ::ng-deep .ng-select-container {
-  display: inline-flex;
-
-  justify-content: center;
-  align-items: center;
-  flex-shrink: 0;
-  font-family: var(--font);
-  box-sizing: border-box;
-  border: none;
-}
-
-.ng-select ::ng-deep .ng-dropdown-panel {
-  margin-top: 2px;
-  border: 1px solid var(--grey-50);
-  box-shadow: none !important;
-}
-
-.ng-select ::ng-deep .ng-select-container {
-  box-shadow: none !important;
-  position: relative !important;
-  z-index: 1 !important;
-}
-
-.ng-select ::ng-deep .ng-value-container {
-  padding: 0 !important;
-  flex-wrap: nowrap !important;
-  display: flex;
-  justify-content: flex-start;
-  gap: 5px;
-  overflow-x: hidden;
-}
-
-.ng-select ::ng-deep .ng-value {
-  flex: none;
-  margin: 0 !important;
-}
-
-.overflow-label {
-  padding: 0px 5px;
-  cursor: pointer;
-}
-
-.ng-select ::ng-deep .ng-placeholder {
-  padding: 0 !important;
-  position: inherit !important;
-  color: var(--text-lowemphasis);
-}
-
-.ng-select ::ng-deep .ng-input {
-  padding: 0 !important;
-  position: inherit !important;
-}
-
-.ng-select ::ng-deep .ng-clear-wrapper {
-  z-index: 9;
-  display: flex;
-  margin-left: 5px;
-}
-
-
-.ng-select ::ng-deep .ng-arrow {
-  border-color: none !important;
-  border-style: none !important;
-  border-width: 0 !important;
-}
-
-.svg-icon {
-  mask-size: contain;
-  width: 20px;
-  height: 20px;
-  background-color: grey;
-}
-
-.svg-icon:hover {
-  cursor: pointer;
-}
-
-.ng-select ::ng-deep .ng-arrow-wrapper {
-  display: none;
-}
-
-.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);
-}
-
-.clicked-label {
-  position: relative;
-  width: max-content;
-
-  font-family: var(--font);
-  font-size: 11px;
-  font-style: normal;
-  font-weight: 500;
-  line-height: 16px;
-  letter-spacing: 0.5px;
-
-  color: var(--text-lowemphasis);
-
-  padding: 0 var(--small-8px);
-  margin-left: 12px;
-  margin-bottom: -8px;
-  z-index: 99;
-
-  background-color: white;
-}

package/src/lib/form-select/form-select.component.html

@@ -1,38 +0,0 @@
-<div [style.visibility]="(openState || topLabel) ? 'visible' : 'hidden'" class="clicked-label">{{params.label}}</div>
-<div class="ng-select-field {{openState ? 'activated' : 'idle'}} {{field.props.disabled ? 'disabled' : ''}}">
-
-  <div role="button" title="drop-button" tabindex="0" class="left-icon svg-icon" [style]="svgStyle"
-    (click)="openClose(true)" (blur)="openClose(false)"
-    *ngIf="(params.dropIconPosition == 'left' || params.dropIconPosition == 'both')">
-  </div>
-
-  <ng-select (change)="checkForZero($event)" (remove)="shiftLabel('removed')" (clear)="shiftLabel('cleared')"
-    (search)="openClose(true)" (focus)="openClose(true)" (blur)=" openClose(false)" [isOpen]="openState"
-    placeholder={{params.label}} bindLabel="name" [items]="selectables" [multiple]="params.multiple"
-    [formControl]="formControl" [style] [formlyAttributes]="field">
-    <ng-template ng-multi-label-tmp let-items="items" let-clear="clear">
-      <div *ngFor="let item of (items ? items.slice(startInd,startInd+labelLimit): [])">
-        <sa-chip (onClickEvent)=" (!field.props.disabled) ?  clear(item) : null" [id]="item.id"
-          [iconPath]="params.iconPath" [text]="item.name" [type]="params.type"
-          [state]="field.props.disabled ? 'neutral' : params.state" [filling]="params.filling"
-          [iconPosition]="params.iconPosition">
-        </sa-chip>
-      </div>
-      <div (click)="shiftLabel('clicked')" class="ng-value overflow-label" *ngIf="items.length > (startInd+labelLimit)">
-        <sa-chip text="+{{items.length-(startInd+labelLimit)}}" type="regular" state="default" filling="filled">
-        </sa-chip>
-      </div>
-      <div (click)="shiftLabel('cleared')" *ngIf="startInd == items.length-labelLimit" class="ng-value overflow-label">
-        <sa-chip text="..." type="regular" state="default" filling="filled">
-        </sa-chip>
-      </div>
-    </ng-template>
-  </ng-select>
-
-  <div role="button" title="drop-button" tabindex="0" class="right-icon svg-icon" [style]="svgStyle"
-    (click)="openClose(true)" (blur)="openClose(false)"
-    *ngIf="(params.dropIconPosition == 'right' || params.dropIconPosition == 'both')">
-  </div>
-
-</div>
-<div class="support-label">{{params.supportText}}</div>

package/src/lib/form-select/form-select.component.spec.ts

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

package/src/lib/form-select/form-select.component.ts

@@ -1,54 +0,0 @@
-import { Component } from '@angular/core';
-import { ReactiveFormsModule } from '@angular/forms';
-import { FormlyModule } from '@ngx-formly/core';
-import { FieldType, FieldTypeConfig } from '@ngx-formly/core';
-import { NgSelectModule } from '@ng-select/ng-select';
-import { ChipsComponent } from '../chips/chips.component';
-import { NgIf, NgFor } from '@angular/common';
-
-@Component({
-  selector: 'lib-form-select',
-  standalone: true,
-  imports: [
-    ReactiveFormsModule,
-    FormlyModule,
-    ReactiveFormsModule,
-    NgSelectModule,
-    ChipsComponent,
-    NgIf,
-    NgFor
-  ],
-  templateUrl: './form-select.component.html',
-  styleUrl: './form-select.component.css'
-})
-export class FormSelectComponent extends FieldType<FieldTypeConfig> {
-  selectables: any;
-  params: any;
-
-  svgStyle = {};
-  openState: boolean = false;
-  topLabel: boolean;
-  startInd: number = 0;
-  labelLimit: number = 2;
-
-  ngOnInit() {
-    this.selectables = this.field.props.options;
-    this.params = this.field.props['params'];
-    this.svgStyle = {
-      '-webkit-mask-image': `url(${this.params.dropIcon})})`,
-      'mask-image': `url(${this.params.dropIcon})`,
-    }
-  }
-  openClose(state: boolean) {
-    if (this.field.props.disabled) return;
-    this.openState = state;
-  }
-  shiftLabel(action: string) {
-    if (action == 'clicked') this.startInd++;
-    if (action == 'cleared') this.startInd = 0;
-    if (action == 'removed' && this.startInd > 0) this.startInd--;
-  }
-  checkForZero(selected: any) {
-    this.topLabel = selected.length == 0 ? false : true;
-  }
-}

package/src/lib/grid-cell/grid-cell.component.css

@@ -1,78 +0,0 @@
-.header {
-  --bg: var(--primary-50);
-  --color: var(--text-highemphasis);
-  --border: none;
-  --flex-direction: left;
-}
-
-.header:hover {
-  cursor: pointer;
-}
-
-.row {
-  --color: var(--text-highemphasis);
-  --cursor: default;
-  --border: var(--grey-50);
-  --flex-direction: left;
-}
-
-.numeric {
-  --color: var(--text-highemphasis);
-  --cursor: default;
-  --border: var(--grey-50);
-  --flex-direction: right;
-}
-
-.interactive {
-  --color: var(--primary-500);
-  --cursor: pointer;
-  --border: var(--grey-50);
-  --flex-direction: left;
-}
-
-.grid-cell {
-  display: flex;
-  height: 48px;
-  padding: var(--small-12px);
-  justify-content: var(--flex-direction);
-  align-items: center;
-  gap: var(--small-8px);
-  flex-shrink: 0;
-
-  font-family: var(--font);
-  box-sizing: border-box;
-  border-bottom: 1px solid var(--border);
-
-  width: calc(100% - 20px);
-  background-color: var(--bg);
-}
-
-.grid-text {
-  display: flex;
-  flex-direction: column;
-}
-
-.main-text {
-  color: var(--color);
-  font-size: 14px;
-  font-weight: 400;
-  height: 20px;
-  line-height: 20px;
-}
-
-.main-text:hover {
-  cursor: var(--cursor);
-}
-
-.sub-text {
-  font-size: 11px;
-  font-weight: 400;
-  height: 16px;
-  line-height: 16px;
-  color: var(--text-mediumemphasis);
-}
-
-.icons {
-  width: var(--medium-20px);
-  height: var(--medium-20px);
-}