@sarasanalytics-com/design-system 0.0.3 → 0.0.5

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

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

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

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

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

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

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

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

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

@@ -1,108 +0,0 @@
-.toast {
-  display: flex;
-  width: max-content;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  padding: var(--small-16px, 16px);
-  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);
-}
-
-.cross {
-  cursor: pointer;
-}
-
-.heading {
-  width: 359px;
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 600;
-  line-height: 24px;
-  letter-spacing: 0.15px;
-  color: var(--text-highemphasis, #1B1D20);
-}
-
-.toast-icon {
-  display: flex;
-  justify-content: center;
-  border-radius: 50%;
-}
-
-.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: 16px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 24px;
-  letter-spacing: 0.5px;
-  color: var(--text-mediumemphasis, #697079);
-}
-
-.heading,
-.subheading {
-  margin: 0;
-}
-
-.content {
-  display: flex;
-  justify-content: center;
-  align-items: flex-start;
-  gap: var(--small-12px, 12px);
-}
-
-.head-subhead {
-  justify-content: space-between;
-  display: flex;
-  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;
-}

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

@@ -1,25 +0,0 @@
-<div class="toast">
-  <div class="content">
-    <div class="toast-icon {{status}}">
-      <img [src]="statusIcon" alt="">
-    </div>
-    <div class="head-subhead">
-      <p class="heading">{{heading}}</p>
-      <p class="subheading">{{subHeading}}</p>
-    </div>
-    <!-- <img class="cross" (click)="clicked(2)" [src]="crossmark" alt=""> -->
-    <mat-icon class="cross" (click)="clicked(2)">close</mat-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

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

@@ -1,37 +0,0 @@
-import { Component, EventEmitter, OnChanges } from '@angular/core';
-import { ButtonComponent } from '../button/button.component';
-import { Input } from '@angular/core';
-import { Output } from '@angular/core';
-import { MatIcon } from '@angular/material/icon';
-import { NgIf } from '@angular/common';
-
-@Component({
-  selector: 'sa-toast',
-  standalone: true,
-  imports: [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: string;
-  @Input() firstButtonName: string;
-  @Input() secondButtonName: string;
-
-  @Output() firstButton = new EventEmitter();
-  @Output() secondButton = new EventEmitter();
-  @Output() closed = new EventEmitter();
-
-  ngOnChanges() {
-    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();
-  }
-}