@sarasanalytics-com/design-system 0.0.43 → 0.0.44

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

@@ -1,82 +0,0 @@
-import { Component, Output, SimpleChanges } from '@angular/core';
-import { Input } from '@angular/core';
-import { EventEmitter } from '@angular/core';
-import { NgIf } from '@angular/common';
-import { NgStyle } from '@angular/common';
-import { SpinnerComponent } from '../spinner/spinner.component';
-import { IconName } from '../../interfaces/icon-interface';
-import { HttpClientModule } from '@angular/common/http';
-import { IconComponent } from '../icon/icon.component';
-import { IconService } from '../icon/icon.service';
-
-let nextId = 0;    // used to give unique ids to inputs used in html
-
-@Component({
-  selector: 'sa-button',
-  standalone: true,
-  imports: [NgIf, NgStyle, SpinnerComponent, HttpClientModule, IconComponent],
-  providers: [IconService],
-  templateUrl: './button.component.html',
-  styleUrl: './button.component.css'
-})
-
-export class ButtonComponent {
-  @Input() id: string | number;
-  @Input() type: string;
-  @Input() state: string;
-  @Input() size: string;
-  @Input() text: string | number;
-  @Input() ImagePath: string;
-  @Input() icon: IconName;
-  @Input() iconPosition: string;
-  @Input() href: string;
-  @Input() hrefTarget: string;
-  @Input() width: string;
-  @Input() isSubmit: boolean = false;
-  @Input() buttonIconSize: string;
-
-  @Input() showSpinner: boolean = false;
-
-  @Output() onClickEvent = new EventEmitter();
-  @Output() onMouseInEvent = new EventEmitter();
-  @Output() onMouseOutEvent = new EventEmitter();
-
-  svgStyle = {}
-  eventEmitObject = {}
-  uuid: number = nextId++;
-
-  ngOnChanges(changes: SimpleChanges): void {
-    this.svgStyle = {
-      '-webkit-mask-image': `url(${this.ImagePath})`,
-      'mask-image': `url(${this.ImagePath})`,
-    }
-    this.eventEmitObject = {
-      id: this.id
-    }
-    if (changes && changes['width'] && changes['width'].currentValue) {
-      console.log(this.width)
-    }
-  }
-
-  buttonClicked(evt: Event) {
-    if (this.state == "disabled") return;
-    this.onClickEvent.emit({
-      ...this.eventEmitObject,
-      evt
-    });
-    if (this.href != "") {
-      if (this.hrefTarget == "blank") window.open(this.href);
-      else if (this.hrefTarget == "self") location.href = this.href;
-    }
-  }
-
-  mouseIn() {
-    if (this.state == "disabled") return;
-    this.onMouseInEvent.emit();
-  }
-
-  mouseOut() {
-    if (this.state == "disabled") return;
-    this.onMouseOutEvent.emit();
-  }
-}

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

@@ -1,67 +0,0 @@
-.header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border-bottom: 1px solid var(--grey-50);
-  margin-top: -4px;
-  margin-bottom: var(--small-8px, 8px);
-}
-
-.header-label {
-  font-family: Roboto;
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 20px;
-  letter-spacing: 0.25px;
-}
-
-.range-preset {
-  width: 180px;
-  position: absolute;
-
-  padding: var(--small-12px, 12px) 0 0 var(--medium-24px, 24px);
-  box-sizing: border-box;
-
-
-  margin-top: -9px;
-  margin-left: -180px;
-
-  height: 356px;
-  background-color: white;
-  border-top: 1px solid var(--grey-50);
-  border-left: 1px solid var(--grey-50);
-  border-bottom: 1px solid var(--grey-50);
-  border-bottom-left-radius: var(--small-8px, 8px);
-  border-top-left-radius: var(--small-8px, 8px);
-
-  gap: var(--small-8px, 8px);
-
-  display: flex;
-  flex-direction: column;
-}
-
-.preset {
-  padding: var(--small-8px, 8px);
-  display: flex;
-  gap: var(--small-4px, 4px);
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 20px;
-  letter-spacing: 0.25px;
-  color: var(--text-mediumemphasis);
-  margin-bottom: -5px;
-}
-
-.preset-radio {
-  cursor: pointer;
-}
-
-.preset-label {
-  cursor: pointer;
-}
-
-.preset-selected {
-  color: var(--primary-500);
-}

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

@@ -1,20 +0,0 @@
-<div class="range-preset">
-  <div class="preset" *ngFor="let preset of presets, let i = index">
-    <label class="preset-label {{preset == selectedPreset ? 'preset-selected' : ''}}"
-      for="preset-radio-{{i}}">{{preset}}</label>
-    <input class="preset-radio" (change)="presetChanged($event)" [checked]="preset == selectedPreset"
-      id="preset-radio-{{i}}" type="radio" name="preset-radios-{{uuid}}" value="{{preset}}">
-  </div>
-</div>
-
-<div class="header">
-  <button mat-icon-button (click)="previousClicked('month')">
-    <mat-icon>keyboard_arrow_left</mat-icon>
-  </button>
-
-  <button mat-button class="header-label" (click)="changeView()">{{ periodLabel }}</button>
-
-  <button mat-icon-button (click)="nextClicked('month')">
-    <mat-icon>keyboard_arrow_right</mat-icon>
-  </button>
-</div>

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

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

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

@@ -1,191 +0,0 @@
-import {
-  ChangeDetectorRef,
-  Component,
-  Inject,
-  OnDestroy,
-} from '@angular/core';
-import {
-  DateAdapter,
-  MatDateFormats,
-  MAT_DATE_FORMATS,
-} from '@angular/material/core';
-import { MatCalendar } from '@angular/material/datepicker';
-import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
-import { MatIconModule } from '@angular/material/icon';
-import { MatButton } from '@angular/material/button';
-import { NgFor } from '@angular/common';
-import { MatDateRangePicker } from '@angular/material/datepicker';
-
-
-let nextId = 0;          // used to give unique ids to inputs used in html
-
-@Component({
-  templateUrl: './calendar-header.component.html',
-  styleUrls: ['./calendar-header.component.css'],
-  standalone: true,
-  imports: [
-    NgFor,
-    MatIconModule,
-    MatButton
-  ],
-  // changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class CalendarHeaderComponent<D> implements OnDestroy {
-  uuid: number = nextId++;
-
-  private readonly destroy$ = new Subject<void>();
-
-  constructor(
-    private calendar: MatCalendar<D>, // calendar instance of picker
-    private dateAdapter: DateAdapter<D>, // native or moment date adapter
-    private picker: MatDateRangePicker<D>,
-    @Inject(MAT_DATE_FORMATS) private dateFormats: MatDateFormats, // for formatting
-    cdr: ChangeDetectorRef
-  ) {
-    // make sure your header stays in sync with the calendar:
-    calendar.stateChanges
-      .pipe(takeUntil(this.destroy$)) // unsubscribe when destroyed
-      .subscribe(() => cdr.markForCheck());
-
-  }
-
-  selectedPreset = "Custom"
-  presets = [
-    "This Quarter",
-    "Last Quarter",
-    "Last 6 Months",
-    "This Year",
-    "Last Year",
-    "Custom"
-  ]
-  // active date label rendered between the arrow buttons
-
-  ngOnInit() {
-    const currentRange: any = this.calendar.selected;
-
-    currentRange?.start.setHours(0, 0, 0, 0);
-    currentRange?.end.setHours(0, 0, 0, 0);
-
-    // To pre-select a preset when the calendar opens.
-    // Match the already selected date range with the date-ranges of all presets.
-    // If already selected date range matches with a preset, pre-select it.
-
-    for (let i = 0; i < this.presets.length; i++) {
-      const tempRange = this.findDate(this.presets[i]);
-      if (tempRange.newStart.getTime() == currentRange.start.getTime() && tempRange.newEnd.getTime() == currentRange.end.getTime()) {
-        this.selectedPreset = this.presets[i];
-        break;
-      }
-    }
-  }
-
-  get periodLabel(): string {
-    // use date adapter to format the label, e.g. "SEP 2020"
-    return this.dateAdapter
-      .format(this.calendar.activeDate, this.dateFormats.display.monthYearLabel)
-      .toLocaleUpperCase();
-  }
-
-  previousClicked(mode: 'month' | 'year'): void {
-    this.changeDate(mode, -1);
-  }
-
-  nextClicked(mode: 'month' | 'year'): void {
-    this.changeDate(mode, 1);
-  }
-
-  changeView() {
-    this.calendar.currentView =
-      this.calendar.currentView == "month"
-        ? "year"
-        : this.calendar.currentView == "year"
-          ? "multi-year"
-          : "month";
-  }
-
-  today = new Date();
-
-  presetChanged(evt: any) {
-    const newRange: any = this.findDate(evt.target.value);
-    this.calendar.activeDate = newRange.newStart;
-    this.picker.select(newRange.newStart);
-    this.picker.select(newRange.newEnd);
-  }
-
-  findDate(selected: string) {
-    const date = this.today.getDate();
-    const month = this.today.getMonth();
-    const year = this.today.getFullYear();
-    let newRange: any;
-    this.selectedPreset = selected;
-    switch (selected) {
-      case "This Quarter": {
-        const thisQuarterMonth = Math.floor(month / 3) * 3;
-        const start = this.dateAdapter.createDate(year, thisQuarterMonth, 1);
-        const end = this.dateAdapter.createDate(year, thisQuarterMonth + 3, 1);
-        newRange = {
-          newStart: start,
-          newEnd: end,
-        }
-        break;
-      }
-      case "Last Quarter": {
-        const lastQuarterMonth = (Math.floor(month / 3) * 3) - 3;
-        const start = this.dateAdapter.createDate(year, lastQuarterMonth, 1);
-        const end = this.dateAdapter.createDate(year, lastQuarterMonth + 3, 1);
-        newRange = {
-          newStart: start,
-          newEnd: end,
-        }
-        break;
-      }
-      case "Last 6 Months": {
-        const end = this.dateAdapter.createDate(year, month, date);
-        const start = this.dateAdapter.addCalendarMonths(end, -6);
-        newRange = {
-          newStart: start,
-          newEnd: end,
-        }
-        break;
-      }
-      case "This Year": {
-        const start = this.dateAdapter.createDate(year, 0, 1);
-        const end = this.dateAdapter.createDate(year, 11, 31);
-        newRange = {
-          newStart: start,
-          newEnd: end,
-        }
-        break;
-      }
-      case "Last Year": {
-        const start = this.dateAdapter.createDate(year - 1, 0, 1);
-        const end = this.dateAdapter.createDate(year - 1, 11, 31);
-        newRange = {
-          newStart: start,
-          newEnd: end,
-        }
-        break;
-      }
-      default: {
-        newRange = {
-          newStart: new Date(),
-          newEnd: new Date(),
-        }
-      }
-    }
-    return newRange;
-  }
-
-  private changeDate(mode: 'month' | 'year', amount: -1 | 1): void {
-    // increment or decrement month or year
-    this.calendar.activeDate =
-      mode === 'month'
-        ? this.dateAdapter.addCalendarMonths(this.calendar.activeDate, amount)
-        : this.dateAdapter.addCalendarYears(this.calendar.activeDate, amount);
-  }
-
-  ngOnDestroy(): void {
-    this.destroy$.next(); // will trigger unsubscription in takeUntil
-  }
-}

package/projects/component-library/src/lib/card/card-body/card-body.component.html

@@ -1 +0,0 @@
-<div class="sa-card-body"><ng-content></ng-content></div>

package/projects/component-library/src/lib/card/card-body/card-body.component.spec.ts

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

package/projects/component-library/src/lib/card/card-body/card-body.component.ts

@@ -1,12 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'sa-card-custom-body',
-  standalone: true,
-  imports: [],
-  templateUrl: './card-body.component.html',
-  styleUrl: './card-body.component.css'
-})
-export class CardBodyComponent {
-
-}

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

@@ -1,70 +0,0 @@
-.sa-card-title-header {
-    display: flex;
-    flex-direction: column-reverse;
-    gap: var(--medium-20px);
-}
-
-.sa-card-custom-header-container {
-    display: flex;
-    gap: 0.625rem;
-    align-items: center;
-}
-
-.sa-card-titleIcon {
-    display: flex;
-    align-items: center;
-    margin-left: auto;
-}
-
-.sa-card-title-subtitle-container {
-    display: flex;
-    flex-direction: column;
-    gap: 0.188rem;
-}
-
-
-.sa-card-subtitle {
-    color: var(--text-mediumemphasis);
-    /* Roboto/Body/Medium */
-    font-family: var(--font);
-    font-size: var(--small-14px);
-    font-style: normal;
-    font-weight: 400;
-    line-height: var(--medium-20px);
-    letter-spacing: 0.25px;
-}
-
-.sa-card-custom-title {
-    color: var(--text-highemphasis);
-
-    /* Roboto/Title/Medium */
-    font-family: var(--font);
-    font-size: var(--small-16px);
-    font-style: normal;
-    font-weight: 600;
-    line-height: var(--medium-24px);
-    letter-spacing: 0.15px;
-}
-
-.sa-card-accordion-title-container {
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    gap: var(--small-8px);
-}
-
-.sa-card-title-icon-container {
-    display: flex;
-    align-items: center;
-    gap: var(--small-4px);
-}
-
-.sa-card-accordion-wrapper .sa-card-custom-title {
-    color: var(--text-highemphasis, #1C1B20);
-    font-family: var(--font);
-    font-size: var(--small-14px);
-    font-style: normal;
-    font-weight: 500;
-    line-height: var(--medium-20px);
-    letter-spacing: 0.1px;
-}

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

@@ -1 +0,0 @@
-<div class="sa-card-title-header"><ng-content></ng-content></div>

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

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

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

@@ -1,13 +0,0 @@
-import { Component, ViewEncapsulation } from '@angular/core';
-
-@Component({
-  selector: 'sa-card-title-header',
-  standalone: true,
-  imports: [],
-  templateUrl: './card-custom-header.component.html',
-  styleUrl: './card-custom-header.component.css',
-  encapsulation: ViewEncapsulation.None,
-})
-export class CardCustomHeaderComponent {
-
-}

package/projects/component-library/src/lib/card/card-footer-actions/card-footer-actions.component.css

@@ -1,4 +0,0 @@
-.sa-card-footer-actions {
-    display: flex;
-    justify-content: end;
-}

package/projects/component-library/src/lib/card/card-footer-actions/card-footer-actions.component.html

@@ -1,3 +0,0 @@
-<div class="sa-card-footer-actions">
-    <ng-content></ng-content>
-</div>

package/projects/component-library/src/lib/card/card-footer-actions/card-footer-actions.component.spec.ts

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

package/projects/component-library/src/lib/card/card-footer-actions/card-footer-actions.component.ts

@@ -1,12 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'sa-card-footer-actions',
-  standalone: true,
-  imports: [],
-  templateUrl: './card-footer-actions.component.html',
-  styleUrl: './card-footer-actions.component.css'
-})
-export class CardFooterActionsComponent {
-
-}

package/projects/component-library/src/lib/card/card-icon/card-icon.component.html

@@ -1 +0,0 @@
-<ng-content></ng-content>

package/projects/component-library/src/lib/card/card-icon/card-icon.component.spec.ts

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

package/projects/component-library/src/lib/card/card-icon/card-icon.component.ts

@@ -1,12 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'sa-card-icon',
-  standalone: true,
-  imports: [],
-  templateUrl: './card-icon.component.html',
-  styleUrl: './card-icon.component.css'
-})
-export class CardIconComponent {
-
-}

package/projects/component-library/src/lib/card/card-title-actions/card-title-actions.component.css

@@ -1,3 +0,0 @@
-.sa-card-title-actions {
-    margin-bottom: 8px;
-}

package/projects/component-library/src/lib/card/card-title-actions/card-title-actions.component.html

@@ -1 +0,0 @@
-<div class="sa-card-title-actions"><ng-content></ng-content></div>

package/projects/component-library/src/lib/card/card-title-actions/card-title-actions.component.spec.ts

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

package/projects/component-library/src/lib/card/card-title-actions/card-title-actions.component.ts

@@ -1,12 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'sa-card-title-actions',
-  standalone: true,
-  imports: [],
-  templateUrl: './card-title-actions.component.html',
-  styleUrl: './card-title-actions.component.css'
-})
-export class CardTitleActionsComponent {
-
-}