@sarasanalytics-com/design-system 0.0.3 → 0.0.4

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

@@ -1,156 +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 {
-  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: min-content;
-  min-width: 100px;
-  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/projects/component-library/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/projects/component-library/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/projects/component-library/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/projects/component-library/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);
-}

package/projects/component-library/src/lib/grid-cell/grid-cell.component.html

@@ -1,31 +0,0 @@
-<div class="grid-cell {{params.cellType}}">
-
-  <img class="icons" src={{params.iconPath}} [style.display]="(params.viewLeadingIcon) ? 'block' : 'none'" alt="">
-
-  <sa-avatar [id]="params.avatarConfig?.id" [altText]="params.avatarConfig?.altText"
-    [imagePath]="params.avatarConfig?.imagePath" [size]="params.avatarConfig?.size"
-    [style.display]="(params.viewAvatar) ? 'block' : 'none'" (onClickEvent)="avatarClicked($event)">
-  </sa-avatar>
-
-  <div class="grid-text" [style.display]="(params.viewText) ? 'block' : 'none'">
-    <div [style.display]="(params.text) ? 'block' : 'none'" (click)="linkClicked()" class="main-text">{{params.text}}
-    </div>
-
-    <div [style.display]="(params.subText) ? 'block' : 'none'" class="sub-text">{{params.subText}}</div>
-  </div>
-
-  <img class="icons" src={{params.iconPath}} [style.display]="(params.viewTrailingIcon) ? 'block' : 'none'" alt="">
-
-
-  <sa-chip *ngFor="let config of params.chipConfig, let i = index" [id]="config.id" [filling]="config.filling"
-    id="chip_{{rowNum}}_{{config.id}}" [iconPath]="config.iconPath" [iconPosition]="config.iconPosition"
-    [largeStateIcon]="config.largeStateIcon" [state]="config.state" [type]="config.type" [text]="config.text"
-    [style.display]="(params.viewChip) ? 'block' : 'none'" (onClickEvent)="chipClicked($event)"></sa-chip>
-
-  <sa-button [iconPosition]="params.buttonConfig?.iconPosition" [ImagePath]="params.buttonConfig?.imagePath"
-    [id]="params.buttonConfig?.id" [size]="params.buttonConfig?.size" [state]="params.buttonConfig?.state"
-    [type]="params.buttonConfig?.type" [text]="params.buttonConfig?.text" [href]="params.buttonConfig?.href"
-    [hrefTarget]="params.buttonConfig?.hrefTarget" [style.display]="(params.viewButton) ? 'block' : 'none'"
-    (onClickEvent)="buttonClicked($event)"></sa-button>
-
-</div>

package/projects/component-library/src/lib/grid-cell/grid-cell.component.spec.ts

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

package/projects/component-library/src/lib/grid-cell/grid-cell.component.ts

@@ -1,89 +0,0 @@
-import { Component, EventEmitter, input } from '@angular/core';
-import { Output } from '@angular/core';
-import { AvatarComponent } from '../avatar/avatar.component';
-import { ChipsComponent } from '../chips/chips.component';
-import { ButtonComponent } from '../button/button.component';
-import { NgFor } from '@angular/common';
-import { ICellRendererAngularComp, IHeaderAngularComp } from 'ag-grid-angular';
-import { GridInterface } from '../../interfaces/grid-interface';
-
-@Component({
-  selector: 'lib-grid-cell',
-  standalone: true,
-  imports: [
-    AvatarComponent,
-    ChipsComponent,
-    ButtonComponent,
-    NgFor
-  ],
-  templateUrl: './grid-cell.component.html',
-  styleUrl: './grid-cell.component.css'
-})
-export class GridCellComponent implements ICellRendererAngularComp, IHeaderAngularComp {
-  params: GridInterface;
-  rowNum: number;
-
-  @Output() onClickButtonEvent = new EventEmitter();
-  @Output() onClickChipEvent = new EventEmitter();
-  @Output() onClickLinkEvent = new EventEmitter();
-  @Output() onClickAvatarEvent = new EventEmitter();
-
-  buttonClicked(evt: Event) {
-    this.params.buttonClicked && this.params.buttonClicked({            // calls the function passed via params in gridInterface.
-      ...evt,
-      rowId: this.rowNum
-    });
-    this.onClickButtonEvent.emit({ ...evt, rowId: this.rowNum });      // this event isn't caught by anything. 
-  }
-
-  // above function behavior is same for all functions in this class
-
-  chipClicked(evt: Event) {
-    this.params.chipClicked && this.params.chipClicked({
-      ...evt,
-      rowId: this.rowNum
-    });
-    this.onClickChipEvent.emit({ ...evt, rowId: this.rowNum });
-  }
-
-  linkClicked() {
-    if (this.params.cellType != "interactive") return;
-
-    this.params.linkClicked && this.params.linkClicked({         //calling function passed in params with rowId object in arguments
-      rowId: this.rowNum
-    });
-
-    if (this.params.interactiveLink != "") {
-      if (this.params.interactiveLinkTarget == "blank") {
-        window.open(this.params.interactiveLink)!;
-      }
-      else if (this.params.interactiveLinkTarget == "self") {
-        location.href = this.params.interactiveLink!;
-      }
-    }
-    this.onClickLinkEvent.emit({ rowId: this.rowNum });
-  }
-
-  avatarClicked(evt: Event) {
-    this.params.avatarClicked && this.params.avatarClicked({
-      ...evt,
-      rowId: this.rowNum
-    });
-    this.onClickChipEvent.emit({ ...evt, rowId: this.rowNum });
-  }
-
-  agInit(inParams: any): void {          // must exist when class implements ICellRendererAngularComp / IHeaderAngularComp
-
-    this.rowNum = inParams.rowIndex;
-    this.params = inParams.value;       // inParams.value exists when gridCell is rendered as cell, `cellRenderer: GridCellComponent`
-    if (inParams.value == undefined) {    // inParams.value is undefined when gridCell is rendered as header, `headerComponent: GridCellComponent`, 
-      this.params = inParams
-    }
-    // console.log(this.params);
-  }
-
-  refresh(params: any) {     // must exist when class implements ICellRendererAngularComp / IHeaderAngularComp
-    return false;           // not sure what this return value does.
-  }
-
-}

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

@@ -1,62 +0,0 @@
-.header {
-  width: 100%;
-  height: 96px;
-  font-family: var(--font);
-  padding: var(--medium-20px, 20px) var(--medium-32px, 32px);
-  display: flex;
-
-  justify-content: space-between;
-  align-items: center;
-
-  box-sizing: border-box;
-  border-radius: var(--small-8px, 8px);
-  border: 1px solid var(--grey-50, #E9EAEB);
-  background: var(--Structural-White, #FFF);
-}
-
-.header-content {
-  display: flex;
-  flex-direction: column;
-  gap: var(--small-8px, 8px);
-}
-
-.heading {
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  gap: var(--small-8px, 8px);
-}
-
-.header-name {
-  font-size: 22px;
-  font-style: normal;
-  font-weight: 500;
-  line-height: 28px;
-}
-
-.header-info {
-  display: flex;
-  gap: var(--small-12px, 12px);
-}
-
-.info-item {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: var(--small-4px, 4px);
-  font-size: 12px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 16px;
-  color: var(--text-mediumemphasis);
-}
-
-.info-item img {
-  width: 20px;
-  height: 20px;
-}
-
-.actions {
-  display: flex;
-  gap: var(--small-12px, 12px);
-}

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

@@ -1,23 +0,0 @@
-<div class="header">
-  <div class="header-content">
-    <div class="heading">
-      <div class="header-name">{{headerName}}</div>
-      <div *ngFor="let chip of chipConfig">
-        <sa-chip type="regular" [state]="chip[1]" filling="filled" [text]="chip[0]"></sa-chip>
-      </div>
-    </div>
-    <div class="header-info">
-      <div class="info-item" *ngFor="let item of info">
-        <img [src]="item[1]" alt="">
-        {{item[0]}}
-      </div>
-    </div>
-  </div>
-  <div class="actions">
-    <sa-button *ngIf="buttonHelper" (onClickEvent)="clicked(0)" [text]="buttonHelper" type="transparent" size="medium"
-      state="default">
-    </sa-button>
-    <sa-button *ngIf="buttonMain" (onClickEvent)="clicked(1)" [text]="buttonMain" type="primary" size="medium"
-      state="default"></sa-button>
-  </div>
-</div>

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

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

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

@@ -1,28 +0,0 @@
-import { Component, EventEmitter, Output, input } from '@angular/core';
-import { ChipsComponent } from '../chips/chips.component';
-import { Input } from '@angular/core';
-import { NgFor } from '@angular/common';
-import { ButtonComponent } from '../button/button.component';
-import { NgIf } from '@angular/common';
-
-@Component({
-  selector: 'sa-header',
-  standalone: true,
-  imports: [ChipsComponent, NgFor, ButtonComponent, NgIf],
-  templateUrl: './header.component.html',
-  styleUrl: './header.component.css'
-})
-export class HeaderComponent {
-  @Input() info: string[][];
-  @Input() headerName: string;
-  @Input() chipConfig: string[][];
-  @Input() buttonHelper: string;
-  @Input() buttonMain: string;
-
-  @Output() mainButtonClicked = new EventEmitter();
-  @Output() helperButtonClicked = new EventEmitter();
-
-  clicked(num: number) {
-    num ? this.mainButtonClicked.emit() : this.helperButtonClicked.emit();
-  }
-}