@sarasanalytics-com/design-system 0.0.9 → 0.0.10

package/src/lib/button/button.component.css

@@ -1,145 +0,0 @@
-.primary {
-  --default-bg: var(--primary-500);
-  --default-color: var(--text-white);
-  --default-border: transparent;
-  --hover-bg: var(--primary-700);
-  --hover-color: var(--text-white);
-  --hover-border: transparent;
-  --disabled-bg: var(--grey-100);
-  --disabled-color: var(--text-white);
-  --disabled-border: transparent;
-  --error-default-bg: var(--semantic-error-500);
-  --error-hover-bg: var(--semantic-error-600);
-  --error-default-color: var(--text-white);
-  --error-hover-color: var(--text-white);
-  --error-default-border: var(--semantic-error-500);
-  --error-hover-border: var(--semantic-error-500);
-  --svg-icon-color: var(--default-color);
-}
-
-.outline {
-  --default-bg: none;
-  --default-color: var(--primary-500);
-  --default-border: var(--primary-500);
-  --hover-bg: var(--primary-50);
-  --hover-color: var(--primary-700);
-  --hover-border: var(--primary-700);
-  --disabled-bg: none;
-  --disabled-color: var(--grey-100);
-  --disabled-border: var(--grey-100);
-  --error-default-bg: none;
-  --error-hover-bg: var(--semantic-error-50);
-  --error-default-color: var(--semantic-error-500);
-  --error-hover-color: var(--semantic-error-600);
-  --error-default-border: var(--semantic-error-500);
-  --error-hover-border: var(--semantic-error-600);
-  --svg-icon-color: var(--default-color);
-}
-
-.transparent {
-  --default-bg: none;
-  --default-color: var(--primary-500);
-  --default-border: transparent;
-  --hover-bg: var(--primary-50);
-  --hover-color: var(--primary-700);
-  --hover-border: transparent;
-  --disabled-bg: none;
-  --disabled-color: var(--grey-100);
-  --disabled-border: transparent;
-  --error-default-bg: none;
-  --error-hover-bg: var(--semantic-error-50);
-  --error-default-color: var(--semantic-error-500);
-  --error-hover-color: var(--semantic-error-600);
-  --error-default-border: transparent;
-  --error-hover-border: transparent;
-  --svg-icon-color: var(--default-color);
-}
-
-.large {
-  --sizing-1: var(--small-8px);
-  --sizing-2: var(--small-16px);
-  --sizing-3: var(--small-8px);
-  --height: var(--medium-36px);
-  --font-size: var(--small-14px);
-}
-
-.medium {
-  --sizing-1: var(--small-6px);
-  --sizing-2: var(--small-12px);
-  --sizing-3: var(--small-8px);
-  --height: var(--medium-32px);
-  --font-size: var(--small-14px);
-}
-
-.small {
-  --sizing-1: var(--small-4px);
-  --sizing-2: var(--small-8px);
-  --sizing-3: var(--small-8px);
-  --height: var(--medium-24px);
-  --font-size: var(--small-12px);
-}
-
-.disabled {
-  background-color: var(--disabled-bg) !important;
-  color: var(--disabled-color) !important;
-  border: 1px solid var(--disabled-border) !important;
-  cursor: default !important;
-  --svg-icon-color: var(--disabled-color) !important;
-}
-
-.error {
-  background-color: var(--error-default-bg) !important;
-  color: var(--error-default-color) !important;
-  border: 1px solid var(--error-default-border) !important;
-  --svg-icon-color: var(--error-default-color) !important;
-}
-
-.error:hover {
-  background-color: var(--error-hover-bg) !important;
-  color: var(--error-hover-color) !important;
-  --svg-icon-color: var(--error-hover-color) !important;
-}
-
-.sa-button {
-  display: flex;
-  width: max-content;
-  padding: var(--sizing-1) var(--sizing-2);
-  justify-content: center;
-  align-items: center;
-  gap: var(--sizing-3);
-  box-sizing: border-box;
-  height: var(--height);
-
-  border-radius: 4px;
-  font-family: var(--font);
-  font-size: var(--font-size);
-  cursor: pointer;
-
-  background-color: var(--default-bg);
-  border: 1px solid var(--default-border);
-  color: var(--default-color);
-
-  -webkit-user-select: none;
-  -khtml-user-select: none;
-  -moz-user-select: none;
-  -o-user-select: none;
-  user-select: none;
-}
-
-.sa-button:hover {
-  background-color: var(--hover-bg);
-  border: 1px solid var(--hover-border);
-  color: var(--hover-color);
-  --svg-icon-color: var(--hover-color);
-}
-
-.svg-icon {
-  mask-size: contain;
-  width: 16px;
-  height: 16px;
-  background-color: var(--svg-icon-color);
-}
-
-.btn-hide {
-  display: none;
-}

package/src/lib/button/button.component.html

@@ -1,11 +0,0 @@
-<button (click)="buttonClicked($event)" id="sa-button-{{uuid}}" class="btn-hide"
-  [type]="isSubmit ? 'submit' : 'button'"></button>
-<!-- (click)="buttonClicked()" on button instead of label breaks whole thing -->
-<label for="sa-button-{{uuid}}" role="button" tabindex="0" (mouseenter)="mouseIn()" (mouseleave)="mouseOut()"
-  (keydown.enter)="buttonClicked($event)" for="sa-button" class="sa-button {{state}} {{type}} {{size}}">
-  <div class="svg-icon" [style]="svgStyle"
-    [style.display]="(iconPosition == 'left' || iconPosition == 'both') ? 'block' : 'none'"></div>
-  {{text}}
-  <div class="svg-icon" [style]="svgStyle"
-    [style.display]="(iconPosition == 'right' || iconPosition == 'both') ? 'block' : 'none'"></div>
-</label>

package/src/lib/button/button.component.spec.ts

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

package/src/lib/button/button.component.ts

@@ -1,68 +0,0 @@
-import { Component, Output } from '@angular/core';
-import { Input } from '@angular/core';
-import { EventEmitter } from '@angular/core';
-import { NgIf } from '@angular/common';
-import { NgStyle } from '@angular/common';
-
-let nextId = 0;    // used to give unique ids to inputs used in html
-
-@Component({
-  selector: 'sa-button',
-  standalone: true,
-  imports: [NgIf, NgStyle],
-  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() iconPosition: string;
-  @Input() href: string;
-  @Input() hrefTarget: string;
-  @Input() isSubmit: boolean = false;
-
-  @Output() onClickEvent = new EventEmitter();
-  @Output() onMouseInEvent = new EventEmitter();
-  @Output() onMouseOutEvent = new EventEmitter();
-
-  svgStyle = {}
-  eventEmitObject = {}
-  uuid: number = nextId++;
-
-  ngOnChanges(): void {
-    this.svgStyle = {
-      '-webkit-mask-image': `url(${this.ImagePath})`,
-      'mask-image': `url(${this.ImagePath})`,
-    }
-    this.eventEmitObject = {
-      id: this.id
-    }
-  }
-
-  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/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/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/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/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/src/lib/card/card-body/card-body.component.html

@@ -1 +0,0 @@
-<p>card-body works!</p>

package/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/src/lib/card/card-body/card-body.component.ts

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

package/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/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/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/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/src/lib/card/card-icon/card-icon.component.html

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

package/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/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 {
-
-}