@sarasanalytics-com/design-system 0.0.8 → 0.0.9

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

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

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

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

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

@@ -0,0 +1,78 @@
+.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/src/lib/grid-cell/grid-cell.component.html

@@ -0,0 +1,31 @@
+<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/src/lib/grid-cell/grid-cell.component.spec.ts

@@ -0,0 +1,23 @@
+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/src/lib/grid-cell/grid-cell.component.ts

@@ -0,0 +1,89 @@
+import { Component, EventEmitter } 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/src/lib/header/header.component.css

@@ -0,0 +1,62 @@
+.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/src/lib/header/header.component.html

@@ -0,0 +1,23 @@
+<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/src/lib/header/header.component.spec.ts

@@ -0,0 +1,23 @@
+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/src/lib/header/header.component.ts

@@ -0,0 +1,28 @@
+import { Component, EventEmitter, Output } 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();
+  }
+}

package/src/lib/icon/icon.component.css

@@ -0,0 +1,21 @@
+.sa-icon {
+    display: inline-flex;
+    /* Align with text */
+    align-items: center;
+    /* Center vertically */
+    justify-content: center;
+    /* Center horizontally */
+    color: inherit;
+    /* Inherit color from parent */
+    font-size: inherit;
+    /* Inherit font size */
+}
+
+.sa-icon>svg {
+    width: 1em;
+    /* Responsive to font size */
+    height: 1em;
+    /* Responsive to font size */
+    vertical-align: middle;
+    /* Align with text */
+}

package/src/lib/icon/icon.component.html

@@ -0,0 +1,5 @@
+<span class="sa-icon" [innerHTML]="svgIcon" [ngStyle]="iconStyles">
+
+</span>
+
+<!-- <img *ngIf="svgIcon" [src]="svgIcon" [ngStyle]="iconStyles" alt="icon"> -->