@sarasanalytics-com/design-system 0.0.42 → 0.0.43

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

@@ -0,0 +1,96 @@
+.stepper {
+  display: flex;
+  width: max-content;
+  justify-content: center;
+  align-items: center;
+  font-family: var(--font);
+}
+
+.active {
+  --main-bg: var(--primary-500);
+  --main-line: var(--primary-500);
+}
+
+.disabled {
+  --main-bg: var(--grey-100);
+  --main-line: var(--grey-50);
+}
+
+.done {
+  --bg-line: var(--main-line);
+  --bg: var(--main-bg);
+  --border: none;
+}
+
+.default {
+  --bg-line: var(--grey-50);
+  --bg: var(--grey-100);
+  --border: 4px solid white;
+}
+
+.latest {
+  --bg: white;
+  --border: 4px solid var(--main-bg);
+}
+
+.steps {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+}
+
+.line {
+  width: 140px;
+  height: 2px;
+  background-color: var(--bg-line);
+  transition: 0.25s;
+}
+
+.label-wrapper {
+  width: 16px;
+  height: 16px;
+  height: fit-content;
+  border-radius: 16px;
+  background-color: var(--bg);
+  display: flex;
+  justify-content: center;
+}
+
+.step-label-icon {
+  display: flex;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  border-radius: 16px;
+
+  mask-size: contain;
+  mask-position: center;
+
+  background-position: center;
+  background-color: white;
+  border: var(--border);
+  box-sizing: border-box;
+
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 20px;
+  letter-spacing: 0.25px;
+  cursor: pointer;
+}
+
+.undone {
+  background-color: var(--grey-100);
+}
+
+.step-label-text {
+  color: var(--text-mediumemphasis, #697079);
+  position: absolute;
+  top: 20px;
+  cursor: pointer;
+}
+
+.step-hide {
+  display: none;
+}

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

@@ -0,0 +1,14 @@
+<div class="stepper {{isDisabled ? 'disabled' : 'active'}}">
+  <div class="steps" *ngFor="let label of stepLabels; let i = index">
+    <input id="stepper-{{uuid}}-{{i}}" (change)="update(i)" name="stepper-radio-{{uuid}}"
+      [checked]="i == latestStep ? true: false" class="step-hide" type="radio">
+    <div
+      class="label-wrapper {{i < latestStep ? 'done' : ''}} {{i > latestStep ? 'default' : ''}} {{i == latestStep ? 'latest' : ''}}">
+      <label [style]="i < latestStep ? tickIcon : ''" for="stepper-{{uuid}}-{{i}}"
+        class="step-label-icon {{i > latestStep ? 'undone' : ''}}">
+      </label>
+      <label for="stepper-{{uuid}}-{{i}}" class="step-label-text">{{label.name}}</label>
+    </div>
+    <div *ngIf=" i !=stepLabels.length-1" class="line {{i < latestStep ? 'done' : 'default'}}"></div>
+  </div>
+</div>

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

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

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

@@ -0,0 +1,61 @@
+import { Component, EventEmitter, Input } from '@angular/core';
+import { FieldType, FieldTypeConfig } from '@ngx-formly/core';
+import { NgFor, NgIf } from '@angular/common';
+import { Output } from '@angular/core';
+
+let nextId = 0;    // used to give unique ids to inputs used in html
+
+@Component({
+  selector: 'sa-stepper',
+  standalone: true,
+  imports: [NgFor, NgIf],
+  templateUrl: './stepper.component.html',
+  styleUrl: './stepper.component.css'
+})
+export class StepperComponent extends FieldType<FieldTypeConfig> {
+  @Input() latestStep: number = -1;
+  @Input() editable: boolean = true;
+  @Input() stepLabels: any;
+  @Input() doneIcon: string;
+
+  @Output() stepped = new EventEmitter;
+
+  uuid: number = nextId++;
+
+  isDisabled: boolean = false;
+
+  tickIcon = {};
+
+  // {
+  //   '-webkit-mask-image': `url(${this.ImagePath})`,
+  //   'mask-image': `url(${this.ImagePath})`,
+  // }
+
+  ngOnInit() {
+    if (this.field.props) {
+      this.stepLabels = this.field.props.options;
+      this.editable = this.field.props['params'].editable;
+      this.latestStep = this.model[`${this.key}`] ? this.model[`${this.key}`].id : -1;
+      this.doneIcon = this.field.props['params'].doneIcon;
+
+      this.isDisabled = this.field.props.disabled!;
+    }
+    console.log(this.doneIcon);
+    this.tickIcon = {
+      '-webkit-mask-image': `url(${this.doneIcon})`,
+      'mask-image': `url(${this.doneIcon})`
+    };
+  }
+
+  update(chosen: number) {
+    if (!this.editable || this.field.props?.disabled) return;
+    this.latestStep = chosen;
+    if (!this.formControl) {
+      this.stepped.emit(this.latestStep);
+      return;
+    }
+    this.formControl.setValue({
+      id: this.latestStep
+    });
+  }
+}

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

@@ -0,0 +1,100 @@
+.box {
+  --bg: var(--grey-50);
+  --tab-bg: white;
+  --border: none;
+  --tab-border: none;
+  --tab-border-radius: 2px;
+  --icon-color: var(--text-mediumemphasis);
+}
+
+.inline {
+  --bg: white;
+  --tab-bg: white;
+  --border: 1px solid var(--grey-50, #E9EAEB);
+  --tab-border: var(--primary-500, #1B77E4);
+  --tab-border-radius: none;
+  --icon-color: var(--text-mediumemphasis);
+}
+
+.tab-wrapper {
+  width: max-content;
+  padding: var(--small-8px, 8px);
+  background-color: var(--bg);
+  border-radius: var(--Small-4px, 4px);
+}
+
+.tabs {
+  display: flex;
+  height: 42px;
+  gap: var(--small-8px, 8px);
+  font-family: var(--font);
+  border-bottom: var(--border);
+}
+
+.tab-item {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: var(--small-8px, 8px);
+}
+
+.tab-label {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: var(--small-4px, 4px);
+  padding: var(--small-8px, 8px) var(--small-12px, 12px);
+  border-bottom: none;
+  transition: 0.1s;
+
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 20px;
+  letter-spacing: 0.1px;
+  color: var(--text-mediumemphasis);
+  cursor: pointer;
+}
+
+.tab-checks {
+  display: none;
+}
+
+.tab-checks:checked+label {
+  background-color: var(--tab-bg);
+  border-bottom: 2px solid var(--tab-border);
+  border-radius: var(--tab-border-radius);
+  color: var(--primary-500);
+  --icon-color: var(--primary-500)
+}
+
+.tab-checks:checked+label .badge {
+  width: auto;
+  height: auto;
+  padding: var(--Small-4px, 4px) var(--Small-12px, 12px);
+  border-radius: 16px;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 16px;
+  letter-spacing: 0.5px;
+}
+
+.badge {
+  width: var(--small-8px);
+  height: var(--small-8px);
+  border-radius: var(--small-8px);
+  background-color: var(--secondary-500, #FE8235);
+  color: white;
+  margin-left: var(--small-4px);
+  overflow: hidden;
+  transition: 0.25s;
+  font-size: 0;
+}
+
+.svg-icon {
+  height: 16px;
+  width: 16px;
+  mask-size: contain;
+  background-color: var(--icon-color);
+}

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

@@ -0,0 +1,16 @@
+<div class="tab-wrapper {{type}}">
+  <div class="tabs">
+    <div *ngFor="let item of tabs, let i = index" class="tab-item">
+      <input [checked]="(defaultTab == i) ? true : false" [value]="i" (change)="tabChange($event)"
+        id="tab-check-{{i}}-{{uuid}}" class="tab-checks" type="radio" name="tab-checkbox-{{uuid}}">
+      <label for="tab-check-{{i}}-{{uuid}}" class="tab-label">
+        <div *ngIf="item.iconPosition == 'left' || item.iconPosition == 'both'" class="svg-icon" [style]="svgStyle[i]">
+        </div>
+        {{item.tabName}}
+        <div *ngIf="item.iconPosition == 'right' || item.iconPosition == 'both'" class="svg-icon" [style]="svgStyle[i]">
+        </div>
+        <div class="badge" *ngIf="item.badgeContent">{{item.badgeContent}}</div>
+      </label>
+    </div>
+  </div>
+</div>

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

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

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

@@ -0,0 +1,37 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { TabInterface } from '../../interfaces/tab-interface';
+import { NgFor } from '@angular/common';
+import { NgIf } from '@angular/common';
+
+
+let nextId = 0;          // used to give unique ids to inputs used in html
+@Component({
+  selector: 'sa-tabs',
+  standalone: true,
+  imports: [NgFor, NgIf],
+  templateUrl: './tabs.component.html',
+  styleUrl: './tabs.component.css'
+})
+export class TabsComponent {
+  @Input() tabs: TabInterface[];
+  @Input() type: string;
+  @Input() defaultTab: number;
+
+  @Output() tabChanged = new EventEmitter();
+
+
+  uuid: number = nextId++;
+  svgStyle: any = [];
+
+  ngOnChanges(): void {
+    this.svgStyle = this.tabs.map((item) => {
+      return {
+        '-webkit-mask-image': `url(${item.tabIcon})`,
+        'mask-image': `url(${item.tabIcon})`,
+      }
+    })
+  }
+  tabChange(evt: any) {
+    this.tabChanged.emit(evt.target.value)
+  }
+}

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

@@ -0,0 +1,115 @@
+.toast {
+  display: flex;
+  /* width: 100%; */
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: var(--small-12px, 12px);
+  gap: var(--small-16px, 16px);
+  border-radius: var(--small-8px, 8px);
+  border: 1px solid var(--grey-50, #E9EAEB);
+  background: var(--structural-white, #FFF);
+  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.05);
+  font-family: var(--font);
+  box-sizing: border-box;
+}
+
+.cross {
+  cursor: pointer;
+}
+
+.heading {
+  /* width: 359px; */
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 24px;
+  letter-spacing: 0.15px;
+}
+
+.toast-icon {
+  display: flex;
+  justify-content: center;
+  border-radius: 50%;
+  flex: 0.5;
+}
+
+.positive {
+  box-shadow: 0 0 0 var(--small-4px, 4px) var(--semantic-success-50);
+  background-color: var(--semantic-success-50);
+}
+
+.negative {
+  box-shadow: 0 0 0 var(--small-4px, 4px) var(--semantic-error-50);
+  background-color: var(--semantic-error-50);
+}
+
+.tentative {
+  box-shadow: 0 0 0 var(--small-4px, 4px) var(--semantic-yellow-50);
+  background-color: var(--semantic-yellow-50);
+}
+
+.toast-icon img {
+  width: 24px;
+  height: 24px;
+}
+
+.subheading {
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 20px;
+  letter-spacing: 0.5px;
+  /* color: var(--text-mediumemphasis, #697079); */
+}
+
+.heading,
+.subheading {
+  margin: 0;
+}
+
+.content {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  gap: var(--small-12px, 12px);
+}
+
+.head-subhead {
+  justify-content: space-between;
+  display: flex;
+  flex: 5;
+  flex-direction: column;
+  gap: var(--small-4px, 4px);
+}
+
+.controls {
+  width: 100%;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: var(--small-12px, 12px);
+}
+
+.progress-bar {
+  display: flex;
+  width: 100%;
+}
+
+.progress-done {
+  height: 3px;
+  background-color: var(--primary-500);
+  border-radius: 2px;
+}
+
+.progress-left {
+  height: 3px;
+  background-color: #C5C5C5;
+  border-top-right-radius: 2px;
+  border-bottom-right-radius: 2px;
+}
+
+sa-icon {
+  display: flex;
+}

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

@@ -0,0 +1,29 @@
+<div class="toast" [ngStyle]="toastStyles">
+  <div class="content">
+    <div class="toast-icon {{status}}">
+      <sa-icon [icon]="statusIcon" size="24"></sa-icon>
+      <!-- <img [src]="statusIcon" alt=""> -->
+    </div>
+    <div class="head-subhead">
+      <p class="heading">{{heading}}</p>
+      <p class="subheading">{{subHeading}}</p>
+    </div>
+    @if(closable){
+    <!-- <img class="cross" (click)="closeToast()" [src]="crossmark" alt=""> -->
+    <sa-icon class="cross" icon="closeOutlined" size="24" (click)="closeToast()"></sa-icon>
+    }
+  </div>
+  <!-- <div class="controls">
+    <sa-button *ngIf="firstButtonName" (onClickEvent)="clicked(0)" [text]="firstButtonName" type="transparent"
+      size="medium" state="default">
+    </sa-button>
+    <sa-button *ngIf="secondButtonName" (onClickEvent)="clicked(1)" [text]="secondButtonName" type="outline"
+      size="medium" state="default">
+    </sa-button>
+  </div> -->
+
+  <!-- <div *ngIf="finishPercentage >= 0" class="progress-bar">
+    <div class="progress-done" [style.width]="finishPercentage+'%'"></div>
+    <div class="progress-left" [style.width]="100-finishPercentage+'%'"></div>
+  </div> -->
+</div>

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

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

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

@@ -0,0 +1,87 @@
+import { Component, EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
+import { ButtonComponent } from '../button/button.component';
+import { Input, Output } from '@angular/core';
+import { MatIcon } from '@angular/material/icon';
+import { NgIf } from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { IconComponent } from '../icon/icon.component';
+
+@Component({
+  selector: 'sa-toast',
+  standalone: true,
+  imports: [CommonModule, ButtonComponent, IconComponent, ButtonComponent, MatIcon, NgIf],
+  templateUrl: './toast.component.html',
+  styleUrl: './toast.component.css'
+})
+export class ToastComponent implements OnChanges {
+  @Input() finishPercentage: number = -1;
+  @Input() heading: string;
+  @Input() subHeading: string;
+  @Input() statusIcon: string = '';
+  @Input() status: 'success' | 'failure' | 'caution' | 'positive' | 'negative' | 'tentative';
+  @Input() firstButtonName: string;
+  @Input() secondButtonName: string;
+  @Input() closable: boolean;
+  @Input() filled: boolean = true;
+  @Input() width: number | string = '';
+
+  @Output() toastEvent: EventEmitter<IToastEvent> = new EventEmitter();
+  @Output() firstButton = new EventEmitter();
+  @Output() secondButton = new EventEmitter();
+  @Output() closed = new EventEmitter();
+
+
+  toastStyles = { backgroundColor: 'transparent', color: '', width: this.width + '%' };
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes && (changes['status'] || changes['filled'])) {
+      this.statusIcon = toastInfo[this.status]?.icon;
+      this.toastStyles.backgroundColor = toastInfo[this.status]?.bgColor;
+      this.toastStyles.color = toastInfo[this.status]?.color;
+    }
+    if (changes && changes['width']) {
+      this.toastStyles.width = typeof this.width === 'number' ? this.width + '%' : this.width;
+    }
+
+    if (this.finishPercentage > 100) this.finishPercentage = 100;
+
+  }
+
+  clicked(num: number) {
+    if (num == 0) this.firstButton.emit();
+    else if (num == 1) this.secondButton.emit();
+    else if (num == 2) this.closed.emit();
+  }
+
+  closeToast() {
+    this.toastEvent.emit({
+      type: 'TOAST_CLOSED',
+      params: {}
+    })
+  }
+
+}
+
+const toastInfo: any = {
+  'success': {
+    icon: 'checkCircleOutlined',
+    bgColor: '#EBF5E9',
+    color: '#246B16'
+  },
+  'failure': {
+    icon: 'infoCircleOutlined',
+    bgColor: '#F8E9E9',
+    color: '#861C15'
+  },
+  'caution': {
+    icon: 'infoTriangleOutlined',
+    bgColor: '',
+    color: ''
+  }
+}
+
+export interface IToastEvent {
+  type: 'TOAST_CLOSED' | 'ACTION_CLICKED';
+  event?: any;
+  params?: any;
+}